/* Cross-document View Transitions (Chromium 111+; ignored elsewhere) —
   lets elements tagged with view-transition-name below persist visually
   across full page navigations instead of hard-cutting/flashing. */
@view-transition {
    navigation: auto;
}

:root {
    --brand-blue: #4F6BF0;
    --brand-purple: #7B61FF;
    /* Light-blue sidebar theme (was a dark navy gradient). */
    --sidebar-bg: #eaf0ff;
    --sidebar-bg-hover: #dbe6ff;
    --sidebar-active: #4F6BF0;
    --sidebar-text: rgba(28,33,64,0.72);
    --sidebar-border: rgba(28,33,64,0.09);
    /* Page canvas is pure white portal-wide. The old --page-bg tint
       (#f4f5f9) still exists as --surface-soft, for the ~20 internal
       "recessed surface" uses (hover backgrounds, progress-bar tracks,
       icon badges, avatar circles) that need to stay visible against
       white cards — those would disappear if they matched --card-bg. */
    --page-bg: #ffffff;
    --surface-soft: #f4f5f9;
    --card-bg: #ffffff;
    --border: #e4e6ef;
    --text-main: #1c2140;
    --text-muted: #6b7186;
    --success: #1d9e75;
    --danger: #e24b4a;
    --warning: #ba7517;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }
body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--page-bg);
    color: var(--text-main);
}

input, select, textarea, button {
    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

a { text-decoration: none; color: inherit; }

/* ---------------- Login page ----------------
   Full-bleed tech-city scene (public/images/login-bg.jpg — the actual
   supplied brand asset: skyline, world-map dot overlay, and the six
   feature badges are all baked into the image itself, not drawn in
   CSS/HTML) behind a light glass card, centered via flex. */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #2c4fb8 url('/images/login-bg.jpg') center center / cover no-repeat;
}

.login-card {
    width: 380px;
    /* Light blue-tinted glass, not flat white — matches the reference's
       card, which visibly picks up the scene's blue behind it. */
    background: linear-gradient(160deg, rgba(233,241,255,0.85) 0%, rgba(207,223,250,0.72) 100%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 24px;
    padding: 2.5rem 2.25rem;
    backdrop-filter: blur(14px);
    text-align: center;
    /* Outer shadow for lift/depth, plus two inset highlights that fake a
       glossy, slightly-3D glass edge (a bright inner rim top-left, and a
       soft overall inner glow) rather than a flat drop shadow. */
    box-shadow:
        0 25px 70px rgba(15,30,80,0.35),
        inset 0 1px 1px rgba(255,255,255,0.9),
        inset 0 0 36px rgba(255,255,255,0.18);
    position: relative;
    z-index: 5;
    overflow: hidden;
}
/* Diagonal sheen streak across the top of the card — the classic
   glassmorphism "light catching the glass" trick. Painted as a pseudo
   so it sits under the real form content (DOM order = paint order here,
   no explicit z-index needed) and is clipped by the card's own rounded
   corners via .login-card's overflow:hidden. */
.login-card::before {
    content: '';
    position: absolute;
    top: -45%;
    left: -25%;
    width: 150%;
    height: 65%;
    background: linear-gradient(120deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 65%);
    transform: rotate(-9deg);
    pointer-events: none;
}

.login-logo-wrap {
    display: inline-block;
    margin-bottom: 8px;
}
.login-card img.brand-logo { height: 40px; display: block; margin: 0 auto; }

.login-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin: 4px 0 28px;
    letter-spacing: 0.3px;
}

.login-card h1 {
    color: var(--text-main);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
}

.login-card p.lead {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 24px;
}

.login-card label {
    display: block;
    text-align: left;
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 6px;
}

.login-card input[type=text],
.login-card input[type=password] {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #f4f6fb;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--text-main);
}

.btn-signin {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.btn-signin:hover { opacity: 0.92; }

.login-footer {
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 11px;
}
.login-footer a { color: var(--brand-blue); }
.login-secured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(107,113,134,0.08);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
}
.login-secured-badge svg { width: 13px; height: 13px; flex-shrink: 0; }

.login-error {
    background: #fcebeb;
    border: 1px solid rgba(226,75,74,0.35);
    color: #a32d2d;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: left;
}

.login-info {
    background: rgba(79,107,240,0.1);
    border: 1px solid rgba(79,107,240,0.3);
    color: #2c47b8;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: left;
}


/* ---------------- App shell ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 246px;
    background: var(--sidebar-bg);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: 2px 0 12px rgba(0,0,0,0.18);
    /* Pin to the viewport, not just the nearest scroll container — sticky
       previously depended on no ancestor introducing its own scroll
       context, which broke on some pages (the sidebar would scroll away
       with the page content, e.g. on long Settings pages). Fixed
       positioning pins it to the viewport unconditionally; main-content
       below reserves the matching left margin so it doesn't render
       underneath it. */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 100;
    view-transition-name: app-sidebar;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--sidebar-border);
}
/* The logo's own artwork is dark-on-transparent, so it disappears
   against the dark sidebar — a light rounded chip behind it restores
   contrast regardless of the source image's colors. Sized to span the
   sidebar's width rather than shrink-wrap tightly around the image, so
   it reads as a proper header instead of a small tucked-away badge. */
.brand-logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transparent;
    border-radius: 12px;
    padding: 14px 12px;
}
.brand-logo-chip img { height: 40px; max-width: 100%; display: block; }
.sidebar-brand .brand-name {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
}

.sidebar-section-label {
    padding: 20px 18px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}

.sidebar-nav { flex: 1; padding: 4px 12px 16px; overflow-y: auto; }

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}
.nav-icon svg { width: 100%; height: 100%; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--sidebar-text);
    font-size: 14px;
    margin-bottom: 3px;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-nav a:hover { background: var(--sidebar-bg-hover); color: var(--text-main); }
