/* ==========================================================================
   K2 ERP — admin theme
   --------------------------------------------------------------------------
   Colours, font and sidebar width come from Business Settings > Appearance
   and are injected as CSS variables in <head>. Values here are fallbacks for
   before the settings row exists.

   Signature: the active menu item is marked with an OMR bubble that fills in,
   matching the four-bubble logo mark.
   ========================================================================== */

:root {
    /* Overridden from Business Settings */
    --k2-ink-800: #18203C;
    --k2-ink-900: #10162B;
    --k2-on-ink: #B8C2DC;
    --k2-paper: #F3F5FA;
    --k2-topbar: #FFFFFF;
    --k2-paper-raised: #FFFFFF;
    --k2-heading: #0F172A;
    --k2-accent: #E8A33D;
    --k2-accent-soft: rgba(232, 163, 61, .16);
    --k2-accent-glow: rgba(232, 163, 61, .40);
    --k2-sidebar-w: 16rem;
    --k2-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

    /* Derived */
    --k2-ink-line: rgba(255, 255, 255, .08);
    --k2-on-ink-strong: #FFFFFF;
    --k2-rule: #E4E8F1;
    --k2-muted: #64748B;

    /* Density */
    --k2-group-gap: .1rem;
    --k2-item-gap: .1rem;
    --k2-item-pad-y: .44rem;
    --k2-item-pad-x: .65rem;

    /* Motion */
    --k2-ease: cubic-bezier(.4, 0, .2, 1);
    --k2-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   0. Type
   ========================================================================== */

.fi-body,
.fi-body input,
.fi-body select,
.fi-body textarea,
.fi-body button,
.fi-body .fi-badge,
.fi-body .fi-session-switcher select {
    font-family: var(--k2-font-body) !important;
}

.fi-header-heading {
    font-weight: 700 !important;
    font-size: 1.7rem !important;
    letter-spacing: -.028em !important;
    color: var(--k2-heading) !important;
}

.fi-section-header-heading,
.fi-modal-heading,
.fi-simple-header-heading {
    font-weight: 650 !important;
    letter-spacing: -.015em !important;
    color: var(--k2-heading) !important;
}

.fi-badge {
    font-size: .72rem !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding-inline: .55rem !important;
}

.fi-breadcrumbs,
.fi-breadcrumbs-item-label {
    font-size: .76rem !important;
    font-weight: 500 !important;
    color: var(--k2-muted) !important;
}

/* ==========================================================================
   1. Canvas
   ========================================================================== */

.fi-body,
.fi-layout { background-color: var(--k2-paper) !important; }

.fi-main-ctn {
    background-color: transparent !important;
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .038) 1px, transparent 0);
    background-size: 22px 22px;
}

.fi-main { background-color: transparent !important; }

.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-header {
    background-color: var(--k2-ink-900) !important;
    background-image: linear-gradient(168deg, var(--k2-ink-800) 0%, var(--k2-ink-900) 68%) !important;
    border-right-color: transparent !important;
}

.fi-sidebar-open { width: var(--k2-sidebar-w) !important; }

.fi-sidebar { box-shadow: 6px 0 24px -14px rgba(16, 22, 43, .5); }

.fi-sidebar-header {
    height: 4rem !important;
    border-bottom: 1px solid var(--k2-ink-line) !important;
    box-shadow: none !important;
    padding-inline: .9rem !important;
}

.fi-sidebar-header .fi-logo {
    color: var(--k2-on-ink-strong) !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    letter-spacing: -.02em !important;
}

.fi-sidebar-header img { max-height: 2.35rem; width: auto; object-fit: contain; }

