/*
 | Otrago — "Slate & Signal" theme refinements
 |
 | Layered over the Filament default build (no Vite theme rebuild needed). Colour
 | itself comes from the panel ->colors() palette (App\Support\BrandPalette); this
 | file adjusts chrome, weight and spacing. Targets Filament v3.3 fi-* classes.
 */

/* ── Hierarchy & density ──────────────────────────────────────────────────── */

/* Stronger page-level hierarchy */
.fi-header-heading {
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Enterprise-style table headers: compact, uppercase, letter-spaced labels */
.fi-ta-header-cell {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
}

/* Tighter row density so more compliance data is scannable at a glance */
.fi-ta-cell {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Slightly firmer section heading weight */
.fi-section-header-heading {
    font-weight: 600;
}

/* ── Navy command-centre sidebar (identical in light AND dark mode) ────────────
   The sidebar is an ink-navy "dark rail" in BOTH colour schemes. The catch: in
   light mode Filament colours sidebar text/icons DARK (e.g. the item LABEL keeps
   text-gray-700), which is invisible on navy — dark mode escaped this only because
   its defaults are already light. So every text + icon element below is repainted
   to a light, AA-contrast palette regardless of scheme. The topbar + content stay
   scheme-native (the classic light-content + dark-rail enterprise look). */

.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-header {
    background-color: #14304a !important; /* ink navy */
    border-color: #1b3a57 !important;
}

/* Brand / logo */
.fi-sidebar-header,
.fi-sidebar-header .fi-logo,
.fi-sidebar-header a {
    color: #ffffff !important;
}

/* Nav item TEXT — the button and its label span (the label carries its own
   light-mode dark colour, so it must be set explicitly: this is the core fix). */
.fi-sidebar-item-button,
.fi-sidebar-item-label {
    color: #e2e8f0 !important; /* slate-200 — ~8.5:1 on navy */
}

/* Icons, group headers + collapse chevrons — slate-300 keeps ~7:1 contrast. */
.fi-sidebar-item-icon,
.fi-sidebar-group-label,
.fi-sidebar-group-button,
.fi-sidebar-group-collapse-button {
    color: #cbd5e1 !important; /* slate-300 */
}

/* Hover — a lighter-navy fill with white text + icon. */
.fi-sidebar-item-button:hover {
    background-color: #1b3a57 !important;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* Active — brand-navy fill, white text, a bolder label AND a light accent bar, so
   "you are here" is signalled by more than colour alone (WCAG 1.4.1). */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #1f4e79 !important; /* brand navy */
    box-shadow: inset 3px 0 0 0 #93c5fd !important; /* light "here" bar */
}

.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #ffffff !important;
}

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

/* Clear keyboard focus on the navy rail (default focus rings wash out here). */
.fi-sidebar-item-button:focus-visible,
.fi-sidebar-group-button:focus-visible,
.fi-sidebar-group-collapse-button:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: -2px;
}

/* Tenant (company) switcher in the sidebar — keep its text + chevron legible. */
.fi-sidebar-nav-tenant-menu-ctn .fi-dropdown-trigger,
.fi-sidebar-nav-tenant-menu-ctn .fi-dropdown-trigger * {
    color: #e2e8f0 !important;
}

/* ── Files manager two-pane ───────────────────────────────────────────────────
   Real CSS (NOT Tailwind utilities): Filament's stylesheet is precompiled and does
   not scan this page's Blade, so arbitrary utility classes there never get emitted.
   These dedicated classes guarantee the tree-rail + grid split renders reliably. */

.otrago-files {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.otrago-files__rail {
    width: 100%;
    flex-shrink: 0;
}

.otrago-files__main {
    width: 100%;
    min-width: 0; /* let the table shrink instead of overflowing the row */
    flex: 1 1 0%;
}

@media (min-width: 1024px) {
    .otrago-files {
        flex-direction: row;
    }

    .otrago-files__rail {
        width: 18rem;
        position: sticky;
        top: 5rem;
    }
}

/* Folder tree nodes */
.otrago-files__tree {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.875rem;
}

.otrago-files__node {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    color: #334155; /* slate-700 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.1s ease;
}

.otrago-files__node:hover {
    background-color: #f1f5f9; /* slate-100 */
}

.otrago-files__node--active {
    background-color: #e8eef5;
    color: #1f4e79; /* brand navy */
    font-weight: 600;
}

.dark .otrago-files__node {
    color: #cbd5e1;
}

.dark .otrago-files__node:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .otrago-files__node--active {
    background-color: rgba(31, 78, 121, 0.3);
    color: #ffffff;
}

/* Collapsible tree rows: a chevron (or spacer for leaves) + the folder button. */
.otrago-files__row {
    display: flex;
    align-items: stretch;
}

.otrago-files__row .otrago-files__node {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
}

.otrago-files__chevron {
    flex-shrink: 0;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8; /* slate-400 */
    font-size: 0.625rem;
    border-radius: 0.375rem;
    transition: color 0.1s ease, background-color 0.1s ease;
}

.otrago-files__chevron:hover {
    color: #334155; /* slate-700 */
    background-color: #f1f5f9; /* slate-100 */
}

.otrago-files__chevron-spacer {
    flex-shrink: 0;
    width: 1.25rem;
}

.dark .otrago-files__chevron {
    color: #64748b;
}

.dark .otrago-files__chevron:hover {
    color: #e2e8f0;
    background-color: rgba(255, 255, 255, 0.06);
}

/* Breadcrumb */
.otrago-files__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #64748b; /* slate-500 */
}

