/*
  Lexcora – Comprehensive Filament UI overrides
  Works ON TOP of the Sunset theme (loaded after it via HEAD_END renderHook).

  Brand:  #A48030 (deep gold)
  Dark:   #6B5220 (darker shade for dark-mode surfaces)
  Light:  #C9A24E (lighter shade for hover states)

  Principles:
  - Heavy primary backgrounds on chrome (topbar, tabs bar, section headers, footer).
  - White text / icons on colored surfaces.
  - Neutral body areas stay untouched so form inputs remain readable.
*/

/* ==============================
   CSS Variables
   ============================== */
html {
    font-size: 85%;
}

:root {
    --mbh-gold:       184 152 79;   /* #B8984F  – section headers (strong) */
    --mbh-gold-dark:  130 100 34;   /* darker for hover */
    --mbh-gold-light: 201 162 78;   /* lighter accent */
    --mbh-chrome:     228 210 170;  /* #E4D2AA – light warm gold for topbar/sidebar/footer */
    --mbh-chrome-border: 210 185 135; /* subtle border */
}

/* ==============================
   1. TOP BAR (fi-topbar)
   ============================== */
.fi-topbar nav {
    background-color: #FAFAFA !important;
    border-bottom: 1px solid rgb(var(--mbh-chrome-border)) !important;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.06) !important;
}

/* Icons & buttons inside the topbar – dark text on light surface */
.fi-topbar nav .fi-icon-btn,
.fi-topbar nav button,
.fi-topbar nav a {
    color: #A48030!important;
}

.fi-topbar nav .fi-icon-btn:hover,
.fi-topbar nav button:hover {
    background-color: rgb(0 0 0 / 0.06) !important;
    color:#A48030 !important;
}

/* Dark mode topbar */
:is(.dark .fi-topbar nav) {
    background-color: rgb(var(--mbh-gold-dark)) !important;
    border-bottom-color: rgb(0 0 0 / 0.25) !important;
}

:is(.dark .fi-topbar nav) .fi-icon-btn,
:is(.dark .fi-topbar nav) button,
:is(.dark .fi-topbar nav) a {
    color: rgb(255 255 255 / 0.85) !important;
}

/* ==============================
   2. SIDEBAR (fi-sidebar)
   ============================== */
.fi-sidebar {
    background-color: rgb(var(--mbh-chrome)) !important;
    color: rgb(70 50 15) !important;
}

.fi-sidebar-header {
    background-color: rgb(var(--mbh-chrome)) !important;
    border-bottom: 1px solid rgb(var(--mbh-chrome-border)) !important;
    box-shadow: none !important;
}

