/* ---------------------------------------------------------------------------
   سند الوكيل -- design tokens of the visual identity.

   The palette comes from the logo (App\Support\BrandPalette): blue = primary
   (--primary-*), green = success (--success-*), cool Slate neutrals (--gray-*),
   plus semantic warning/danger. Filament writes those scales as CSS variables
   ("r, g, b" triples), so everything below derives from them -- there is no
   hard-coded colour in this file, and nothing in the panel should hard-code
   one either: use these tokens (or Filament's own utility classes).

   Two states, one identity: :root = light mode, .dark = dark mode. The dark
   values are chosen for contrast, not just inverted: blue text/links move up
   the scale (400) so they stay readable on the navy surfaces, tints become
   translucent so they sit on any surface, borders are white at low alpha.
   ------------------------------------------------------------------------- */

:root {
    /* brand */
    --ss-primary: rgb(var(--primary-600));
    --ss-primary-strong: rgb(var(--primary-700));
    --ss-primary-soft: rgb(var(--primary-50));
    --ss-primary-line: rgb(var(--primary-200));
    --ss-on-primary: #ffffff;
    --ss-accent: rgb(var(--success-500));

    /* surfaces and lines */
    --ss-page: #ffffff;
    --ss-surface: #ffffff;
    --ss-surface-alt: rgb(var(--gray-50));
    --ss-border: rgb(var(--gray-200));
    --ss-border-strong: rgb(var(--gray-300));
    --ss-row-hover: rgb(var(--primary-50));

    /* text */
    --ss-text: rgb(var(--gray-950));
    --ss-text-soft: rgb(var(--gray-700));
    --ss-text-muted: rgb(var(--gray-600));

    /* status (text colour / soft background) */
    --ss-success: rgb(var(--success-600));
    --ss-success-soft: rgb(var(--success-50));
    --ss-warning: rgb(var(--warning-600));
    --ss-warning-soft: rgb(var(--warning-50));
    --ss-danger: rgb(var(--danger-600));
    --ss-danger-soft: rgb(var(--danger-50));
    --ss-info: rgb(var(--primary-600));
    --ss-info-soft: rgb(var(--primary-50));

    /* type scale (Tajawal): use these, not ad-hoc px values */
    --ss-fs-xs: 0.75rem;
    --ss-fs-sm: 0.875rem;
    --ss-fs-base: 1rem;
    --ss-fs-lg: 1.125rem;
    --ss-fs-xl: 1.25rem;
    --ss-fs-2xl: 1.5rem;
    --ss-fw-normal: 400;
    --ss-fw-medium: 500;
    --ss-fw-bold: 700;
    --ss-fw-black: 800;

    /* table header */
    --ss-head-bg: rgb(var(--primary-50));
    --ss-head-line: rgb(var(--primary-200));
    --ss-head-underline: rgb(var(--success-500));

    /* shape */
    --ss-radius: 0.5rem;
    --ss-radius-lg: 0.75rem;
    --ss-shadow: 0 1px 2px rgba(var(--gray-950), 0.06), 0 1px 3px rgba(var(--gray-950), 0.08);

    /* table header (fixed-table pages) */
    --ftp-head-bg: var(--ss-head-bg);
    --ftp-line: var(--ss-head-line);
    --ftp-accent: var(--ss-primary);
}

.dark {
    --ss-primary: rgb(var(--primary-400));
    --ss-primary-strong: rgb(var(--primary-300));
    --ss-primary-soft: rgba(var(--primary-400), 0.14);
    --ss-primary-line: rgba(var(--primary-400), 0.32);
    --ss-on-primary: #ffffff;
    --ss-accent: rgb(var(--success-400));

    --ss-page: rgb(var(--gray-950));
    --ss-surface: rgb(var(--gray-900));
    --ss-surface-alt: rgb(var(--gray-800));
    --ss-border: rgba(255, 255, 255, 0.10);
    --ss-border-strong: rgba(255, 255, 255, 0.18);
    --ss-row-hover: rgba(var(--primary-400), 0.09);

    --ss-text: #ffffff;
    --ss-text-soft: rgb(var(--gray-200));
    --ss-text-muted: rgb(var(--gray-400));

    --ss-success: rgb(var(--success-400));
    --ss-success-soft: rgba(var(--success-400), 0.14);
    --ss-warning: rgb(var(--warning-400));
    --ss-warning-soft: rgba(var(--warning-400), 0.14);
    --ss-danger: rgb(var(--danger-400));
    --ss-danger-soft: rgba(var(--danger-400), 0.14);
    --ss-info: rgb(var(--primary-400));
    --ss-info-soft: rgba(var(--primary-400), 0.14);

    --ss-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    --ss-head-bg: rgb(var(--gray-800));
    --ss-head-line: rgba(255, 255, 255, 0.10);
    --ss-head-underline: rgb(var(--success-400));

    --ftp-head-bg: var(--ss-head-bg);
    --ftp-line: var(--ss-head-line);
    --ftp-accent: var(--ss-primary);
}

