@import url('https://fonts.bunny.net/css?family=poppins:500,600,700');

/* --------------------------------------------------------------------------
 | RK-FINFA admin panel theme
 |
 | The panel runs light-only (see AdminPanelProvider::darkMode(false)):
 | white surfaces, near-black body copy, dark blue headings.
 * ------------------------------------------------------------------------ */

/* Brand scales lifted from the public site (resources/css/app.css) so the
   panel and the website are demonstrably the same brand, not an approximation. */
:root {
    --brand-50: #eef5fc;
    --brand-100: #d6e6f7;
    --brand-200: #adcdee;
    --brand-300: #7cade1;
    --brand-400: #4a89cf;
    --brand-500: #1f66b5;
    --brand-600: #004e98;
    --brand-700: #013f7c;
    --brand-800: #063363;
    --brand-900: #082b52;
    --brand-950: #041a35;

    --gold-50: #fbf8ef;
    --gold-100: #f5eed6;
    --gold-200: #ecdcab;
    --gold-300: #e0c477;
    --gold-400: #d5ad4f;
    --gold-500: #cba640;
    --gold-600: #ac7f2f;
    --gold-700: #8a5f29;

    --leaf-500: #2f855a;
    --leaf-600: #276749;

    --font-sans: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Poppins', 'Figtree', ui-sans-serif, system-ui, sans-serif;

    /* Existing aliases, now expressed in terms of the ramps above. */
    --rk-blue: var(--brand-700);
    --rk-blue-dark: var(--brand-900);
    --rk-ink: #0f172a;
    --rk-line: #e2e8f0;
}

/* Surfaces -------------------------------------------------------------- */

/* Prefixed with `html` so these beat Filament's own bg-* utilities, which are
   served after this stylesheet and would otherwise win the specificity tie. */
html body.fi-body,
html .fi-main-ctn,
html .fi-main,
html .fi-simple-layout,
html .fi-simple-main,
html .fi-sidebar,
html .fi-topbar,
html .fi-topbar > nav {
    background-color: #ffffff;
}

/* With every surface white, the chrome needs its own hairlines */
html .fi-sidebar {
    border-right: 1px solid var(--rk-line);
}

html .fi-topbar > nav {
    border-bottom: 1px solid var(--rk-line);
}

/* Text ------------------------------------------------------------------ */

html body.fi-body {
    color: var(--rk-ink);
}

/* Page, section, widget and table headings in the brand's dark blue */
html .fi-header-heading,
html .fi-simple-header-heading,
html .fi-section-header-heading,
html .fi-ta-header-heading,
html .fi-fo-section-header-heading,
html .fi-modal-heading,
html .fi-wi-stats-overview-stat-value {
    color: var(--rk-blue-dark);
}

/* Sidebar navigation: dark labels, brand blue for the active item */
html .fi-sidebar-item-label {
    color: #1e293b;
}

html .fi-sidebar-group-label {
    color: #475569;
}

html .fi-sidebar-item-active .fi-sidebar-item-label {
    color: var(--rk-blue);
}

/* Brand logo (resources/views/filament/brand-logo.blade.php) ------------- */

.rk-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
}

.rk-brand-mark {
    height: 100%;
    width: auto;
}

.rk-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
}

.rk-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #004e98;
}

.rk-brand-sub {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #64748b;
}

/* The full lockup is only used on login / password-reset style pages */
.rk-brand-full {
    display: none;
}

.fi-simple-layout .fi-logo {
    height: auto !important;
    width: 100%;
    justify-content: center;
}

.fi-simple-layout .rk-brand-mark,
.fi-simple-layout .rk-brand-text {
    display: none;
}

