/*
 * Flexnovate Portal — panel skin.
 *
 * Two jobs in one file (there is no Tailwind build for the panel, so this is
 * the single source of panel styling on top of Filament's stock CSS):
 *
 *   1. UTILITIES — responsive grid classes the custom pages use that Filament's
 *      compiled stylesheet does not ship. Definitions match Tailwind exactly.
 *
 *   2. SKIN — the brand treatment: near-black sidebar with red accents (the
 *      same dark red+black identity as flexnovate.com), a calm light workspace,
 *      consistent radii and quieter chrome. Everything hangs off Filament's
 *      stable `fi-*` class names.
 */

/* ============================== 1. UTILITIES ============================== */

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* xl variants must exist HERE too: this sheet loads after Filament's, so at
   >=1280px our md:grid-cols-2 would otherwise beat Filament's own
   xl:grid-cols-4 purely on cascade order (same specificity, later wins) —
   which squashed the 4-up dashboard stats into a 2x2. */
@media (min-width: 1280px) {
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.min-h-\[60px\] { min-height: 60px; }
.text-\[11px\] { font-size: 11px; line-height: 1rem; }

/* ================================ 2. SKIN ================================ */

/* ------------------------- DESIGN TOKENS (source of truth) ----------------
   Semantic tokens, light values on :root, dark overrides on html.dark.
   RULE: new blades/pages use ONLY these vars — never raw hex.
   (Values are exactly the shipped navy palette: this block changed no pixels.) */
:root {
    /* brand + data */
    --fx-red: #E8232A;            /* legacy alias of --fx-brand */
    --fx-red-deep: #b00c12;
    --fx-brand: #E8232A;
    --fx-brand-deep: #b00c12;
    --fx-data: #2f7bff;           /* metrics, links-on-data, charts */
    --fx-data-soft: #6ea8ff;

    /* chrome + surfaces */
    --fx-ink: #10162b;            /* sidebar ground, matches the website */
    --fx-ink-2: #151c33;
    --fx-paper: #f7f7f9;          /* legacy alias of --fx-bg (light) */
    --fx-bg: #f7f7f9;
    --fx-surface: #ffffff;
    --fx-surface-2: #fbfbfd;
    --fx-border: rgba(10, 10, 16, 0.07);

    /* text */
    --fx-text: #101014;
    --fx-muted: #6f6f78;

    /* status */
    --fx-success: #16a34a;
    --fx-warning: #d97706;
    --fx-danger: #d31017;
    --fx-info: #3b82f6;

    /* shape + focus */
    --fx-radius-sm: 0.5rem;
    --fx-radius: 0.85rem;
    --fx-radius-lg: 1.1rem;
    --fx-focus: 0 0 0 3px rgba(232, 35, 42, 0.25);
}

html.dark {
    --fx-data: #6ea8ff;
    --fx-bg: #151b2e;
    --fx-surface: #1c2440;
    --fx-surface-2: #1f2848;
    --fx-border: rgba(124, 146, 210, 0.16);
    --fx-text: #f4f4f6;
    --fx-muted: #9aa3bd;
    --fx-success: #4ade80;
    --fx-warning: #fbbf24;
    --fx-danger: #ff6b70;
    --fx-info: #6ea8ff;
    --fx-focus: 0 0 0 3px rgba(110, 168, 255, 0.45);
}

/* ---- Workspace ground. Light: calm off-white. Dark: brand near-black.
   Scoped per theme — forcing the light ground on html.dark was what made the
   page headings render white-on-white. ---- */
html:not(.dark) .fi-main-ctn,
html:not(.dark) .fi-body {
    background-color: var(--fx-paper);
}

html.dark .fi-main-ctn,
html.dark .fi-body {
    background-color: var(--fx-bg);
}

/* ---------------------------- Sidebar: brand ---------------------------- */
.fi-sidebar {
    background-color: var(--fx-ink) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.fi-sidebar-header {
    background-color: var(--fx-ink) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none !important;
    ring: none;
}

/* Brand name: white wordmark, red full stop of personality */
.fi-sidebar-header .fi-logo {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.fi-sidebar-nav {
    padding-top: 0.75rem;
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
}

.fi-sidebar-group-collapse-button {
    color: rgba(255, 255, 255, 0.35);
}

.fi-sidebar-item-button {
    border-radius: 0.55rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
    font-size: 0.855rem;
}

.fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.38) !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label { color: #ffffff; }
.fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: rgba(255, 255, 255, 0.7) !important; }

/* Active item: red presence without shouting */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(232, 35, 42, 0.18), rgba(232, 35, 42, 0.07)) !important;
    box-shadow: inset 2.5px 0 0 var(--fx-red);
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #ffffff !important;
    font-weight: 600;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--fx-red) !important;
}

