@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   IronFit CRM — design tokens mirrored from reference/css/main.css
   ========================================================================== */
:root {
    --bd-ff-body: 'Sora', sans-serif;

    --clr-common-white: #fff;
    --clr-common-black: #000;
    --clr-common-heading: #191919;
    --clr-common-body-text: #555555;

    --clr-theme-primary: #f58634;
    --clr-theme-primary-deep: #d96d1a;
    --clr-theme-soft: #fef1e6;

    --clr-text-secondary: #161616;
    --clr-text-muted: #9f9f9f;
    --clr-text-subtle: #808080;

    --clr-bg-canvas: #f7fbfc;
    --clr-bg-surface: #ffffff;
    --clr-bg-dark: #161616;
    --clr-bg-dark-2: #1f1f1f;

    --clr-border-soft: rgba(85, 85, 85, 0.14);
    --clr-border-strong: rgba(85, 85, 85, 0.28);

    --shadow-card: 0 1px 0 rgba(22,22,22,.04), 0 12px 30px -18px rgba(22,22,22,.18);
    --shadow-card-hover: 0 1px 0 rgba(22,22,22,.04), 0 24px 50px -22px rgba(22,22,22,.25);

    --radius-card: 14px;
    --radius-pill: 999px;
    --radius-control: 10px;

    /* Sidebar geometry. Every glyph in the sidebar — brand mark, section icon,
       item icon — is centred on the SAME column so nothing moves sideways when
       the rail collapses. The arithmetic is:
           sidebar padding-left (10) + row-padx (10) + ico-slot/2 (11) = x=31
       and the 62px rail centres at x=31 too. Change one of these and you must
       re-derive .crm-brand's padding-left and the .crm-nav-subhead indent. */
    --crm-side-pad: 10px;
    --crm-row-padx: 10px;
    --crm-ico-slot: 22px;
    --crm-side-w: 232px;
    --crm-rail-w: 62px;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

body.crm-body {
    font-family: var(--bd-ff-body);
    font-size: 15px;
    line-height: 26px;
    color: var(--clr-common-body-text);
    background: var(--clr-bg-canvas);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" off;
}

.crm-body h1, .crm-body h2, .crm-body h3,
.crm-body h4, .crm-body h5, .crm-body h6 {
    font-family: var(--bd-ff-body);
    color: var(--clr-text-secondary);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.crm-body a { color: inherit; text-decoration: none; }
.crm-body a:hover { color: var(--clr-theme-primary); }

.tabular { font-variant-numeric: tabular-nums; }

/* Eyebrow / chip with bullet dot — borrowed from .section-subtitle span */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--clr-theme-soft);
    color: var(--clr-theme-primary-deep);
    border-radius: var(--radius-pill);
    padding: 7px 18px 7px 26px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
}
.eyebrow::before {
    content: "";
    position: absolute;
    left: 12px; top: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--clr-theme-primary);
    transform: translateY(-50%);
    box-shadow: 0 0 0 3px var(--clr-common-white);
}
.eyebrow.is-warning { background: rgba(245,158,11,.12); color: #b45309; }
.eyebrow.is-warning::before { background: #f59e0b; }
.eyebrow.is-success { background: rgba(16,185,129,.12); color: #047857; }
.eyebrow.is-success::before { background: #10b981; }

/* Page heading */
.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
}
.page-head h1 {
    font-size: 36px;
    letter-spacing: -.01em;
    font-weight: 600;
}
.page-head .lede {
    color: var(--clr-text-muted);
    font-size: 14px;
    margin-top: 6px;
    line-height: 22px;
}

/* ==========================================================================
   Shell — sidebar + topbar
   ========================================================================== */
/* The sidebar is FIXED and the content carries a matching margin — deliberately
   not a grid. The icon rail overlay-expands on hover, and in a grid that would
   have to widen a track, reflowing every page under it. A fixed sidebar floats
   over the content instead and nothing below moves. */
.crm-shell { min-height: 100vh; }

.crm-sidebar {
    background: var(--clr-bg-dark);
    color: rgba(255,255,255,.75);
    padding: 18px var(--crm-side-pad) 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--crm-side-w);
    height: 100vh;
    /* Above .combo-dropdown (50) and .recent-prices-popup (60), which live in
       .crm-main under ancestors that create no stacking context and therefore
       resolve at the root. Below that they paint straight through an expanded
       rail. .crm-topbar is unaffected — it is position:sticky with its own
       stacking context, so its z-index:50 dropdown stays trapped at z=5. */
    z-index: 70;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: width .18s ease, box-shadow .18s ease, transform .25s ease;
}
/* WebKit / Chromium / Electron — full control via legacy pseudo-elements.
   Do NOT set `scrollbar-color` on this element: Chromium 121+ disables ALL
   ::-webkit-scrollbar pseudo styling when the standard property is present. */
.crm-sidebar::-webkit-scrollbar {
    width: 10px;
}
.crm-sidebar::-webkit-scrollbar-track {
    background: var(--clr-bg-dark);
    border-radius: 5px;
}
.crm-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.22);
    border-radius: 5px;
    border: 2px solid var(--clr-bg-dark);          /* inset gap → pill shape */
    background-clip: padding-box;
    transition: background-color .2s ease, border-color .2s ease;
}
.crm-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,.5);
    border-color: var(--clr-bg-dark);
}
.crm-sidebar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255,255,255,.7);
}
.crm-sidebar::-webkit-scrollbar-button,
.crm-sidebar::-webkit-scrollbar-corner {
    display: none;
    height: 0;
    width: 0;
}
/* Firefox only — webkit pseudos don't apply there. Gated by @supports so
   it doesn't bleed back into Chromium and disable the rules above. */
@supports not selector(::-webkit-scrollbar) {
    .crm-sidebar {
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.22) var(--clr-bg-dark);
    }
}

/* Main page (document) scroller — transparent track, rounded thumb, no
   arrows. Matches the sidebar scrollbar styling but tuned for the light app
   shell. Works in both the browser and the Electron WebContentsView (both
   Chromium). Same @supports trick used for Firefox. */