.fi-simple-layout .rk-brand-full {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
 | File explorer page (App\Filament\Pages\DocumentRepository)
 |
 | Laid out like an Explorer window: navigation tree, address bar, command
 | bar, a content pane of icons, and a status bar.
 * ------------------------------------------------------------------------ */

.rk-explorer {
    display: grid;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .rk-explorer {
        grid-template-columns: 16.5rem minmax(0, 1fr);
    }
}

/* Navigation tree -------------------------------------------------------- */

.rk-tree {
    border: 1px solid #e4eaf2;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.6rem;
    max-height: 40rem;
    overflow-y: auto;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.rk-tree-title {
    padding: 0.15rem 0.5rem 0.6rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #94a3b8;
}

.rk-tree-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.33rem 0.5rem 0.33rem 0.3rem;
    border-radius: 0.4rem;
    font-size: 0.825rem;
    line-height: 1.35;
    text-align: left;
    color: #334155;
    transition: background-color 120ms ease, color 120ms ease;
}

.rk-tree-node:hover {
    background: #f4f8fd;
}

.rk-tree-node--active {
    background: #e9f1fc;
    color: var(--rk-blue);
    font-weight: 600;
}

.rk-tree-node--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.28rem;
    bottom: 0.28rem;
    width: 3px;
    border-radius: 999px;
    background: #004e98;
}

.rk-tree-caret {
    width: 0.85rem;
    display: inline-flex;
    justify-content: center;
    flex-shrink: 0;
    color: #94a3b8;
    transition: transform 140ms ease;
}

.rk-tree-caret--open {
    transform: rotate(90deg);
}

.rk-caret-icon {
    width: 0.8rem;
    height: 0.8rem;
}

.rk-tree-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rk-tree-count {
    margin-left: auto;
    padding-left: 0.35rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: #a9b6c6;
}

.rk-tree-children {
    margin-left: 0.9rem;
    padding-left: 0.3rem;
    border-left: 1px solid #e9eef6;
}

.rk-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.rk-icon--folder { color: #f2ae2c; }
.rk-icon--current { color: #dd9209; }
.rk-icon--root { color: #7c93ad; }

/* Window ----------------------------------------------------------------- */

.rk-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #e4eaf2;
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

/* Address bar */
.rk-addressbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.rk-up {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    background: #fff;
    color: #475569;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.rk-up:hover:not(:disabled) {
    background: #eff6ff;
    border-color: #bfd6f0;
    color: var(--rk-blue);
}

.rk-up:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.rk-crumb-path {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}

.rk-crumb {
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.82rem;
    color: #5b6b80;
    transition: background-color 120ms ease, color 120ms ease;
}

.rk-crumb:hover {
    background: #eef4fc;
    color: var(--rk-blue);
}

.rk-crumb--current {
    font-weight: 700;
    color: var(--rk-blue-dark);
}

.rk-crumb-sep {
    width: 0.85rem;
    height: 0.85rem;
    color: #c3ccd8;
    flex-shrink: 0;
}

/* Search box */
.rk-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    width: 14rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.rk-search:focus-within {
    border-color: #93b4d8;
    box-shadow: 0 0 0 3px rgb(0 78 152 / 0.08);
}

.rk-search-icon {
    width: 0.9rem;
    height: 0.9rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.rk-search-input {
    width: 100%;
    border: 0;
    padding: 0;
    font-size: 0.8rem;
    color: #1e293b;
    background: transparent;
}

.rk-search-input:focus {
    outline: none;
    box-shadow: none;
}

.rk-search-input::-webkit-search-cancel-button {
    display: none;
}

.rk-search-clear {
    display: inline-flex;
    color: #94a3b8;
}

.rk-search-clear:hover {
    color: #475569;
}

/* Command bar */
.rk-commandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eef2f7;
}

.rk-folder-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rk-blue-dark);
}

.rk-folder-title-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: #f2ae2c;
}

.rk-commandbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.rk-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.rk-sort-label {
    margin-right: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #a3b1c2;
}

.rk-sort-btn {
    padding: 0.22rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    transition: background-color 120ms ease, color 120ms ease;
}

.rk-sort-btn:hover {
    background: #f1f5f9;
    color: var(--rk-blue);
}

.rk-sort-btn--active {
    background: #e9f1fc;
    color: var(--rk-blue);
}

.rk-view-toggle {
    display: inline-flex;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    overflow: hidden;
    background: #f6f8fb;
}