/* ---- base: the family, and the brand's own focus/selection colours ---- */
html {
    font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(var(--primary-500), 0.22);
}

/* One page background for the whole system (Filament's own light gray only
   for pages that happened not to be table pages looked like a second identity):
   white in light mode, the deep navy of --gray-950 in dark mode. */
.fi-body {
    background-color: var(--ss-page);
}

/* ---- every table of the system shares one language: a tinted header with
        bold titles, a calm row highlight, the same lines. (The finance and
        subscribers pages add their own full-width layout on top --
        components/fixed-table-page -- but the colours are these.) ---- */
.fi-ta-table thead tr {
    background-color: var(--ss-head-bg);
}

.fi-ta-header-cell-label {
    font-weight: var(--ss-fw-bold);
    color: var(--ss-text);
}

.fi-ta-row:hover {
    background-color: var(--ss-row-hover);
}

/* ---- auth pages: the full lockup replaces Filament's small logo + name ---- */
.fi-simple-page .fi-simple-header .fi-logo {
    display: none;
}

.ss-auth-brand {
    display: flex;
    justify-content: center;
    margin-block-end: 0.75rem;
}

/* 8.5rem read as the single biggest contributor to the card feeling "crowded and too tall" --
   flagged directly. Still clearly legible/branded at 6rem, just not dominating the whole top of
   the card on its own. */
.ss-auth-brand img {
    height: 6rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Filament's own default (py-12, 48px top/bottom) on the login/register/reset card -- a bit more
   breathing room than this shorter content now needs. */
.fi-simple-main {
    padding-block: 2.5rem;
}

.ss-auth-brand-dark {
    display: none;
}

.dark .ss-auth-brand-dark {
    display: block;
}

.dark .ss-auth-brand-light {
    display: none;
}

/* A blurred two-tone "aurora" background (blue/green blobs) sat behind the card here briefly --
   flagged directly as reading more like a product landing page than a formal internal tool, so it
   is gone again: the auth pages go back to Filament's own plain page background (.fi-body's
   bg-gray-50 / dark:bg-gray-950), nothing extra layered behind the card. The card's own deeper
   shadow (.fi-simple-main below) stays -- that was never part of the "too playful" complaint,
   just the flat default shadow-sm looking a little flat against the plain page. */

/* ---- the collapsed sidebar rail (desktop): the brand mark is a wide shape, so
        the header gives it the rail's full width instead of Filament's px-6 ---- */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        padding-inline: 0.5rem;
        justify-content: center;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header > div {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header .fi-logo img {
        width: 3.25rem;
        height: auto;
        max-height: 2rem;
    }
}

/* ---- solid buttons: text stays >= 4.5:1 in EVERY state (white on the blue/amber/red
        fills; dark ink on the brand green, whose fresh #8DC25A is too light for white). Filament pairs
        light 600 / hover 500 and dark 500 / hover 400 -- fine for its own
        palettes, but with the brand's light green (500) and the bright ambers/
        reds the hover and dark states fall to ~2-3:1. Only the FILL of solid
        buttons is set here (outlined/ghost buttons keep Filament's rules). ---- */
.fi-btn.text-white.fi-btn-color-primary,
.fi-btn.text-white.fi-btn-color-info {
    background-color: rgb(var(--primary-600));
}

.fi-btn.text-white.fi-btn-color-primary:hover,
.fi-btn.text-white.fi-btn-color-info:hover {
    background-color: rgb(var(--primary-700));
}

.dark .fi-btn.text-white.fi-btn-color-primary,
.dark .fi-btn.text-white.fi-btn-color-info {
    background-color: rgb(var(--primary-500));
}

.dark .fi-btn.text-white.fi-btn-color-primary:hover,
.dark .fi-btn.text-white.fi-btn-color-info:hover {
    background-color: rgb(var(--primary-600));
}

.fi-btn.text-white.fi-btn-color-success {
    background-color: rgb(var(--success-500));
    color: rgb(var(--gray-950));
}

.fi-btn.text-white.fi-btn-color-success:hover {
    background-color: rgb(var(--success-400));
}

.dark .fi-btn.text-white.fi-btn-color-success {
    background-color: rgb(var(--success-400));
}

.dark .fi-btn.text-white.fi-btn-color-success:hover {
    background-color: rgb(var(--success-300));
}

.fi-btn.text-white.fi-btn-color-warning,
.dark .fi-btn.text-white.fi-btn-color-warning {
    background-color: rgb(var(--warning-600));
}

.fi-btn.text-white.fi-btn-color-warning:hover,
.dark .fi-btn.text-white.fi-btn-color-warning:hover {
    background-color: rgb(var(--warning-700));
}

.fi-btn.text-white.fi-btn-color-danger {
    background-color: rgb(var(--danger-600));
}

.fi-btn.text-white.fi-btn-color-danger:hover {
    background-color: rgb(var(--danger-700));
}

.dark .fi-btn.text-white.fi-btn-color-danger {
    background-color: rgb(var(--danger-600));
}

.dark .fi-btn.text-white.fi-btn-color-danger:hover {
    background-color: rgb(var(--danger-700));
}

/* ---- the brand's second colour, the logo's fresh green, is part of the chrome
        of every page: a green line under every table header, a blue-to-green
        line under the topbar, a green edge on the auth card, green count
        pills (AdminPanelProvider), and green solid "confirm" buttons (above). ---- */
.fi-ta-table thead th {
    box-shadow: inset 0 -2px 0 var(--ss-head-underline);
}

/* .fi-topbar-panel, not .fi-topbar nav -- this wraps nav AND the
   Dashboard-only heading row below it (see topbar/index.blade.php's own
   note on this class), so the line anchors to the bottom of that whole
   block instead of staying pinned between the two rows on that one page.
   Identical position on every other page, where the block is just nav. */
.fi-topbar-panel {
    position: relative;
}

.fi-topbar-panel::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(to right, rgb(var(--primary-600)), rgb(var(--success-500)));
    pointer-events: none;
}

