/*
 * Eight OS look: Apple-style surfaces on a soft coloured backdrop.
 *
 * Everything that holds content (cards, tables, menus, dialogs, bars) is a
 * sheet of frosted glass: translucent, blurred, with a hairline highlight and
 * a soft shadow. Controls follow iOS: pill buttons, filled inputs, segmented
 * tabs. Loaded after Filament's styles and eight.css, and overrides both.
 */

:root {
    --e8-bg: #f2f2f7;
    --e8-glass: rgb(255 255 255 / .62);
    --e8-glass-strong: rgb(255 255 255 / .94);
    --e8-stroke: rgb(255 255 255 / .75);
    --e8-hairline: rgb(60 60 67 / .12);
    --e8-fill: rgb(118 118 128 / .12);
    --e8-fill-strong: rgb(118 118 128 / .2);
    --e8-raised: #ffffff;
    --e8-label-2: rgb(60 60 67 / .62);
    --e8-shadow: 0 1px 1px rgb(0 0 0 / .03), 0 12px 32px rgb(0 0 0 / .07);
    --e8-shadow-pop: 0 2px 6px rgb(0 0 0 / .06), 0 24px 60px rgb(0 0 0 / .18);
    --e8-blur: saturate(180%) blur(28px);
    --e8-radius: 1.35rem;
    --e8-radius-control: .8rem;
    --e8-tint: 212 98 42;
    --e8-glow-1: rgb(255 159 64 / .38);
    --e8-glow-2: rgb(255 99 146 / .24);
    --e8-glow-3: rgb(90 160 255 / .26);
}

.dark {
    --e8-bg: #000000;
    --e8-glass: rgb(36 36 40 / .56);
    --e8-glass-strong: rgb(40 40 44 / .94);
    --e8-stroke: rgb(255 255 255 / .1);
    --e8-hairline: rgb(255 255 255 / .09);
    --e8-fill: rgb(118 118 128 / .22);
    --e8-fill-strong: rgb(118 118 128 / .34);
    --e8-raised: rgb(99 99 102 / .7);
    --e8-label-2: rgb(235 235 245 / .6);
    --e8-shadow: 0 1px 1px rgb(0 0 0 / .2), 0 14px 40px rgb(0 0 0 / .45);
    --e8-shadow-pop: 0 24px 70px rgb(0 0 0 / .7);
    --e8-glow-1: rgb(212 98 42 / .34);
    --e8-glow-2: rgb(175 82 222 / .2);
    --e8-glow-3: rgb(10 132 255 / .2);
}

/* San Francisco on Apple devices (it carries SF Arabic); Tajawal elsewhere. */
html.fi {
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Arabic', 'Tajawal', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---- Backdrop: soft light behind the glass ---- */
.fi-body { background: var(--e8-bg) !important; }
.fi-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42rem 34rem at 88% -6%, var(--e8-glow-1), transparent 62%),
        radial-gradient(38rem 32rem at 4% 38%, var(--e8-glow-3), transparent 64%),
        radial-gradient(40rem 30rem at 70% 108%, var(--e8-glow-2), transparent 62%);
}
.fi-layout, .fi-main-ctn, .fi-simple-layout { background: transparent !important; }

/* ---- The glass sheet ---- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-simple-main,
.fi-pagination,
.e8-col,
.e8-cal,
.e8-push {
    background: var(--e8-glass) !important;
    -webkit-backdrop-filter: var(--e8-blur);
    backdrop-filter: var(--e8-blur);
    border: 1px solid var(--e8-stroke) !important;
    border-radius: var(--e8-radius) !important;
    box-shadow: var(--e8-shadow) !important;
}
/* A row of dashboard numbers with a title: the title is a plain label and
   only the number tiles are glass, not a sheet wrapped around sheets. */
.fi-section:has(.fi-wi-stats-overview-stat) {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent !important;
    box-shadow: none !important;
}
.fi-section:has(.fi-wi-stats-overview-stat) > .fi-section-header { padding: 0 .35rem .75rem; border: 0 !important; }
.fi-section:has(.fi-wi-stats-overview-stat) > .fi-section-content-ctn > .fi-section-content { padding: 0; }

/* A sheet inside a sheet stays flat, or the blur stacks up and turns muddy. */
.fi-section .fi-section,
.fi-section .fi-ta-ctn,
.fi-modal-window .fi-section,
.fi-modal-window .fi-ta-ctn {
    background: var(--e8-fill) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent !important;
    box-shadow: none !important;
}
.fi-section-header { border-color: var(--e8-hairline) !important; }
.fi-section-header-heading { font-weight: 700; letter-spacing: -.01em; }

