/* ============================================================
   Office — modern layer
   ------------------------------------------------------------
   Loaded LAST, after office.css / office-color.css / shell.css,
   so it wins without any of them being edited. Purely additive:
   remove this one <link> and the app returns to its old look.

   Contents
     1. Tokens        — radii, shadows, spacing, fluid type
     2. Shell         — sidebar, glass topbar, canvas
     3. Filament      — tables, forms, buttons, modals, dropdowns
     4. .of- upgrades — cards, stats, tasks, chat, badges
     5. Responsive    — fluid grids, phone layout, safe areas
     6. Motion        — entrances, reduced-motion opt-out
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
    /* Rounder. The old 14px read as "slightly softened box";
       20px reads as intentional. Small controls keep 12px so
       they do not turn into pills. */
    --of-radius:     20px;
    --of-radius-sm:  12px;
    --of-radius-lg:  26px;
    --of-radius-pill: 999px;

    /* Layered shadows instead of one flat drop. Two offsets at
       low opacity read as depth; a single one reads as a border. */
    --of-shadow:     0 1px 2px rgba(16,24,40,.04),
                     0 4px 12px -2px rgba(16,24,40,.06);
    --of-shadow-md:  0 2px 4px rgba(16,24,40,.04),
                     0 12px 28px -6px rgba(16,24,40,.10);
    --of-shadow-lg:  0 4px 8px rgba(16,24,40,.04),
                     0 24px 48px -12px rgba(16,24,40,.16);
    --of-ring:       0 0 0 4px rgba(14,159,110,.13);

    /* Slightly warmer canvas, cooler borders — more separation
       between the page and the cards sitting on it. */
    --of-bg:         #f4f6f8;
    --of-border:     #e8ebef;
    --of-border-2:   #d8dde4;

    --of-space:      20px;
    --of-space-sm:   14px;
    --of-space-lg:   28px;

    --of-ease:       cubic-bezier(.4, 0, .2, 1);
    --of-ease-out:   cubic-bezier(.16, 1, .3, 1);
}

.dark {
    --of-border:    #222a35;
    --of-border-2:  #2d3746;
    --of-shadow:    0 1px 2px rgba(0,0,0,.30), 0 4px 12px -2px rgba(0,0,0,.36);
    --of-shadow-md: 0 2px 4px rgba(0,0,0,.30), 0 12px 28px -6px rgba(0,0,0,.44);
    --of-shadow-lg: 0 4px 8px rgba(0,0,0,.30), 0 24px 48px -12px rgba(0,0,0,.55);
    --of-ring:      0 0 0 4px rgba(14,159,110,.22);
}

/* Fluid type. Scales between phone and desktop without any
   breakpoint doing the work. */
.of-h1 { font-size: clamp(20px, 1.1rem + 1vw, 28px) !important; letter-spacing: -.025em !important; }
.of-h2 { font-size: clamp(15px, .9rem + .2vw, 17px) !important; letter-spacing: -.012em !important; }
.of-stat-value { font-size: clamp(21px, 1.2rem + .8vw, 28px) !important; letter-spacing: -.03em !important; }

/* Tabular numerals everywhere a figure appears, so columns of
   numbers line up instead of jittering. */
.of-stat-value,
.of-col-count,
.of-rail-count,
.of-donut-value,
.of-num { font-variant-numeric: tabular-nums; }


/* ============================================================
   2. SHELL
   ============================================================ */

/* Sidebar: inset from the edges so the dark panel floats on the
   canvas rather than butting against the viewport. */
@media (min-width: 1024px) {
    .fi-sidebar,
    aside.fi-sidebar {
        margin: 12px 0 12px 12px !important;
        height: calc(100dvh - 24px) !important;
        border-radius: var(--of-radius) !important;
        overflow: hidden !important;
        box-shadow: var(--of-shadow-md) !important;
    }

    .fi-main-ctn { padding-left: 4px !important; }
}

.fi-sidebar-item-btn {
    border-radius: var(--of-radius-sm) !important;
    margin-bottom: 2px !important;
}

/* Active item gets a left rail rather than a full-width slab —
   easier to scan down a long nav. */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar-item-active .fi-sidebar-item-btn {
    position: relative !important;
    background: rgba(255,255,255,.09) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn::before,
.fi-sidebar-item-active .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    left: -12px; top: 50%;
    width: 3px; height: 18px;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    background: var(--of-primary);
}

/* Topbar: translucent and blurred, so content scrolling under it
   stays legible instead of disappearing behind a flat bar. */