.fi-topbar > nav {
    background-color: var(--k2-topbar) !important;
    border-bottom: 1px solid var(--k2-rule) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

/* ==========================================================================
   2. Sidebar
   --------------------------------------------------------------------------
   IMPORTANT: Filament puts the group spacing on ul.fi-sidebar-nav-groups,
   not on the outer nav.fi-sidebar-nav. Both are targeted below — styling only
   the outer element silently does nothing, which is what caused the big gaps.
   ========================================================================== */

.fi-sidebar-nav {
    padding-inline: .55rem !important;
    padding-block: .6rem !important;
    gap: 0 !important;
}

.fi-sidebar-nav-groups,
.fi-sidebar-nav > ul {
    gap: var(--k2-group-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fi-sidebar-group {
    gap: .05rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* A collapsed group must occupy zero height. */
.fi-sidebar-group-items {
    gap: var(--k2-item-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}

.fi-sidebar-group-items[style*="height: 0"],
.fi-sidebar-group-items[style*="height:0"] {
    height: 0 !important;
    padding-block: 0 !important;
    margin-block: 0 !important;
    border: 0 !important;
}

/* Nothing in the sidebar may render invisible. */
.fi-sidebar-nav .fi-sidebar-item,
.fi-sidebar-nav .fi-sidebar-item-button,
.fi-sidebar-nav .fi-sidebar-item-label {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---- Parent menu (group heading) ---------------------------------------- */

.fi-sidebar-group-label,
.fi-sidebar-group-button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    font-size: .795rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    color: var(--k2-on-ink-strong) !important;
    opacity: .96;
   /*  padding-block: .42rem !important;*/
    /* Out to .2rem: a heading has to start LEFT of what it heads, or the eye
       reads it as one more row in the list. Items step in below. */
    padding-inline-start: .2rem !important;
    padding-inline-end: .65rem !important;
 /*   margin: .18rem 0 0 0 !important;*/
    border-radius: .5rem !important;
    cursor: pointer;
    transition: background-color .16s var(--k2-ease);
}

.fi-sidebar-group-button:hover { background-color: rgba(255, 255, 255, .07) !important; }

.fi-sidebar-group-label::before,
.fi-sidebar-group-button > span:first-child::before {
    content: '';
    display: inline-block;
    flex: none;
    width: .8rem;
    height: 2px;
    margin-inline-end: .45rem;
    vertical-align: middle;
    border-radius: 999px;
    background: var(--k2-accent);
    opacity: .9;
}

.fi-sidebar-nav-groups > .fi-sidebar-group:first-child .fi-sidebar-group-label,
.fi-sidebar-nav-groups > .fi-sidebar-group:first-child .fi-sidebar-group-button {
    margin-top: 0 !important;
}

.fi-sidebar-group-collapse-button {
    margin-inline-start: auto !important;
    color: var(--k2-on-ink) !important;
    opacity: .5;
    transition: opacity .16s var(--k2-ease);
}

.fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button { opacity: 1; }

/* ---- Items --------------------------------------------------------------- */

.fi-sidebar-item-button {
    position: relative;
    padding-block: var(--k2-item-pad-y) !important;
    padding-inline: var(--k2-item-pad-x) !important;
    gap: .5rem !important;
    border-radius: .5rem !important;
    color: var(--k2-on-ink) !important;
    transition: background-color .18s var(--k2-ease), color .18s var(--k2-ease);
}

.fi-sidebar-group-items .fi-sidebar-item-button { margin-inline-start: .95rem !important; }

/* Collapsed to icons an indent pushes them off centre, and the dash would sit
   on the rail. */
.fi-sidebar-collapsed .fi-sidebar-group-items .fi-sidebar-item-button { margin-inline-start: 0 !important; }
.fi-sidebar-collapsed .fi-sidebar-group-label,
.fi-sidebar-collapsed .fi-sidebar-group-button { padding-inline-start: .65rem !important; }

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

.fi-sidebar-item-icon { width: 1.08rem !important; height: 1.08rem !important; }

.fi-sidebar-item-label {
    font-size: .85rem !important;
    line-height: 1.1rem !important;
    font-weight: 500 !important;
}

/* ---- Signature: the OMR bubble ------------------------------------------ */

.fi-sidebar-nav .fi-sidebar-item-button::before {
    content: '';
    flex: none;
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .22);
    transition: background-color .22s var(--k2-ease-out),
                border-color .22s var(--k2-ease-out),
                box-shadow .22s var(--k2-ease-out),
                transform .28s var(--k2-ease-out);
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, .07) !important;
    color: var(--k2-on-ink-strong) !important;
}

.fi-sidebar-item-button:hover::before {
    border-color: var(--k2-accent);
    transform: scale(1.18);
}

.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgba(255, 255, 255, .09) !important;
    color: var(--k2-on-ink-strong) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.fi-sidebar-item-active > .fi-sidebar-item-button::before {
    background-color: var(--k2-accent);
    border-color: var(--k2-accent);
    box-shadow: 0 0 0 3px var(--k2-accent-soft);
    animation: k2-bubble-fill .42s var(--k2-ease-out) both;
}

@keyframes k2-bubble-fill {
    0%   { transform: scale(.35); box-shadow: 0 0 0 0 var(--k2-accent-soft); }
    55%  { transform: scale(1.35); }
    100% { transform: scale(1);    box-shadow: 0 0 0 3px var(--k2-accent-soft); }
}

.fi-sidebar-collapsed .fi-sidebar-nav .fi-sidebar-item-button::before,
.fi-sidebar-collapsed .fi-sidebar-group-label::before { display: none; }

/* ==========================================================================
   3. Page rhythm — the dead space between topbar, title and content
   ========================================================================== */

.fi-main {
    padding-block: .9rem !important;
    max-width: 100% !important;
}

.fi-page { gap: .75rem !important; }

.fi-breadcrumbs { margin-bottom: 0 !important; }

.fi-header {
    position: relative;
    padding-bottom: .55rem !important;
    margin-bottom: 0 !important;
    gap: .5rem !important;
}

.fi-header::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    height: 3px;
    width: 2.75rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--k2-accent), transparent);
    transform-origin: left center;
    animation: k2-stroke .5s var(--k2-ease-out) both;
}