html[dir='rtl'] .fi-topbar-panel::after {
    background: linear-gradient(to left, rgb(var(--primary-600)), rgb(var(--success-500)));
}

.dark .fi-topbar-panel::after {
    background: linear-gradient(to right, rgb(var(--primary-500)), rgb(var(--success-400)));
}

html[dir='rtl'].dark .fi-topbar-panel::after,
.dark html[dir='rtl'] .fi-topbar-panel::after {
    background: linear-gradient(to left, rgb(var(--primary-500)), rgb(var(--success-400)));
}

/* Shared size for the topbar's own text-carrying controls (agent name,
   provider filter, wallet balance) -- flagged directly as wanting them all
   the same size and clearly readable, bigger than the text-sm/text-xs mix
   they had before. The wallet balance's own text sits inside
   x-filament::badge, whose compiled text-xs is already fought off by
   AdminPanelProvider's own pre-existing !important .fi-topbar-balance-text
   rule (now bumped to this same 1rem, see that rule's own note) -- this
   class alone would NOT have been enough there on its own. */
.fi-topbar-item-text {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

/* Filament's own shadow-sm read as flat once the card sits on the tinted background above --
   a deeper, softer shadow (Tailwind's shadow-xl shape) plus a whisper of the brand blue in the
   ring makes it read as genuinely lifted instead of just outlined. */
.fi-simple-main {
    border-top: 3px solid rgb(var(--success-500));
    box-shadow: 0 20px 40px -14px rgba(var(--gray-950), 0.16), 0 0 0 1px rgba(var(--primary-500), 0.05);
}

.dark .fi-simple-main {
    border-top-color: rgb(var(--success-400));
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---- create actions: every button that links to a .../create page (« New
        subscriber », « New ticket », ...) is the brand green with dark ink,
        so the blue chrome and the green actions read as the logo's pair ---- */
.fi-btn.text-white.fi-btn-color-primary[href$='/create'] {
    background-color: rgb(var(--success-500));
    color: rgb(var(--gray-950));
}

.fi-btn.text-white.fi-btn-color-primary[href$='/create']:hover {
    background-color: rgb(var(--success-400));
}

.dark .fi-btn.text-white.fi-btn-color-primary[href$='/create'] {
    background-color: rgb(var(--success-400));
}

.dark .fi-btn.text-white.fi-btn-color-primary[href$='/create']:hover {
    background-color: rgb(var(--success-300));
}

/* ---- dashboard stat cards: a step larger titles (regular weight), bolder numbers and notes
        (14 / 30 / 14 px -> 16 / 36 / 15 px) ---- */
.fi-wi-stats-overview-stat-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ss-text);
}

.fi-wi-stats-overview-stat-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-wi-stats-overview-stat-value {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 800;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.9375rem;
    font-weight: 700;
}

.fi-wi-stats-overview-stat-description:not(.fi-color-custom) {
    color: var(--ss-text-soft);
}