.sidebar-nav a.active {
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
    color: #fff;
    box-shadow: 0 2px 10px rgba(79,107,240,0.35);
}
.sidebar-nav a.disabled { opacity: 0.32; cursor: not-allowed; pointer-events: none; }
.sidebar-nav a.sidebar-subitem {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
    margin-bottom: 2px;
}
.sidebar-nav a.sidebar-subitem.active {
    background: rgba(79,107,240,0.14);
    color: var(--brand-blue);
    font-weight: 600;
    box-shadow: none;
    position: relative;
}
.sidebar-nav a.sidebar-subitem.active::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-blue);
}

.sidebar-group { display: flex; flex-direction: column; }
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-size: 14px;
    font-family: inherit;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 3px;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-group-toggle .nav-label { flex: 1; text-align: left; }
.sidebar-group-toggle:hover { background: var(--sidebar-bg-hover); color: var(--text-main); }
.sidebar-group-toggle.open { color: var(--text-main); }
.sidebar-group-toggle .chevron { font-size: 10px; transition: transform 0.18s ease; color: var(--text-muted); }
.sidebar-group-toggle.open .chevron { transform: rotate(180deg); }

/* CSS-only accordion: animating grid-template-rows gives a smooth
   expand/collapse without any JS height measurement. */
.sidebar-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
}
.sidebar-submenu.open { grid-template-rows: 1fr; }
.sidebar-submenu-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 2px 0 4px 23px;
    padding-left: 14px;
    border-left: 2px solid var(--sidebar-border);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-top: 1px solid var(--sidebar-border);
}
.sidebar-user .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
}
.sidebar-user .meta { flex: 1; }
.sidebar-user .meta .name { font-size: 13px; font-weight: 500; }
.sidebar-user .meta .role { font-size: 11px; color: var(--text-muted); }
.sidebar-user button {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
}