@keyframes k2-stroke {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

.fi-footer {
    margin-top: .5rem !important;
    padding-block: .25rem !important;
}

/* ==========================================================================
   4. Surfaces
   ========================================================================== */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background-color: var(--k2-paper-raised) !important;
    border: 1px solid var(--k2-rule) !important;
    border-radius: .8rem !important;
    box-shadow: 0 1px 2px rgba(16, 22, 43, .04) !important;
    transition: box-shadow .25s var(--k2-ease);
}

.fi-section:hover,
.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 6px 20px -8px rgba(16, 22, 43, .15) !important;
}

/* Accent tick beside every section title */
.fi-section-header-heading {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
}

.fi-section-header-heading::before {
    content: '';
    flex: none;
    width: .2rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--k2-accent);
}

.fi-page .fi-section,
.fi-page .fi-ta-ctn,
.fi-page .fi-wi-stats-overview-stat { animation: k2-rise .4s var(--k2-ease-out) both; }

@keyframes k2-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   5. Tables
   ========================================================================== */

.fi-ta-header-cell {
    font-size: .73rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    color: var(--k2-muted) !important;
    background-color: #FAFBFE !important;
}

.fi-ta-row { transition: background-color .15s var(--k2-ease), box-shadow .15s var(--k2-ease); }

.fi-ta-row:hover {
    background-color: #F7F9FD !important;
    box-shadow: inset 3px 0 0 var(--k2-accent);
}

/* ==========================================================================
   6. Controls
   ========================================================================== */

.fi-btn {
    border-radius: .55rem !important;
    font-weight: 600 !important;
    transition: transform .14s var(--k2-ease-out), box-shadow .2s var(--k2-ease), opacity .2s var(--k2-ease);
}

.fi-btn:hover { transform: translateY(-1px); }
.fi-btn:active { transform: translateY(0) scale(.985); }

.fi-input,
.fi-input-wrp {
    border-radius: .5rem !important;
    transition: box-shadow .18s var(--k2-ease);
}

.fi-input-wrp:focus-within { box-shadow: 0 0 0 3px var(--k2-accent-soft) !important; }

.fi-body :focus-visible {
    outline: 2px solid var(--k2-accent) !important;
    outline-offset: 2px;
}

.fi-avatar { box-shadow: 0 0 0 2px var(--k2-accent-soft); }

/* ==========================================================================
   7. Interaction feedback  (paired with public/js/k2-ui.js)
   ========================================================================== */

#k2-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s var(--k2-ease);
}

#k2-progress.is-active { opacity: 1; }

#k2-progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, var(--k2-accent), rgb(var(--primary-500, 29 78 216)));
    box-shadow: 0 0 12px var(--k2-accent-glow);
}

#k2-progress.is-active > span { animation: k2-progress-run 9s var(--k2-ease-out) forwards; }

#k2-progress.is-done > span {
    width: 100% !important;
    animation: none;
    transition: width .18s var(--k2-ease);
}

@keyframes k2-progress-run {
    0%   { width: 0; }
    18%  { width: 42%; }
    45%  { width: 68%; }
    75%  { width: 85%; }
    100% { width: 94%; }
}

/* The clicked control shows it is working */
.k2-busy {
    position: relative;
    pointer-events: none;
    opacity: .65;
    cursor: progress !important;
}

.k2-busy::after {
    content: '';
    position: absolute;
    inset-inline-end: .45rem;
    top: 50%;
    width: .85rem;
    height: .85rem;
    margin-top: -.425rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: k2-spin .6s linear infinite;
}

.k2-busy.fi-btn { padding-inline-end: 1.85rem !important; }

@keyframes k2-spin { to { transform: rotate(360deg); } }

.fi-loading-indicator { color: var(--k2-accent) !important; }

/* ==========================================================================
   8. Session switcher
   ========================================================================== */

.fi-session-switcher select { font-weight: 600; border-radius: .5rem !important; }

.fi-session-switcher span[title] { animation: k2-pulse 2.4s ease-in-out infinite; }

@keyframes k2-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--k2-accent-glow); }
    50%      { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); }
}