/* Badges inside the dark sidebar (e.g. Roles count) */
.fi-sidebar-item-badge-ctn .fi-badge {
    background-color: rgba(232, 35, 42, 0.16);
    color: #ff8f93;
    ring-color: transparent;
}

/* Collapse chevron + scrollbar that fit the dark ground */
.fi-sidebar-nav::-webkit-scrollbar { width: 8px; }
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 99px;
}
.fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------- Topbar --------------------------------- */
.fi-topbar nav {
    backdrop-filter: blur(10px);
    box-shadow: none !important;
}

html:not(.dark) .fi-topbar nav {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(10, 10, 16, 0.07);
}

html.dark .fi-topbar nav {
    background-color: rgba(21, 27, 46, 0.88) !important;
    border-bottom: 1px solid rgba(124, 146, 210, 0.14);
}

/* The mobile hamburger sits on white — leave color alone. */

/* ------------------------------ Sections -------------------------------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-tabs,
.fi-wi-widget > .fi-section {
    border-radius: var(--fx-radius) !important;
    box-shadow: 0 1px 2px rgba(10, 10, 16, 0.04), 0 8px 24px -18px rgba(10, 10, 16, 0.18) !important;
}

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat {
    --tw-ring-color: rgba(10, 10, 16, 0.06) !important;
}

html.dark .fi-section,
html.dark .fi-ta-ctn,
html.dark .fi-wi-stats-overview-stat {
    --tw-ring-color: var(--fx-border) !important;
    background-color: var(--fx-surface) !important;
}

/* ------------------------------ Stat cards ------------------------------ */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(10, 10, 16, 0.05), 0 16px 32px -18px rgba(10, 10, 16, 0.25) !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.76rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