.otrago-files__crumb {
    cursor: pointer;
}

.otrago-files__crumb:hover {
    color: #1f4e79;
    text-decoration: underline;
}

.otrago-files__crumb--current {
    font-weight: 600;
    color: #0f172a; /* slate-900 */
}

.dark .otrago-files__crumb--current {
    color: #f1f5f9;
}

/* Whole-folder drop zone */
.otrago-files__dropzone {
    cursor: pointer;
    border: 2px dashed #cbd5e1; /* slate-300 */
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: #475569; /* slate-600 */
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

.otrago-files__dropzone:hover {
    border-color: #94a3b8; /* slate-400 */
}

.otrago-files__dropzone--dragging {
    border-color: #1f4e79; /* brand navy */
    background-color: #eef4fb;
}

.dark .otrago-files__dropzone {
    border-color: #334155;
    color: #cbd5e1;
}

.otrago-files__dropzone-accent {
    font-weight: 600;
    color: #1f4e79;
}

/* Dark-mode contrast: navy text/links/fills wash out on a dark surface. */
.dark .otrago-files__crumb:hover,
.dark .otrago-files__dropzone-accent {
    color: #93c5fd; /* light blue */
}

.dark .otrago-files__dropzone--dragging {
    border-color: #93c5fd;
    background-color: rgba(31, 78, 121, 0.25);
}

/* ── Calendar page ─────────────────────────────────────────────────────────────
   Month grid of upcoming compliance. Real CSS (NOT Tailwind utilities): Filament's
   stylesheet is precompiled and does not scan this page's Blade, so dedicated
   classes are needed for the grid + status chips to render reliably. */

.otrago-cal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.otrago-cal__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.otrago-cal__title {
    margin-left: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a; /* slate-900 */
}

.dark .otrago-cal__title {
    color: #f1f5f9;
}

.otrago-cal__grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.otrago-cal__grid th {
    padding: 0.35rem 0.5rem;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: #64748b; /* slate-500 */
}

.otrago-cal__cell {
    width: 14.285%;
    height: 6.5rem;
    vertical-align: top;
    border: 1px solid #e2e8f0; /* slate-200 */
    padding: 0.3rem;
    overflow: hidden;
}

.otrago-cal__cell--out {
    background-color: #f8fafc; /* slate-50 */
}

.otrago-cal__cell--today {
    box-shadow: inset 0 0 0 2px #1f4e79; /* brand navy "you are here" */
}

.otrago-cal__day {
    margin-bottom: 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155; /* slate-700 */
}

.otrago-cal__cell--out .otrago-cal__day {
    color: #cbd5e1; /* slate-300 */
    font-weight: 400;
}

.otrago-cal__cell--today .otrago-cal__day {
    color: #1f4e79;
}

.otrago-cal__chip {
    display: block;
    margin-top: 0.2rem;
    padding: 0.1rem 0.35rem;
    border-left: 3px solid transparent;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.otrago-cal__chip--overdue {
    background-color: #fef2f2;
    color: #991b1b;
    border-left-color: #dc2626;
}

.otrago-cal__chip--due_soon {
    background-color: #fffbeb;
    color: #92400e;
    border-left-color: #d97706;
}

.otrago-cal__chip--compliant {
    background-color: #f0fdf4;
    color: #166534;
    border-left-color: #16a34a;
}

.otrago-cal__legend {
    display: flex;
    gap: 1.25rem;
    font-size: 0.75rem;
    color: #475569; /* slate-600 */
}

.otrago-cal__dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.3rem;
    border-radius: 9999px;
    vertical-align: middle;
}

/* Dark mode: repaint the grid chrome + chips for a dark surface. */
.dark .otrago-cal__grid th {
    color: #94a3b8;
}

.dark .otrago-cal__cell {
    border-color: #334155;
}

.dark .otrago-cal__cell--out {
    background-color: rgba(148, 163, 184, 0.06);
}

.dark .otrago-cal__day {
    color: #cbd5e1;
}

.dark .otrago-cal__cell--out .otrago-cal__day {
    color: #475569;
}

.dark .otrago-cal__cell--today {
    box-shadow: inset 0 0 0 2px #93c5fd;
}

.dark .otrago-cal__cell--today .otrago-cal__day {
    color: #93c5fd;
}

.dark .otrago-cal__chip--overdue {
    background-color: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
}

.dark .otrago-cal__chip--due_soon {
    background-color: rgba(217, 119, 6, 0.15);
    color: #fcd34d;
}

.dark .otrago-cal__chip--compliant {
    background-color: rgba(22, 163, 74, 0.15);
    color: #86efac;
}

.dark .otrago-cal__legend {
    color: #94a3b8;
}