.main-content { flex: 1; min-width: 0; margin-left: 246px; padding: 24px 32px; max-width: 100%; overflow-x: auto; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.page-header h2 { margin: 0 0 4px; font-size: 20px; }
.page-header p { margin: 0; color: var(--text-muted); font-size: 13px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-main);
}
.btn:hover { background: #f7f8fb; }
.btn-primary {
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
    border: none;
    color: #fff;
    font-weight: 600;
}
/* Re-declares the gradient rather than relying on the base .btn:hover
   rule above (which sets a near-white background) — without this, a
   hovered primary button ends up with white text on a near-white
   background and the label effectively disappears. */
.btn-primary:hover { background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); opacity: 0.92; }
.btn-danger { border-color: rgba(226,75,74,0.4); color: var(--danger); background:#fff; }
.btn-success { border-color: rgba(29,158,117,0.4); color: var(--success); background: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
}

.filters-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.filters-bar input, .filters-bar select {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 13px;
}
.filters-bar input[type=text] { flex: 1; min-width: 220px; }

/* Multi-select status filter (Task Tracker: To-do list / Meetings) — a
   button that reports the current selection ("3 of 4", "All", "None")
   and opens a small checkbox popover on click. Deliberately not the
   .chip-row pattern used elsewhere (CRM product/tag pickers): those sit
   inside a modal with room to spare, this needs to be compact enough to
   share a toolbar row with a search box, two more selects, and a sort
   picker without wrapping awkwardly. */
.tt-msf { position: relative; }
.tt-msf-btn {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
}
.tt-msf-btn:hover { border-color: var(--brand-blue); }
.tt-msf.open .tt-msf-btn { border-color: var(--brand-blue); color: var(--brand-blue); }
.tt-msf-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(12,15,34,0.15);
    padding: 10px 14px;
    min-width: 160px;
}
.tt-msf.open .tt-msf-panel { display: flex; flex-direction: column; gap: 8px; }
.tt-msf-panel label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); cursor: pointer; white-space: nowrap; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.grid td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.grid tr:hover td { background: #fafbfd; }
.grid-sort-link {
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.grid-sort-link:hover { color: var(--brand-blue); }
.grid-sort-link.active { color: var(--text-main); font-weight: 600; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.pagination-info { color: var(--text-muted); font-size: 13px; }
.pagination-size { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.pagination-size select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 13px;
}
.pagination-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pagination-ellipsis { padding: 0 4px; color: var(--text-muted); }
.pagination-pages .btn.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}
.badge-usable   { background: #eaf3de; color: #3b6d11; }
.badge-damaged  { background: #faeeda; color: #854f0b; }
.badge-lost     { background: #fcebeb; color: #a32d2d; }
.badge-repair   { background: #e6f1fb; color: #0c447c; }
.badge-spare    { background: #e6f1fb; color: #185fa5; }
.badge-expired  { background: #fcebeb; color: #a32d2d; }
.badge-active   { background: #eaf3de; color: #3b6d11; }
.badge-neutral  { background: #f1efe8; color: #444441; }
.badge-issued   { background: #eeedfe; color: #3c3489; }

form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px 20px;
}
form .form-group { display: flex; flex-direction: column; min-width: 0; }
form label { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
form input, form select, form textarea {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 13px;
    font-family: inherit;
}
form textarea { resize: vertical; min-height: 70px; }
form .full-width { grid-column: 1 / -1; }

.employee-picker-results {
    display: none;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 4px 14px rgba(28,33,64,0.08);
}
.employee-picker-row { padding: 9px 12px; font-size: 13px; cursor: pointer; }
.employee-picker-row:hover { background: #f4f6fb; }
.employee-picker-selected { margin-top: 6px; font-size: 12px; color: var(--success); font-weight: 600; }

.locked-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #f4f5f9;
    color: var(--text-muted);
    font-size: 13px;
}

.alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert-success { background: #eaf3de; color: #3b6d11; }
.alert-error { background: #fcebeb; color: #a32d2d; }

.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }

.form-actions { display: flex; gap: 10px; margin-top: 20px; }

.tab-bar { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-bar a {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: #fff;
}
.tab-bar a.active {
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
    color: #fff;
    border: none;
}

/* ---------------- History modal ---------------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(18, 22, 43, 0.55);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
    background: var(--card-bg);
    border-radius: 14px;
    width: 480px;
    max-width: 92vw;
    max-height: 86vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(12, 15, 34, 0.35);
}
.modal.modal-wide { width: 640px; }

.modal-header {
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
    color: #fff;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.modal-header h2 { font-size: 15px; font-weight: 600; margin: 0; }
.modal-header button {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    font-size: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}
.modal-header button:hover { background: rgba(255,255,255,0.3); }

.modal-body { padding: 20px; overflow-y: auto; flex: 1; }

.modal-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.modal-meta .m-item {
    background: var(--surface-soft);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    min-width: 90px;
}
.modal-meta .m-item strong {
    display: block;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-weight: 500;
    text-transform: uppercase;
}

.timeline { position: relative; padding-left: 22px; }
.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--border);
}
.tl-item { position: relative; margin-bottom: 14px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
    position: absolute;
    left: -19px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 2px solid var(--card-bg);
    box-shadow: 0 0 0 2px var(--text-muted);
}
.tl-dot.current { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.tl-content {
    background: var(--surface-soft);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
}
.tl-name { font-weight: 600; font-size: 13px; color: var(--text-main); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-desig { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.tl-dates { color: var(--text-muted); margin: 5px 0 0; font-size: 12px; }
.tl-reason { color: var(--text-muted); font-style: italic; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.tl-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    margin-left: auto;
}
.tl-tag.current { background: #eaf3de; color: #3b6d11; }
.tl-tag.past { background: #f1efe8; color: #444441; }

/* ---------------- Asset details modal (redesigned) ---------------- */
.modal.modal-asset { width: 760px; }

.ast-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}
.ast-header-left { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.ast-icon-box {
    width: 50px; height: 50px; border-radius: 12px; flex: none;
    background: #eef0fd; color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center;
}
.ast-icon-box svg { width: 24px; height: 24px; }
.ast-title-block { min-width: 0; }
.ast-title-block h2 {
    margin: 0 0 5px; font-size: 16.5px; font-weight: 700; color: var(--text-main);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ast-subtitle { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.ast-header-right { display: flex; align-items: flex-start; gap: 14px; flex: none; }
.ast-quickspecs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px 22px;
    text-align: right; min-width: 190px;
}
.ast-quickspecs .qs-item strong {
    display: block; font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; margin-bottom: 2px;
}
.ast-quickspecs .qs-item span { font-size: 12.5px; color: var(--text-main); font-weight: 600; }
.ast-close-btn {
    background: var(--surface-soft); border: none; color: var(--text-muted);
    font-size: 17px; width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; line-height: 1; flex: none;
}
.ast-close-btn:hover { background: var(--border); color: var(--text-main); }

.ast-body { padding: 20px 22px; }

.ast-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px) { .ast-layout { grid-template-columns: 1fr; } }

.ast-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--text-main); margin: 0 0 14px;
}
.ast-section-title svg { width: 16px; height: 16px; color: var(--brand-blue); }

.ast-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ast-field { display: flex; gap: 10px; align-items: flex-start; }
.ast-field-icon {
    width: 32px; height: 32px; border-radius: 8px; flex: none;
    background: #eef1fd; color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center;
}
.ast-field-icon svg { width: 16px; height: 16px; }
.ast-field-text { min-width: 0; }
.ast-field-text .fl-label { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.ast-field-text .fl-value { font-size: 13.5px; font-weight: 600; color: var(--text-main); word-break: break-word; }

.ast-card { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.ast-card h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; color: var(--text-main); }

.ast-holder { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ast-holder .avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.ast-holder .meta { flex: 1; min-width: 0; }
.ast-holder .meta .h-name { font-size: 13.5px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ast-holder .meta .h-desig { font-size: 11.5px; color: var(--text-muted); }
.ast-empty-holder { font-size: 12.5px; color: var(--text-muted); padding: 4px 0 2px; }

.ast-holder-meta { display: flex; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }
.ast-holder-meta .hm-item { font-size: 11px; }
.ast-holder-meta .hm-item strong { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
.ast-holder-meta .hm-item .hm-value { font-size: 12.5px; color: var(--text-main); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.ast-holder-meta .hm-item .hm-value svg { width: 13px; height: 13px; color: var(--text-muted); }

.ast-handover { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; }
.ast-handover .h-label { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.ast-handover .h-value { font-size: 12.5px; color: var(--text-main); font-style: italic; }

.ast-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ast-action-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: 10px; border: 1px solid var(--border);
    background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-main); cursor: pointer;
}
.ast-action-btn:hover { background: #f7f8fb; }
.ast-action-btn svg { width: 18px; height: 18px; color: var(--brand-blue); }

.ast-notes { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border); }

.ast-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; flex-shrink: 0; }

@media (max-width: 900px) {
    .ast-header { flex-direction: column; }
    .ast-header-right { width: 100%; justify-content: space-between; }
    .ast-quickspecs { text-align: left; }
}

/* ---------------- Public respond (accept/decline) page ---------------- */
.respond-page {
    min-height: 100vh;
    background: #eef1f6;
    padding: 32px 16px;
    display: flex;
    justify-content: center;
}
.respond-card {
    width: 640px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(28,33,64,0.12);
    height: fit-content;
}
.respond-header {
    background: linear-gradient(120deg, #0d4d94, #155ea6 55%, #1a6bc2);
    padding: 24px 28px;
    color: #fff;
}
.respond-header-top { display: flex; align-items: center; gap: 10px; }
.respond-header-logo {
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px;
}
.respond-header-top strong { font-size: 20px; font-weight: 700; }
.respond-header .subtitle { margin: 2px 0 0 44px; font-size: 13px; color: rgba(255,255,255,0.85); }

.respond-body { padding: 28px; }

.respond-intro { text-align: center; margin-bottom: 22px; }
.respond-intro .icon-circle {
    width: 56px; height: 56px; border-radius: 50%;
    background: #eaf2fb; display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 0 auto 12px;
}
.respond-intro h1 { margin: 0; font-size: 21px; color: var(--text-main); }
.respond-intro p { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; }
.respond-intro .accent-line { width: 40px; height: 3px; background: var(--brand-blue); border-radius: 2px; margin: 12px auto 0; }

.respond-greeting { font-weight: 700; color: var(--text-main); font-size: 14px; margin: 0 0 8px; }
.respond-lead { color: #3a3f55; font-size: 13.5px; line-height: 1.6; margin: 0 0 20px; }
.respond-lead .hl { color: var(--brand-blue); font-weight: 700; }

.respond-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.respond-field {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.respond-field:nth-child(2n) { border-right: none; }
.respond-field.full { grid-column: 1 / -1; border-right: none; border-bottom: none; }
.respond-grid .respond-field:nth-last-child(-n+2) { border-bottom: none; }
.respond-field-icon {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    background: #eaf2fb; color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.respond-field-label { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.respond-field-value { font-size: 14px; font-weight: 700; color: var(--text-main); }

.respond-callout {
    background: #eaf2fb;
    border-left: 4px solid var(--brand-blue);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 24px;
    display: flex; gap: 12px;
}
.respond-callout .icon { font-size: 18px; flex: none; }
.respond-callout strong { display: block; color: var(--text-main); font-size: 13.5px; margin-bottom: 6px; }
.respond-callout p { margin: 0 0 4px; color: #3a3f55; font-size: 13px; line-height: 1.5; }
.respond-callout p:last-child { margin-bottom: 0; }

.respond-question { text-align: center; font-weight: 700; color: var(--text-main); font-size: 15px; margin: 0 0 16px; }
.respond-actions-row { display: flex; gap: 16px; }
.respond-action { flex: 1; text-align: center; }
.respond-action button {
    width: 100%; border: none; border-radius: 8px; padding: 13px 16px;
    font-size: 14.5px; font-weight: 700; color: #fff; cursor: pointer;
}
.respond-action.accept button { background: var(--success); }
.respond-action.accept button:hover { background: #17835f; }
.respond-action.reject button { background: var(--danger); }
.respond-action.reject button:hover { background: #c53f3e; }
.respond-action .caption { margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted); }

.respond-reason { margin-top: 16px; text-align: left; display: none; }
.respond-reason.open { display: block; }
.respond-reason textarea { width: 100%; }
.respond-reason .respond-reason-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }

.respond-contact {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px 16px; margin-top: 22px; font-size: 12.5px; color: #3a3f55;
}
.respond-contact .icon { font-size: 16px; flex: none; }
.respond-contact a { color: var(--brand-blue); font-weight: 600; }

.respond-footer-bar {
    background: linear-gradient(120deg, #0d4d94, #155ea6 55%, #1a6bc2);
    color: rgba(255,255,255,0.85);
    text-align: center; padding: 16px 20px; font-size: 11.5px;
}
.respond-footer-bar div:first-child { color: #fff; margin-bottom: 3px; font-size: 12.5px; }

.respond-status-badge {
    display: inline-block; padding: 4px 12px; border-radius: 12px;
    font-size: 12px; font-weight: 700;
}
.respond-status-badge.accepted { background: #e3f5ee; color: var(--success); }
.respond-status-badge.declined { background: #fbeaea; color: var(--danger); }

.tl-accept-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}
.tl-accept-badge.pending { background: #fdf1e0; color: var(--warning); }
.tl-accept-badge.accepted { background: #e3f5ee; color: var(--success); }
.tl-accept-badge.declined { background: #fbeaea; color: var(--danger); }

/* ---------------- Products page (card grid) ---------------- */
.product-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}
.product-toolbar input[type=text] {
    flex: 1;
    max-width: 360px;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.product-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover { box-shadow: 0 6px 20px rgba(28,33,64,0.08); transform: translateY(-1px); }
.product-card.is-inactive { opacity: 0.55; }

.product-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.product-icon {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: #fff; font-weight: 700; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.product-title-block { flex: 1; min-width: 0; }
.product-title { font-size: 15px; font-weight: 700; color: var(--text-main); margin: 0 0 3px; overflow-wrap: break-word; }
.product-sub-count { font-size: 12px; color: var(--text-muted); }

.product-toggle-form { flex: none; }
.icon-toggle-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 7px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted);
}
.icon-toggle-btn:hover { background: var(--surface-soft); }
.icon-toggle-btn.is-active { color: var(--success); border-color: rgba(29,158,117,0.35); }

.submodule-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; min-height: 24px; }
.submodule-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 10px 4px 12px;
    font-size: 12px;
    color: var(--text-main);
}
.submodule-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
.submodule-chip.is-inactive .dot { background: #c7cadb; }
.submodule-chip.is-inactive { color: var(--text-muted); text-decoration: line-through; }
.submodule-chip button {
    border: none; background: none; cursor: pointer; color: var(--text-muted);
    font-size: 13px; line-height: 1; padding: 0 0 0 2px;
}
.submodule-chip button:hover { color: var(--danger); }
.no-submodules-hint { font-size: 12px; color: var(--text-muted); font-style: italic; margin-bottom: 14px; }

.product-card-footer { border-top: 1px solid var(--border); padding-top: 12px; }
.product-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

/* ---------------- Mobile responsiveness ---------------- */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--sidebar-bg);
        color: var(--text-main);
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 150;
        border-bottom: 1px solid var(--sidebar-border);
    }
    .mobile-topbar img { height: 24px; }
    /* The sidebar's brand-logo-chip is full-width by default (see the
       base rule) so it reads as a proper header there — reset that back
       to a compact inline chip here, since the mobile topbar is a
       horizontal bar sharing space with the hamburger button. */
    .mobile-topbar .brand-logo-chip { width: auto; padding: 6px 8px; }

    .hamburger-btn {
        background: rgba(28,33,64,0.06);
        border: 1px solid var(--sidebar-border);
        color: var(--text-main);
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .sidebar-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(9,11,24,0.5);
        z-index: 290;
    }

    .app-shell { position: relative; }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 250px;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 300;
    }
    .sidebar.mobile-open { transform: translateX(0); }

    /* Sidebar is an off-canvas drawer on mobile (position:fixed, translated
       off-screen until opened) — it doesn't reserve permanent layout space
       there, unlike the desktop margin-left above. */
    .main-content { margin-left: 0; padding: 16px; }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .page-header .btn,
    .page-header a.btn {
        width: 100%;
        justify-content: center;
    }

    .filters-bar { flex-direction: column; align-items: stretch; }
    .filters-bar input[type=text] { min-width: 0; }
    .filters-bar select { width: 100%; }

    .tab-bar { flex-wrap: wrap; }

    form .form-grid { grid-template-columns: 1fr; }

    .card { overflow-x: auto; }

    .modal, .modal.modal-wide, .modal.modal-asset { width: 100%; max-width: 96vw; }

    .respond-grid { grid-template-columns: 1fr; }
    .respond-actions-row { flex-direction: column; }

    .login-card { width: auto; max-width: 92vw; padding: 2rem 1.5rem; }

    table.grid th, table.grid td { padding: 8px; font-size: 12.5px; }
}

@media (max-width: 600px) {
    .product-toolbar { flex-direction: column; align-items: stretch; }
    .product-toolbar input[type=text] { max-width: none; }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; justify-content: center; }
}

/* ---------------- Global page loader ---------------- */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 245, 249, 0.92);
    backdrop-filter: blur(2px);
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.page-loader-ring {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-loader-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--brand-blue);
    border-right-color: var(--brand-purple);
    animation: page-loader-spin 0.85s linear infinite;
}
.page-loader-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(18, 22, 43, 0.15);
    animation: page-loader-pulse 1.4s ease-in-out infinite;
}
@keyframes page-loader-spin {
    to { transform: rotate(360deg); }
}
@keyframes page-loader-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.9); opacity: 0.72; }
}
/* Login page has its own blue scene background — match it so the
   loader doesn't flash a light box over it. */
.login-page .page-loader {
    background: rgba(44, 79, 184, 0.92);
}
.login-page .page-loader-ring::before {
    border-color: rgba(255, 255, 255, 0.22);
    border-top-color: #ffffff;
    border-right-color: var(--brand-purple);
}


/* ---------------- Leave calendar ---------------- */
  /* Compact header: title/toolbar/legend+stats used to be four stacked
     blocks with their own margins (~320px of "chrome" before any real
     data) — now three tight rows so the timeline starts much higher on
     the page. */
  .lc-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
  .lc-header h2 { font-size: 18px; font-weight: 600; margin: 0; }
  .lc-sync-badge {
    display: inline-flex; align-items: center; gap: 7px; background: #eaf3de; color: #3b6d11;
    padding: 5px 11px 5px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  }
  .lc-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: #3b6d11; flex: 0 0 6px; animation: lc-pulse 1.8s infinite; }
  @keyframes lc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  .lc-refresh-btn {
    border: 1px solid var(--border); background: #fff; border-radius: 20px; width: 27px; height: 27px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); margin-left: 6px;
  }
  .lc-refresh-btn:hover { color: var(--brand-blue); border-color: var(--brand-blue); }
  .lc-refresh-btn.spinning i { animation: lc-spin .6s linear; }
  @keyframes lc-spin { to { transform: rotate(360deg); } }

  .lc-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px;
  }
  .lc-month-nav { display: flex; align-items: center; gap: 4px; }
  .lc-month-nav button {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main);
  }
  .lc-month-nav button:hover { background: var(--surface-soft); }
  .lc-month-label { font-weight: 600; font-size: 13px; min-width: 116px; text-align: center; }
  .lc-today-btn {
    border: 1px solid var(--border); background: #fff; border-radius: 7px; padding: 5px 10px; font-size: 12px;
    cursor: pointer; color: var(--text-main); font-family: inherit;
  }
  .lc-today-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
  .lc-toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
  .lc-search { position: relative; flex: 1; min-width: 150px; }
  .lc-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 15px; }
  .lc-search input {
    width: 100%; padding: 6px 10px 6px 10px; border-radius: 7px; border: 1px solid var(--border); font-size: 12px;
    font-family: inherit; color: var(--text-main);
  }
  .lc-select {
    padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border); font-size: 12px; font-family: inherit;
    color: var(--text-main); background: #fff;
  }
  .lc-view-toggle { display: flex; background: var(--surface-soft); border-radius: 8px; padding: 2px; gap: 2px; }
  .lc-view-toggle button {
    border: none; background: none; padding: 5px 11px; border-radius: 6px; font-size: 12px; cursor: pointer;
    color: var(--text-muted); font-family: inherit; display: flex; align-items: center; gap: 6px;
  }
  .lc-view-toggle button.active { background: #fff; color: var(--text-main); font-weight: 600; box-shadow: 0 1px 2px rgba(18,22,43,.08); }

  /* Legend (clickable leave-type filter chips) and the four summary stats
     used to be two separately-spaced blocks (a wrapping chip row, then a
     4-card grid) — now one slim scrollable strip. */
  .lc-infobar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 11.5px; color: var(--text-muted); padding: 5px 2px; }
  .lc-legend-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .lc-legend-chip {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 3px 8px 3px 6px; border-radius: 20px;
    border: 1px solid transparent; transition: opacity .12s;
  }
  .lc-legend-chip:hover { background: var(--surface-soft); }
  .lc-legend-chip.off { opacity: .35; }
  .lc-legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
  .lc-legend-divider, .lc-infobar-sep { width: 1px; height: 14px; background: var(--border); }
  .lc-legend-status { display: flex; align-items: center; gap: 5px; }
  .lc-status-sample { width: 18px; height: 8px; border-radius: 5px; background: var(--brand-blue); flex: 0 0 18px; }
  .lc-status-sample.pending {
    background: repeating-linear-gradient(45deg, var(--brand-blue), var(--brand-blue) 3px, #fff 3px, #fff 6px);
    opacity: .8;
  }
  .lc-stat-inline { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
  .lc-stat-inline b { color: var(--text-main); font-size: 12.5px; font-weight: 700; }

  .lc-panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

  .lc-drawer {
    display: none; border-bottom: 1px solid var(--border); background: #fafbff; padding: 14px 18px;
  }
  .lc-drawer.open { display: block; }
  .lc-drawer-close {
    float: right; border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 16px; padding: 4px;
  }
  .lc-drawer-close:hover { color: var(--text-main); }
  .lc-drawer-row { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
  .lc-drawer-row:last-child { border-bottom: none; }
  .lc-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 13px; flex: 0 0 36px; }
  .lc-drawer-name { font-weight: 600; font-size: 13.5px; margin: 0; }
  .lc-drawer-desig { font-size: 12px; color: var(--text-muted); margin: 1px 0 6px; }
  .lc-drawer-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--text-main); }
  .lc-drawer-meta span { color: var(--text-muted); }
  .lc-drawer-reason { font-size: 12.5px; margin-top: 6px; color: var(--text-main); }
  .lc-erp-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-muted); border: 1px solid var(--border); padding: 2px 7px; border-radius: 20px; margin-top: 8px; }

  .badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
  .badge-approved { background: #eaf3de; color: #3b6d11; }
  .badge-pending { background: #faeeda; color: #854f0b; }

  /* Timeline: a real <table> instead of a flex/CSS-grid div stack, so
     every date is its own bordered cell and multi-day leaves span
     cleanly via colspan instead of absolutely-positioned bars that
     visually blurred day boundaries together. The leave TYPE id (e.g.
     the ERP leave type code) is shown on the cell instead of the full
     leave type name (shorter, doesn't truncate) or the request id.
     The employee column is capped/truncated so it doesn't eat into the
     date-grid area on narrower screens. */
  .lc-table-scroll { overflow-x: auto; }
  table.lc-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 11.5px; }
  table.lc-table th, table.lc-table td { border: 1px solid #eceef4; }
  table.lc-table thead th {
    background: #fbfbfd; color: var(--text-muted); font-weight: 600; padding: 6px 2px; text-align: center;
    position: sticky; top: 0; z-index: 2; font-size: 10.5px;
  }
  table.lc-table thead th.lc-emp-col {
    text-align: left; padding: 6px 8px; position: sticky; left: 0; z-index: 3;
    width: 132px; min-width: 132px; max-width: 132px;
  }
  th.lc-day-th, td.lc-day-td { width: 30px; min-width: 30px; max-width: 30px; }
  th.lc-day-th.weekend, td.lc-day-td.weekend { background: #f6f6fa; }
  th.lc-day-th.today { color: var(--brand-blue); font-weight: 700; }
  td.lc-day-td.today { box-shadow: inset 1px 0 0 var(--brand-blue), inset -1px 0 0 var(--brand-blue); }
  .lc-dow { display: block; font-size: 9px; font-weight: 400; letter-spacing: .02em; }

  td.lc-emp-td {
    position: sticky; left: 0; z-index: 1; background: #fff;
    padding: 6px 8px; white-space: nowrap; border-right: 1px solid var(--border);
    width: 132px; min-width: 132px; max-width: 132px; overflow: hidden;
  }
  tr:hover td.lc-emp-td { background: #fafbff; }
  .lc-emp-row-flex { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .lc-emp-name {
    font-weight: 600; font-size: 11.5px; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px;
  }
  .lc-emp-desig {
    font-size: 10px; color: var(--text-muted); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px;
  }

  td.lc-leave-td {
    color: #fff; font-weight: 700; font-size: 10px; text-align: center; cursor: pointer;
    letter-spacing: .01em; padding: 0; height: 34px; border: none; font-family: inherit;
  }
  td.lc-leave-td.pending {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 4px, rgba(255,255,255,.35) 4px, rgba(255,255,255,.35) 8px);
  }
  td.lc-leave-td:hover { filter: brightness(1.08); }

  .lc-grid-view { display: none; padding: 14px; }
  .lc-grid-view.active { display: block; }
  .lc-grid-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
  .lc-grid-dow div { text-align: center; font-size: 11px; color: var(--text-muted); font-weight: 600; }
  .lc-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .lc-grid-cell { min-height: 84px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 7px; background: #fff; }
  .lc-grid-cell.empty { border: none; background: none; }
  .lc-grid-cell.weekend { background: #fafbfc; }
  .lc-grid-cell.today { border-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue); }
  .lc-grid-date { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
  .lc-grid-cell.today .lc-grid-date { color: var(--brand-blue); }
  .lc-grid-chips { display: flex; flex-wrap: wrap; gap: 3px; }
  .lc-chip {
    width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; padding: 0;
  }
  .lc-chip-more {
    font-size: 9.5px; color: var(--text-muted); cursor: pointer; background: var(--surface-soft); border-radius: 10px;
    padding: 3px 6px; border: none; font-family: inherit;
  }

  .lc-t-days, .lc-day-cell-row { }
  .lc-footnote { margin-top: 14px; font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.lc-avatar-sm { width: 28px; height: 28px; font-size: 11px; }

/* ---------------- Task tracker ---------------- */
.tt-tab.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.tt-panel { display: none; }
.tt-panel.active { display: block; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.stat {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    flex: 1;
    min-width: 130px;
}
.stat .num { font-size: 24px; font-weight: 700; color: var(--text-main); }
.stat .label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.tt-empty { color: var(--text-muted); font-size: 13px; padding: 20px 0; text-align: center; }

.tt-checkbox-cell { width: 30px; }
.tt-checkbox-cell input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.tt-due-soon { color: var(--danger); font-weight: 600; }
.tt-actions-cell { text-align: right; white-space: nowrap; }

.tt-share-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    max-height: 120px;
    overflow-y: auto;
    background: #fbfcfe;
}
.tt-share-option { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text-main); white-space: nowrap; }
.tt-share-option input { width: auto; }

.tt-shared-cell { display: inline-flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.tt-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-muted);
    white-space: nowrap;
}
.tt-share-select, .tt-status-select {
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    margin-left: 6px;
    max-width: 140px;
}
.tt-status-select { color: var(--text-main); margin-left: 0; }

table.grid td:has(.tt-shared-cell) { white-space: normal; }

/* ---------------- Task tracker: Dashboard ---------------- */
.tt-stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.tt-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tt-stat-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.tt-stat-icon svg { width: 20px; height: 20px; }
.tt-stat-icon-blue   { background: rgba(79,107,240,0.12); color: var(--brand-blue); }
.tt-stat-icon-red    { background: rgba(226,75,74,0.12); color: var(--danger); }
.tt-stat-icon-amber  { background: rgba(186,117,23,0.14); color: var(--warning); }
.tt-stat-icon-green  { background: rgba(29,158,117,0.12); color: var(--success); }
.tt-stat-icon-purple { background: rgba(123,97,255,0.12); color: var(--brand-purple); }
.tt-stat-num { font-size: 22px; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.tt-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.tt-stat-delta { font-size: 11.5px; color: var(--success); font-weight: 600; margin-top: 3px; }
.tt-stat-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

/* ---------------- CRM dashboard header toolbar (owner filter / search / + New opportunity) ---------------- */
.crm-dash-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-dash-toolbar select, .crm-dash-toolbar input[type="text"] {
    padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; font-family: inherit; background: #fff;
}
.crm-dash-toolbar input[type="text"] { width: 200px; }

/* ---------------- CRM dashboard: Quick actions / Top sources / Recent activity ---------------- */
.crm-qa-list { display: flex; flex-direction: column; gap: 8px; }
.crm-qa-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
    background: #fff; font-size: 13px; color: var(--text-main); cursor: pointer; text-align: left; width: 100%;
    font-family: inherit;
}
.crm-qa-btn:hover { background: var(--surface-soft); }
.crm-qa-btn .crm-qa-icon {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; background: rgba(79,107,240,0.12); color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center;
}
.crm-qa-btn .crm-qa-icon svg { width: 15px; height: 15px; }
.crm-qa-btn.crm-qa-soon { color: var(--text-muted); }

.crm-source-block { padding: 9px 0; border-bottom: 1px solid var(--border); }
.crm-source-block:last-child { border-bottom: none; }
.crm-source-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.crm-source-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue);
    background: rgba(79,107,240,0.1);
    padding: 3px 10px;
    border-radius: 99px;
}
.crm-source-pct { font-size: 12px; color: var(--text-main); font-weight: 600; flex-shrink: 0; }

/* Dashboard-only two-column layout. Reuses the same grid mechanics as
   the shared .detail-grid (used on Company/Contact/Opportunity detail
   pages) but with a less lopsided ratio — the design's Pipeline-by-stage
   card doesn't need 2/3 of the row, and Top sources reads better with
   more room for its badge + progress-bar rows. Kept as its own class
   rather than editing .detail-grid so those other pages are unaffected. */
.crm-dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .crm-dash-grid { grid-template-columns: 1fr; } }

.crm-stage-label { display: flex; align-items: center; gap: 7px; flex-shrink: 0; overflow: hidden; }
.crm-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.crm-stage-name { font-size: 12.5px; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-stage-prob { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.crm-stage-amount {
    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-main);
    min-width: 80px;
    text-align: right;
    flex-shrink: 0;
}

/* ---------------- CRM Analytics ---------------- */
.crm-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 1100px) { .crm-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .crm-kpi-grid { grid-template-columns: 1fr; } }
.crm-kpi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.crm-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.crm-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-main); line-height: 1.15; }
.crm-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.crm-analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1000px) { .crm-analytics-grid { grid-template-columns: 1fr; } }

/* Each row is centered so shorter (lower-count) bars sit in the middle
   of the card rather than hugging the left edge -- matches the
   reference screenshot. The bar's own width is computed with a CSS
   calc() blend between a fixed floor (enough to fit the longest label,
   so a 0-count bar never clips its own text) and 100% of the row, so
   it's never just a same-size sliver for every zero -- and any count
   above zero is guaranteed strictly wider than the floor. */
.crm-funnel-row { margin-bottom: 6px; display: flex; justify-content: center; }
.crm-funnel-row:last-child { margin-bottom: 0; }
.crm-funnel-bar {
    height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden;
    transition: width 0.2s ease;
}

.crm-leader-row { padding: 9px 0; border-bottom: 1px solid var(--border); }
.crm-leader-row:last-child { border-bottom: none; }
.crm-leader-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.crm-leader-name { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.crm-leader-stats { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; text-align: right; }

.crm-trend-chart { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-top: 10px; }
.crm-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.crm-trend-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; justify-content: center; }
.crm-trend-bar { width: 60%; min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand-blue), var(--brand-purple)); }
.crm-trend-val { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; white-space: nowrap; }
.crm-trend-label { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; width: 100%; text-align: center; }

.crm-analytics-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-analytics-filters select, .crm-analytics-filters input[type="date"] {
    padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; font-family: inherit; background: #fff;
}

.crm-activity-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.crm-activity-row:last-child { border-bottom: none; }
.crm-activity-icon {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--surface-soft); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.crm-activity-body { flex: 1; min-width: 0; }
.crm-activity-text { font-size: 12.5px; color: var(--text-main); }
.crm-activity-text a { color: var(--brand-blue); }
.crm-activity-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ---------------- Definition-list table (read-only detail views: Company
   details, Contact details) — label/value pairs, label muted+narrow,
   value right-aligned. ---------------- */
.dl { width: 100%; border-collapse: collapse; }
.dl td { padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.dl tr:last-child td { border-bottom: none; }
.dl td:first-child { color: var(--text-muted); width: 40%; }
.dl td:last-child { color: var(--text-main); text-align: right; }

/* ---------------- Opportunity detail: sales-stage progress bar ---------------- */
.stage-bar { background: var(--surface-soft); border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; }
.stage-bar-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.progress-segments { display: grid; gap: 4px; margin-bottom: 8px; }
.progress-segments div { height: 6px; background: #d5dcea; border-radius: 3px; }
.progress-segments div.done { background: var(--brand-blue); }
.progress-segments div.current { background: var(--brand-blue); box-shadow: 0 0 0 3px rgba(79,107,240,0.18); }
.progress-labels { display: grid; gap: 4px; font-size: 11px; color: var(--text-muted); }
.progress-labels div.current { color: var(--brand-blue); font-weight: 600; }

.tt-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .tt-dash-grid { grid-template-columns: 1fr; } }

/* Generic 2-column detail layout (main content + a narrower summary
   sidebar) — introduced for the Expense Claims detail page, but not
   feature-specific; any detail page that wants a "content + at-a-glance
   summary" split can reuse this. */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .detail-grid { grid-template-columns: 1fr; } }

.section-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-card-header h2 { font-size: 16px; margin: 0; }
.section-card-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.section-card-icon svg { width: 18px; height: 18px; }


.tt-dash-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.tt-dash-card-header h2 { font-size: 14px; margin: 0; font-weight: 600; }
.tt-dash-card-header a { font-size: 12px; color: var(--brand-blue); font-weight: 500; }

.tt-dash-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.tt-dash-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 4px; border-bottom: 1px solid var(--border);
}
.tt-dash-row:last-child { border-bottom: none; }
.tt-dash-row-main { flex: 1; min-width: 0; }
.tt-dash-row-title { font-size: 13px; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-dash-row-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.tt-radio-circle {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border);
    background: none; cursor: pointer; flex-shrink: 0; padding: 0;
}
.tt-radio-circle:hover { border-color: var(--brand-blue); }

.tt-due-chip { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.tt-due-chip-overdue { color: var(--danger); font-weight: 600; }

.tt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

.tt-cal-nav { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.tt-cal-nav-btn {
    width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: #fff;
    cursor: pointer; font-size: 13px; line-height: 1; color: var(--text-muted);
}
.tt-cal-nav-btn:hover { background: var(--surface-soft); color: var(--text-main); }
.tt-cal-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.tt-cal-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.tt-cal-row:last-child { border-bottom: none; }
.tt-cal-row-time { font-size: 11.5px; color: var(--text-muted); width: 52px; flex-shrink: 0; }

.tt-warn-icon { color: var(--danger); font-size: 14px; flex-shrink: 0; }

.tt-avatar-sm {
    width: 24px; height: 24px; border-radius: 50%; background: var(--surface-soft); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
    flex-shrink: 0; text-transform: uppercase;
}

.tt-donut-wrap { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; }
.tt-donut { width: 140px; height: 140px; }
.tt-donut-total { font-size: 22px; font-weight: 700; fill: var(--text-main); }
.tt-donut-total-label { font-size: 10px; fill: var(--text-muted); }
.tt-donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-main); }
.tt-legend-item { display: flex; align-items: center; gap: 8px; }
.tt-legend-item strong { margin-left: 2px; }

.tt-workload-list { display: flex; flex-direction: column; gap: 12px; }
.tt-workload-row { display: flex; align-items: center; gap: 10px; }
.tt-workload-name { font-size: 12.5px; color: var(--text-main); width: 90px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-workload-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-soft); overflow: hidden; }
.tt-workload-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); border-radius: 4px; }
.tt-workload-count { font-size: 11.5px; color: var(--text-muted); width: 40px; text-align: right; flex-shrink: 0; }

