/* =============================================================================
   AMG CRM — base stylesheet (2026-08 redesign)
   Direction: data-dense professional, soft-dimensional. Inter typography,
   one token scale for color / radius / shadow / motion, refined navy hero,
   calm table, smooth micro-interactions. Every selector from the previous
   sheet is preserved — only the visual language changed.
   ============================================================================= */

:root {
    /* color */
    --ink:        #0b1526;
    --ink-2:      #3f4d63;
    --muted:      #64748b;
    --line:       #e3e9f2;
    --line-2:     #cfd9e6;
    --bg:         #eef2f8;
    --surface:    #ffffff;
    --surface-2:  #f6f9fc;
    --navy:       #0b1220;
    --navy-2:     #101d36;
    --brand:      #2563eb;
    --brand-deep: #1e40af;
    --accent:     #22d3ee;
    --danger:     #dc2626;
    --success:    #16a34a;
    /* radius */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 22px;
    /* shadows — 3 levels, layered & soft */
    --sh-1: 0 1px 2px rgba(11, 21, 38, .05), 0 2px 8px rgba(11, 21, 38, .05);
    --sh-2: 0 2px 4px rgba(11, 21, 38, .05), 0 12px 28px -10px rgba(11, 21, 38, .16);
    --sh-3: 0 8px 20px rgba(11, 21, 38, .10), 0 32px 64px -18px rgba(11, 21, 38, .32);
    /* motion */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --t-fast: .16s;
    --t-med:  .26s;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--font);
    background:
        radial-gradient(60% 40% at 85% -5%, rgba(37, 99, 235, .05), transparent 70%),
        radial-gradient(50% 35% at 0% 0%, rgba(34, 211, 238, .05), transparent 70%),
        var(--bg);
    color: var(--ink);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