.rk-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    transition: background-color 120ms ease, color 120ms ease;
}

.rk-view-btn:hover {
    color: var(--rk-blue);
}

.rk-view-btn--active {
    background: #fff;
    color: var(--rk-blue-dark);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.1);
}

.rk-view-icon {
    width: 0.88rem;
    height: 0.88rem;
}

/* Content ---------------------------------------------------------------- */

.rk-pane-body {
    padding: 0.85rem 0.75rem 1rem;
}

.rk-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0.6rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #a3b1c2;
}

.rk-section-title:not(:first-child) {
    margin-top: 1.15rem;
    padding-top: 0.9rem;
    border-top: 1px solid #f1f5f9;
}

.rk-section-count {
    padding: 0.02rem 0.38rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.64rem;
    letter-spacing: 0;
}

/* One grid geometry for folders and files, so their rows line up */
.rk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.25rem;
    align-items: stretch;
}

.rk-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.8rem 0.45rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.rk-item:hover {
    background: #f2f7fd;
    border-color: #d8e6f6;
}

.rk-item:focus-visible {
    outline: none;
    background: #e9f1fc;
    border-color: #93b4d8;
}

.rk-item-icon-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 2.9rem;
    flex-shrink: 0;
}

.rk-folder-icon {
    width: 2.9rem;
    height: 2.9rem;
    color: #f2ae2c;
    filter: drop-shadow(0 1px 1px rgb(150 100 5 / 0.25));
}

.rk-item--empty .rk-folder-icon {
    color: #f7e6c1;
    filter: none;
}