body.crm-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body.crm-body::-webkit-scrollbar-track {
    background: transparent;
}
body.crm-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.22);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color .2s ease;
}
body.crm-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.42);
}
body.crm-body::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.6);
}
body.crm-body::-webkit-scrollbar-button,
body.crm-body::-webkit-scrollbar-corner {
    display: none;
    height: 0;
    width: 0;
}
@supports not selector(::-webkit-scrollbar) {
    body.crm-body {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
    }
}

.crm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    letter-spacing: .06em;
    /* left pad sized so the 30px mark centres on x=31 — the same column as every
       nav icon below it, so the logo doesn't shift when the rail collapses. */
    padding: 0 8px 0 6px;
    white-space: nowrap;
}
.crm-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Without this the 62px rail squashes the mark to ~10px: .crm-brand is a
       flex row and the nowrap brand text next to it wins the space fight,
       dragging the logo off the shared x=31 column. */
    flex-shrink: 0;
    width: 30px; height: 30px;
    background: var(--clr-theme-primary);
    color: #fff;
    border-radius: 9px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 6px 18px -8px rgba(245,134,52,.6);
}

.crm-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ---- level 1: section ---------------------------------------------------- */
/* The header is a full-bleed separator BAND spanning the whole sidebar width in
   both states, so sections read as clearly divided even at 62px. The -10px side
   margins cancel .crm-sidebar's padding to reach both edges; the matching +10px
   left padding puts the section icon back on the shared x=31 column. */
.crm-nav-group { display: flex; flex-direction: column; margin-top: 3px; }
/* display:flex above outranks the UA stylesheet's [hidden]{display:none}, so
   the hidden attribute — set server-side for an empty Akses Cepat or a
   default-off Terakhir Dibuka, and live by the profile toggles — would never
   actually hide anything. Restore it explicitly. */
.crm-nav-group[hidden] { display: none; }

.crm-nav-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 calc(-1 * var(--crm-side-pad));
    padding: 0 var(--crm-side-pad);
    background: rgba(255,255,255,.07);
    transition: background .14s ease;
}
.crm-nav-section:hover { background: rgba(255,255,255,.11); }
.crm-nav-section-toggle {
    flex: 1; min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 5px 6px 5px var(--crm-row-padx);
    color: rgba(255,255,255,.5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    user-select: none;
}
.crm-nav-section-toggle:hover { color: rgba(255,255,255,.8); }
.crm-nav-section-toggle .label-text { flex: 1; }
/* the section anchor: shown in BOTH states, on the same x=31 column as the item
   icons below, so it never moves when the rail collapses. */
.crm-nav-sec-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--crm-ico-slot);
    color: rgba(255,255,255,.62);
    transition: opacity .12s ease, color .12s ease;
}
.crm-nav-sec-ico svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.crm-caret { display: inline-flex; flex-shrink: 0; }
.crm-caret svg {
    width: 12px; height: 12px;
    stroke: currentColor; stroke-width: 2.2; fill: none;
    opacity: .6;
    transition: transform .16s ease;
}
.crm-nav-group[aria-expanded="false"] .crm-caret svg { transform: rotate(-90deg); }
.crm-nav-group[aria-expanded="false"] .crm-nav-group-items { display: none; }
/* NOTE: no overflow:hidden here. The subgroup caption below is full-bleed via
   negative margins and would be clipped into an inset strip — and it also used
   to clip .crm-nav a.is-active's outer box-shadow. */
.crm-nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 4px;
    padding-bottom: 3px;
}

/* the active section's band + glyph pick up the brand accent, so you can spot
   where you are at a glance even in the collapsed rail. Both pseudo-sections
   are excluded: the current page is ALWAYS in your history, and Akses Cepat
   holds a copy of the active link — either would light up permanently.
   The :has() argument is relative to the subject, so it is `a.is-active`, NOT
   `.crm-nav a.is-active` (which would hunt for a .crm-nav INSIDE the group). */
.crm-nav-group:not([data-section="__recent__"]):not([data-section="__quick__"]):has(a.is-active) .crm-nav-section {
    background: rgba(245,134,52,.16);
    box-shadow: inset 2px 0 0 var(--clr-theme-primary);
}
.crm-nav-group:not([data-section="__recent__"]):not([data-section="__quick__"]):has(a.is-active) .crm-nav-sec-ico {
    color: var(--clr-theme-primary);
}
/* and don't flag the active page's own row inside the history list — the real
   active marker lives under its actual module section.

   Two traps here, both hit while building this:
   1. NOT `[data-recent-items] .crm-nav a` — .crm-nav is an ANCESTOR of the
      history list, not a descendant, so that form never matches (the same
      relative-selector trap as the :has() rule above).
   2. The leading `.crm-nav` is required for SPECIFICITY, not for matching:
      `[data-recent-items] a.is-active` scores (0,2,1), exactly tying
      `.crm-nav a.is-active` further down the file — and a tie loses to the
      later rule, so the history row kept the full orange accent. */
.crm-nav [data-recent-items] a.is-active {
    background: transparent;
    color: rgba(255,255,255,.85);
    box-shadow: none;
    font-weight: 500;
}

/* ---- level 2: subgroup (static caption divider) -------------------------- */
/* No caret, no collapse state — the whole caption row is the drag grip instead,
   so subgroups reorder within their section.

   Every class here is new on purpose. Reusing .crm-nav-section would light up
   every caption in the section you are standing in (the active-section rule
   above is a DESCENDANT selector) and its :hover would make a static caption
   read as clickable; reusing .crm-nav-group-items would double its 4px/3px
   padding per subgroup and drag Akses Cepat / Terakhir Dibuka along with any
   edit, since they share that class; reusing data-section would write caption
   labels into sidebar.order and sidebar.collapsed as if they were sections. */
.crm-nav-subsortable { display: flex; flex-direction: column; gap: 1px; }
/* .crm-nav-group-items owns the 1px row gap and `gap` reaches DIRECT children
   only, so links one level deeper would sit flush without this. The 4px/3px
   padding is deliberately NOT repeated — once per section is enough. */
.crm-nav-subgroup { display: flex; flex-direction: column; gap: 1px; }
.crm-nav-subgroup[hidden] { display: none; }