:focus-visible {
    outline: 2.5px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.hidden {
    display: none !important;
}

.app,
.screen {
    min-height: 100vh;
    padding: 16px 10px;
    max-width: none;
    margin: 0 auto;
}

/* ------------------------------- HERO ------------------------------- */
.hero {
    position: relative;
    background:
        radial-gradient(120% 180% at 100% 0%, rgba(37, 99, 235, .28), transparent 45%),
        radial-gradient(80% 140% at 0% 100%, rgba(34, 211, 238, .12), transparent 55%),
        linear-gradient(135deg, var(--navy) 30%, var(--navy-2) 100%);
    color: #ffffff;
    border-radius: var(--r-xl);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .07);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.hero p {
    margin: 0 0 8px;
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.hero h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 750;
    letter-spacing: -.02em;
}

.hero span {
    display: block;
    margin-top: 9px;
    color: #aebfda;
    font-size: 13.5px;
}

.hero small {
    display: block;
    margin-top: 6px;
    color: #8fb8f6;
    font-size: 12px;
    font-weight: 600;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 330px;
}

.menu form {
    margin: 0;
}

/* ------------------------------ BUTTONS ------------------------------ */
.btn {
    border: 0;
    border-radius: var(--r-sm);
    min-height: 34px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1;
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.btn:active {
    transform: translateY(0) scale(.99);
}

.btn.dark {
    background: linear-gradient(160deg, #16233c, var(--navy) 80%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 21, 38, .3), inset 0 1px 0 rgba(255, 255, 255, .09);
}

.btn.dark:hover {
    background: linear-gradient(160deg, #1d2e4e, #101c33 80%);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(11, 21, 38, .45), inset 0 1px 0 rgba(255, 255, 255, .09);
}

.btn.light {
    background: var(--surface);
    color: #101d36;
    border: 1px solid var(--line-2);
    box-shadow: 0 1px 2px rgba(11, 21, 38, .05);
}

.btn.light:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px -4px rgba(37, 99, 235, .28);
}

.btn.red {
    background: linear-gradient(160deg, #ef4444, var(--danger) 70%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(153, 27, 27, .35);
}

.btn.red:hover {
    background: linear-gradient(160deg, #dc2626, #b91c1c 70%);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(185, 28, 28, .45);
}

.btn.small,
.btn-sm {
    min-height: 30px;
    padding: 7px 11px;
    font-size: 12px;
    border-radius: 9px;
}

.btn.disabled,
a.disabled {
    pointer-events: none;
    opacity: 0.55;
}

/* ------------------------------- CARDS ------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--sh-1);
}

.card h2 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.filters label,
.edit-grid label {
    display: block;
}

.filters label > span,
.edit-grid label > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ------------------------------- INPUTS ------------------------------- */
.input,
select.input,
textarea.input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.input:hover,
select.input:hover {
    border-color: #b6c5d8;
}

.input:focus,
select.input:focus,
textarea.input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.13);
}

textarea.input,
.textarea {
    min-height: 105px;
    resize: vertical;
}

/* ----------------------------- STAGE CARDS ----------------------------- */
.stage-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.stage-card {
    min-height: 104px;
    border-radius: 16px;
    border: 1px solid rgba(11, 21, 38, 0.12);
    padding: 10px;
    box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .28);
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.stage-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.stage-card b {
    display: inline;
    font-size: 20px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.stage-card strong {
    display: block;
    margin-top: 4px;
    font-size: 17px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.stage-card span {
    display: block;
    margin-top: 8px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .01em;
}

.stage-card small {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 600;
    opacity: .85;
}

/* ------------------------------- TABLE ------------------------------- */
.table-wrap {
    width: 100%;
    max-height: 590px;
    overflow: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surface);
    scrollbar-width: thin;
    scrollbar-color: #b6c5d8 transparent;
}

.table-wrap::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: #b6c5d8;
    border-radius: 8px;
    border: 2px solid var(--surface);
}

.table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a9c4;
}

.table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

table {
    width: 100%;
    min-width: 2400px;
    border-collapse: collapse;
    font-size: 13px;
}

thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, #17233b, #0f1a2e);
    color: #e7edf6;
    box-shadow: 0 2px 8px rgba(11, 21, 38, .18);
}

th,
td {
    padding: 11px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

th {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

td {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

td.wide {
    min-width: 280px;
    max-width: 360px;
}

tbody tr {
    cursor: pointer;
    transition: filter var(--t-fast) var(--ease);
}

tbody tr:hover {
    filter: brightness(0.955);
}

/* ------------------------------- ALERTS ------------------------------- */
.alert {
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13.5px;
    font-weight: 600;
    animation: alertIn .3s var(--ease);
}

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

.alert.amber {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.alert.red {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.alert.blue {
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
}

/* ------------------------------- LOGIN ------------------------------- */
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(55% 60% at 12% 8%, rgba(37, 99, 235, .34), transparent 60%),
        radial-gradient(45% 55% at 88% 18%, rgba(34, 211, 238, .17), transparent 60%),
        radial-gradient(50% 60% at 75% 95%, rgba(74, 222, 128, .12), transparent 60%),
        var(--navy);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 16px;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--sh-3);
    animation: loginIn .5s var(--ease);
}

@keyframes loginIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.login-card h1 {
    margin: 0 0 18px;
    font-size: 27px;
    font-weight: 750;
    letter-spacing: -.02em;
}

.login-card .input {
    margin-bottom: 10px;
}

.hint {
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
}

/* ------------------------------- LAYOUT ------------------------------- */
.grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.row .input {
    flex: 1;
    min-width: 220px;
}

.user-box {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    margin-bottom: 10px;
    background: var(--surface);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.user-box:hover {
    border-color: var(--line-2);
    box-shadow: var(--sh-1);
}

.user-box b {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
}

.user-box > div {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--surface);
    margin: 0;
    transition: border-color var(--t-fast) var(--ease);
}

.chip:hover {
    border-color: var(--line-2);
}

.chip span:first-child {
    overflow-wrap: anywhere;
    font-weight: 600;
}

.readonly-chip {
    background: var(--surface-2);
}

.readonly-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e6ecf4;
    color: #334155;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.empty-state {
    width: 100%;
    padding: 14px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px dashed var(--line-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.tests {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 16px;
}

.tests div {
    border-radius: var(--r-md);
    padding: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
}

/* ------------------------------- DRAWER ------------------------------- */
.drawer-bg {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(8, 15, 30, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    justify-content: flex-end;
    animation: drawerBgIn var(--t-med) var(--ease);
}

@keyframes drawerBgIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drawer {
    width: 100%;
    max-width: 620px;
    height: 100vh;
    overflow: auto;
    background: var(--surface);
    padding: 20px;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    box-shadow: -24px 0 70px rgba(4, 10, 22, 0.35);
    animation: drawerIn var(--t-med) var(--ease);
    scrollbar-width: thin;
    scrollbar-color: #b6c5d8 transparent;
}

.drawer::-webkit-scrollbar {
    width: 9px;
}

.drawer::-webkit-scrollbar-thumb {
    background: #b6c5d8;
    border-radius: 8px;
    border: 2px solid var(--surface);
}

@keyframes drawerIn {
    from { transform: translateX(26px); opacity: .4; }
    to   { transform: none; opacity: 1; }
}

.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.drawer-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.02em;
}

.drawer-head p {
    margin: 5px 0 0;
    color: var(--muted);
}

.x {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.x:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--danger);
    transform: rotate(90deg);
}

.drawer-stages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.drawer-stages form {
    margin: 0;
}

.drawer-stages button {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(11, 21, 38, 0.16);
    border-radius: 12px;
    padding: 9px 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
}

.drawer b {
    display: block;
    margin: 14px 0 7px;
    font-weight: 700;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.detail-grid > div {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    transition: border-color var(--t-fast) var(--ease);
}

.detail-grid > div:hover {
    border-color: var(--line-2);
}

.detail-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.detail-grid p {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
}

/* ------------------------------- MODALS ------------------------------- */
.modal-bg {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(8, 15, 30, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: drawerBgIn var(--t-med) var(--ease);
}

.modal {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: auto;
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 20px;
    box-shadow: var(--sh-3);
    animation: modalIn var(--t-med) var(--ease);
    scrollbar-width: thin;
    scrollbar-color: #b6c5d8 transparent;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(.975); }
    to   { opacity: 1; transform: none; }
}

.modal.wide {
    max-width: 1080px;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.modal-head h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.02em;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.edit-grid .span2 {
    grid-column: 1 / -1;
}

.quote-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quote-row .input {
    flex: 1;
}

.quote-row button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.quote-row button:hover {
    border-color: var(--brand);
    background: #eff6ff;
}

.other-currency {
    width: 66px;
    height: 38px;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.money-input {
    position: relative;
    width: 100%;
}

.money-input span {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--muted);
    font-weight: 700;
    pointer-events: none;
}

.money-input .input {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-left: 34px !important;
}

.soft-box {
    border-radius: var(--r-md);
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

/* ----------------------------- RESPONSIVE ----------------------------- */
@media (max-width: 1250px) {
    .stage-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filters .btn {
        grid-column: 1 / -1;
        width: fit-content;
    }
}

@media (max-width: 900px) {
    .hero {
        flex-direction: column;
    }

    .menu {
        justify-content: flex-start;
        min-width: 0;
    }

    .filters,
    .grid2,
    .edit-grid,
    .detail-grid,
    .tests {
        grid-template-columns: 1fr;
    }

    .stage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .drawer-stages {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .app,
    .screen {
        padding: 10px;
    }

    .hero,
    .card,
    .modal {
        border-radius: var(--r-lg);
        padding: 14px;
    }

    .hero h1 {
        font-size: 24px;
    }

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

    .stage-card {
        min-height: 0;
        padding: 12px 14px;
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .stage-card b {
        font-size: 18px;
    }

    .stage-card span {
        margin-top: 0;
    }

    .drawer {
        max-width: 100%;
        padding: 14px;
        border-radius: 0;
    }

    .chip,
    .row {
        align-items: stretch;
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .menu .btn,
    .modal-actions .btn,
    .row .btn {
        width: auto;
    }
}

/* Fixed floating Excel-style filters and collapsed date tree */
.th-filter-menu{
    position:fixed !important;
    z-index:999999 !important;
    width:320px;
    max-height:430px;
    overflow:auto;
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--line-2);
    border-radius:var(--r-md);
    box-shadow:var(--sh-3);
    animation: modalIn .18s var(--ease);
}
.th-filter-menu.open{display:block !important;}
.date-tree-node{margin:2px 0;}
.date-tree-row{display:flex;align-items:center;gap:6px;}
.date-tree-row label{display:flex;align-items:center;gap:7px;min-width:0;flex:1;cursor:pointer;}
.date-tree-toggle{width:22px;height:22px;min-width:22px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface-2);color:var(--ink);font-size:14px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.date-tree-toggle:hover{background:#e6ecf4;}
.date-tree-children{display:none;}
.date-tree-node.open > .date-tree-children{display:block;}
.date-month-node{margin-left:18px;}
.date-day-group{margin-left:22px;}
.th-filter-option.date-month{padding-left:4px;}
.th-filter-option.date-day{padding-left:8px;}


/* Lead drawer instant auto-save for BD Comments and Q&A */
.drawer-comment-panel {
    margin-top: 12px;
}

.drawer-comment-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.drawer-comment-title-row b,
.drawer-comment-panel b {
    margin: 0 0 7px;
}

.instant-save-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 4px 10px;
    background: #eef2f8;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.instant-save-status.saving {
    background: #fffbeb;
    color: #92400e;
}

.instant-save-status.saved {
    background: #ecfdf5;
    color: #047857;
}

.instant-save-status.error {
    background: #fef2f2;
    color: #b91c1c;
}

/* Main CRM compact viewport mode: keep the whole dashboard inside one browser window */
@media (min-width: 901px) {
    .app {
        height: 100vh;
        min-height: 0;
        max-width: 1440px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .app .hero {
        flex-shrink: 0;
        padding: 15px 20px;
        margin-bottom: 10px;
        border-radius: var(--r-lg);
        gap: 14px;
    }

    .app .hero p {
        margin-bottom: 5px;
        font-size: 10.5px;
        letter-spacing: 0.2em;
    }

    .app .hero h1 {
        font-size: 26px;
        line-height: 1.08;
    }

    .app .hero span {
        margin-top: 6px;
        font-size: 12px;
    }

    .app .hero small {
        margin-top: 4px;
        font-size: 11px;
    }

    .app .menu {
        gap: 7px;
        min-width: 0;
    }

    .app .menu .btn {
        min-height: 30px;
        padding: 7px 11px;
        font-size: 12px;
        border-radius: 9px;
    }

    .app > .card.filters {
        flex-shrink: 0;
        padding: 11px 14px;
        margin-bottom: 10px;
        border-radius: var(--r-lg);
        gap: 10px;
    }

    .app .filters label > span {
        margin-bottom: 4px;
        font-size: 10px;
    }

    .app .input,
    .app select.input,
    .app textarea.input {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 13px;
        border-radius: 11px;
    }

    .app .stage-grid.stage-grid-compact {
        flex-shrink: 0;
        margin-bottom: 10px;
        gap: 8px;
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }

    .app .stage-grid.stage-grid-compact .stage-card {
        min-height: 74px;
        padding: 7px 8px;
        border-radius: 13px;
        box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    .app .stage-grid.stage-grid-compact .stage-card:hover {
        box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    .app .stage-grid.stage-grid-compact .stage-card b {
        font-size: 18px;
    }

    .app .stage-grid.stage-grid-compact .stage-card strong {
        font-size: 14px;
        line-height: 1.05;
        margin-top: 3px;
    }

    .app .stage-grid.stage-grid-compact .stage-card span {
        margin-top: 5px;
        font-size: 8.5px;
        line-height: 1.1;
    }

    .app .stage-grid.stage-grid-compact .stage-card small {
        font-size: 7.5px;
        line-height: 1.05;
    }

    .app > .card:has(.table-wrap) {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 12px;
        margin-bottom: 0;
        border-radius: var(--r-lg);
    }

    .app > .card:has(.table-wrap) .table-wrap {
        flex: 1 1 auto;
        height: 100%;
        max-height: none;
        min-height: 0;
        border-radius: 12px;
    }

    .app table {
        font-size: 12px;
    }

    .app th,
    .app td {
        padding: 8px 10px;
    }

    .app .lead-filter-summary {
        flex-shrink: 0;
        margin-top: 8px;
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (min-width: 901px) and (max-height: 820px) {
    .app {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .app .hero {
        padding: 12px 18px;
        margin-bottom: 8px;
    }

    .app .hero h1 {
        font-size: 24px;
    }

    .app > .card.filters {
        padding: 9px 12px;
        margin-bottom: 8px;
    }

    .app .stage-grid.stage-grid-compact {
        margin-bottom: 8px;
    }

    .app .stage-grid.stage-grid-compact .stage-card {
        min-height: 66px;
        padding: 6px 7px;
    }

    .app .stage-grid.stage-grid-compact .stage-card b {
        font-size: 16px;
    }

    .app .stage-grid.stage-grid-compact .stage-card strong {
        font-size: 12px;
    }

    .app .stage-grid.stage-grid-compact .stage-card span {
        font-size: 8px;
        margin-top: 4px;
    }

    .app > .card:has(.table-wrap) {
        padding: 10px;
    }

    .app th,
    .app td {
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

/* ======================================================================
   LIQUID GLASS — hero menu controls
   ----------------------------------------------------------------------
   The buttons that float on the dark navy hero become translucent glass
   capsules: blurred, saturated backdrop + thin luminous border + inner
   top-light + soft wide shadow. Scoped to .menu so the same .btn classes
   keep their solid look on light surfaces (drawers, cards, modals).
   Hierarchy: "+ Add Lead" = strong brand-tinted glass with a hover
   shimmer; the tool buttons = medium neutral glass; Logout = same glass
   (it lives in a form, still .menu .btn).
   ====================================================================== */
.menu .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 999px;
    min-height: 36px;
    padding: 8px 16px;
    letter-spacing: -.005em;
}

/* specular top-light shared by every glass capsule */
.menu .btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, .30),
        rgba(255, 255, 255, .05) 38%,
        transparent 62%);
    opacity: .6;
    pointer-events: none;
}

.menu .btn.light {
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .20);
    color: #eaf1ff;
    box-shadow:
        0 4px 14px rgba(2, 8, 23, .28),
        inset 0 1px 0 rgba(255, 255, 255, .26),
        inset 0 -1px 0 rgba(255, 255, 255, .05);
}

.menu .btn.light:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .11));
    border-color: rgba(255, 255, 255, .36);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
        0 8px 22px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255, 255, 255, .34);
}

/* primary CTA — brand-tinted glass */
.menu .btn.dark {
    background: linear-gradient(135deg, rgba(59, 130, 246, .85), rgba(29, 78, 216, .66));
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(147, 197, 253, .40);
    color: #ffffff;
    box-shadow:
        0 6px 18px rgba(37, 99, 235, .35),
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.menu .btn.dark:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, .92), rgba(37, 99, 235, .76));
    transform: translateY(-1px);
    box-shadow:
        0 10px 26px rgba(37, 99, 235, .45),
        inset 0 1px 0 rgba(255, 255, 255, .38);
}

/* shimmer sweep — primary CTA only, on hover, never constant */
.menu .btn.dark::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -70%;
    width: 45%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: rotate(18deg);
    transition: left .55s var(--ease);
    pointer-events: none;
}

.menu .btn.dark:hover::after {
    left: 135%;
}

.menu .btn:active {
    transform: scale(.96);
}

.menu .btn:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 2px;
}

.menu .btn.disabled,
.menu .btn:disabled {
    opacity: .45;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

/* the "Logged in as" note stays quiet under the glass row */
.menu small {
    color: #8fb8f6;
}

/* ------------------- premium detail: selection tint ------------------- */
::selection {
    background: rgba(37, 99, 235, .22);
}

/* ------------------- premium detail: slim scrollbars ------------------ */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: #c3ccdb;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #9aa8bf;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------------------------- REDUCED MOTION ---------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .menu .btn.dark::after {
        display: none;
    }
}