/* Group labels */
.fi-sidebar-group-label {
    color: rgb(120 90 35 / 0.70) !important;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* Group collapse icon */
.fi-sidebar-group-collapse-button,
.fi-sidebar-group-icon {
    color: rgb(120 90 35 / 0.55) !important;
}

/* Item icons */
.fi-sidebar-item-icon {
    color: rgb(100 75 25 / 0.65) !important;
}

/* Item button & label (non-active) */
.fi-sidebar-item-button {
    color: rgb(60 42 10 / 0.85) !important;
}

.fi-sidebar-item-label {
    color: rgb(60 42 10 / 0.85) !important;
}

/* Hover on non-active items */
.fi-sidebar-item:not(.fi-active):not(.fi-sidebar-item-active) .fi-sidebar-item-button:hover {
    background-color: rgb(0 0 0 / 0.05) !important;
}

/* ACTIVE item – warm solid highlight */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active a {
    background: rgb(var(--mbh-gold)) !important;
    border: 1px solid rgb(var(--mbh-gold-dark) / 0.3) !important;
    border-radius: 10px !important;
    box-shadow:
        0 2px 8px rgb(0 0 0 / 0.10) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button:hover,
.fi-sidebar-item-active a:hover {
    background: rgb(var(--mbh-gold-light)) !important;
}

/* Active item text & icon → white on gold */
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active svg,
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active svg {
    color: #fff !important;
}

/* Badge inside active sidebar item */
.fi-sidebar-item.fi-active .fi-badge,
.fi-sidebar-item-active .fi-badge {
    background-color: rgb(255 255 255 / 0.30) !important;
    color: #fff !important;
}

/* Dark mode sidebar */
:is(.dark .fi-sidebar),
:is(.dark .fi-sidebar-header) {
    background-color: rgb(var(--mbh-gold-dark)) !important;
}

:is(.dark .fi-sidebar) .fi-sidebar-item-label,
:is(.dark .fi-sidebar) .fi-sidebar-item-button,
:is(.dark .fi-sidebar) .fi-sidebar-group-label {
    color: rgb(255 255 255 / 0.80) !important;
}

:is(.dark .fi-sidebar) .fi-sidebar-item-icon {
    color: rgb(255 255 255 / 0.60) !important;
}

/* ==============================
   3. PAGE SUB-NAVIGATION TABS (the tabs bar)
   ============================== */
.fi-page-sub-navigation-tabs,
.fi-tabs:not(.fi-contained) {
    background-color: rgb(var(--mbh-chrome)) !important;
    border: 1px solid rgb(var(--mbh-chrome-border)) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.04) !important;
    padding: 6px !important;
}

/* All tab items text → dark on light surface */
.fi-tabs-item .fi-tabs-item-label {
    color: rgb(80 58 18 / 0.75) !important;
}

.fi-tabs-item .fi-tabs-item-icon {
    color: rgb(100 75 25 / 0.60) !important;
}

/* Hover on inactive tabs */
.fi-tabs-item:not(.fi-active):not(.fi-tabs-item-active):hover {
    background-color: rgb(0 0 0 / 0.04) !important;
    border-radius: 10px;
}

/* ACTIVE tab – solid gold pill */
.fi-tabs-item.fi-active,
.fi-tabs-item-active {
    background: rgb(var(--mbh-gold)) !important;
    border: 1px solid rgb(var(--mbh-gold-dark) / 0.3) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.10) !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-tabs-item-icon,
.fi-tabs-item-active .fi-tabs-item-label,
.fi-tabs-item-active .fi-tabs-item-icon {
    color: #fff !important;
}

/* Contained tabs variant */
.fi-tabs.fi-contained {
    border-bottom: 2px solid rgb(var(--mbh-gold)) !important;
}

/* Dark mode tabs */
:is(.dark .fi-page-sub-navigation-tabs),
:is(.dark .fi-tabs:not(.fi-contained)) {
    background-color: rgb(var(--mbh-gold-dark)) !important;
}

:is(.dark .fi-tabs-item) .fi-tabs-item-label {
    color: rgb(255 255 255 / 0.75) !important;
}

/* ==============================
   4. SECTION HEADERS
   ============================== */
.fi-section:not(.fi-aside) > .fi-section-header {
    background-color: rgb(var(--mbh-gold)) !important;
    border-bottom: 1px solid rgb(var(--mbh-gold-dark)) !important;
    border-start-start-radius: 0.75rem;
    border-start-end-radius: 0.75rem;
}

.fi-section-header-heading {
    color: #fff !important;
}

.fi-section-header-description {
    color: rgb(255 255 255 / 0.72) !important;
}

.fi-section-header-icon {
    color: rgb(255 255 255 / 0.85) !important;
}

/* Collapse chevron inside section header */
.fi-section-header .fi-icon-btn {
    color: rgb(255 255 255 / 0.75) !important;
}

.fi-section-header .fi-icon-btn:hover {
    background-color: rgb(255 255 255 / 0.12) !important;
    color: #fff !important;
}

/* Section border to match */
.fi-section:not(.fi-aside) {
    border: 1px solid rgb(var(--mbh-gold) / 0.25) !important;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.04);
    border-radius: 0.75rem;
}

/* Dark mode section headers */
:is(.dark .fi-section:not(.fi-aside) > .fi-section-header) {
    background-color: rgb(var(--mbh-gold-dark)) !important;
    border-bottom-color: rgb(0 0 0 / 0.2) !important;
}

/* ==============================
   5. FOOTER
   ============================== */
.fi-footer {
    background-color: transparent !important;
    color: rgb(80 58 18 / 0.80) !important;
    border-top: 1px solid transparent !important;
    padding: 0.75rem 1rem !important;
}

.fi-footer a {
    color: rgb(100 72 20 / 0.85) !important;
}

.fi-footer a:hover {
    color: rgb(60 42 10) !important;
    text-decoration: underline;
}