.fi-topbar > nav,
.fi-topbar {
    background: rgba(255,255,255,.78) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--of-border) !important;
    box-shadow: none !important;
}
.dark .fi-topbar > nav,
.dark .fi-topbar { background: rgba(11,15,22,.76) !important; }

@supports not (backdrop-filter: blur(1px)) {
    .fi-topbar > nav, .fi-topbar { background: var(--of-surface) !important; }
}

.fi-main { padding-inline: clamp(14px, 2vw, 30px) !important; }


/* ============================================================
   3. FILAMENT COMPONENTS
   These screens — Employees, Projects, Tasks, Attendance — were
   left on stock styling. This is the part that closes the gap
   between them and the custom pages.
   ============================================================ */

/* --- panels, sections, tables --- */
.fi-section,
.fi-wi,
.fi-ta,
.fi-fo-component-ctn > .fi-section {
    border-radius: var(--of-radius) !important;
    border-color: var(--of-border) !important;
    box-shadow: var(--of-shadow) !important;
}

/*
 * Only the table gets clipped.
 *
 * overflow:hidden used to apply to every section, which was fine until
 * forms were grouped into sections — a select near the bottom of a
 * section had its dropdown sliced off at the section border. Tables need
 * the clip for their rounded corners; forms must never have it.
 */
.fi-ta { overflow: hidden; }

.fi-section,
.fi-wi,
.fi-fo-component-ctn > .fi-section { overflow: visible !important; }

/* Same reason one level up: the modal body scrolls, and an open dropdown
   must be allowed to spill past the section it lives in. */
.fi-modal-window,
.fi-modal-content,
.fi-fo-component-ctn { overflow: visible; }

/* The scroll container itself still has to scroll — just without
   clipping children horizontally. */
.fi-modal-content { overflow-y: auto; }

/* Room underneath the last field so a dropdown opening downward has
   somewhere to go instead of forcing an awkward scroll. */
.fi-modal-content > .fi-modal-body,
.fi-modal-content form { padding-bottom: 40px; }

.fi-ta-header,
.fi-section-header { padding: 16px 20px !important; }

.fi-ta-header-cell {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

.fi-ta-row { transition: background .14s var(--of-ease); }
.fi-ta-row:hover { background: var(--of-bg) !important; }

.fi-ta-cell { padding-block: 13px !important; }

/* Rounded corners on a table only work if the first and last
   cells of the first and last rows are rounded too. */
.fi-ta-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--of-radius); }
.fi-ta-table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--of-radius); }

/* --- form controls --- */
.fi-input-wrp,
.fi-select-input-wrp,
.fi-fo-field-wrp .fi-input-wrp {
    border-radius: var(--of-radius-sm) !important;
    transition: box-shadow .15s var(--of-ease), border-color .15s var(--of-ease);
}
.fi-input-wrp:focus-within {
    box-shadow: var(--of-ring) !important;
    border-color: var(--of-primary) !important;
}

/* --- buttons --- */
.fi-btn {
    border-radius: var(--of-radius-sm) !important;
    font-weight: 600 !important;
    transition: transform .12s var(--of-ease), box-shadow .15s var(--of-ease), background .15s var(--of-ease) !important;
}
.fi-btn:active { transform: translateY(1px); }
.fi-btn.fi-color-primary { box-shadow: 0 1px 2px rgba(16,24,40,.10); }

.fi-icon-btn { border-radius: var(--of-radius-sm) !important; }

/* --- badges, dropdowns, modals, notifications --- */
.fi-badge { border-radius: var(--of-radius-pill) !important; font-weight: 600 !important; }

.fi-dropdown-panel {
    border-radius: var(--of-radius) !important;
    box-shadow: var(--of-shadow-lg) !important;
    border: 1px solid var(--of-border) !important;
    overflow: hidden;
}
.fi-dropdown-list-item { border-radius: 9px !important; }

.fi-modal-window {
    border-radius: var(--of-radius-lg) !important;
    box-shadow: var(--of-shadow-lg) !important;
}

.fi-no-notification { border-radius: var(--of-radius) !important; box-shadow: var(--of-shadow-lg) !important; }

.fi-pagination .fi-btn { border-radius: var(--of-radius-sm) !important; }

.fi-tabs { border-radius: var(--of-radius-pill) !important; }
.fi-tabs-item { border-radius: var(--of-radius-pill) !important; }


/* ============================================================
   4. .of- COMPONENT UPGRADES
   ============================================================ */