/* ==========================================================================
   9. Login screen
   ========================================================================== */

.fi-simple-layout {
    background-color: var(--k2-ink-900) !important;
    background-image:
        radial-gradient(circle at 1.5px 1.5px, rgba(255, 255, 255, .07) 1.5px, transparent 0),
        radial-gradient(ellipse 80% 60% at 15% 0%, var(--k2-accent-soft), transparent 62%),
        linear-gradient(160deg, var(--k2-ink-800), var(--k2-ink-900));
    background-size: 26px 26px, 100% 100%, 100% 100%;
    animation: k2-drift 26s linear infinite;
}

@keyframes k2-drift {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 26px 26px, 0 0, 0 0; }
}

.fi-simple-main {
    background-color: var(--k2-paper-raised) !important;
    border-radius: 1rem !important;
    box-shadow: 0 28px 70px -20px rgba(5, 9, 20, .7) !important;
    animation: k2-card-in .5s var(--k2-ease-out) both;
}

@keyframes k2-card-in {
    from { opacity: 0; transform: translateY(14px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fi-simple-layout img { max-height: 3.25rem; width: auto; }

/* ==========================================================================
   10. Dark mode
   ========================================================================== */

.dark .fi-body,
.dark .fi-layout { background-color: #0B1020 !important; }

.dark .fi-main-ctn {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .04) 1px, transparent 0);
}

.dark .fi-topbar > nav {
    background-color: #101728 !important;
    border-bottom-color: var(--k2-ink-line) !important;
}

.dark .fi-section,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat {
    background-color: #141B31 !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.dark .fi-ta-header-cell { background-color: #111729 !important; }
.dark .fi-ta-row:hover { background-color: rgba(255, 255, 255, .03) !important; }
.dark .fi-header-heading,
.dark .fi-section-header-heading { color: #E6EBF7 !important; }

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .fi-simple-layout { animation: none !important; }
    #k2-progress > span,
    .k2-busy::after { animation: none !important; }
    #k2-progress.is-active > span { width: 60%; }
}

/* ==========================================================================
   12. Mobile
   ========================================================================== */

@media (max-width: 1024px) {
    .fi-header-heading { font-size: 1.4rem !important; }
    .fi-main-ctn { background-image: none; }
    .fi-session-switcher select { max-width: 8.5rem; }
}
/* ==========================================================================
   Sticky footer — pinned to the bottom of the viewport
   --------------------------------------------------------------------------
   Filament renders the FOOTER hook as the last child of .fi-main-ctn, which
   is already a flex column. Making .fi-main grow and the footer margin-top:auto
   pushes it down when content is short, and it still sits below the content
   when the page is long.
   ========================================================================== */

:root {
    --k2-footer-h: 3.5rem;   /* fixed height of the bottom bar */
}

.fi-main-ctn {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh;
    min-height: 100dvh;
}

.fi-main {
    flex: 1 0 auto !important;
}

.k2-footer {
    flex: none;
    margin-top: auto !important;
    height: var(--k2-footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding-inline: 1rem;
    border-top: 1px solid var(--k2-rule);
    background-color: var(--k2-paper-raised);
}

.k2-footer img { height: 1.35rem; width: auto; object-fit: contain; opacity: .9; }

.k2-footer p { font-size: .75rem; color: var(--k2-muted); margin: 0; }

.dark .k2-footer {
    background-color: #141B31;
    border-top-color: rgba(255, 255, 255, .07);
}

/* ---- One highlight at a time ---------------------------------------------
   A parent is marked active whenever the open page is anywhere beneath it, so
   the marigold bubble lit on the parent WHILE the child showed its own blue
   indicator - two marks for one page, and neither said which you were on.

   The deepest active item keeps its indicator; every ancestor drops back to an
   unfilled bubble. The faint background stays: that is what shows which branch
   you are inside.

   Two selectors because a submenu is rendered either nested inside the
   parent's <li> or as the list straight after it, depending on the Filament
   build.                                                                    */

.fi-sidebar-item-active:has(.fi-sidebar-item-active) > .fi-sidebar-item-button::before,
.fi-sidebar-item-active:has(+ ul .fi-sidebar-item-active) > .fi-sidebar-item-button::before {
    background-color: transparent !important;
    border-color: rgba(184, 194, 220, .32) !important;
    box-shadow: none !important;
    animation: none !important;
}

.fi-sidebar-item-active:has(.fi-sidebar-item-active) > .fi-sidebar-item-button,
.fi-sidebar-item-active:has(+ ul .fi-sidebar-item-active) > .fi-sidebar-item-button {
    box-shadow: none !important;
}