/* ============================================================================ Sami — dashboard brand re-skin for Tabler ---------------------------------------------------------------------------- Loaded AFTER Tabler's own CSS so it only overrides tokens; never edit public/vendor/tabler/* directly (keeps Tabler upgradable). Palette carried over from the Phase 1 ad-hoc dashboard views, now the single source of truth. GOLD IS A PLACEHOLDER: #c9a227 is a reasonable warm brand gold matching the mobile app / website tone, but the EXACT brand hex still needs to come from the real design assets. Swap --sami-gold below when it lands — everything keys off that one variable. ============================================================================ */ :root { /* --- Brand palette (edit these) --- */ --sami-gold: #c9a227; /* PLACEHOLDER — needs exact brand hex */ --sami-gold-hover: #dbb43a; --sami-gold-active: #b28f1f; --sami-gold-rgb: 201, 162, 39; --sami-bg: #14161c; /* app background */ --sami-surface: #1c1f27; /* cards, navbar, sidebar */ --sami-surface-2: #232733; /* raised / hover surfaces */ --sami-border: #2a2e39; --sami-text: #e8e6df; --sami-muted: #8b8f9a; --sami-content-bg: #f9fafb; /* light workspace beside dark chrome */ --sami-content-text:#1f2937; --sami-content-muted:#6b7280; --sami-content-border:#e5e7eb; } html, body { background-color: var(--sami-bg); } html { color-scheme: dark; scrollbar-color: var(--sami-border) var(--sami-bg); } *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-track { background: var(--sami-bg); } *::-webkit-scrollbar-thumb { background-color: var(--sami-border); border: 3px solid var(--sami-bg); border-radius: 999px; } /* ---------------------------------------------------------------------------- Make DARK the default. Tabler keys everything off [data-bs-theme]; we set it on in the layout, and tabler-theme.js persists the user's toggle. This block re-paints Tabler's stock dark (bluish gray) with the Sami palette. ---------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --tblr-body-bg: var(--sami-bg); --tblr-body-bg-rgb: 20, 22, 28; --tblr-body-color: var(--sami-text); --tblr-body-color-rgb: 232, 230, 223; --tblr-bg-surface: var(--sami-surface); --tblr-bg-surface-primary: var(--sami-surface); --tblr-bg-surface-secondary: var(--sami-surface-2); --tblr-bg-surface-tertiary: var(--sami-surface-2); --tblr-bg-surface-dark: var(--sami-bg); --tblr-border-color: var(--sami-border); --tblr-border-color-translucent: var(--sami-border); --tblr-secondary: var(--sami-muted); --tblr-muted: var(--sami-muted); color-scheme: dark; } /* ---------------------------------------------------------------------------- Gold primary/accent — applied in BOTH themes so brand stays consistent. ---------------------------------------------------------------------------- */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --tblr-primary: var(--sami-gold); --tblr-primary-rgb: var(--sami-gold-rgb); --tblr-primary-fg: #14161c; /* text on gold buttons */ --tblr-link-color: var(--sami-gold); --tblr-link-hover-color: var(--sami-gold-hover); } /* Buttons / active nav / focus rings that key off --tblr-primary already pick up the gold, but a few components hardcode the RGB fallback — nudge them. */ .btn-primary { --tblr-btn-bg: var(--sami-gold); --tblr-btn-border-color: var(--sami-gold); --tblr-btn-color: #14161c; --tblr-btn-hover-bg: var(--sami-gold-hover); --tblr-btn-hover-border-color: var(--sami-gold-hover); --tblr-btn-active-bg: var(--sami-gold-active); --tblr-btn-active-border-color: var(--sami-gold-active); --tblr-btn-hover-color: #14161c; --tblr-btn-active-color: #14161c; font-weight: 600; } .btn-outline-primary { --tblr-btn-color: var(--sami-gold); --tblr-btn-border-color: var(--sami-gold); --tblr-btn-hover-bg: var(--sami-gold); --tblr-btn-hover-border-color: var(--sami-gold); --tblr-btn-hover-color: #14161c; } a { color: var(--sami-gold); } a:hover { color: var(--sami-gold-hover); } /* Form controls: focus ring in gold rather than Tabler blue. */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--sami-gold); box-shadow: 0 0 0 .25rem rgba(var(--sami-gold-rgb), .25); } .form-check-input:checked { background-color: var(--sami-gold); border-color: var(--sami-gold); } .sami-search-select .dropdown-menu { max-height: 18rem; overflow-y: auto; } .sami-search-select .dropdown-item { white-space: normal; } .sami-search-select .dropdown-item.active, .sami-search-select .dropdown-item:active { color: #14161c; background-color: var(--sami-gold); } /* ---------------------------------------------------------------------------- Chrome: brand the sidebar + navbar surfaces and the wordmark. ---------------------------------------------------------------------------- */ [data-bs-theme="dark"] .navbar, [data-bs-theme="dark"] .navbar-vertical { background-color: var(--sami-surface); border-color: var(--sami-border); } .navbar-vertical { overflow-x: hidden; } @media (min-width: 992px) { body { overflow-x: hidden; } .navbar-vertical { left: auto !important; inset-inline-start: auto !important; } } /* Dashboard direction: dark navigation chrome, light operational workspace. Body/html remain dark so the native scrollbar gutter never flashes white; all actual /agency and /vendor content lives inside this light wrapper. */ .page-wrapper { --tblr-body-bg: var(--sami-content-bg); --tblr-body-color: var(--sami-content-text); --tblr-secondary-color: var(--sami-content-muted); --tblr-muted: var(--sami-content-muted); --tblr-border-color: var(--sami-content-border); --tblr-bg-surface: #ffffff; --tblr-bg-surface-primary: #ffffff; --tblr-bg-surface-secondary: #f3f4f6; --tblr-bg-surface-tertiary: #eef2f7; background-color: var(--sami-content-bg); color: var(--sami-content-text); } .page-header, .page-body, .footer { background-color: var(--sami-content-bg); } .page-wrapper .page-title { color: var(--sami-content-text); } .page-wrapper .page-pretitle, .page-wrapper .text-secondary { color: var(--sami-content-muted) !important; } .navbar-brand-autodark .sami-wordmark { color: var(--sami-gold); font-weight: 700; letter-spacing: .5px; } .sami-wordmark { color: var(--sami-gold); font-weight: 700; letter-spacing: .5px; } /* Active sidebar item: gold accent bar + tint instead of Tabler's blue. */ .navbar-vertical .nav-link.active, .navbar-vertical .nav-item.active > .nav-link { color: var(--sami-gold); box-shadow: inset 3px 0 0 var(--sami-gold); background-color: rgba(var(--sami-gold-rgb), .08); } .navbar-vertical .nav-link:hover { color: var(--sami-gold); } /* Tables inherit surface + border automatically via the vars above; nudge the header to read as part of the brand. */ .table thead th { color: var(--sami-content-muted); text-transform: uppercase; font-size: .6875rem; letter-spacing: .04em; } /* ── Live new-booking toasts (Agency Overview) ───────────────────────────── Stacked, auto-dismissing toasts pushed by the Reverb `BookingCreated` event. Rendered on the dark chrome surface rather than the light workspace, so they read as system chrome and stay legible over any page content. Type is conveyed by icon + text label inside the toast; the left accent bar is decorative reinforcement only, never the sole signal. */ .sami-toast-stack { display: flex; flex-direction: column; align-items: stretch; /* every toast shares the stack's width */ gap: .625rem; /* A fixed width (not max-width) keeps the column edge-aligned: with `auto` each toast sizes to its own content and the stack visibly zig-zags. */ width: min(24rem, calc(100vw - 2rem)); pointer-events: none; /* stack is a passthrough; toasts re-enable */ } .sami-toast-stack > * { pointer-events: auto; width: 100%; } .sami-toast { position: relative; overflow: hidden; background: var(--sami-surface); color: var(--sami-text); border: 1px solid var(--sami-border); border-left: 3px solid var(--sami-toast-accent, var(--sami-gold)); border-radius: .5rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .45); /* Enter: slide in from the right + fade. */ opacity: 0; transform: translateX(1.5rem); transition: opacity .28s ease, transform .28s ease; } .sami-toast.is-visible { opacity: 1; transform: translateX(0); } /* Exit: fade + collapse height so the toasts beneath slide up smoothly. */ .sami-toast.is-leaving { opacity: 0; transform: translateX(1.5rem); margin-bottom: calc(-1 * var(--sami-toast-height, 0px) - .625rem); transition: opacity .22s ease, transform .22s ease, margin-bottom .28s ease .04s; } .sami-toast__body { padding: .75rem .875rem; } .sami-toast__icon { width: 2.25rem; height: 2.25rem; border-radius: .375rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(var(--sami-toast-accent-rgb, var(--sami-gold-rgb)), .16); color: var(--sami-toast-accent, var(--sami-gold)); } .sami-toast__title { color: var(--sami-text); font-weight: 600; line-height: 1.2; } .sami-toast__meta { color: var(--sami-muted); font-size: .8125rem; } .sami-toast__amount { color: var(--sami-text); font-weight: 600; white-space: nowrap; } /* Type chip — icon + label, so the type never depends on colour alone. */ .sami-toast__type { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sami-toast-accent, var(--sami-gold)); } .sami-toast .btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: .5; } .sami-toast .btn-close:hover { opacity: 1; } /* Auto-dismiss indicator: drains left-to-right over the toast's lifetime. aria-hidden in markup — the countdown is decorative, not announced. */ .sami-toast__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--sami-toast-accent, var(--sami-gold)); opacity: .55; transform-origin: left center; transform: scaleX(1); } .sami-toast.is-counting .sami-toast__progress { transform: scaleX(0); transition: transform linear var(--sami-toast-duration, 8s); } /* Respect reduced-motion: keep the state changes, drop the movement. */ @media (prefers-reduced-motion: reduce) { .sami-toast, .sami-toast.is-leaving { transition: opacity .15s ease; transform: none; } .sami-toast.is-visible { transform: none; } .sami-toast.is-counting .sami-toast__progress { transition: none; } }