.crm-nav-subhead {
    display: flex;
    align-items: center;
    /* full-bleed hairline, the same negative-margin trick .crm-nav-section uses.
       It still reaches both edges one level deeper only because no ancestor adds
       horizontal padding — which is also why the items below are NOT indented:
       an indent would break this arithmetic AND move their glyphs off the shared
       x=31 icon column the rail collapse depends on. */
    margin: 4px calc(-1 * var(--crm-side-pad)) 0;
    padding: 3px var(--crm-side-pad) 2px;
    /* aligns the caption with the item LABELS below it: sidebar pad + row pad +
       icon slot + the .crm-nav a icon gap. */
    padding-left: calc(var(--crm-side-pad) + var(--crm-row-padx) + var(--crm-ico-slot) + 9px);
    border-top: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.28);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* fixed line box so the row is exactly as tall with the grip (expanded) as
       without it (the rail display:nones it) — no vertical drift on expand. */
    line-height: 14px;
    cursor: grab;
    user-select: none;
    transition: color .14s ease;
}
.crm-nav-subhead:hover { color: rgba(255,255,255,.55); }
.crm-nav-subhead .label-text { flex: 1; min-width: 0; }
/* decorative only — it carries no data-nav-handle; the whole row is the handle.
   pointer-events:none is load-bearing, not tidiness: .crm-drag-handle sets
   touch-action:none unconditionally, and below 992px it is opacity:0 rather
   than display:none (that hide rule lives in the desktop media query), so it
   would still hit-test — leaving a 22px invisible strip on every caption that a
   thumb can neither pan from nor see, yet which still starts a real drag.
   Ignoring the pointer hands the gesture to the caption row, the real handle. */
.crm-nav-subhead .crm-drag-handle { height: 14px; pointer-events: none; }
.crm-nav-subhead:hover .crm-drag-handle { opacity: 1; }

/* ---- drag handle --------------------------------------------------------- */
/* Its own slot on the FAR RIGHT (order:2 pushes it past the toggle and the pin
   star) rather than the old absolutely-positioned sliver in the left gutter, so
   the grip is an unambiguous grab target instead of fighting the icon for the
   pointer. Height is capped to the label line so it cannot make a row taller
   expanded than collapsed (where it is display:none). Reveals on row hover. */
.crm-drag-handle {
    order: 2;
    flex-shrink: 0;
    width: var(--crm-ico-slot);
    height: 18px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: rgba(255,255,255,.32);
    touch-action: none;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.crm-drag-handle svg { width: 12px; height: 12px; }
.crm-drag-handle:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }
.crm-drag-handle:active { cursor: grabbing; }
.crm-nav-section:hover .crm-drag-handle,
.crm-nav a.is-quick:hover .crm-drag-handle { opacity: 1; }

/* startDrag adds a bare `is-dragging` with no class check, so all three
   draggable things need the feedback rule or a drag looks like nothing. */
.crm-nav-group.is-dragging,
.crm-nav-subgroup.is-dragging {
    opacity: .6;
    outline: 1px dashed rgba(245,134,52,.55);
    border-radius: 8px;
    background: var(--clr-bg-dark-2);
}
.crm-nav a.is-dragging { opacity: .6; background: var(--clr-bg-dark-2); border-radius: 7px; }
/* while a drag is in progress: grabbing cursor everywhere, no text selection */
body.crm-dragging-active,
body.crm-dragging-active * { cursor: grabbing !important; user-select: none !important; }

/* ---- level 3: item ------------------------------------------------------- */
.crm-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px 6px var(--crm-row-padx);
    border-radius: 7px;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 500;
    /* A FIXED line box, not a 1.3 ratio. The pin star, the close button and the
       drag handle are all 18px and are display:none in the rail; at the old
       16.9px line box every one of those rows would be ~1px taller expanded
       than collapsed, and ~38 rows of that visibly drifts the list. */
    line-height: 18px;
    transition: background .15s ease, color .15s ease;
}
.crm-nav a:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
}
.crm-nav a.is-active {
    background: var(--clr-theme-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px -10px rgba(245,134,52,.55);
}
.crm-nav a .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--crm-ico-slot);
    transition: opacity .12s ease;
}
.crm-nav a .ico svg,
.crm-nav a > svg.ico {
    width: 16px; height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
}
/* labels FADE rather than display-toggle in the rail, so row heights are
   identical in both states and nothing drifts vertically on hover-expand. */
.label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity .15s ease;
}
.crm-nav a .label-text { flex: 1; }

/* pin star — height capped at the label's line box for the same no-drift reason
   as the drag handle above. */