.rk-file-icon {
    width: 2.6rem;
    height: 2.6rem;
    color: var(--rk-file-color, #7c8da4);
    filter: drop-shadow(0 1px 1px rgb(15 23 42 / 0.15));
}

/* Extension ribbon over the page glyph */
.rk-file-ext {
    position: absolute;
    bottom: 0.28rem;
    left: 50%;
    transform: translateX(-50%);
    min-width: 2rem;
    padding: 0.01rem 0.2rem;
    border-radius: 0.18rem;
    background: var(--rk-file-color, #7c8da4);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.5;
    text-align: center;
}

.rk-file--pdf { --rk-file-color: #d93025; }
.rk-file--word { --rk-file-color: #2b5797; }
.rk-file--excel { --rk-file-color: #217346; }
.rk-file--ppt { --rk-file-color: #d24726; }
.rk-file--image { --rk-file-color: #0ea5e9; }
.rk-file--archive { --rk-file-color: #d97706; }
.rk-file--generic { --rk-file-color: #7c8da4; }

/* Confidential / restricted marker */
.rk-file-lock {
    position: absolute;
    top: -0.1rem;
    right: 0.15rem;
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #fff;
    color: #b45309;
    box-shadow: 0 0 0 1px #f3d9a8;
}

.rk-lock-icon {
    width: 0.6rem;
    height: 0.6rem;
}

/* Two lines are always reserved so every tile's meta line aligns */
.rk-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    width: 100%;
    height: 2.08rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1c2b41;
}

.rk-item-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.22rem;
    min-height: 1.1rem;
}

.rk-item-meta--file {
    font-size: 0.66rem;
    font-weight: 500;
    color: #94a3b8;
}

.rk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.05rem 0.36rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.45;
}

.rk-chip--muted {
    background: transparent;
    color: #b6c2d1;
    font-weight: 500;
}

.rk-chip-icon {
    width: 0.66rem;
    height: 0.66rem;
}

.rk-note {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Empty state */
.rk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.rk-empty-icon {
    width: 2.25rem;
    height: 2.25rem;
    color: #cbd5e1;
}

.rk-empty-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.rk-empty-text {
    font-size: 0.78rem;
    color: #94a3b8;
}

/* Status bar */
.rk-statusbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid #eef2f7;
    background: #fbfcfe;
    font-size: 0.72rem;
    color: #8494a8;
}

.rk-statusbar-filter {
    color: var(--rk-blue);
}

/* The details table sits inside the window, so it drops its own shell */
.rk-pane-body .fi-ta,
.rk-pane-body .fi-ta-ctn {
    border: 0;
    box-shadow: none;
    background: transparent;
    --tw-ring-shadow: 0 0 #0000;
}

/* --------------------------------------------------------------------------
 | Panel background
 |
 | The panel was flat white on every surface, which left cards, tables and
 | widgets with nothing to sit against. The content area now carries a soft
 | tinted ground with a very light brand wash in the top corners, and the
 | surfaces above it stay white so they read as raised.
 |
 | Deliberately restrained: this sits behind dense tables and charts all day,
 | so contrast against body copy is unchanged and nothing animates.
 * ------------------------------------------------------------------------ */

:root {
    --rk-ground: #f4f7fb;
    --rk-ground-2: #eef3f9;
    --rk-wash-blue: rgba(1, 63, 124, 0.055);
    --rk-wash-gold: rgba(203, 166, 64, 0.05);
    --rk-card-line: #e8edf4;
    --rk-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
}

/* The ground itself: a quiet vertical gradient with two corner washes. The
   fixed attachment keeps the washes anchored while long pages scroll. */
html body.fi-body {
    background-color: var(--rk-ground);
    background-image:
        radial-gradient(58rem 30rem at 85% -8%, var(--rk-wash-blue), transparent 62%),
        radial-gradient(42rem 24rem at 2% -4%, var(--rk-wash-gold), transparent 58%),
        linear-gradient(180deg, #f7fafd 0%, var(--rk-ground) 34%, var(--rk-ground-2) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* The main column is transparent so the ground shows through it. */
html .fi-main-ctn,
html .fi-main,
html .fi-page {
    background-color: transparent;
    background-image: none;
}

/* Sidebar and topbar stay white, now separated from the ground by their rule
   rather than by a colour change. */
html .fi-sidebar,
html .fi-topbar,
html .fi-topbar > nav {
    background-color: #ffffff;
}

html .fi-topbar > nav {
    border-bottom: 1px solid var(--rk-card-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

html .fi-sidebar {
    border-right: 1px solid var(--rk-card-line);
}

/* Surfaces lift off the ground: white, hairline border, whisper of shadow. */
html .fi-section,
html .fi-wi-stats-overview-stat,
html .fi-ta-ctn,
html .fi-fo-component-ctn > .fi-section,
html .fi-wi-chart,
html .fi-modal-window {
    background-color: #ffffff;
    border: 1px solid var(--rk-card-line);
    box-shadow: var(--rk-card-shadow);
}

/* Stat tiles: a faint top highlight so a row of them reads as cards. */
html .fi-wi-stats-overview-stat {
    background-image: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}

/* The login and password-reset screens get the same ground. */
html .fi-simple-layout {
    background-color: var(--rk-ground);
    background-image:
        radial-gradient(46rem 26rem at 78% -10%, var(--rk-wash-blue), transparent 60%),
        radial-gradient(38rem 22rem at 4% -6%, var(--rk-wash-gold), transparent 56%),
        linear-gradient(180deg, #f7fafd 0%, var(--rk-ground-2) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

html .fi-simple-main {
    background-color: #ffffff;
    border: 1px solid var(--rk-card-line);
    box-shadow: 0 6px 24px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
}

/* Custom pages in this panel draw their own white panels; keep them consistent
   with the Filament surfaces above. */
html .cal-frame,
html .gantt-scroll,
html .cal-panel,
html .gantt-undated {
    box-shadow: var(--rk-card-shadow);
    border-color: var(--rk-card-line);
}

/* Anyone who prefers less motion or contrast gets the plain ground. */
@media (prefers-contrast: more) {
    html body.fi-body,
    html .fi-simple-layout {
        background-image: none;
        background-color: #ffffff;
    }
}

@media print {
    html body.fi-body {
        background: #ffffff;
        background-image: none;
    }
}

/* --------------------------------------------------------------------------
 | Sidebar
 |
 | Kept light rather than reversed to navy: the brand mark is a transparent PNG
 | whose wordmark is black and dark blue, so it would all but disappear against
 | a dark rail. Depth comes instead from a soft gradient, a lifted edge and
 | properly styled item states.
 * ------------------------------------------------------------------------ */

:root {
    --rk-rail-top: #ffffff;
    --rk-rail-bottom: #eef3f9;
    --rk-rail-line: #e3e9f1;
    --rk-item-hover: rgba(1, 63, 124, 0.055);
    --rk-item-active: rgba(1, 63, 124, 0.095);
}

html .fi-sidebar {
    background-color: var(--rk-rail-top);
    /* A brand wash behind the logo, fading into a cool grey at the foot. */
    background-image:
        radial-gradient(20rem 12rem at 0% 0%, rgba(1, 63, 124, 0.05), transparent 70%),
        linear-gradient(180deg, var(--rk-rail-top) 0%, #f8fafd 46%, var(--rk-rail-bottom) 100%);
    background-repeat: no-repeat;
    border-right: 1px solid var(--rk-rail-line);
    /* Lifts the rail above the tinted ground without a hard seam. */
    box-shadow: 1px 0 2px rgba(15, 23, 42, .03), 6px 0 18px -12px rgba(15, 23, 42, .10);
}

html .fi-sidebar-nav,
html .fi-sidebar-header,
html .fi-sidebar-group,
html .fi-sidebar-nav-groups {
    background-color: transparent;
}

/* Brand block sits on white and is ruled off from the navigation. */
html .fi-sidebar-header {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    border-bottom: 1px solid var(--rk-rail-line);
    box-shadow: none;
}

/* Group headings: quieter, and spaced so groups read as groups. */
html .fi-sidebar-group-label {
    color: #8496ac;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

html .fi-sidebar-group:not(:first-child) {
    margin-top: 0.35rem;
}

/* Items become pills, with room for the active accent bar. */
html .fi-sidebar-item-button {
    position: relative;
    border-radius: 0.5rem;
    transition: background-color 130ms ease, color 130ms ease;
}

html .fi-sidebar-item-button:hover {
    background-color: var(--rk-item-hover);
}

html .fi-sidebar-item-label {
    color: #263b53;
    font-weight: 500;
}

html .fi-sidebar-item-icon {
    color: #90a2b8;
    transition: color 130ms ease;
}

html .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--rk-blue);
}

/* Active item: tinted pill, brand-blue label and icon, accent bar on the edge. */
html .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--rk-item-active);
}

html .fi-sidebar-item-active .fi-sidebar-item-label {
    color: var(--rk-blue);
    font-weight: 650;
}

html .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--rk-blue);
}

html .fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #004e98 0%, #cba640 140%);
}

/* Group collapse chevron, kept as quiet as the label it sits beside. */
html .fi-sidebar-group-collapse-button {
    color: #a3b2c4;
    transition: color 130ms ease;
}

html .fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button {
    color: var(--rk-blue);
}

/* Navigation badges (the calendar's "waiting on you" count). */
html .fi-sidebar-item .fi-badge {
    box-shadow: none;
}

/* A slim scrollbar so a long menu does not gain a heavy grey gutter. */
html .fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: #cfd9e6 transparent;
}

html .fi-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

html .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #cfd9e6;
    border-radius: 999px;
}

html .fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

/* Collapsed rail: centre the icons and drop the accent bar, which would
   otherwise sit outside the narrow pill. */
html .fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item-active .fi-sidebar-item-button::before {
    display: none;
}

@media (prefers-contrast: more) {
    html .fi-sidebar {
        background-image: none;
        background-color: #ffffff;
    }
}

/* --------------------------------------------------------------------------
 | Typography and accents, borrowed from the public site
 |
 | Figtree is set as the panel font in AdminPanelProvider (same Bunny CDN the
 | site uses). Poppins is imported at the top of this file and applied to
 | headings only, mirroring resources/css/app.css where h1-h4 use the display
 | face and body copy uses the sans.
 * ------------------------------------------------------------------------ */

html .fi-header-heading,
html .fi-simple-header-heading,
html .fi-section-header-heading,
html .fi-ta-header-heading,
html .fi-fo-section-header-heading,
html .fi-modal-heading,
html .fi-wi-stats-overview-stat-value,
html .fi-sidebar-header .rk-brand,
html .cal-bar__month h2,
html .cal-panel h3,
html .gantt-undated h3 {
    font-family: var(--font-display);
    letter-spacing: -0.011em;
}

/* Headings take the site's darkest brand shade, as h1-h4 do on the website. */
html .fi-header-heading,
html .fi-simple-header-heading,
html .fi-section-header-heading,
html .fi-ta-header-heading,
html .fi-fo-section-header-heading,
html .fi-modal-heading,
html .fi-wi-stats-overview-stat-value {
    color: var(--brand-900);
}

/* Ground and sidebar washes, restated with the brand ramp ------------------ */

:root {
    --rk-wash-blue: rgba(1, 63, 124, 0.055);   /* brand-700 */
    --rk-wash-gold: rgba(203, 166, 64, 0.05);  /* gold-500  */
    --rk-item-hover: rgba(1, 63, 124, 0.055);
    --rk-item-active: rgba(1, 63, 124, 0.095);
}

/* Success accents follow the site's leaf green rather than a generic emerald.
   These are the progress meters and completion states on the custom pages. */
html .wl-fill,
html .cal-page .wl-fill {
    background: var(--leaf-500);
}

html .wl-good {
    color: var(--leaf-600);
}

/* The gold is the site's accent, so it stays the marker for "now": today on the
   calendar and the Gantt, and the current week in the exports. */
html .cal-chip--on {
    color: var(--brand-600);
}

html .gantt-legend__fill,
html .cal-bar__date {
    color: var(--brand-600);
}

/* Links inside custom pages pick up the brand mid-tone on hover, as the site does. */
html .cal-panel a:hover,
html .gantt-undated a:hover,
html .gantt-label a:hover,
html .cal-bar:hover .cal-ev__label {
    color: var(--brand-600);
}


/* --------------------------------------------------------------------------
 | Dashboard widget: officer workload
 |
 | These rules live here rather than in the widget's own Blade view. Filament
 | lazy-loads dashboard widgets over Livewire, so the view renders long after
 | the layout's <head> (and its @stack('styles')) has been sent — anything a
 | widget pushes to that stack is silently dropped. Page-level views are fine,
 | because they render inside the layout; widgets are not.
 * ------------------------------------------------------------------------ */

/* Fixed layout with a colgroup: the meters and figures line up down the
   table whatever length an officer's name happens to be. */
.ow { overflow-x: auto; font-variant-numeric: tabular-nums; }
.ow table { width: 100%; min-width: 46rem; table-layout: fixed; border-collapse: collapse; }

.ow-c-officer { width: auto; }
.ow-c-count   { width: 6rem; }
.ow-c-load    { width: 9rem; }
.ow-c-prog    { width: 10rem; }
.ow-c-status  { width: 17rem; }

.ow th { text-align: left; font-size: .66rem; font-weight: 650; text-transform: uppercase;
    letter-spacing: .06em; color: #8496ac; padding: 0 .75rem .55rem; white-space: nowrap; }
.ow th.r { text-align: right; }

.ow td { padding: .6rem .75rem; border-top: 1px solid #f1f5f9;
    font-size: .8125rem; color: #1e293b; vertical-align: middle; }
.ow td.r { text-align: right; }
.ow tbody tr:first-child td { border-top: 0; }
.ow tbody tr:hover td { background: #fafbfd; }

/* Officer identity */
.ow-officer { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.ow-avatar { flex: 0 0 auto; width: 1.85rem; height: 1.85rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-50, #eef5fc); color: var(--brand-700, #013f7c);
    font-size: .66rem; font-weight: 700; }
.ow-who { min-width: 0; }
.ow-name { display: block; font-weight: 600; color: #1e293b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-role { display: block; font-size: .68rem; color: #94a3b8;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ow-count { font-weight: 700; color: var(--brand-800, #063363); }

/* Meters */
.ow-track { display: block; height: .4rem; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.ow-bar { display: block; height: 100%; border-radius: 999px; background: var(--brand-600, #004e98); }
.ow-fill { display: block; height: 100%; border-radius: 999px; background: var(--leaf-500, #2f855a); }
.ow-meter { display: flex; align-items: center; gap: .5rem; }
.ow-meter .ow-track { flex: 1 1 auto; }
.ow-pct { flex: 0 0 2.4rem; text-align: right; font-size: .72rem; font-weight: 650; color: #475569; }

/* Status chips replace a row of dashes */
.ow-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.ow-chip { font-size: .66rem; font-weight: 600; padding: .12rem .4rem; border-radius: .35rem;
    background: #f1f5f9; color: #64748b; white-space: nowrap; }
.ow-chip--done { background: #e7f4ed; color: var(--leaf-600, #276749); }
.ow-chip--wait { background: #fef6e7; color: #a16207; }
.ow-chip--warn { background: #fdf0e3; color: #b45309; }
.ow-chip--bad  { background: #fdeaea; color: #b91c1c; }
.ow-chip--quiet { background: transparent; color: #b6c1cf; font-weight: 500; font-style: italic; }

/* Backlog footer row */
.ow tfoot td { border-top: 1px solid #e2e8f0; padding-top: .7rem; }
.ow-backlog { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
    border: 1px dashed #d8e2ee; border-radius: .55rem;
    background: linear-gradient(180deg, #fbfcfe 0%, #f6f9fc 100%);
    text-decoration: none; transition: border-color .14s, background .14s; }
.ow-backlog:hover { border-color: var(--brand-300, #7cade1); background: #f4f9fe; }
.ow-backlog__icon { flex: 0 0 auto; display: inline-flex; color: var(--brand-600, #004e98); }
.ow-backlog__title { flex: 0 0 auto; font-size: .78rem; font-weight: 650; color: #1e293b; }
.ow-backlog__meta { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1 1 auto; }
.ow-backlog__go { flex: 0 0 auto; font-size: .7rem; font-weight: 650;
    color: var(--brand-600, #004e98); white-space: nowrap; }

.ow-none, .ow-empty { font-size: .8125rem; color: #94a3b8; font-style: italic; }

/* --------------------------------------------------------------------------
 | Sidebar navigation, matching the site's main menu
 |
 | The public header is a white logo band sitting above a brand-700 menu strip
 | with white labels, brand-800 on hover, and a gold rule under the dropdowns
 | (resources/views/partials/header.blade.php). The sidebar mirrors that split:
 | the brand block stays white so the logo — a dark, mostly transparent PNG —
 | still reads, and the navigation below it takes the navy.
 |
 | Overrides the lighter rail defined earlier in this file.
 * ------------------------------------------------------------------------ */

html .fi-sidebar {
    background-color: var(--brand-700);
    background-image: none;
    border-right: 0;
    box-shadow: 1px 0 0 rgba(4, 26, 53, .35), 8px 0 24px -16px rgba(8, 43, 82, .45);
}

/* Logo band: white, closed off with the site's gold rule. */
html .fi-sidebar-header {
    background: #ffffff;
    background-image: none;
    border-bottom: 2px solid var(--gold-500);
    box-shadow: none;
}

html .fi-sidebar-nav,
html .fi-sidebar-nav-groups,
html .fi-sidebar-group,
html .fi-sidebar-group-items {
    background-color: transparent;
}

/* Group headings: legible on navy without shouting. */
html .fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

html .fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button {
    color: var(--gold-300);
}

/* Items: white labels, brand-800 on hover — the site's own hover shade. */
html .fi-sidebar-item-label {
    color: #ffffff;
    font-weight: 500;
}

html .fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.66);
}

html .fi-sidebar-item-button:hover {
    background-color: var(--brand-800);
}

html .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #ffffff;
}

html .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--gold-300);
}

/* Active item: the darker shade plus the gold accent the site uses on menus. */
html .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--brand-800);
}

html .fi-sidebar-item-active .fi-sidebar-item-label {
    color: #ffffff;
    font-weight: 650;
}

html .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--gold-400);
}

html .fi-sidebar-item-active .fi-sidebar-item-button::before {
    background: var(--gold-500);
}

/* Navigation badges need their own contrast against the navy. */
html .fi-sidebar-item .fi-badge {
    background-color: var(--gold-500) !important;
    color: var(--brand-950) !important;
    box-shadow: none;
}

/* Scrollbar and the collapse control, restated for a dark rail. */
html .fi-sidebar-nav {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

html .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.28);
}

html .fi-sidebar .fi-icon-btn {
    color: rgba(255, 255, 255, 0.7);
}

html .fi-sidebar .fi-icon-btn:hover {
    color: #ffffff;
    background-color: var(--brand-800);
}

/* The mobile drawer uses the same rail, so it inherits all of the above. */
@media (prefers-contrast: more) {
    html .fi-sidebar {
        background-color: var(--brand-900);
    }

    html .fi-sidebar-item-icon {
        color: rgba(255, 255, 255, 0.85);
    }

    html .fi-sidebar-group-label {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* --------------------------------------------------------------------------
 | Admin header, matching the site's utility bar
 |
 | The public site stacks brand-900 (utility strip) over the white logo band
 | over brand-700 (main menu). The panel mirrors that top-down: the header takes
 | brand-900, the sidebar navigation brand-700, and the logo band stays white
 | between them. Everything the header carries — sidebar toggle, global search,
 | notifications and the user menu — is restated for a dark ground.
 * ------------------------------------------------------------------------ */

html .fi-topbar,
html .fi-topbar > nav {
    background-color: var(--brand-900);
    background-image: none;
    border-bottom: 2px solid var(--gold-500);
    box-shadow: 0 1px 3px rgba(4, 26, 53, .25);
}

/* Icon buttons: sidebar toggle and the notifications bell. */
html .fi-topbar .fi-icon-btn {
    color: rgba(255, 255, 255, 0.75);
}

html .fi-topbar .fi-icon-btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.10);
}

html .fi-topbar .fi-icon-btn-icon {
    color: inherit;
}

/* Global search: a translucent well rather than a white box punched into navy. */
html .fi-topbar .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

html .fi-topbar .fi-input-wrp:focus-within {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: var(--gold-400);
}

html .fi-topbar .fi-input-wrp .fi-input,
html .fi-topbar .fi-input-wrp-input input {
    color: #ffffff;
    background-color: transparent;
}

html .fi-topbar .fi-input-wrp .fi-input::placeholder,
html .fi-topbar .fi-input-wrp-input input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

html .fi-topbar .fi-input-wrp-icon,
html .fi-topbar .fi-input-wrp-prefix {
    color: rgba(255, 255, 255, 0.6);
}

/* User menu trigger: a ring so the avatar reads against the dark bar. */
html .fi-topbar .fi-user-avatar,
html .fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

html .fi-topbar .fi-dropdown-trigger:hover .fi-user-avatar,
html .fi-topbar .fi-dropdown-trigger:hover .fi-avatar {
    box-shadow: 0 0 0 2px var(--gold-400);
}

/* Any plain text the header carries (user name, breadcrumb separators). */
html .fi-topbar,
html .fi-topbar a:not(.fi-btn),
html .fi-topbar .fi-topbar-item-label {
    color: rgba(255, 255, 255, 0.88);
}

/* The dropdown panels themselves stay white — they float above the bar. */
html .fi-topbar .fi-dropdown-panel {
    color: var(--rk-ink);
}

/* The logo band already carries the gold rule; drop the doubled line where the
   header meets it. */
html .fi-sidebar-header {
    border-bottom: 2px solid var(--gold-500);
}

@media (prefers-contrast: more) {
    html .fi-topbar,
    html .fi-topbar > nav {
        background-color: var(--brand-950);
    }

    html .fi-topbar .fi-icon-btn {
        color: #ffffff;
    }
}

@media print {
    html .fi-topbar,
    html .fi-topbar > nav {
        background: #ffffff;
        border-bottom: 1px solid var(--rk-line);
    }
}