.of-card {
    border-radius: var(--of-radius);
    box-shadow: var(--of-shadow);
    transition: box-shadow .2s var(--of-ease), border-color .2s var(--of-ease);
}
.of-card-head { padding: 16px 20px; }
.of-card-body { padding: 18px 20px; }
.of-card-pad  { padding: 20px; }

/* Stat cards get a soft top highlight so a row of them reads as
   a dashboard rather than four identical rectangles. */
.of-stat {
    position: relative;
    padding: 18px 20px;
    overflow: hidden;
}
.of-stat::after {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--of-primary), transparent 70%);
    opacity: .5;
}
.of-stat-label { letter-spacing: .06em; }

.of-task {
    border-radius: var(--of-radius-sm);
    padding: 14px;
    transition: transform .16s var(--of-ease), box-shadow .16s var(--of-ease), border-color .16s var(--of-ease);
}
.of-task:hover { transform: translateY(-1px); box-shadow: var(--of-shadow-md); }
.of-task.is-open { box-shadow: var(--of-ring); }

.of-col { border-radius: var(--of-radius); padding: 14px; }

.of-btn {
    border-radius: var(--of-radius-sm);
    transition: transform .12s var(--of-ease), background .15s var(--of-ease), box-shadow .15s var(--of-ease);
}
.of-btn:active:not(:disabled) { transform: translateY(1px); }
.of-btn-primary { box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.of-btn:focus-visible { outline: none; box-shadow: var(--of-ring); }

.of-input, .of-select, .of-textarea { border-radius: var(--of-radius-sm); }
.of-input:focus, .of-select:focus, .of-textarea:focus { box-shadow: var(--of-ring); }

.of-badge { padding: 4px 10px; }

.of-av { box-shadow: 0 0 0 2px var(--of-surface); }

/* Chat bubbles: one squared corner on the sender's side is what
   makes a bubble look like a bubble rather than a lozenge. */
.of-chat { border-radius: var(--of-radius); }
.of-bubble { border-radius: 18px; padding: 10px 14px; }
.of-bubble.is-mine   { border-bottom-right-radius: 6px; }
.of-bubble.is-theirs { border-bottom-left-radius: 6px; }
.of-thread { border-radius: var(--of-radius-sm); margin: 2px 6px; width: auto; }

.of-proof, .of-chip, .of-tab { border-radius: var(--of-radius-sm); }
.of-tab { border-radius: var(--of-radius-pill); }

/* Horizontally scrolling tables get an edge fade so it is
   obvious there is more to the right. */
.of-table-scroll {
    border-radius: var(--of-radius-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.of-table-scroll:not([data-scrollable]) { mask-image: none; }

.of-empty { padding: 44px 20px; }


/* ============================================================
   5. RESPONSIVE
   ============================================================ */

/* Fluid grids. auto-fit means the column count follows the space
   available, so these keep working at widths nobody tested. */
.of-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.of-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.of-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

@media (max-width: 1100px) {
    .of-grid-53, .of-grid-21 { grid-template-columns: 1fr; }
    .of-sticky, .of-rail { position: static; }
}

@media (max-width: 640px) {
    :root {
        --of-radius:    16px;
        --of-radius-lg: 20px;
        --of-space:     14px;
    }

    .fi-main { padding-inline: 12px !important; }

    .of-card-head, .of-card-body, .of-card-pad, .of-stat { padding: 14px 16px; }

    /* Full-width tap targets. A 44px minimum is the difference
       between usable and irritating on a phone. */
    .of-btn { width: 100%; min-height: 44px; }
    .of-row-between .of-btn { width: auto; }
    .of-tab, .of-chip { min-height: 38px; }

    .of-board { gap: 12px; }
    .of-bubble { max-width: 86%; }

    .of-table { min-width: 520px; }
}

/* Notches and home indicators on phones. */
@supports (padding: max(0px)) {
    .fi-main { padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; }
    .of-chat-input { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Chat is a two-pane layout that has to collapse to one on
   phones, otherwise neither pane is usable. */
@media (max-width: 720px) {
    .of-chat { height: calc(100dvh - 190px); min-height: 420px; }
}

@media print {
    .fi-sidebar, .fi-topbar, .of-btn, .of-tabs { display: none !important; }
    .of-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
}


/* ============================================================
   6. MOTION
   ============================================================ */

@keyframes of-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.fi-main .fi-section,
.fi-main .fi-wi,
.of-card {
    animation: of-rise .32s var(--of-ease-out) both;
}

/* Anything that moves, stops moving, for people who asked for
   that in their OS settings. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .of-dot.is-live { animation: none !important; }
}