.crm-nav-pin {
    margin-left: auto;
    flex-shrink: 0;
    width: 22px; height: 18px;
    padding: 0; border: 0; border-radius: 5px;
    background: transparent;
    color: rgba(255,255,255,.28);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.crm-nav-pin svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.crm-nav a:hover .crm-nav-pin { opacity: 1; }
.crm-nav-pin:hover { color: var(--clr-theme-primary); background: rgba(255,255,255,.1); }
.crm-nav-pin.is-pinned { opacity: 1; color: var(--clr-theme-primary); }
.crm-nav-pin.is-pinned svg { fill: currentColor; }
.crm-nav a.is-active .crm-nav-pin.is-pinned { color: #fff; }
.crm-nav a.is-quick .crm-nav-pin { opacity: 1; }

/* recent-visit close button — capped like the pin, same reason. */
.crm-recent-close {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px; height: 18px;
    border: 0; border-radius: 5px;
    background: transparent;
    color: rgba(255,255,255,.3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.crm-nav a:hover .crm-recent-close { opacity: 1; }
.crm-recent-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.crm-nav-recent-empty {
    padding: 4px 12px 7px;
    font-size: 11px;
    color: rgba(255,255,255,.3);
    white-space: nowrap;
    transition: opacity .15s ease;
}

/* ---- sidebar footer + rail toggle ---------------------------------------- */
/* ---- account block: profile + logout, pinned above the footer ------------ */
/* Moved out of the topbar so the command bar is just search, and so identity
   sits where the rest of the persistent chrome lives. The avatar rides the same
   x=31 icon column as every nav glyph, so it does not shift on rail collapse. */
.crm-side-account {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 4px;
}
.crm-side-user {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px 5px var(--crm-row-padx);
    border-radius: 7px;
    color: rgba(255,255,255,.85);
    transition: background .15s ease, color .15s ease;
}
.crm-side-user:hover { background: rgba(255,255,255,.07); color: #fff; }
.crm-side-avatar {
    flex: 0 0 auto;
    width: var(--crm-ico-slot);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crm-side-avatar span {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--clr-theme-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px -6px rgba(245,134,52,.7);
}
.crm-side-user-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.crm-side-user-id b {
    font-size: 11.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-side-user-id i {
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-side-logout {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border: 0; border-radius: 7px;
    background: transparent;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .14s ease, background .14s ease;
}
.crm-side-logout svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.crm-side-logout:hover { color: #fff; background: rgba(220,60,50,.8); }

.crm-side-foot {
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-side-foot-text {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    white-space: nowrap;
}
.crm-rail-toggle {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border: 0; border-radius: 7px;
    background: var(--clr-bg-dark-2);
    color: rgba(255,255,255,.55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .14s ease, background .14s ease;
}
.crm-rail-toggle svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.9; fill: none; transition: transform .18s ease; }
.crm-rail-toggle:hover { color: #fff; background: #2a2a2a; }

/* margin-left, not a grid track — see .crm-shell. min-height replaces what the
   grid used to give us for free. */
.crm-content {
    background: var(--clr-bg-canvas);
    min-width: 0;
    margin-left: var(--crm-side-w);
    min-height: 100vh;
    transition: margin-left .18s ease;
}

/* ==========================================================================
   Icon rail (auto-collapse), desktop only
   ========================================================================== */
@media (min-width: 992px) {
    .crm-shell.is-rail .crm-sidebar { width: var(--crm-rail-w); }
    .crm-shell.is-rail .crm-content { margin-left: var(--crm-rail-w); }

    /* expand as an OVERLAY on hover / keyboard focus / forced peek (during a
       drag), so the content underneath never reflows. */
    .crm-shell.is-rail .crm-sidebar:hover,
    .crm-shell.is-rail .crm-sidebar:focus-within,
    .crm-shell.is-rail .crm-sidebar.is-peek {
        width: var(--crm-side-w);
        box-shadow: 12px 0 48px -16px rgba(0,0,0,.7);
    }

    /* chevrons point left ("collapse me") when the sidebar is pinned open */
    .crm-shell:not(.is-rail) .crm-rail-toggle svg { transform: rotate(180deg); }

    /* Collapsed: fade the text, hide only the affordances. Everything hidden
       here is height-capped at the 18px line box precisely so that removing it
       cannot change a row's height — the list must not shift vertically when
       the rail expands under the pointer. */
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .label-text,
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .crm-brand > span:last-child,
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .crm-nav-recent-empty,
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .crm-side-foot-text {
        opacity: 0;
    }
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .crm-caret,
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .crm-drag-handle,
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .crm-nav-pin,
    /* Logout hides in the rail like every other affordance: the avatar alone
       identifies the account, and a destructive control 26px from the collapse
       toggle is a mis-click waiting to happen. It returns on hover-expand. */
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .crm-side-logout,
    .crm-shell.is-rail .crm-sidebar:not(:hover):not(:focus-within):not(.is-peek) .crm-recent-close {
        display: none;
    }
    /* The caption's border-top survives on purpose: at 62px the hairline is a
       clean group separator, which is exactly the right reading of a group
       boundary in the rail. Do NOT display:none it — each section would then be
       shorter collapsed than expanded and every section below would jump. */

    /* Subgroup drag is a DESKTOP affordance. touch-action lives here rather than
       on the rule itself because the caption is a full-width band: below 992px
       the sidebar is the drawer — the only navigation on a phone — and eleven
       un-pannable bands would fight the scroll. */
    .crm-nav-subhead { touch-action: none; }
}

.crm-topbar {
    height: 76px;
    background: var(--clr-bg-surface);
    border-bottom: 1px solid var(--clr-border-soft);
    padding: 0 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 5;
}
/* Shrinks and ellipses rather than pushing the search bar around: the page
   title is context, the search is the thing people came here to use. */
.crm-topbar .crumbs {
    color: var(--clr-text-muted);
    font-size: 13px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-topbar .crumbs strong {
    color: var(--clr-text-secondary);
    font-weight: 600;
}

/* Global part search slot in the topbar, to the right of .crumbs.
   Takes every pixel the title does not need — no max-width, because the topbar
   is otherwise empty since profile and logout moved into the sidebar, and a
   capped field left a wide dead gap on the right. */
.topbar-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 280px;
}
.topbar-search-wrap { position: relative; }
.crm-body .topbar-search-wrap input.form-control {
    font-size: 15px;
    padding: 18px 44px 18px 18px;
    border-radius: 12px;
    line-height: 1.4;
    height: auto;
}
.crm-body .topbar-search-wrap input.form-control::placeholder { font-size: 14px; opacity: .65; }
.topbar-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
    z-index: 2;
}
.topbar-search-clear:hover,
.topbar-search-clear:focus-visible {
    color: #dc2626;
    background-color: rgba(220, 38, 38, 0.08);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.45);
    outline: none;
}
.topbar-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--clr-border-soft);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
    max-height: 380px;
    overflow-y: auto;
    z-index: 50;
}
.topbar-search-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--clr-border-soft);
}
.topbar-search-item:last-child { border-bottom: 0; }
.topbar-search-item:hover { background: #f5fafd; }
.topbar-search-item .pno { font-weight: 600; font-family: var(--bd-ff-mono, monospace); font-size: 14px; }
.topbar-search-item .pdesc { font-size: 12px; color: #666; margin-top: 2px; }
.topbar-search-item.muted { color: #999; cursor: default; }

.bell-btn {
    position: relative;
    width: 42px; height: 42px;
    border: 1px solid var(--clr-border-soft);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-secondary);
    background: #fff;
    transition: border-color .2s ease, transform .2s ease;
}
.bell-btn:hover { border-color: var(--clr-theme-primary); color: var(--clr-theme-primary); }
.bell-btn .dot {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--clr-theme-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    padding: 0 5px;
    box-shadow: 0 0 0 2px #fff;
}

/* ==========================================================================
   Main content
   ========================================================================== */
[x-cloak] { display: none !important; }

main.crm-main {
    padding: 32px 36px 60px;
    min-width: 0;
}

@media (max-width: 720px) {
    main.crm-main { padding: 20px 16px 40px; }
}

/* Flash messages */
.flash {
    margin-bottom: 20px;
    padding: 14px 20px;
    border-radius: var(--radius-card);
    display: flex; align-items: center; gap: 10px;
    font-size: 14px;
    background: rgba(16,185,129,.08);
    color: #047857;
    border: 1px solid rgba(16,185,129,.2);
}
.flash.is-error { background: rgba(239,68,68,.08); color: #b91c1c; border-color: rgba(239,68,68,.2); }
.flash.is-warning { background: rgba(245,158,11,.08); color: #92400e; border-color: rgba(245,158,11,.25); }

/* ==========================================================================
   Surface / cards
   ========================================================================== */
.surface {
    background: var(--clr-bg-surface);
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.surface.is-padded { padding: 14px; }
.surface.is-padded-sm { padding: 12px 14px; }
.surface + .surface { margin-top: 12px; }

.surface h2, .surface h3, .surface h4, .surface h5, .surface h6 { margin-bottom: 6px; }

.surface-section-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #666;
}
.surface-section-title.is-flush { margin: 0; }
.surface-section-title.is-positive { color: #1c8c1c; }
.surface-section-title.is-negative { color: #c0392b; }
.surface-section-title.is-neutral { color: #446; }

/* ==========================================================================
   Buttons (pill, with hover sweep — channel of .fill-btn)
   ========================================================================== */
.btn-fill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    font-family: var(--bd-ff-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--clr-theme-primary);
    color: #fff;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color .25s ease, border-color .25s ease, transform .25s ease;
    cursor: pointer;
}
.crm-body a.btn-fill:not(.is-ghost) {
    color: #fff;
}
.btn-fill::before {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    width: 220%; height: 420px;
    background: var(--clr-theme-primary-deep);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: transform .55s cubic-bezier(.19,1,.22,1);
    z-index: -1;
}
.btn-fill:hover { color: #fff; }
.crm-body a.btn-fill:not(.is-ghost):hover,
.crm-body a.btn-fill:not(.is-ghost):focus,
.crm-body a.btn-fill:not(.is-ghost):active {
    color: #fff;
}
.btn-fill:hover::before { transform: translate(-50%, -82%); }
.btn-fill:active { transform: translateY(1px); }

.btn-fill.is-ghost {
    background: transparent;
    color: var(--clr-text-secondary);
    border-color: var(--clr-border-strong);
}
.btn-fill.is-ghost::before { background: var(--clr-text-secondary); }
.btn-fill.is-ghost:hover { color: #fff; border-color: transparent; }

.btn-fill.is-dark {
    background: var(--clr-bg-dark);
}
.btn-fill.is-dark::before { background: var(--clr-theme-primary); }

.btn-fill.is-danger { background: #ef4444; }
.btn-fill.is-danger::before { background: #b91c1c; }

.btn-sm {
    height: 26px;
    padding: 0 12px;
    font-size: 10px;
}

.btn-link-quiet {
    color: var(--clr-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
    padding-bottom: 2px;
}
.btn-link-quiet:hover { 
    color: var(--clr-theme-primary);
    border-color: currentColor;
}

/* ==========================================================================
   Form controls
   ========================================================================== */
.crm-body .form-control,
.crm-body .form-select,
.crm-body input.form-control,
.crm-body select.form-select,
.crm-body textarea.form-control {
    background: #fff;
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-control);
    color: var(--clr-text-secondary);
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-family: var(--bd-ff-body);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.crm-body textarea.form-control { height: auto; padding: 8px 10px; line-height: 18px; }
.crm-body .form-control:focus,
.crm-body .form-select:focus {
    border-color: var(--clr-theme-primary);
    box-shadow: 0 0 0 3px rgba(245,134,52,.18);
    outline: none;
}
.crm-body .form-control-sm,
.crm-body .form-select-sm { height: 24px; padding: 0 8px; font-size: 11px; }

.crm-body .form-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.crm-body .form-label.is-required::after {
    content: "*";
    color: #ef4444;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    margin-left: 2px;
    letter-spacing: 0;
}

.required-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.required-legend::before {
    content: "*";
    color: #ef4444;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.crm-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.crm-table thead th {
    background: var(--clr-theme-soft);
    color: var(--clr-theme-primary-deep);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--clr-border-soft);
}
.crm-table thead th.text-end { text-align: right; }
.crm-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--clr-border-soft);
    color: var(--clr-text-secondary);
    font-size: 12px;
    line-height: 1.4;
}
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr:hover td { background: rgba(245,134,52,.03); }
.crm-table .text-end { text-align: right; }
.crm-table .muted { color: var(--clr-text-muted); }
.crm-table .num { font-variant-numeric: tabular-nums; }

.surface.has-table { padding: 0; overflow: visible; }
.surface.has-table .crm-table thead th:first-child { padding-left: 14px; }
.surface.has-table .crm-table thead th:last-child { padding-right: 14px; }
.surface.has-table .crm-table tbody td:first-child { padding-left: 14px; }
.surface.has-table .crm-table tbody td:last-child { padding-right: 14px; }
/* Explicit corner rounding for the header — replaces the clipping from overflow:hidden
   above, which had to be removed so that combobox / recent-prices popups inside line-item
   <td>s can escape past the surface border. */
.surface.has-table .crm-table thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-card);
}
.surface.has-table .crm-table thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-card);
}

/* Compact table variant — one notch denser than the new base, for ultra-tight tables. */
.crm-table.is-compact thead th { padding: 4px 8px; }
.crm-table.is-compact tbody td { padding: 3px 8px; }
.crm-table.is-compact tbody td code { font-size: inherit; }
.surface.has-table.is-compact .crm-table thead th:first-child,
.surface.has-table.is-compact .crm-table tbody td:first-child { padding-left: 12px; }
.surface.has-table.is-compact .crm-table thead th:last-child,
.surface.has-table.is-compact .crm-table tbody td:last-child { padding-right: 12px; }
.crm-table.is-compact thead tr.filter-row th { padding: 3px 5px; }
.crm-table.is-compact thead tr.filter-row th .form-control,
.crm-table.is-compact thead tr.filter-row th .form-select {
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    background: #fff;
}
.crm-table.is-compact thead tr.filter-row th .form-select { padding-right: 22px; }
.crm-table .btn-fill,
.crm-table .btn-fill.btn-sm {
    padding: 0 10px;
    font-size: 10px;
    line-height: 1.5;
    min-height: 0;
    height: 24px;
}

.empty-row {
    text-align: center;
    color: var(--clr-text-muted);
    padding: 28px 16px !important;
    font-size: 12px;
}

/* ==========================================================================
   Stage chips (pipeline)
   ========================================================================== */
.stage-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    background: rgba(85,85,85,.08);
    color: var(--clr-text-secondary);
    white-space: nowrap;
}
.stage-chip::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}
.stage-chip.s-leads_masuk { background: #e0f2fe; color: #075985; }
.stage-chip.s-percakapan  { background: #fef3c7; color: #92400e; }
.stage-chip.s-penawaran   { background: #fed7aa; color: #9a3412; }
.stage-chip.s-closing     { background: #ccfbf1; color: #115e59; }
.stage-chip.s-launching   { background: var(--clr-theme-soft); color: var(--clr-theme-primary-deep); }

.flag-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    background: rgba(85,85,85,.08);
    color: var(--clr-text-muted);
}
.flag-chip.is-cancel { background: rgba(239,68,68,.1); color: #b91c1c; }
.flag-chip.is-hold   { background: rgba(245,158,11,.12); color: #b45309; }
.flag-chip.is-success { background: rgba(16,185,129,.12); color: #047857; }
.flag-chip.is-warning { background: rgba(245,158,11,.12); color: #b45309; }
.flag-chip.is-danger  { background: rgba(239,68,68,.1); color: #b91c1c; }

/* ==========================================================================
   KPI cards (analytics dashboard)
   ========================================================================== */
.kpi {
    background: #fff;
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-card);
    padding: 22px 22px 20px;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.kpi .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.kpi .value {
    margin-top: 14px;
    font-size: 28px;
    font-weight: 600;
    color: var(--clr-text-secondary);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.kpi .sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--clr-text-muted);
}
.kpi.is-feature {
    background: linear-gradient(140deg, var(--clr-bg-dark) 0%, #0f172a 100%);
    color: #fff;
    border-color: transparent;
}
.kpi.is-feature .label { color: rgba(255,255,255,.55); }
.kpi.is-feature .value { color: #fff; }
.kpi.is-feature .sub { color: rgba(255,255,255,.6); }
.kpi.is-feature::after {
    content: "";
    position: absolute;
    right: -50px; bottom: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,134,52,.55), transparent 60%);
    pointer-events: none;
}

/* Filter bar */
.filter-bar {
    background: #fff;
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-card);
    padding: 10px 12px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 10px;
    align-items: end;
}
.filter-bar > div { min-width: 0; }
.crm-body .filter-bar .form-label {
    font-size: 9px;
    margin-bottom: 3px;
    letter-spacing: .1em;
}
.crm-body .filter-bar .form-control,
.crm-body .filter-bar .form-select {
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 8px;
}
.filter-bar .actions {
    grid-column: 1/-1;
    display: flex;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--clr-border-soft);
    margin-top: 2px;
}

/* ==========================================================================
   Pipeline kanban
   ========================================================================== */
.pipeline-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 18px;
}
.pipeline-col {
    background: #fff;
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-card);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 480px;
}
.pipeline-col header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pipeline-col header .count {
    font-size: 12px;
    font-weight: 600;
    color: var(--clr-text-muted);
    background: var(--clr-bg-canvas);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
}
.pipeline-list { display: flex; flex-direction: column; gap: 10px; flex: 1; }

.lead-card {
    background: var(--clr-bg-surface);
    border: 1px solid var(--clr-border-soft);
    border-radius: 12px;
    padding: 14px 14px 12px;
    cursor: grab;
    box-shadow: 0 1px 0 rgba(22,22,22,.03);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lead-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); border-color: var(--clr-theme-primary); }
.lead-card:active { cursor: grabbing; }
.lead-card .company { font-weight: 600; color: var(--clr-text-secondary); font-size: 14px; }
.lead-card .who { color: var(--clr-text-muted); font-size: 12px; margin-top: 2px; }
.lead-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 11px;
}
.lead-card .meta .owner {
    background: var(--clr-bg-canvas);
    border-radius: var(--radius-pill);
    padding: 3px 9px;
    color: var(--clr-text-secondary);
}
.lead-card .meta .deal {
    color: var(--clr-theme-primary-deep);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Login page (Breeze override)
   ========================================================================== */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: stretch;
    background: var(--clr-bg-canvas);
}
@media (min-width: 992px) {
    .auth-shell { grid-template-columns: 1fr 1fr; }
}
.auth-art {
    background:
        radial-gradient(circle at 80% 0%, rgba(245,134,52,.55), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(245,134,52,.35), transparent 55%),
        var(--clr-bg-dark);
    color: #fff;
    padding: 48px;
    position: relative;
    overflow: hidden;
    display: none;
}
@media (min-width: 992px) {
    .auth-art { display: flex; flex-direction: column; justify-content: space-between; }
}
.auth-art h2 {
    color: #fff;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.01em;
    max-width: 460px;
}
.auth-art p { color: rgba(255,255,255,.7); max-width: 380px; }
.auth-art .footer { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .12em; text-transform: uppercase; }

.auth-form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}
.auth-form {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 36px 32px;
}
.auth-form h1 { font-size: 26px; margin-bottom: 6px; }
.auth-form .lede { font-size: 14px; color: var(--clr-text-muted); margin-bottom: 24px; }
.auth-form .field { margin-bottom: 16px; }
.auth-form .check-row {
    display: flex; justify-content: space-between; align-items: center;
    margin: 6px 0 22px;
    font-size: 13px; color: var(--clr-text-muted);
}

/* ==========================================================================
   Pagination (Bootstrap override)
   ========================================================================== */
.crm-body .pagination { gap: 4px; }
.crm-body .pagination .page-link {
    border: 1px solid var(--clr-border-soft);
    border-radius: 10px;
    color: var(--clr-text-secondary);
    padding: 6px 12px;
    font-size: 13px;
}
.crm-body .pagination .page-item.active .page-link {
    background: var(--clr-theme-primary);
    color: #fff;
    border-color: var(--clr-theme-primary);
}

/* ==========================================================================
   Misc
   ========================================================================== */
.dl-clean { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.dl-clean dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--clr-text-muted);
    font-weight: 500;
    align-self: center;
}
.dl-clean dd { margin: 0; color: var(--clr-text-secondary); font-size: 14px; }

.note-block { white-space: pre-wrap; line-height: 24px; color: var(--clr-text-secondary); }

.progress-bar-track {
    height: 8px;
    background: var(--clr-bg-canvas);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--clr-border-soft);
}
.progress-bar-track .fill {
    height: 100%;
    background: var(--clr-theme-primary);
    transition: width .4s ease;
}
.progress-bar-track .fill.is-success { background: #10b981; }
.progress-bar-track .fill.is-warning { background: #f59e0b; }
.progress-bar-track .fill.is-danger  { background: #ef4444; }

/* ==========================================================================
   Mobile drawer scaffolding (desktop hides these)
   ========================================================================== */
.crm-mobile-trigger,
.crm-mobile-backdrop,
.crm-sidebar-close { display: none; }

/* ===== Tablet + phone (≤991px) ===== */
@media (max-width: 991px) {
    /* Off-canvas drawer. The sidebar is already fixed at every width now, so
       this only has to add the slide-out transform and drop the content margin. */
    .crm-content { margin-left: 0; }

    .crm-sidebar {
        width: 240px;
        transform: translateX(-100%);
        z-index: 70;
        flex-wrap: nowrap;
        padding: 18px 14px 22px;
        gap: 14px;
    }
    .crm-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 0 24px 60px -10px rgba(0,0,0,.4);
    }
    .crm-nav { flex-direction: column; flex-wrap: nowrap; }
    /* NOTE: no `.crm-nav-section { display: block }` here. It was harmless while
       the header was a single <button> whose contents flowed inline; now that it
       is a flex row of grip + toggle it would kill the layout and the caret
       would stop right-aligning. */

    .crm-mobile-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        /* under the drawer (70), over everything else */
        z-index: 65;
    }
    .crm-mobile-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        background: #fff;
        border: 1px solid var(--clr-border-soft);
        border-radius: 10px;
        color: var(--clr-text-secondary);
        cursor: pointer;
        flex-shrink: 0;
    }
    .crm-mobile-trigger:hover { border-color: var(--clr-theme-primary); color: var(--clr-theme-primary); }
    .crm-sidebar-close {
        display: inline-flex;
        align-self: flex-end;
        background: transparent;
        border: 0;
        color: rgba(255,255,255,.7);
        font-size: 26px;
        line-height: 1;
        padding: 0 4px;
        cursor: pointer;
        margin-top: -8px;
    }

    .crm-topbar { padding: 0 16px; gap: 12px; }
    main.crm-main { padding: 24px 18px 60px; }
    .page-head h1 { font-size: 28px; }

    .surface.has-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .crm-table { min-width: 720px; }
}

/* ===== Phone (≤640px) ===== */
@media (max-width: 640px) {
    .crm-topbar { height: 64px; padding: 0 12px; gap: 8px; }
    .crm-topbar .crumbs { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .topbar-search { display: none; }
    .bell-btn { width: 36px; height: 36px; }

    main.crm-main { padding: 14px 10px 40px; }
    .surface.is-padded { padding: 12px; }
    .surface.is-padded-sm { padding: 10px 12px; }

    .page-head { margin-bottom: 14px; }
    .page-head h1 { font-size: 20px; }
    .page-head .lede { font-size: 12px; line-height: 18px; }
    .page-head > div.d-flex { width: 100%; flex-wrap: wrap; }
    .page-head .btn-fill { height: 28px; padding: 0 12px; font-size: 11px; letter-spacing: .06em; }

    .crm-table thead th,
    .crm-table tbody td { padding: 6px 8px; font-size: 11px; }
    .surface.has-table .crm-table thead th:first-child,
    .surface.has-table .crm-table tbody td:first-child { padding-left: 12px; }
    .surface.has-table .crm-table thead th:last-child,
    .surface.has-table .crm-table tbody td:last-child { padding-right: 12px; }
    .crm-table { min-width: 520px; }
    .col-hide-sm { display: none !important; }

    .filter-bar { padding: 8px 10px; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
}

/* ==========================================================================
   Profile page — forms, toggles, Quick Access picker
   ========================================================================== */
.profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.profile-section-head h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--clr-text-secondary);
}
.profile-section-head h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--clr-text-secondary);
}
.profile-section-head .muted,
.crm-body .surface .muted {
    color: var(--clr-text-muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

.prefs-saved-indicator {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #047857;
    background: rgba(16,185,129,.1);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    align-self: center;
}

/* Form helpers used by the profile + danger-zone forms */
.profile-form { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.form-hint { font-size: 13px; color: var(--clr-text-muted); }
.form-error { font-size: 12px; color: #b91c1c; margin-top: 6px; }
.link-button {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--clr-theme-primary-deep);
    font-size: inherit;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.link-button:hover { color: var(--clr-theme-primary); }

/* Toggle switches (used in app settings) */
.profile-toggle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 8px;
}
.profile-switch {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-control);
    cursor: pointer;
    background: var(--clr-bg-canvas);
    transition: border-color .15s ease, background .15s ease;
}
.profile-switch:hover { border-color: var(--clr-border-strong); }
.profile-switch input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.switch-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #d1d5db;
    border-radius: 999px;
    transition: background .2s ease;
    margin-top: 2px;
}
.switch-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s ease;
}
.profile-switch input:checked ~ .switch-track {
    background: var(--clr-theme-primary);
}
.profile-switch input:checked ~ .switch-track .switch-knob {
    transform: translateX(18px);
}
.profile-switch input:focus-visible ~ .switch-track {
    box-shadow: 0 0 0 3px rgba(245,134,52,.25);
}
.switch-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.switch-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--clr-text-secondary);
    line-height: 1.3;
}
.switch-sub {
    font-size: 12.5px;
    color: var(--clr-text-muted);
    line-height: 1.45;
}

/* Quick Access picker */
.profile-quick-access {
    border-top: 1px dashed var(--clr-border-soft);
    margin-top: 18px;
    padding-top: 18px;
}
.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.quick-access-group {
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-control);
    padding: 12px 14px 14px;
    margin: 0;
    background: var(--clr-bg-canvas);
}
.quick-access-group legend {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    padding: 0 6px;
    margin-left: -6px;
}
.quick-access-item {
    display: grid;
    grid-template-columns: 18px 18px 1fr;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--clr-text-secondary);
    transition: background .15s ease;
}
.quick-access-item:hover { background: rgba(245,134,52,.06); }
.quick-access-item input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--clr-theme-primary);
    cursor: pointer;
}
.quick-access-item .qa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-muted);
}
.quick-access-item .qa-icon .ico {
    width: 16px; height: 16px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
}
.quick-access-item input:checked ~ .qa-icon { color: var(--clr-theme-primary); }
.quick-access-item input:checked ~ .qa-label { color: var(--clr-theme-primary-deep); font-weight: 500; }
.qa-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.danger-zone {
    border-color: rgba(239,68,68,.25);
}
.danger-zone h2 { color: #b91c1c; }

/* Profile page mobile */
@media (max-width: 720px) {
    .profile-toggle-row { grid-template-columns: 1fr; }
    .profile-section-head { flex-direction: column; gap: 10px; }
    .profile-section-head .btn-fill { align-self: flex-start; }
}

/* ============================================================
   Styled combobox — replaces native <datalist> on line-item forms
   ============================================================ */
.combo-wrap {
    position: relative;
}
.combo-dropdown {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--clr-bg-surface);
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-control);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
}
.combo-item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--clr-border-soft);
    font-size: 12px;
    line-height: 1.4;
}
.combo-item:last-child { border-bottom: 0; }
.combo-item.is-active,
.combo-item:hover { background: var(--clr-theme-soft); }
.combo-code {
    font-weight: 600;
    color: var(--clr-theme-primary-deep);
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.combo-name {
    color: var(--clr-common-body-text);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combo-empty {
    padding: 12px;
    color: var(--clr-text-muted);
    font-size: 12px;
    text-align: center;
}

/* ============================================================
   Recent-prices popup — appears after a part/set is picked
   on Sales Invoice and Purchase Order forms
   ============================================================ */
.recent-prices-popup {
    position: absolute;
    top: 100%; left: 0;
    margin-top: 6px;
    min-width: 460px;
    max-width: 600px;
    background: var(--clr-bg-surface);
    border: 1px solid var(--clr-border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover);
    z-index: 60;
    padding: 4px 0;
}
.recent-prices-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--clr-border-soft);
}
.recent-prices-head .eyebrow {
    margin: 0;
}
.recent-prices-close {
    background: transparent;
    border: 0;
    color: var(--clr-text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
}
.recent-prices-close:hover {
    background: var(--clr-theme-soft);
    color: var(--clr-theme-primary-deep);
}
.recent-prices-loading {
    padding: 18px;
    text-align: center;
    color: var(--clr-text-muted);
    font-size: 12px;
}
.recent-prices-row {
    display: grid;
    grid-template-columns: 92px 1fr 76px 116px auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--clr-border-soft);
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    color: var(--clr-common-body-text);
    border-left: 3px solid transparent;
}
.recent-prices-row:last-child { border-bottom: 0; }
.recent-prices-row:hover { background: var(--clr-theme-soft); }
.recent-prices-row.is-current-contact {
    background: #fff5ed;
    border-left-color: var(--clr-theme-primary);
}
.recent-prices-row.is-current-contact:hover {
    background: #ffeacd;
}
.recent-prices-date {
    font-variant-numeric: tabular-nums;
    color: var(--clr-text-subtle);
}
.recent-prices-contact {
    color: var(--clr-common-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-prices-qty,
.recent-prices-price {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.recent-prices-price {
    font-weight: 600;
    color: var(--clr-theme-primary-deep);
}
.recent-prices-badge {
    display: inline-flex;
    align-items: center;
    background: var(--clr-theme-primary);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.recent-prices-empty {
    padding: 18px 14px;
    text-align: center;
    color: var(--clr-text-muted);
    font-size: 12px;
}

/* ============================================================
   Date input wrapper — DD/MM/YYYY text + hidden native picker.
   Drives Alpine's `dateInput()` component (see form-helpers.js).
   ============================================================ */
.date-input-wrap {
    position: relative;
}
.date-input-wrap .form-control {
    padding-right: 30px; /* room for the picker button */
}
.date-input-native {
    position: absolute;
    inset: 0 0 auto auto;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
}
.date-picker-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--clr-text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 6px;
}
.date-picker-btn:hover {
    background: var(--clr-theme-soft);
    color: var(--clr-theme-primary-deep);
}

/* ==========================================================================
   Print — the shell is chrome, not content
   ========================================================================== */
/* There was never a print block here, so Ctrl+P on any ERP page rendered the
   dark 232px sidebar as a column. With the sidebar now position:fixed that gets
   worse, not better: Chromium paints a fixed element on the FIRST page only,
   while .crm-content stays inset by its margin on every page. Drop both.
   (The dedicated PDF views under Modules/*/resources/views/**/pdf.blade.php are
   standalone documents and never load this stylesheet.) */
@media print {
    .crm-sidebar,
    .crm-mobile-backdrop,
    .crm-mobile-trigger,
    .crm-topbar { display: none !important; }

    .crm-content { margin-left: 0 !important; min-height: 0; }
    main.crm-main { padding: 0 !important; }
    body.crm-body { background: #fff; }
}