.tt-activity-list { display: flex; flex-direction: column; gap: 2px; }
.tt-activity-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tt-activity-row:last-child { border-bottom: none; }
.tt-activity-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-soft); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.tt-activity-time { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

/* ---------------- CRM module (Companies/Contacts/Opportunities) ---------------- */
.crm-tag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---- CRM chip-style multi/single-select (products, focus tags) ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px;
    border: 1px solid var(--border); background: #fff; font-size: 12.5px; color: var(--text-main);
    cursor: pointer; user-select: none; transition: all 0.12s ease;
}
.chip:hover { border-color: var(--brand-blue); }
.chip-checkbox:checked + .chip {
    background: rgba(79,107,240,0.1); border-color: var(--brand-blue); color: var(--brand-blue); font-weight: 600;
}
.chip-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
/* Chips used as <button type="submit"> (e.g. the opportunity detail
   page's Focus colour picker, one form per chip) instead of the
   checkbox+label pattern above — needs its own "selected" state since
   there's no sibling checkbox for :checked to key off of, and a UA
   style reset since <button> brings its own font/appearance. */
button.chip { font-family: inherit; appearance: none; }
.chip.chip-on { background: rgba(79,107,240,0.1); color: var(--brand-blue); font-weight: 600; }

/* ---- Pipeline header stats + tag-dot filter row ---- */
.crm-tagfilter-dot {
    width: 18px; height: 18px; border-radius: 50%; cursor: pointer; display: inline-block;
    border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border) inset;
}
.crm-tagfilter-dot.on { border-color: var(--text-main); box-shadow: 0 0 0 2px #fff inset; }

/* ---- Company/opportunity typeahead picker ---- */
.crm-picker { position: relative; }
.crm-picker-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(18,22,43,0.12); max-height: 240px; overflow-y: auto;
}
.crm-picker-item {
    display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
    padding: 9px 12px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-main);
}
.crm-picker-item:hover { background: var(--surface-soft); }
.crm-picker-empty { padding: 12px; font-size: 12.5px; color: var(--text-muted); }