/* Only target direct footer spans, not spans elsewhere in the page */
footer.fi-footer > span,
footer.fi-footer > div > span {
    color: rgb(100 72 20 / 0.70) !important;
}

:is(.dark .fi-footer) {
    background-color: transparent !important;
    color: rgb(255 255 255 / 0.80) !important;
}

:is(.dark .fi-footer) a,
:is(.dark .fi-footer) span {
    color: rgb(255 255 255 / 0.75) !important;
}

/* ==============================
   6. MAIN CONTENT AREA (subtle polish)
   ============================== */

/* The rounded main pane in Sunset theme */
.fi-main {
    border-top-color: rgb(var(--mbh-gold) / 0.15) !important;
}

/* Make pages / tables use more horizontal space */
.fi-main {
    max-width: none !important;
    padding-inline: 0.75rem !important;
}

/* Keep topbar aligned with the wider content */
.fi-topbar nav {
    padding-inline: 0.75rem !important;
}

@media (min-width: 768px) {
    .fi-main,
    .fi-topbar nav {
        padding-inline: 1rem !important;
    }
}

@media (min-width: 1024px) {
    .fi-main,
    .fi-topbar nav {
        padding-inline: 1.25rem !important;
    }
}

/* ==============================
   7. SCROLLBAR on sidebar (webkit)
   ============================== */
.fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

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

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 0.12);
    border-radius: 4px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0 0 0 / 0.22);
}

/* ==============================
   8. HEARINGS TABLE – FULL ROW TINT
   ============================== */

.fi-ta-record.mbh-hearing-row {
    background-color: var(--mbh-hearing-row-bg, transparent) !important;
}

.dark .fi-ta-record.mbh-hearing-row {
    background-color: var(--mbh-hearing-row-bg-dark, transparent) !important;
}

.fi-ta-record.mbh-hearing-row:hover {
    background-color: var(--mbh-hearing-row-bg-hover, var(--mbh-hearing-row-bg, transparent)) !important;
}

.dark .fi-ta-record.mbh-hearing-row:hover {
    background-color: var(--mbh-hearing-row-bg-dark-hover, var(--mbh-hearing-row-bg-dark, transparent)) !important;
}

/* Accent bar on the start side (respects RTL/LTR) */
.fi-ta-record.mbh-hearing-row::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background-color: var(--mbh-hearing-row-accent, transparent);
}

/* hearing = brand */
.fi-ta-record.mbh-hearing-row--hearing {
    --mbh-hearing-row-accent: rgb(var(--mbh-gold));
    --mbh-hearing-row-bg: rgb(var(--mbh-gold) / 0.12);
    --mbh-hearing-row-bg-hover: rgb(var(--mbh-gold) / 0.16);
    --mbh-hearing-row-bg-dark: rgb(var(--mbh-gold) / 0.14);
    --mbh-hearing-row-bg-dark-hover: rgb(var(--mbh-gold) / 0.18);
}

/* expert_hearing = info */
.fi-ta-record.mbh-hearing-row--expert {
    --mbh-hearing-row-accent: #06b6d4;
    --mbh-hearing-row-bg: rgb(6 182 212 / 0.10);
    --mbh-hearing-row-bg-hover: rgb(6 182 212 / 0.14);
    --mbh-hearing-row-bg-dark: rgb(6 182 212 / 0.12);
    --mbh-hearing-row-bg-dark-hover: rgb(6 182 212 / 0.16);
}

/* judgment_hearing = danger */
.fi-ta-record.mbh-hearing-row--judgment {
    --mbh-hearing-row-accent: #ef4444;
    --mbh-hearing-row-bg: rgb(239 68 68 / 0.08);
    --mbh-hearing-row-bg-hover: rgb(239 68 68 / 0.12);
    --mbh-hearing-row-bg-dark: rgb(239 68 68 / 0.10);
    --mbh-hearing-row-bg-dark-hover: rgb(239 68 68 / 0.14);
}

/* ==============================
     9. GLOBAL SEARCH MODAL (center fix)
     ============================== */

/*
    CharrafiMed GlobalSearchModal sometimes renders aligned to the right.
    This forces the non-slideover modal panel to stay centered (LTR + RTL).
    We target the plugin's utility class `.inset-x-0` which is only used for the
    non-slideover variant.
*/
.global-search-modal-panel .inset-x-0 {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
}