/* Things that float above the page: thicker glass, deeper shadow. */
.fi-dropdown-panel,
.fi-modal-window,
.fi-no-notification,
.fi-global-search-results-ctn,
.e8-sheet {
    background: var(--e8-glass-strong) !important;
    -webkit-backdrop-filter: saturate(190%) blur(40px);
    backdrop-filter: saturate(190%) blur(40px);
    border: 1px solid var(--e8-stroke) !important;
    border-radius: 1.5rem !important;
    box-shadow: var(--e8-shadow-pop) !important;
}
.fi-dropdown-panel { border-radius: 1.1rem !important; }
.fi-dropdown-list-item { border-radius: .7rem !important; }
.fi-modal-close-overlay { background: rgb(0 0 0 / .28) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fi-modal-header, .fi-modal-footer { background: transparent !important; border-color: var(--e8-hairline) !important; }
.fi-modal-heading { font-weight: 700; letter-spacing: -.01em; }

/* ---- Side menu and top bar ---- */
.fi-sidebar {
    background: var(--e8-glass) !important;
    -webkit-backdrop-filter: var(--e8-blur);
    backdrop-filter: var(--e8-blur);
    border-inline-end: 1px solid var(--e8-hairline);
}
.fi-sidebar-header { background: transparent !important; box-shadow: none !important; }
.fi-sidebar-group-label { font-size: .72rem; font-weight: 600; color: var(--e8-label-2) !important; }
.fi-sidebar-item-btn { border-radius: .8rem !important; padding-block: .55rem; transition: background-color .15s ease; }
.fi-sidebar-item-btn:hover { background: var(--e8-fill) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: rgb(var(--e8-tint) / .14) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-label { font-weight: 700; }
.fi-topbar {
    background: var(--e8-glass) !important;
    -webkit-backdrop-filter: var(--e8-blur);
    backdrop-filter: var(--e8-blur);
    box-shadow: none !important;
    border-bottom: 1px solid var(--e8-hairline);
}

/* ---- Type ---- */
.fi-header-heading { font-weight: 800; letter-spacing: -.022em; }
.fi-header-subheading, .fi-section-header-description { color: var(--e8-label-2) !important; }
.fi-wi-stats-overview-stat-label { font-weight: 500; color: var(--e8-label-2) !important; }
.fi-wi-stats-overview-stat-value { font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---- Controls ---- */
.fi-btn { border-radius: 999px !important; font-weight: 600; box-shadow: none !important; transition: transform .12s ease, filter .15s ease, background-color .15s ease; }
.fi-btn:active { transform: scale(.97); }
.fi-btn:not(.fi-color) { background: var(--e8-fill) !important; }
.fi-btn:not(.fi-color):hover { background: var(--e8-fill-strong) !important; }
.fi-btn.fi-color:hover { filter: brightness(1.06); }
/* Coloured buttons: one solid shade in both themes, with white text that stays readable on it. */
.fi-btn.fi-color:not(.fi-outlined):not(.fi-color-gray) { background-color: var(--color-600) !important; color: #fff !important; }
.fi-btn.fi-color:not(.fi-outlined):not(.fi-color-gray) svg { color: #fff !important; }
.fi-btn.fi-color-gray { background: var(--e8-fill) !important; color: inherit !important; }
.fi-icon-btn { border-radius: 999px !important; }
.fi-badge { border-radius: 999px !important; box-shadow: none !important; font-weight: 600; }

.fi-input-wrp {
    background: var(--e8-fill) !important;
    border-radius: var(--e8-radius-control) !important;
    box-shadow: none !important;
    transition: box-shadow .15s ease, background-color .15s ease;
}
.fi-input-wrp:focus-within { background: var(--e8-glass-strong) !important; box-shadow: 0 0 0 4px rgb(var(--e8-tint) / .22) !important; }
.fi-fo-field-label-content { font-weight: 600; }
.fi-checkbox-input, .fi-radio-input { box-shadow: inset 0 0 0 1.5px var(--e8-fill-strong) !important; }

/* Tabs become an iOS segmented control */
.fi-tabs { background: var(--e8-fill) !important; border-radius: .85rem !important; padding: 3px !important; gap: 2px !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: var(--e8-blur); backdrop-filter: var(--e8-blur); }
.fi-tabs-item { border-radius: .65rem !important; transition: background-color .15s ease; }
.fi-tabs-item.fi-active { background: var(--e8-raised) !important; box-shadow: 0 1px 3px rgb(0 0 0 / .14), 0 0 0 .5px rgb(0 0 0 / .04) !important; }
.fi-tabs-item.fi-active .fi-tabs-item-label { font-weight: 700; }
.e8-seg { background: var(--e8-fill); border: 0 !important; border-radius: .85rem; padding: 3px; gap: 2px; overflow: visible; }
.e8-seg button { border-radius: .65rem; font-weight: 500; }
.e8-seg button.is-active { background: var(--e8-raised); color: inherit; font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.e8-select, .e8-ask input { background-color: var(--e8-fill) !important; border: 0 !important; border-radius: var(--e8-radius-control); }

/* ---- Tables: no boxes, only hairlines ---- */
.fi-ta-content-ctn, .fi-ta-table, .fi-ta-table thead, .fi-ta-table thead tr, .fi-ta-header-ctn, .fi-ta-header-toolbar, .fi-ta-footer-ctn { background: transparent !important; }
.fi-ta-header-cell { font-size: .78rem; font-weight: 600; color: var(--e8-label-2) !important; }
.fi-ta-table tbody tr, .fi-ta-row { border-color: var(--e8-hairline) !important; transition: background-color .12s ease; }
.fi-ta-table tbody tr:hover { background: var(--e8-fill) !important; }
.fi-ta-table > :not(:last-child), .fi-ta-content-ctn, .fi-ta-header-ctn, .fi-ta-header-toolbar { border-color: var(--e8-hairline) !important; }
.fi-ta-empty-state-icon-bg { background: var(--e8-fill) !important; }
.e8-table th { border-color: var(--e8-hairline); color: var(--e8-label-2); font-size: .78rem; }
.e8-table td { border-color: var(--e8-hairline); }
.e8-table tfoot td { border-color: var(--e8-fill-strong); }

/* ---- Our own screens ---- */
.e8-col { padding: .7rem; }
.e8-col.is-over { outline-color: rgb(var(--e8-tint) / .8); }
.e8-count { background: var(--e8-fill); color: var(--e8-label-2); }
.e8-card { background: var(--e8-glass-strong) !important; border: 1px solid var(--e8-stroke) !important; border-inline-start: 4px solid var(--gray-300) !important; border-radius: 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: transform .12s ease, box-shadow .15s ease; }
.dark .e8-card { border-inline-start-color: var(--gray-600) !important; }
.e8-card.p-high { border-inline-start-color: #ff9f0a !important; }
.e8-card.p-urgent { border-inline-start-color: #ff453a !important; }
.e8-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgb(0 0 0 / .1); }
.e8-moves button { background: var(--e8-fill); border: 0 !important; border-radius: 999px; font-weight: 600; }
.e8-cal { overflow: hidden; }
.e8-cal-dow { background: transparent !important; color: var(--e8-label-2); }
.e8-day { border-color: var(--e8-hairline) !important; }
.e8-chip { background: var(--e8-fill); border-radius: .45rem; }
.e8-bubble { background: var(--e8-fill) !important; border-radius: 1.25rem; border-end-start-radius: .4rem; }
.e8-bubble.is-user { background: rgb(var(--e8-tint)) !important; border-radius: 1.25rem; border-end-end-radius: .4rem; }
.e8-push { border-color: rgb(var(--e8-tint) / .35) !important; margin-top: .9rem; }
/* "Add to home screen" is for phones and tablets only */
@media (min-width: 1024px) { .e8-install { display: none !important; } }
/* The home screen opens with the greeting, not a page title */
.fi-page:has(.e8-greeting) .fi-header { display: none; }
/* On a phone the side menu covers the page, so it must not show the page through it */
@media (max-width: 1023px) { .fi-sidebar { background: var(--e8-glass-strong) !important; } }
.e8-push button { border-radius: 999px; border: 0; background: var(--e8-fill); font-weight: 600; }
.e8-greeting-hello { font-weight: 800; letter-spacing: -.022em; }
.e8-brand b { border-radius: .65rem; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }

/* The phone bar and its sheet use the same glass */
.e8-tabbar-row { background: var(--e8-glass-strong) !important; border: 1px solid var(--e8-stroke) !important; -webkit-backdrop-filter: saturate(190%) blur(30px); backdrop-filter: saturate(190%) blur(30px); box-shadow: var(--e8-shadow-pop) !important; }
.e8-tab.is-active i { background: rgb(var(--e8-tint) / .16) !important; }

/* Sign-in card */
.fi-simple-main { padding: 2.25rem !important; }
.fi-simple-header-heading { font-weight: 800; letter-spacing: -.022em; }

/* Where blur is unsupported, fall back to nearly solid sheets so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --e8-glass: rgb(255 255 255 / .94); --e8-glass-strong: rgb(255 255 255 / .98); }
    .dark { --e8-glass: rgb(30 30 32 / .96); --e8-glass-strong: rgb(40 40 44 / .98); }
}

/* People who ask their device for less transparency get solid sheets too. */
@media (prefers-reduced-transparency: reduce) {
    :root { --e8-glass: #ffffff; --e8-glass-strong: #ffffff; }
    .dark { --e8-glass: #1c1c1e; --e8-glass-strong: #2c2c2e; }
}