/*
 * MedFix app shell: a plain topbar (white by day, dark surface by night) and one full-height
 * sidebar in the theme colour, header included, with dark text on Ice Teal.
 *
 * Colours come from App\Support\UserTheme: --medfix-sidebar-surface (light mode) and
 * --medfix-sidebar-surface-dark (dark mode). Ice Teal uses a deep surface in dark mode.
 * Loaded after polish.css and the inline accent
 * styles; "html:is(.dark, :not(.dark))" lifts these rules above the older ".dark ..." ones.
 */

/* ---------------------------------------------------------------- Sidebar palette */
html:is(.dark, :not(.dark)) .fi-sidebar {
    --mf-sb-bg: var(--medfix-sidebar-surface, var(--medfix-user-accent));
    --mf-sb-ink: #ffffff;
    --mf-sb-text: rgba(255, 255, 255, .88);
    --mf-sb-icon: rgba(255, 255, 255, .74);
    --mf-sb-muted: rgba(255, 255, 255, .56);
    --mf-sb-line: rgba(255, 255, 255, .12);
    --mf-sb-hover: rgba(255, 255, 255, .08);
    --mf-sb-active: rgba(255, 255, 255, .14);
    --mf-sb-marker: var(--medfix-interaction-accent, #32B3B7);
    --mf-sb-pill: rgba(255, 255, 255, .16);

    /* Older sidebar/topbar variables that other rules still read inside the sidebar. */
    --medfix-sidebar-bg: var(--mf-sb-bg);
    --medfix-sidebar-header-bg: var(--mf-sb-bg);
    --medfix-sidebar-brand: var(--mf-sb-ink);
    --medfix-sidebar-text: var(--mf-sb-text);
    --medfix-sidebar-muted: var(--mf-sb-muted);
    --medfix-sidebar-subtle: var(--mf-sb-muted);
    --medfix-sidebar-hover: var(--mf-sb-hover);
    --medfix-sidebar-line: var(--mf-sb-line);
    --medfix-sidebar-active: var(--mf-sb-active);
    --medfix-sidebar-active-text: var(--mf-sb-ink);
    --medfix-topbar-bg: var(--mf-sb-bg);
    --medfix-topbar-ink: var(--mf-sb-ink);
    --medfix-topbar-muted: var(--mf-sb-muted);
    --medfix-topbar-soft: var(--mf-sb-hover);
    --medfix-topbar-line: var(--mf-sb-line);
    --chrome-bg: var(--mf-sb-bg);
    --chrome-ink: var(--mf-sb-ink);
    --chrome-muted: var(--mf-sb-muted);
    --chrome-line: var(--mf-sb-line);

    background: var(--mf-sb-bg) !important;
    border-inline-end: 0 !important;
    box-shadow: none !important;
    color: var(--mf-sb-text) !important;
}

html.dark .fi-sidebar {
    --mf-sb-bg: var(--medfix-sidebar-surface-dark, #0b1424);
    --mf-sb-ink: #F0F4F7;
    --mf-sb-text: #D2DCE3;
    --mf-sb-icon: #B5C4CE;
    --mf-sb-muted: #A1B2BE;
    --mf-sb-line: rgba(255, 255, 255, .08);
    --mf-sb-hover: rgba(255, 255, 255, .05);
    --mf-sb-active: rgba(50, 179, 183, .13);
    --mf-sb-pill: rgba(255, 255, 255, .09);
    border-inline-end: 1px solid rgba(255, 255, 255, .06) !important;
}

html[data-medfix-theme="ice_teal"]:not(.dark) .fi-sidebar {
    --mf-sb-ink: #0C3765;
    --mf-sb-text: #1E3346;
    --mf-sb-icon: #45657A;
    --mf-sb-muted: #557086;
    --mf-sb-line: #D4E6EC;
    --mf-sb-hover: #DFEEF3;
    --mf-sb-active: #D2E8EF;
    --mf-sb-pill: #D2E3EA;
    border-inline-end: 1px solid var(--mf-sb-line) !important;
}

html[data-medfix-theme="ice_teal"]:not(.dark) .fi-sidebar .medfix-platform-logo img {
    content: url("../../medfix-invoice-logo.svg");
}

html[data-medfix-theme="ice_teal"]:not(.dark) .sidebar-wrap[data-sidebar-expanded="false"] .fi-sidebar .medfix-platform-logo img {
    content: url("../../favicon.svg");
}

html[data-medfix-theme="ice_teal"]:not(.dark) .fi-sidebar::after {
    background-image: url("../../favicon.svg");
}

html :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--medfix-interaction-accent, #32B3B7);
    outline-offset: 2px;
}

/* MedFix touch: a faint brand mark in the bottom corner of the sidebar. */
html:is(.dark, :not(.dark)) .fi-sidebar::after {
    content: "";
    position: absolute;
    inset-block-end: 56px;
    inset-inline-end: 14px;
    inline-size: 150px;
    block-size: 150px;
    background: url("../../medfix-white-icon.png") center / contain no-repeat;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}

html:is(.dark, :not(.dark)) .fi-sidebar > * {
    position: relative;
    z-index: 1;
}

html:is(.dark, :not(.dark)) .sidebar-wrap[data-sidebar-expanded="false"] .fi-sidebar::after {
    display: none;
}

/* The header (logo + collapse button) is part of the same surface: no own fill, line or blur. */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-header,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-nav,
html:is(.dark, :not(.dark)) .fi-sidebar nav {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--mf-sb-ink) !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-header {
    border-bottom: 1px solid var(--mf-sb-line) !important;
}

/* Group headings (INVENTORY, MAINTENANCE ...) */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-label,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-button,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-collapse-button {
    color: var(--mf-sb-muted) !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-label {
    letter-spacing: .08em;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-button:hover {
    background: var(--mf-sb-hover) !important;
}

/* Items */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-button,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-label {
    color: var(--mf-sb-text) !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group:not(.fi-active) .fi-sidebar-group-icon {
    color: var(--mf-sb-icon) !important;
    opacity: 1 !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-button:hover {
    background: var(--mf-sb-hover) !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-label,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--mf-sb-ink) !important;
}

/* Full-bleed leading edge, with equal content alignment in every item state. */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-nav {
    padding-inline-start: 0 !important;
    padding-inline-end: .65rem !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-nav-groups {
    margin-inline: 0 !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-button {
    padding-inline-start: .95rem !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group-label {
    padding-inline-start: .8rem !important;
}

html:is(.dark, :not(.dark)) .sidebar-wrap[data-sidebar-expanded="false"] .fi-sidebar .fi-sidebar-item-button {
    padding-inline-start: .65rem !important;
    padding-inline-end: 0 !important;
}

html:is(.dark, :not(.dark)) .sidebar-wrap[data-sidebar-expanded] .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: var(--mf-sb-active) !important;
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
    border-start-end-radius: 8px !important;
    border-end-end-radius: 8px !important;
    box-shadow: inset 3px 0 0 var(--mf-sb-marker) !important;
}

html[dir="rtl"]:is(.dark, :not(.dark)) .sidebar-wrap[data-sidebar-expanded] .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    box-shadow: inset -3px 0 0 var(--mf-sb-marker) !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-group.fi-active .fi-sidebar-group-icon {
    color: var(--mf-sb-ink) !important;
    font-weight: 650;
}

/* Grouped-item guide lines and dividers */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-grouped-border > div,
html:is(.dark, :not(.dark)) .fi-sidebar hr {
    border-color: var(--mf-sb-line) !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-sidebar-item-grouped-border > div:not([class*="bg-primary"]) {
    background: var(--mf-sb-line) !important;
}

/* Counters: neutral pills; only danger (alerts) is red. */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-badge:not(.fi-color-danger) {
    background: var(--mf-sb-pill) !important;
    color: var(--mf-sb-ink) !important;
    --tw-ring-color: transparent !important;
    box-shadow: none !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-badge.fi-color-danger {
    background: #EF4444 !important;
    color: #ffffff !important;
    --tw-ring-color: transparent !important;
    box-shadow: none !important;
}

/* Collapse button and copyright footer */
html:is(.dark, :not(.dark)) .fi-sidebar .fi-icon-btn,
html:is(.dark, :not(.dark)) .fi-sidebar button[aria-label*="sidebar" i] {
    color: var(--mf-sb-text) !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar .fi-icon-btn:hover {
    background: var(--mf-sb-hover) !important;
}

html:is(.dark, :not(.dark)) .fi-sidebar footer,
html:is(.dark, :not(.dark)) .fi-sidebar .medfix-sidebar-copyright,
html:is(.dark, :not(.dark)) .fi-sidebar [class*="copyright"] {
    color: var(--mf-sb-muted) !important;
    border-color: var(--mf-sb-line) !important;
    background: transparent !important;
}

/* ---------------------------------------------------------------- Topbar */
html:not(.dark) {
    --medfix-topbar-bg: #ffffff;
    --medfix-topbar-ink: #0f172a;
    --medfix-topbar-muted: #64748b;
    --medfix-topbar-soft: #f1f5f9;
    --medfix-topbar-line: #e2e8f0;
}

html.dark {
    --bg: #101418;
    --bg-card: #1A2026;
    --bg-2: #222B33;
    --text-1: #E8EDF2;
    --text-2: #A6B1BC;
    --text-3: #94A1AD;
    --border: #34404A;
    --border-2: #43515D;
    --cmms-bg: var(--bg);
    --cmms-surface: var(--bg-card);
    --cmms-surface-elevated: var(--bg-2);
    --cmms-border: var(--border);
    --cmms-text: var(--text-1);
    --cmms-muted: var(--text-2);
    --cmms-faint: var(--text-3);
    --cmms-shadow: 0 1px 2px rgba(0, 0, 0, .16);
    --cmms-shadow-md: 0 4px 12px rgba(0, 0, 0, .2);
    --medfix-topbar-bg: #1A2026;
    --medfix-topbar-ink: #E8EDF2;
    --medfix-topbar-muted: #A6B1BC;
    --medfix-topbar-soft: rgba(255, 255, 255, .06);
    --medfix-topbar-line: #34404A;
}

html:is(.dark, :not(.dark)) .fi-topbar > nav {
    --chrome-bg: var(--medfix-topbar-bg);
    --chrome-ink: var(--medfix-topbar-ink);
    --chrome-muted: var(--medfix-topbar-muted);
    --chrome-line: var(--medfix-topbar-line);
    background: var(--medfix-topbar-bg) !important;
    color: var(--medfix-topbar-ink) !important;
    border-bottom: 1px solid var(--medfix-topbar-line) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

html:is(.dark, :not(.dark)) .fi-topbar .fi-icon-btn,
html:is(.dark, :not(.dark)) .fi-topbar .medfix-topbar-icon,
html:is(.dark, :not(.dark)) .fi-topbar .medfix-topbar-user-chip,
html:is(.dark, :not(.dark)) .fi-topbar .fi-user-menu button,
html:is(.dark, :not(.dark)) .fi-topbar .medfix-action-btn,
html:is(.dark, :not(.dark)) .fi-topbar .medfix-user-trigger {
    color: color-mix(in srgb, var(--medfix-topbar-ink) 82%, transparent) !important;
}

html:is(.dark, :not(.dark)) .fi-topbar .medfix-action-btn:hover,
html:is(.dark, :not(.dark)) .fi-topbar .medfix-user-trigger:hover,
html:is(.dark, :not(.dark)) .fi-topbar .medfix-bell-btn.has-alerts:hover {
    background: var(--medfix-topbar-soft) !important;
}

/* The bell stays a plain icon; the red count badge carries the alert. */
html:is(.dark, :not(.dark)) .fi-topbar .medfix-bell-btn.has-alerts {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html:is(.dark, :not(.dark)) .fi-topbar .medfix-search-box,
html:is(.dark, :not(.dark)) .fi-topbar .medfix-topbar-search input {
    background: color-mix(in srgb, var(--medfix-topbar-soft) 60%, var(--medfix-topbar-bg)) !important;
    border-color: var(--medfix-topbar-line) !important;
    color: var(--medfix-topbar-ink) !important;
}

html:is(.dark, :not(.dark)) .fi-topbar .medfix-search-box:focus-within {
    border-color: var(--medfix-interaction-accent, #32B3B7) !important;
    box-shadow: 0 0 0 3px rgba(50, 179, 183, .14) !important;
}

/* ---------------------------------------------------------------- Table density */
.medfix-mobile-sidebar-close {
    display: none;
}

@media (max-width: 1023px) {
    .medfix-mobile-sidebar-close {
        position: fixed;
        inset-block-start: .5rem;
        inset-inline-start: calc(var(--sidebar-width, 17rem) - 3.25rem);
        z-index: 100;
        display: grid;
        place-items: center;
        inline-size: 44px;
        block-size: 44px;
        border: 1px solid var(--cmms-border);
        border-radius: 6px;
        background: var(--cmms-surface);
        color: var(--cmms-text);
    }
}

/* Medium rows (~48px): roomier than before without losing how many assets fit on screen. */
.fi-ta-table > tbody > tr > td .fi-ta-text,
.fi-ta-table > tbody > tr > td .fi-ta-col-wrp > div,
.fi-ta-table > tbody > tr > td.fi-ta-selection-cell > div,
.fi-ta-table > tbody > tr > td.fi-ta-actions-cell > div {
    padding-block: .72rem;
}

/* ---------------------------------------------------------------- No backdrop filters */
/*
 * The topbar, sidebar and floating sidebar toggle are opaque, so backdrop-filter had no visible
 * effect, but toggling a backdrop-filter layer (the toggle appears on sidebar hover) made Chrome
 * repaint the whole dark page with a different background shade on every mouse in/out.
 */
html:is(.dark, :not(.dark)) .fi-topbar > nav,
html:is(.dark, :not(.dark)) .fi-sidebar,
html:is(.dark, :not(.dark)) .fi-sidebar-header,
html:is(.dark, :not(.dark)) .medfix-floating-sidebar-toggle {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:is(.dark, :not(.dark)) .medfix-floating-sidebar-toggle {
    background: color-mix(in srgb, var(--medfix-sidebar-surface, var(--medfix-user-accent)) 82%, #ffffff) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    color: #ffffff !important;
}

html.dark .medfix-floating-sidebar-toggle {
    background: var(--medfix-sidebar-surface-dark, #20262D) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: #D2DCE3 !important;
}

html[data-medfix-theme="ice_teal"]:not(.dark) .medfix-floating-sidebar-toggle {
    background: #D2E8EF !important;
    color: #0C3765 !important;
    border-color: #B8D5DF !important;
}

/* Platform destinations must remain readable when their translated labels wrap. */
.fi-panel-super-admin .fi-sidebar .fi-sidebar-item-label{white-space:normal;text-overflow:clip;overflow:visible;overflow-wrap:anywhere;line-height:1.4}
.fi-panel-super-admin .fi-sidebar .fi-sidebar-item-button{min-height:44px;align-items:center}