html:not(.dark) .fi-wi-stats-overview-stat-label { color: #7c7c86 !important; }
html.dark .fi-wi-stats-overview-stat-label { color: #9a9aa4 !important; }

.fi-wi-stats-overview-stat-value {
    /* Big, but not so big that "PKR 160,000" wraps mid-number in a 4-up row. */
    font-size: 1.55rem !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

html:not(.dark) .fi-wi-stats-overview-stat-value { color: var(--fx-text) !important; }
html.dark .fi-wi-stats-overview-stat-value { color: var(--fx-data) !important; }

.fi-wi-stats-overview-stat-description {
    font-weight: 500;
}

/* ------------------------------- Buttons -------------------------------- */
.fi-btn-color-primary {
    background-image: linear-gradient(135deg, var(--fx-red), var(--fx-red-deep)) !important;
    box-shadow: 0 6px 16px -8px rgba(232, 35, 42, 0.55);
    border: none;
}

.fi-btn-color-primary:hover {
    box-shadow: 0 8px 20px -8px rgba(232, 35, 42, 0.7);
    filter: brightness(1.05);
}

.fi-btn {
    border-radius: 0.6rem !important;
}

/* ------------------------------- Tables --------------------------------- */
.fi-ta-header-cell-label {
    font-size: 0.68rem !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: #8b8b95 !important;
}

.fi-ta-row {
    transition: background-color 0.12s ease;
}

html:not(.dark) .fi-ta-row:hover { background-color: rgba(232, 35, 42, 0.025) !important; }
html.dark .fi-ta-row:hover { background-color: rgba(110, 168, 255, 0.06) !important; } /* --fx-data @ 6% */

.fi-badge {
    border-radius: 99px !important;
    font-weight: 600;
}

/* ------------------------------- Inputs --------------------------------- */
.fi-input-wrp,
.fi-select-input {
    border-radius: 0.6rem !important;
}

.fi-input-wrp:focus-within {
    --tw-ring-color: rgba(232, 35, 42, 0.35) !important;
}

/* ------------------------------ Dropdowns ------------------------------- */
.fi-dropdown-panel {
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 6px rgba(10, 10, 16, 0.04), 0 24px 48px -24px rgba(10, 10, 16, 0.3) !important;
}

/* ---------------------------- Page headings ----------------------------- */
.fi-header-heading {
    font-weight: 700 !important;
    letter-spacing: -0.015em;
}

/* ------------------------------ Login page ------------------------------ */
html:not(.dark) .fi-simple-layout {
    background:
        radial-gradient(60rem 30rem at 115% 115%, rgba(232, 35, 42, 0.07), transparent 60%),
        radial-gradient(50rem 26rem at -15% -15%, rgba(232, 35, 42, 0.05), transparent 55%),
        var(--fx-paper);
}

html.dark .fi-simple-layout {
    background:
        radial-gradient(60rem 30rem at 115% 115%, rgba(232, 35, 42, 0.12), transparent 60%),
        radial-gradient(50rem 26rem at -15% -15%, rgba(232, 35, 42, 0.08), transparent 55%),
        #131a2f;
}

.fi-simple-main {
    border-radius: 1.1rem !important;
    box-shadow: 0 1px 2px rgba(10, 10, 16, 0.04), 0 24px 60px -30px rgba(10, 10, 16, 0.35) !important;
}

/* ---------------------- Widget headings (tables etc) --------------------- */
.fi-wi-widget .fi-section-header-heading {
    font-size: 0.95rem !important;
    font-weight: 700;
}

/* ---------------- Dark equivalents for the custom pages ------------------ */
/* The custom blades use light utility classes whose `dark:` variants are not
   in Filament's compiled CSS at all — in dark mode that produced white boxes
   with white text (the 2FA recovery codes were invisible). These give every
   such class a sensible dark rendering. */
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Generic white surfaces become dark cards — except things that must stay
   white to work, like a QR code a phone camera has to scan. */
html.dark .bg-white:not(.fx-keep-light) {
    background-color: var(--fx-surface-2);
}

html.dark .fx-keep-light {
    background-color: #ffffff !important;
}

html.dark .ring-gray-200 { --tw-ring-color: rgba(255, 255, 255, 0.1); }
html.dark .ring-gray-100 { --tw-ring-color: rgba(255, 255, 255, 0.07); }
html.dark .border-gray-300 { border-color: rgba(255, 255, 255, 0.16); }

/* Muted text tuned for a dark ground (the light value sinks into it). */
html.dark .text-gray-500 { color: #9ca3af; }
html.dark .text-gray-400 { color: #8b8b95; }
html.dark .text-gray-300 { color: #6f6f78; }

/* Inputs the custom pages build by hand (e.g. the 2FA code box). */
html.dark input.fi-input,
html.dark select.fi-select-input {
    background-color: rgba(255, 255, 255, 0.05);
    color: #f4f4f6;
}

/* --------------- Density pass (dashboard, per design system) ------------- */
/* Dense-8: dashboards earn tighter chrome than marketing pages. */
.fi-wi-stats-overview-stats-ctn { gap: 0.8rem !important; }

.fi-wi-stats-overview-stat {
    padding: 1rem 1.15rem !important;
    gap: 0.25rem !important;
}

.fi-page > section > .fi-wi > .fi-wi-widget { margin-bottom: 0; }

/* Widget grid breathing room tuned down a notch. */
.fi-page .gap-6 { gap: 1rem; }


/* ------------------------- Navy dark surfaces ---------------------------- */
html.dark .fi-dropdown-panel,
html.dark .fi-modal-window {
    background-color: var(--fx-surface) !important;
    --tw-ring-color: var(--fx-border) !important;
}

html.dark .fi-input-wrp {
    background-color: rgba(124, 146, 210, 0.08) !important;
    --tw-ring-color: rgba(124, 146, 210, 0.2) !important;
}

/* Data links read blue on navy, like the old panel. */
html.dark .fi-ta-cell a:not(.fi-btn):hover { color: var(--fx-data); }


/* ==================== 3. SYSTEM ADDITIONS (UI modernization) ============== */

/* ---- Accessibility: one visible focus ring for EVERY interactive element,
   custom blades included (they only had hover states — keyboard users were
   navigating blind). Never remove; style via --fx-focus. ---- */
.fx-cmd-btn:focus-visible,
.fx-clock-btn:focus-visible,
.fx-out-opt:focus-visible,
.st-btn:focus-visible,
.st-add:focus-visible,
.st-move-stamp:focus-visible,
.lt-btn:focus-visible,
.lt-move-stamp:focus-visible,
.kb-add:focus-visible,
.kb-title a:focus-visible,
.ad-tab:focus-visible,
.ad-card:focus-visible,
.tb-task-link:focus-visible,
.tb-more:focus-visible,
.fi-btn:focus-visible,
.fi-sidebar-item-button:focus-visible {
    outline: none !important;
    box-shadow: var(--fx-focus) !important;
    border-radius: var(--fx-radius-sm);
}

/* ---- Tables: data-dense CRM ergonomics. Sticky header keeps column context
   on long lists; tighter cells fit ~25% more rows per screen. ---- */
.fi-ta-content {
    overflow: auto;
    max-height: calc(100vh - 16rem);
}

.fi-ta-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

html:not(.dark) .fi-ta-table thead { background-color: var(--fx-surface); }
html.dark .fi-ta-table thead { background-color: var(--fx-surface); }

.fi-ta-cell {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
}

/* ---- Motion: subtle everywhere, none for people who asked for none. ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}