:root {
    --rag-light-green: #DCFCE7;
    --rag-green: #15803D;
    --rag-light-amber: #FEF3C7;
    --rag-amber: #B45309;
    --rag-light-red: #FECACA;
    --rag-red: #DC2626;
    --status-light-blue: #DBEAFE;
    --status-blue: #1D4ED8;
    --section-bg: #ececec;
    --status-light-purple: #EEE7FF;
    --status-purple: #6D28D9;
    --status-light-grey: #F3F4F6;
    --status-grey: #6B7280;
    /*color-scheme: light dark;*/
    --egp-text-green: #0A8F80;
    --egp-green: #3CDBC0;
    --egp-green-hover: #35C8AE;
    --egp-green-pressed: #2DB39A;
    --egp-dark: #2D2734;
    --muted: #667085;
    --control-background: #F8FAFC;
    /* ── 60% BACKGROUND & SURFACES — Pantone 650c tints ── */
    --bg: #F8FAFC; /* lighter tint of CED9E5 */
    --surface: #FFFFFF;
    --surface-2: #DDE6EF; /* mid tint between white and CED9E5 */
    --border: #C4D3DF; /* CED9E5 darkened slightly */
    --border-strong: #D1D5DB;
    --chrome-text: #111827;
    /* ── 30% STRUCTURE — Pantone 7667c (mid blue) ── */
    --ink-900: #2C3550; /* deep shade of 6E7CA0 for body text */
    --ink-600: #6E7CA0; /* brand mid-blue — secondary text, icons */
    --ink-400: #9DAABF; /* tint of 6E7CA0 — muted/placeholder */
    --table-th-colour: #667085;
    --label-colour: black;
    /* Sidebar & topbar use the mid-blue as background */
    --chrome-bg: #2D2734; /* Pantone 7667c */
    /*--chrome-bg: #6E7CA0;*/ /* Pantone 7667c */
    --chrome-hover: #5D6B90;
    --chrome-active: #4D5A7E;
    --chrome-border: #5D6B90;
    --chrome-text: #3CDBC0;
    /*--chrome-text: #FFFFFF;*/

    --chrome-muted: rgba(255,255,255,0.88);
    /* ── 10% CTA — Pantone 710c ── */
    --accent: #E03E52;
    --accent-hover: #C4303F; /* darkened for hover */
    --accent-tint: #FAEAEC; /* very pale tint for active states */
    --accent-border: #F0A0AA;
    /* ── Supporting — Pantone 2325c (tan) ── */
    --tan: #A09074;
    --tan-tint: #F0EBE4;
    --tan-border: #C8B89C;
    /* ── Semantic — derived from brand palette only ── */
    --warn: #A09074; /* tan for financial warnings */
    --warn-tint: #F0EBE4;
    --danger: #E03E52; /* red for overdue/outstanding */
    --danger-tint: #FAEAEC;
    /* Stage pipeline */
    --stage-bg: #DDE6EF;
    --stage-ink: #6E7CA0;
    --stage-active-bg: #FAEAEC;
    --stage-active-ink: #E03E52;
    --stage-active-bdr: #E03E52;
    /* Typography — 4 sizes */
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --matter-card-title-height: 50px;
    /* Spacing — 8pt grid */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 40px;
    --sp-8: 48px;
    --box-height: 40px;
    --control-radius: 10px;
    --shadow: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --radius: 8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --sidebar-width: 205px;
    --sidebar-width-icon-only: 80px;
    --top: 64px;
}

@media (prefers-color-scheme: dark) {
    :root {
    }
}

body {
    font-family: Inter,Arial,sans-serif;
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
}

.global-spinner-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    cursor: wait;
}

.global-spinner-content {
    background: var(--surface);
    color: var(--ink-900);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--sp-4) var(--sp-5);
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.global-spinner-message {
    font-size: var(--fs-base);
    font-weight: 600;
}

.egp-green-link {
    color: var(--egp-text-green);
    text-decoration: none;
    font-weight: 600;
}

    .egp-green-link:hover {
        color: var(--egp-green-hover);
    }

.control-label:after {
    padding-left: 4px;
    padding-right: 8px;
}

.control-label.required:after {
    content: '*';
    color: var(--danger);
}

.control-label.required.has-help-info-after:after {
    content: 'ℹ️*';
    color: var(--danger);
}

.control-label.required-before:before {
    content: '*';
    color: var(--danger);
    padding-right: 10px;
}

.switcher {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink-900);
    border-radius: 100px;
    display: flex;
    gap: 2px;
    padding: 4px;
    z-index: 9999;
    box-shadow: var(--shadow);
}

.sw-btn {
    padding: var(--sp-2) var(--sp-5);
    border-radius: 100px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

    .sw-btn.active {
        background: var(--accent);
        color: white;
    }

.screen {
    display: none;
}

    .screen.visible {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }


.logo-row {
    height: 65px;
    padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--chrome-border);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

    .logo-row:hover {
        cursor: pointer;
    }

.logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


.logo-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--chrome-text);
    line-height: 1.2;
}

.logo-sub {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--chrome-muted);
}

.nav {
    padding: var(--sp-3) var(--sp-2);
    overflow-y: auto;
    display: block;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--surface);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    user-select: none;
}

    .nav-item:hover {
        background: var(--chrome-hover);
        color: var(--chrome-text);
    }

    .nav-item.active {
        background: linear-gradient(90deg,rgba(60,219,192,.22),rgba(60,219,192,.08));
        color: var(--egp-green);
        box-shadow: inset 4px 0 0 var(--egp-green);
        font-weight: 500;
        border-left: 4px solid var(--chrome-text);
        border-radius: 8px;
    }

    .nav-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.75;
    }

    .nav-item.active svg {
        opacity: 1;
    }

.nav-badge {
    margin-left: auto;
    background: rgba(255,255,255,0.25);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 0 6px;
    border-radius: 100px;
    min-width: 20px;
    text-align: center;
    line-height: 18px;
}

.nav-item.active > .nav-badge {
    background-color: var(--chrome-text);
    color: black;
}

.nav-divider {
    height: 1px;
    background: var(--chrome-border);
    margin: var(--sp-2) var(--sp-3);
}

.sidebar-user {
    padding: var(--sp-3) var(--sp-2);
    border-top: 1px solid var(--chrome-border);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
    margin: var(--sp-2);
    transition: background 0.12s;
}

    .sidebar-user:hover {
        background: var(--chrome-hover);
    }

.u-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--chrome-active);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.u-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--chrome-text);
}

.u-role {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--chrome-muted);
}
.main {
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.topbar {
    height: 56px;
    background: var(--chrome-bg);
    border-bottom: 1px solid var(--chrome-border);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-5);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
}

.back-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    color: var(--chrome-text);
    flex-shrink: 0;
    transition: background 0.12s;
    text-decoration: none;
}

    .back-btn:hover {
        background: var(--chrome-hover);
    }

    .back-btn svg {
        width: 14px;
        height: 14px;
    }

.tab {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--chrome-muted);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.12s;
}

    .tab:hover {
        background: var(--chrome-hover);
        color: var(--chrome-text);
    }

    .tab.active {
        background: var(--surface);
        color: var(--ink-900);
        font-weight: 600;
        border-color: var(--chrome-border);
    }

.tab-close {
    font-size: 10px;
    opacity: 0.45;
    padding: 1px 3px;
    border-radius: 3px;
}

    .tab-close:hover {
        opacity: 1;
        background: rgba(255,255,255,0.15);
    }

.breadcrumb {
    height: 32px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-5);
    gap: var(--sp-2);
    flex-shrink: 0;
    margin-bottom: 0;
}

.bc-item {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-400);
    cursor: pointer;
}

    .bc-item:hover {
        color: var(--ink-600);
    }

.bc-sep {
    font-size: var(--fs-sm);
    color: var(--ink-400);
}

.bc-item.current {
    color: var(--ink-900);
    font-weight: 600;
    cursor: default;
}
.content {
    flex: 1;
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
}
.section-nav {
    display: flex;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-1);
    width: fit-content;
    box-shadow: var(--shadow);
}

.snav-btn {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-600);
    cursor: pointer;
    transition: background 0.12s;
}

    .snav-btn:hover {
        background: var(--surface-2);
        color: var(--ink-900);
    }

    .snav-btn.active {
        background: var(--ink-600);
        color: #fff;
        font-weight: 600;
    }
.matter-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.matter-card-top {
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
}

.matter-ref {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-400);
    margin-bottom: var(--sp-1);
}

.matter-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--ink-900);
    max-height: 40px;
    overflow: hidden;
}

    .matter-title.expanded {
        transition: all 0.3s ease-in-out;
        max-height: fit-content;
    }

    .matter-title:not(.expanded) .ai-case-overview, .matter-title:not(.expanded) .finance-top-details {
        display: none;
    }

    .matter-title:not(.expanded) .matter-icon {
        height: 40px;
    }

        .matter-title:not(.expanded) .matter-icon svg {
            width: 30px;
            height: auto;
        }

.matter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-1);
}
.pill {
    padding: 2px var(--sp-3);
    border-radius: 100px;
    font-size: var(--fs-sm);
    font-weight: 400;
    background: var(--surface-2);
    color: var(--ink-600);
    border: 1px solid var(--border);
}

    .pill.accent {
        background: var(--ink-600);
        color: #fff;
        border-color: var(--ink-600);
        font-weight: 600;
    }
.fin-group {
    display: flex;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.fin-card {
    border-radius: var(--radius);
    padding: var(--sp-1) var(--sp-4);
    text-align: right;
    min-width: 136px;
    border: 1px solid transparent;
}

.fin-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.03em;
}

.fin-val {
    font-family: 'DM Mono', monospace;
    font-size: var(--fs-lg);
    font-weight: 400;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 1px;
}

    .fin-val .pence {
        font-size: var(--fs-sm);
        opacity: 0.65;
    }
.fin-card.uninvoiced {
    background: var(--tan-tint);
    border-color: var(--tan-border);
}

    .fin-card.uninvoiced .fin-label {
        color: var(--tan);
    }

    .fin-card.uninvoiced .fin-val {
        color: #5C3D00;
    }
.fin-card.outstanding {
    background: var(--ink-900);
    border-color: var(--ink-900);
}

    .fin-card.outstanding .fin-label {
        color: rgba(255,255,255,0.70);
    }

    .fin-card.outstanding .fin-val {
        color: #FFFFFF;
    }
.subprocess-strip {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}
.sp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 400;
    border: 1.5px solid transparent;
    white-space: nowrap;
    cursor: default;
    line-height: 1.3;
}

    .sp .sp-icon {
        font-size: 10px;
        flex-shrink: 0;
        line-height: 1;
    }
    .sp.not-required {
        background: transparent;
        border-color: transparent;
        color: var(--ink-400);
        text-decoration: line-through;
    }

    .sp.pending {
        background: var(--surface);
        border-color: var(--border);
        color: var(--ink-600);
    }

    .sp.due {
        background: var(--warn-tint);
        border-color: var(--tan-border);
        color: #5C3D00;
        font-weight: 600;
    }

    .sp.waiting-them {
        background: var(--warn-tint);
        border-color: var(--tan);
        color: #5C3D00;
        font-weight: 600;
    }

    .sp.waiting-me {
        background: #FFF0E8;
        border-color: #D4700A;
        color: #7A3800;
        font-weight: 600;
    }

    .sp.active {
        background: var(--accent-tint);
        border-color: var(--ink-600);
        color: var(--ink-900);
        font-weight: 600;
    }

    .sp.complete {
        background: var(--surface-2);
        border-color: var(--border);
        color: var(--ink-400);
    }
.sp-legend {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: var(--sp-3) var(--sp-5);
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: var(--sp-1) var(--sp-5);
    width: 100%;
    align-items: center;
}
.sp-kv {
    display: contents; 
}

.sp-kv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid transparent;
    white-space: nowrap;
    line-height: 1.3;
    justify-self: start;
}

.sp-kv-desc {
    font-size: 11px;
    color: var(--ink-400);
    line-height: 1.4;
}
.sp-appt {
    position: relative;
    cursor: pointer;
}

    .sp-appt .sp-expand {
        font-size: 9px;
        opacity: 0.6;
        margin-left: 2px;
        transition: transform 0.15s;
    }

    .sp-appt.open .sp-expand {
        transform: rotate(180deg);
        opacity: 1;
    }

.sp-kv-chip.inprocess {
    background: var(--accent-tint);
    border-color: var(--ink-600);
    color: var(--ink-900);
}

.sp-kv-chip.completed {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--ink-400);
}

.sp-kv-chip.outbound {
    background: var(--warn-tint);
    border-color: var(--tan);
    color: #5C3D00;
}

.sp-kv-chip.inbound {
    background: #FFF0E8;
    border-color: #D4700A;
    color: #7A3800;
}
.appt-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: var(--surface);
    border: 1.5px solid var(--ink-600);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
    width: 320px;
    overflow: hidden;
}
    .appt-popover.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
    }

.sp-appt.open .appt-popover {
    display: block;
}

.appt-popover-head {
    background: var(--ink-600);
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.appt-popover-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
}

.appt-popover-type {
    font-size: 11px;
    color: rgba(255,255,255,0.70);
    background: rgba(255,255,255,0.15);
    padding: 1px 8px;
    border-radius: 100px;
}
.appt-ladder {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ladder-step {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    position: relative;
}
    .ladder-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 20px;
        width: 2px;
        height: calc(100% + 4px);
        background: var(--border);
        z-index: 0;
    }

    .ladder-step.done:not(:last-child)::after {
        background: var(--ink-600);
    }

    .ladder-step.current:not(:last-child)::after {
        background: var(--border);
    }
.ladder-node {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    position: relative;
    z-index: 1;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--ink-400);
}

.ladder-step.done .ladder-node {
    background: var(--ink-600);
    border-color: var(--ink-600);
    color: #fff;
}

.ladder-step.current .ladder-node {
    background: var(--accent-tint);
    border-color: var(--ink-600);
    box-shadow: 0 0 0 3px rgba(110,124,160,0.20);
}
.ladder-step.current.waiting-them .ladder-node {
    background: var(--warn-tint);
    border-color: var(--tan);
    color: #5C3D00;
}
.ladder-step.current.waiting-me .ladder-node {
    background: #FFF0E8;
    border-color: #D4700A;
    color: #7A3800;
}

.ladder-content {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--sp-2);
}

.ladder-label {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-400);
    line-height: 1.3;
}

.ladder-step.done .ladder-label {
    color: var(--ink-400);
}

.ladder-step.current .ladder-label {
    font-weight: 600;
    color: var(--ink-900);
}

.ladder-ball {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 100px;
}

    .ladder-ball.them {
        background: var(--warn-tint);
        color: #5C3D00;
        border: 1px solid var(--tan-border);
    }

    .ladder-ball.me {
        background: #FFF0E8;
        color: #7A3800;
        border: 1px solid #D4700A;
    }

    .ladder-ball.done-tag {
        background: var(--surface-2);
        color: var(--ink-400);
        border: 1px solid var(--border);
    }
.appt-confirmed {
    margin: 0 var(--sp-3) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: flex;
    gap: var(--sp-4);
}

.appt-confirmed-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appt-confirmed-label {
    font-size: 10px;
    color: var(--ink-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.appt-confirmed-val {
    font-family: 'DM Mono', monospace;
    font-size: var(--fs-sm);
    color: var(--ink-900);
    font-weight: 400;
}
.body-cols {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
}

.col-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.col-side {
    width: 264px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-head {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
}

.card-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-900);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

    .card-title svg {
        width: 14px;
        height: 14px;
        color: var(--ink-600);
    }

.card-body {
    padding: var(--sp-4);
}

.card-count {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-400);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 0 var(--sp-2);
    border-radius: 100px;
    line-height: 18px;
}
.inner-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 var(--sp-4);
}

.itab {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-400);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.12s;
}

    .itab:hover {
        color: var(--ink-900);
    }

    .itab.active {
        color: var(--ink-600);
        border-bottom-color: var(--ink-600);
        font-weight: 600;
    }
.tbl {
    width: 100%;
    border-collapse: collapse;
}

    .tbl th {
        text-align: left;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--table-th-colour);
        padding: var(--sp-2) var(--sp-4);
        border-bottom: 1px solid var(--border);
        background: var(--surface-2);
        white-space: nowrap;
    }

    .tbl td {
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--fs-sm);
        font-weight: 400;
        color: var(--ink-900);
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    .tbl tr:last-child td {
        border-bottom: none;
    }

    .tbl tr:hover td {
        background: var(--accent-tint);
    }

    .tbl tr.active-row td {
        background: var(--accent-tint);
    }
.tbl-sm-font td{
    font-size:10px;
}
.task-name {
    font-size: var(--fs-base);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.badge-warn {
    font-size: var(--fs-sm);
    font-weight: 600;
    background: var(--warn-tint);
    color: var(--warn);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-sm);
}
.stag {
    display: inline-flex;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 400;
    background: var(--surface-2);
    color: var(--ink-600);
    border: 1px solid var(--border);
    white-space: nowrap;
}

    .stag.accent {
        background: var(--ink-600);
        color: #fff;
        border-color: var(--ink-600);
        font-weight: 600;
    }

.check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    color: var(--ink-400);
}

    .check.done {
        background: var(--ink-600);
        border-color: var(--ink-600);
        color: #fff;
    }

    .check.started {
        border-color: var(--chrome-border);
        border-width: 3px;
    }

.dt {
    font-size: var(--fs-sm);
    color: var(--ink-600);
}

    .dt.warn {
        color: var(--warn);
        font-weight: 600;
    }

.card-foot {
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
/* ── BUTTONS ── */
.btn {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    border: none;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.12s;
    white-space: nowrap;
}
.btn-ghost {
    background: var(--surface);
    color: var(--ink-600);
    border: 1px solid var(--border);
}

    .btn-ghost:hover {
        background: var(--surface-2);
        color: var(--ink-900);
    }

.btn-ghost-dark-hover:hover {
    background: var(--chrome-active);
    color: var(--chrome-text);
}

.btn svg {
    width: 12px;
    height: 12px;
}
.flags-row {
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.flag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px var(--sp-3);
    border-radius: 100px;
    font-size: var(--fs-sm);
    font-weight: 400;
    border: 1.5px solid var(--border);
    cursor: pointer;
    user-select: none;
    transition: all 0.12s;
    background: var(--surface-2);
    color: var(--ink-400);
}
    .flag-chip.on {
        background: var(--accent-tint);
        color: var(--ink-900);
        border-color: var(--ink-600);
        font-weight: 600;
    }

        .flag-chip.on .flag-icon {
            color: var(--ink-600);
        }
    .flag-chip.warn {
        background: var(--warn-tint);
        color: #5C3D00;
        border-color: var(--tan);
        font-weight: 600;
    }

        .flag-chip.warn .flag-icon {
            color: var(--tan);
        }
    .flag-chip .flag-icon {
        font-size: 11px;
        line-height: 1;
    }
.contact-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

    .contact-row:last-child {
        border-bottom: none;
    }

    .contact-row:hover {
        background: var(--surface-2);
    }

.c-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    flex-shrink: 0;
    background: var(--surface-2);
    color: var(--ink-600);
    border: 1px solid var(--border);
}

.c-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-900);
}

.c-role {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-600);
}

.c-actions {
    display: flex;
    gap: var(--sp-1);
    margin-left: auto;
}

.c-btn {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-400);
    transition: all 0.1s;
}

    .c-btn:hover {
        background: var(--surface-2);
        color: var(--ink-600);
        border-color: var(--ink-600);
    }

    .c-btn svg {
        width: 12px;
        height: 12px;
    }
.tags-row {
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.tag {
    padding: 2px var(--sp-3);
    border-radius: 20px;
    font-size: var(--fs-sm);
    font-weight: 400;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink-600);
    cursor: pointer;
    transition: all 0.1s;
    height: fit-content;
}

    .tag:hover {
        background: var(--ink-600);
        color: #fff;
        border-color: var(--ink-600);
    }

    .tag.library {
        background-color: var(--chrome-text);
        color: white;
    }

    .tag.selected {
        background: var(--ink-600);
        color: #fff;
        border-color: var(--ink-600);
        font-weight: 600;
    }
.tag-add {
    padding: 2px var(--sp-3);
    border-radius: 100px;
    font-size: var(--fs-sm);
    font-weight: 400;
    background: transparent;
    border: 1px dashed var(--border-strong);
    color: var(--ink-400);
    cursor: pointer;
    transition: all 0.1s;
}

    .tag-add:hover {
        border-color: var(--ink-600);
        color: var(--ink-600);
    }
.view-toggle {
    display: flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}

.vt-btn {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-600);
    cursor: pointer;
    transition: background 0.1s;
}

    .vt-btn.active {
        background: var(--surface);
        font-weight: 600;
        color: var(--ink-900);
        box-shadow: var(--shadow);
    }
.doc-chip {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--surface-2);
    color: var(--ink-600);
    border: 1px solid var(--border);
}

    .doc-chip.accent {
        background: var(--ink-600);
        color: #fff;
        border-color: var(--ink-600);
    }

.doc-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-900);
}

.doc-bundle-label {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-400);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-sm);
}

.file-size {
    font-family: 'DM Mono', monospace;
    font-size: var(--fs-sm);
    color: var(--ink-400);
}

.rev-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

    .rev-icon.done {
        background: var(--ink-600);
        color: #fff;
    }

    .rev-icon.pending {
        background: var(--surface-2);
        color: var(--ink-400);
        border: 1px solid var(--border);
    }

.dl-btn {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 400;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-family: 'DM Sans', sans-serif;
    transition: all 0.1s;
}

    .dl-btn:hover {
        background: var(--surface-2);
        color: var(--ink-900);
        border-color: var(--ink-600);
    }

    .dl-btn svg {
        width: 12px;
        height: 12px;
    }
.day-sep {
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-400);
}

.act-row {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

    .act-row:last-child {
        border-bottom: none;
    }

    .act-row:hover {
        background: var(--bg);
    }

.act-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
    padding-top: 2px;
}

.act-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

    .act-dot.accent {
        border-color: var(--ink-600);
        background: var(--surface-2);
    }

    .act-dot.warn {
        border-color: var(--warn);
        background: var(--warn-tint);
    }

.act-line {
    width: 2px;
    flex: 1;
    background: var(--border);
    margin-top: var(--sp-1);
}

.act-body {
    flex: 1;
    min-width: 0;
}

.act-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    flex-wrap: wrap;
}

.act-type {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    background: var(--surface-2);
    color: var(--ink-600);
}

    .act-type.secondary {
        background: var(--surface-2);
        color: var(--ink-600);
    }

    .act-type svg {
        width: 10px;
        height: 10px;
    }

.act-user {
    font-size: var(--fs-sm);
    color: var(--ink-400);
}

.act-time {
    font-size: var(--fs-sm);
    color: var(--ink-400);
    margin-left: auto;
    font-family: 'DM Mono', monospace;
}

.act-detail {
    font-size: var(--fs-base);
    color: var(--ink-900);
}
.notes-wrap {
    padding: var(--sp-4);
}

.notes-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-600);
    margin-bottom: var(--sp-2);
}

.notes-ta {
    width: 100%;
    background: #FFFFFF;
    border: 2px solid var(--ink-600);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    resize: vertical;
    min-height: 96px;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-base);
    color: var(--ink-900);
    transition: border-color 0.12s;
}

    .notes-ta:focus {
        outline: none;
        border-color: var(--ink-900);
        box-shadow: 0 0 0 3px rgba(44,53,80,0.12);
    }

    .notes-ta::placeholder {
        color: var(--ink-400);
    }

.notes-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sp-2);
}
.sbar-card {
    background: var(--surface);
    border: 2px solid var(--ink-600);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sbar-head {
    background: var(--ink-600);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sbar-head-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

    .sbar-head-title svg {
        width: 15px;
        height: 15px;
    }

.sbar-genie-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.12s;
}

    .sbar-genie-btn:hover {
        background: rgba(255,255,255,0.25);
    }

    .sbar-genie-btn svg {
        width: 12px;
        height: 12px;
    }

.sbar-spark {
    font-size: 13px;
}
.sbar-log {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.sbar-entry {
}

.sbar-entry-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: 3px;
}

.sbar-entry-ts {
    font-family: 'DM Mono', monospace;
    font-size: var(--fs-sm);
    color: var(--ink-400);
}

.sbar-entry-user {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-600);
}

.sbar-entry-text {
    font-size: var(--fs-base);
    color: var(--ink-900);
    line-height: 1.45;
}
.sbar-summary {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.sbar-summary-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-600);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}

    .sbar-summary-label svg {
        width: 13px;
        height: 13px;
    }

.sbar-summary-text {
    font-size: var(--fs-sm);
    color: var(--ink-600);
    line-height: 1.5;
    font-style: italic;
}
.sbar-add {
    padding: var(--sp-4);
}

.sbar-add-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-600);
    margin-bottom: var(--sp-2);
}

.sbar-ta {
    width: 100%;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    resize: none;
    height: 80px;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-base);
    color: var(--ink-900);
    transition: border-color 0.12s;
}

    .sbar-ta:focus {
        outline: none;
        border-color: var(--ink-600);
        box-shadow: 0 0 0 3px rgba(110,124,160,0.15);
    }

    .sbar-ta::placeholder {
        color: var(--ink-400);
    }

.sbar-add-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-2);
}

.sbar-ts-preview {
    font-family: 'DM Mono', monospace;
    font-size: var(--fs-sm);
    color: var(--ink-400);
}
.matter-search-bar {
    padding: var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.matter-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .matter-search-wrap:focus-within {
        border-color: var(--ink-600);
        box-shadow: 0 0 0 3px rgba(110,124,160,0.12);
    }

    .matter-search-wrap svg {
        width: 14px;
        height: 14px;
        color: var(--ink-400);
        flex-shrink: 0;
    }

.matter-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-sm);
    color: var(--ink-900);
    flex: 1;
}

    .matter-search-input::placeholder {
        color: var(--ink-400);
    }

.matter-search-scope {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    flex-shrink: 0;
}

.scope-btn {
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-600);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
}

    .scope-btn.active {
        background: var(--surface);
        color: var(--ink-900);
        font-weight: 600;
        box-shadow: var(--shadow);
    }
.sp-legend-wrap {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.sp-legend-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-5);
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-400);
    transition: color 0.12s;
}

    .sp-legend-toggle:hover {
        color: var(--ink-600);
    }

.sp-legend-toggle-icon {
    font-size: 9px;
    transition: transform 0.18s;
}

.sp-legend-wrap.open .sp-legend-toggle-icon {
    transform: rotate(180deg);
}

.sp-legend {
    display: none;
    padding: var(--sp-2) var(--sp-5) var(--sp-3);
    grid-template-columns: repeat(4, auto);
    gap: var(--sp-1) var(--sp-5);
    align-items: center;
}

.sp-legend-wrap.open .sp-legend {
    display: grid;
}
.task-avatar-circle {
    overflow: hidden;
}

    .task-avatar-circle > img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
.activity-phone:before {
    content: '📞';
    padding-right: 4px;
}

.activity-email:before {
    content: '✉️';
    padding-right: 4px;
}

.activity-note:before {
    content: '📝';
    padding-right: 4px;
}

.activity-face-to-face:before {
    content: '👥';
    padding-right: 4px;
}

.matter-details {
    font-size: var(--fs-sm);
}

.custom-field-name {
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 300;
}

.form-control, form-select {
    background-color: var(--control-background) !important;
}

.pipeline {
    display: flex;
    gap: 2px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.pipeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-400);
    position: relative;
}

    .pipeline-step.done {
        color: var(--ink-600);
    }

        .pipeline-step.done .pipeline-dot {
            background: var(--ink-600);
            border-color: var(--ink-600);
        }

    .pipeline-step.current {
        color: var(--ink-900);
        font-weight: 600;
    }

        .pipeline-step.current .pipeline-dot {
            background: var(--accent-tint);
            border-color: var(--ink-600);
            box-shadow: 0 0 0 3px rgba(110,124,160,0.15);
        }

.pipeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
}
.pipeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 11px;
    left: calc(50% + 8px);
    right: -50%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.pipeline-step.done:not(:last-child)::after {
    background: var(--ink-600);
}
.approach-header {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.approach-ref {
    font-family: 'DM Mono', monospace;
    font-size: var(--fs-sm);
    color: var(--ink-400);
    letter-spacing: 0.04em;
}

.approach-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--ink-900);
    flex: 1;
}

.approach-status {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px var(--sp-3);
    border-radius: 100px;
    font-size: var(--fs-sm);
    font-weight: 600;
}

    .status-pill.waiting-expert {
        background: var(--warn-tint);
        color: #5C3D00;
        border: 1.5px solid var(--tan-border);
    }

        .status-pill.waiting-expert::before {
            content: '←';
            font-weight: 700;
        }

.type-pill {
    display: inline-flex;
    padding: 3px var(--sp-3);
    border-radius: 100px;
    font-size: var(--fs-sm);
    font-weight: 400;
    background: var(--surface-2);
    color: var(--ink-600);
    border: 1px solid var(--border);
}

.approach-actions {
    display: flex;
    gap: var(--sp-2);
    margin-left: var(--sp-4);
}
.email-meta {
    display: flex;
    gap: var(--sp-4);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.email-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.email-meta-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.email-meta-value {
    font-size: var(--fs-sm);
    color: var(--ink-900);
}

    .email-meta-value a {
        color: var(--ink-600);
        text-decoration: none;
    }

        .email-meta-value a:hover {
            text-decoration: underline;
        }

.email-body {
    font-size: var(--fs-base);
    color: var(--ink-900);
    line-height: 1.65;
    min-height: 200px;
    white-space: pre-wrap;
}

.email-source-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-400);
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid var(--border);
}

    .email-source-tag svg {
        width: 10px;
        height: 10px;
    }
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4) var(--sp-5);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

    .form-group.full-width {
        grid-column: 1 / -1;
    }

.form-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-600);
    width: fit-content;
}

.form-input,
.form-select,
.form-control {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: var(--fs-base);
    font-family: 'DM Sans', sans-serif;
    color: var(--ink-900);
    background: var(--surface);
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
}

    .form-input:focus,
    .form-select:focus {
        border-color: var(--ink-600);
        box-shadow: 0 0 0 3px rgba(110,124,160,0.12);
    }

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239DAABF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-textarea {
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: var(--fs-base);
    font-family: 'DM Sans', sans-serif;
    color: var(--ink-900);
    background: var(--surface);
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
}

    .form-textarea:focus {
        border-color: var(--ink-600);
        box-shadow: 0 0 0 3px rgba(110,124,160,0.12);
    }

.form-hint {
    font-size: 11px;
    color: var(--ink-400);
    margin-top: 2px;
}
.form-input.auto-populated,
.form-select.auto-populated {
    background: #FAFCFF;
    border-style: dashed;
}
.introducer-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface-2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.introducer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tan-tint);
    color: var(--tan);
    border: 1px solid var(--tan-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.introducer-info {
    flex: 1;
    min-width: 0;
}

.introducer-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-900);
}

.introducer-meta {
    font-size: var(--fs-sm);
    color: var(--ink-400);
}

.introducer-actions {
    display: flex;
    gap: var(--sp-1);
}

.introducer-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-400);
    transition: all 0.12s;
}

    .introducer-btn:hover {
        background: var(--surface-2);
        color: var(--ink-600);
        border-color: var(--ink-600);
    }

    .introducer-btn svg {
        width: 13px;
        height: 13px;
    }
.notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-height: 160px;
    overflow-y: auto;
}

.note-entry {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}

    .note-entry:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.note-ts {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--ink-400);
    letter-spacing: 0.04em;
}

.note-author {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-900);
    margin-left: var(--sp-2);
}

.note-text {
    font-size: var(--fs-sm);
    color: var(--ink-900);
    margin-top: 2px;
}

.note-input-row {
    display: flex;
    gap: 0; 
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

    .note-input-row input {
        flex: 1;
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--border);
        font-size: var(--fs-sm);
        font-family: 'DM Sans', sans-serif;
        color: var(--ink-900);
        background: var(--bg);
        outline: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

        .note-input-row input:focus {
            border-color: var(--ink-600);
            box-shadow: 0 0 0 3px rgba(110,124,160,0.12);
        }

    .note-input-row button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        white-space: nowrap;
    }

        .note-input-row button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }



.notification-bell {
    position: absolute;
    top: 20px;
    right: 60px;
    font-size: larger;
    color: var(--primary-text-colour);
}

    .notification-bell:hover {
        cursor: pointer;
    }

.notification-bell-count {
    position: absolute;
    top: 10px;
    right: -8px;
    font-size: 0.7rem;
    background-color: red;
    color: white;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    text-align: center;
    line-height: 1.1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

#notificationList {
    width: 320px;
    max-height: 400px;
    padding: 10px;
    border: 1px solid var(--chrome-border);
    border-radius: 10px;
    background-color: var(--chrome-bg);
    color: var(--chrome-text);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 1051;
    overflow-y: auto;
    font-size: 0.9rem;
}

    #notificationList:empty {
        padding: 0;
        border: 0;
    }
    #notificationList::before {
        content: "";
        position: absolute;
        top: -8px;
        right: 18px;
        width: 12px;
        height: 12px;
        background: var(--chrome-bg);
        border-left: 1px solid var(--chrome-border);
        border-top: 1px solid var(--chrome-border);
        transform: rotate(45deg);
    }

.notification-list-item {
    padding: 10px 10px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

    .notification-list-item:hover {
        background: rgba(255,255,255,0.08);
    }

    .notification-list-item > span {
        display: block;
        margin-top: 4px;
    }

.notification-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.notification-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.notification-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.08);
    text-decoration: none;
}

    .notification-item-icon:hover {
        background: rgba(255,255,255,0.14);
    }

    .notification-item-icon svg {
        width: 16px;
        height: 16px;
        display: block;
    }

.notification-message:after {
    content: "\f2b6";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: silver;
}

.notification-message.opened:after {
    content: "\f0e0" !important;
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: silver;
}


.btn-send-notification {
    position: absolute;
    right: 10px;
    top: 20px;
    color: var(--bs-gray-100);
    border-color: var(--primary-text-colour);
}

.notification-list-item > a {
    display: block;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--chrome-text);
    opacity: 0.9;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .notification-list-item > a:hover {
        opacity: 1;
        text-decoration: underline;
    }

.notification-list-from {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--chrome-text);
    margin: 0;
}

.global-search-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: block;
}

.search-input::placeholder {
    color: var(--ink-400);
}

.global-search-results {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    width: 100%;
    min-width: 0;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid silver;
    background-color: var(--chrome-bg);
    box-sizing: border-box;
    z-index: 100;
    color: var(--chrome-text);
}

    .global-search-results a {
        color: var(--bs-info);
    }

.fav-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
}

    .fav-btn.is-fav i {
        color: var(--accent);
    }

.generic-tabs {
}

.generic-tab {
    border: 1px solid silver;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 10px;
    text-decoration: none;
    background-color: var(--surface-2);
    color: var(--ink-600);
}

    .generic-tab.selected {
        background-color: var(--chrome-bg);
        color: var(--chrome-text);
    }

.pick-task-list:empty {
    display: none;
}

.pick-task-list {
    background-color: var(--surface-2);
    overflow-y: auto;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.task-template-picker {
    padding: 3px 10px;
    width: 100%;
    display: flex;
}

    .task-template-picker:hover {
        background-color: var(--stage-active-bg);
    }

.btn-add-task {
    height: 20px;
    border: 1px solid var(--chrome-bg);
    border-radius: 10px;
    padding: 0 10px;
    background-color: var(--chrome-bg);
    color: var(--chrome-text)
}

    .btn-add-task.added {
        height: 20px;
        border: 1px solid var(--chrome-bg);
        border-radius: 10px;
        padding: 0 10px;
        background-color: var(--surface-2);
        color: var(--ink-600)
    }

.favourite_star:before {
    content: '★';
    color: var(--accent);
}

.favourite_star_not:before {
    content: '☆';
    color: var(--ink-400);
}

.feature-checkbox {
    height: 30px;
    width: 30px;
    font-size: 18px;
    border: 1px solid silver;
    border-radius: 8px;
    text-align: center;
}

    .feature-checkbox.checked:before {
        content: '\f00c';
        font-family: "Font Awesome 7 Free";
        font-weight: 900;
        color: green;
    }

.itabcontent {
    min-height: 100px;
}

.matter-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
}

    .matter-timeline::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: rgba(0,0,0,.15);
    }

.matter-timeline__item {
    position: relative;
    padding: 0 0 14px 0;
}

    .matter-timeline__item:last-child {
        padding-bottom: 0;
    }

    .matter-timeline__item::before {
        content: "";
        position: absolute;
        left: -18px;
        top: 4px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #6c757d;
        border: 2px solid #fff;
        box-shadow: 0 0 0 2px rgba(0,0,0,.08);
    }

.matter-timeline__item--past {
    opacity: .75;
}

.matter-timeline__item--future::before {
    background: #0d6efd;
}

.matter-timeline__item--today {
    opacity: 1;
}

.matter-timeline__description {
    font-size: 0.7rem;
    font-weight: 400;
    color: grey;
}

    .matter-timeline__description span:first-of-type {
        display: none;
    }

    .matter-timeline__description::before {
        content: '⤷';
        padding-right: 4px;
    }

    .matter-timeline__description.show span:first-of-type {
        display: block;
    }

.matter-timeline__item--today::before {
    background: #dc3545;
    width: 12px;
    height: 12px;
    left: -19px;
    top: 3px;
}

.matter-timeline__date {
    font-size: .78rem;
    color: rgba(0,0,0,.6);
}

.matter-timeline__title {
    font-size: .9rem;
    line-height: 1.25rem;
}

.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
}

.charge-due-pill {
    border-radius: 100px;
    color: white;
    padding: 4px 18px;
    font-size: 0.6rem;
}

.list-page-default {
    min-height: calc(100vh - 300px);
}

.sort-order {
    cursor: pointer;
}

.sort-order-asc:after {
    content: "\f884";
    font-family: "Font Awesome 7 Free";
    padding-left: 12px;
    font-weight: 600;
}

.sort-order-desc:before {
    content: "\f161";
    font-family: "Font Awesome 7 Free";
    padding-right: 12px;
    font-weight: 600;
    color: silver;
}

@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }
}


@media (max-width: 465px) {
    .hide-on-465 {
        display: none;
    }

    .col-main, .col-side {
        display: block;
        width: 100%;
        min-width: 100%;
    }

    .section-nav {
        display: block;
        width: 100%
    }

    .snav-btn {
        display: block;
        text-align: center
    }

    .fin-group {
        margin-top: 10px;
        max-width: 50%
    }

    .inner-tabs {
        display: block;
        width: 100%
    }

    .itab {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 992px) {
    body {
        overflow-x: hidden;
    }

        body.no-scroll {
            overflow: hidden;
        }

    .main {
        margin-left: 0;
    }

    .sidebar {
        width: min(320px, 85vw);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 110;
    }

        .sidebar.is-open {
            transform: translateX(0);
        }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 100; 
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--chrome-border);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--chrome-text);
        flex-shrink: 0;
    }

    .topbar {
        height: auto;
        flex-wrap: wrap;
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
    }

    .tab-strip {
        order: 3;
        width: 100%;
    }

    .global-search-box {
        order: 4;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .search-input {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .breadcrumb {
        padding: 0 var(--sp-3);
        overflow-x: auto;
        white-space: nowrap;
    }

    .content {
        padding: var(--sp-3);
    }
}

@media (max-width: 1300px) {
    .hide-on-1300 {
        display: none;
    }
}

@media (max-width: 1550px) {
    .hide-on-1550 {
        display: none;
    }
}



.activity-log-details {
    font-size: var(--fs-sm);
    color: var(--ink-400);
    display: none;
}

    .activity-log-details.show {
        display: block;
    }

@media (min-width: 993px) {
    .mobile-menu-toggle {
        display: none;
    }
}

.danger-row > td {
    background-color: var(--danger-tint);
}

.highlight-table-row > td {
    background-color: var(--ink-400);
    color: white;
}

.highlight-table-row:hover > td {
    color: black;
}

.pending-revision {
    color: var(--danger) !important;
    font-weight: 600 !important;
}

.has-help-info-before:before {
    content: 'ℹ️';
    padding-right: 4px;
}

.has-help-info-after:after {
    content: 'ℹ️';
    padding-left: 4px;
}

.help-info-tooltip {
    position: fixed;
    width: 200px;
    padding: 5px;
    border: 1px solid silver;
    border-radius: 7px;
    background-color: antiquewhite;
    z-index: 999;
}

.form-select-sm.selected {
    background-color: var(--ink-600);
    color: #fff;
}
.chk-20 {
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.chk-30 {
    width: 30px;
    height: 30px;
}

.chk {
    border-color: silver;
    accent-color: var(--egp-green);
}

.timeout-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: black;
    color: white;
    border: 1px solid var(--chrome-border);
    border-radius: 10px;
    padding: 20px;
    z-index: 1000;
}

    .timeout-modal.show {
        display: block;
    }

.sent-msg {
    background-color: var(--rag-light-green) !important;
    color: var(--rag-green) !important;
}

.msg-unread > td {
    font-weight: 700;
}

.rag-rate {
    border: 1px solid silver;
    border-radius: 20px;
    padding: 3px 12px !important;
    width: fit-content !important;
    text-align: center;
    font-weight: 600;
}

    .rag-rate.red {
        background-color: var(--rag-light-red) !important;
        color: var(--rag-red);
    }

    .rag-rate.amber {
        background-color: var(--rag-light-amber) !important;
        color: var(--rag-amber);
    }

    .rag-rate.green {
        background-color: var(--rag-light-green) !important;
        color: var(--rag-green) !important;
    }

.info-content {
    margin: 12px;
    border: 1px solid silver;
    border-radius: 8px;
    box-shadow: 3px 3px 3px silver;
    padding: 10px;
    width: 100%;
    max-width: 300px;
    font-size: 0.8rem;
    color: darkslategrey;
}

.top-mnu {
}

.top-mnu-item {
    font-size: 0.8rem;
    padding: 4px 12px;
    border-right: 1px groove silver;
    display: inline-flex;
    color: var(--chrome-muted);
    font-weight: 400;
}

@media(max-width:750px) {
    .top-mnu-item {
        min-width: 115px;
    }
}

.top-mnu-item:hover {
    cursor: pointer;
    background: var(--chrome-hover);
    color: var(--chrome-text);
}

.top-mnu-item.active, .menu-dd.selected {
    background-color: var(--chrome-active);
    color: var(--chrome-text);
    font-weight: 500;
}

.menu-dd, .snav-dropdown {
    display: inline-flex;
    background-color: var(--chrome-bg);
    margin-right: 3px;
}

.task-list-item {
    width: 100%;
    border-bottom: 1px solid silver;
    font-size: 0.7rem;
    padding-left: 10px;
}

    .task-list-item > .task-item {
        padding: 8px 2px;
        display: inline-flex;
        flex: 1;
    }

.task-item.title {
    font-weight: 500;
    width: 50%
}


.task-item.done-flag {
    margin-top: 5px;
    margin-inline-end: 20px;
    padding: 0;
    float: inline-end
}

.task-list-item:hover {
    background-color: var(--surface-2);
    cursor: pointer;
}

.matter-stage {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 3px 15px;
    height: 30px;
    max-height: 30px;
    overflow: hidden;
}

.process-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    border: 1px solid silver;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 0.8rem;
}

.not-last-arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-bottom: 5px;
}

.process-item .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    font-weight: 600;
}


.process-item.blocked {
    background-color: red;
    color: white;
}

.process-item.in-progress {
    background-color: orange;
}

.process-item.completed {
    background-color: green;
    color: white;
}

.process-item.not-started {
    background-color: silver;
}

.matter-stage:before {
    content: '\f0da';
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: black;
    padding-right: 10px;
}

.matter-stage.contact-arrow-down {
    height: auto;
    max-height: initial;
}

.matter-stage.complete:before {
    color: green;
}

.matter-stage.started:before {
    color: darkorange;
}

.matter-stage.blocked:before {
    color: red;
}

.contact-arrow-down:before {
    content: '\f0d7';
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: black;
    padding-right: 10px
}

.tree-node.tree-collapse {
    height: 30px;
    overflow: hidden;
}

    .tree-node.tree-collapse > .d-flex::before {
        content: '+';
        margin-right: 6px;
        font-weight: bold;
    }

.tree-node:not(.tree-collapse):not(.tree-node-file) > .d-flex::before {
    content: '-';
    margin-right: 6px;
    font-weight: bold;
}

.doc-page-a4-portrait {
    margin-bottom: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--sp-4);
    border: 1px solid silver;
    width: 100%;
    max-width: 210mm; 
    aspect-ratio: 1 / 1.4142;
}

.a4-landscape {
    width: 100%;
    max-width: 297mm;
    aspect-ratio: 1.4142 / 1;
}

.postit-note {
    border: 1px solid silver;
    padding: 10px;
    font-size: 0.8rem;
    font-family: 'DM Sans', sans-serif;
    background-color: var(--bs-warning);
    min-height: 120px;
    min-width: 120px;
    overflow-y: auto;
}

.postit-top {
    height: 30px;
    width: 100%;
    background-color: var(--bs-warning);
}

    .postit-top > .close-btn {
        border: 1px solid silver;
        height: 10px;
        width: 10px;
        text-align: center;
        margin-left: 12px;
        cursor: pointer;
    }

.postit-body {
    padding: 5px;
    height: 100%;
}

.postit-note.minimized {
    max-height: 30px;
    overflow: hidden;
    max-width: 30px;
    min-height: 20px;
    min-width: 20px;
}

.user-briefcase {
    background-color: transparent;
    color: silver;
}

    .user-briefcase:hover {
        cursor: pointer;
    }

    .user-briefcase.inserted {
        color: white;
        font-size: 1.2rem;
    }

.user-briefcase-dark {
    background-color: black;
    padding: 5px;
    border-radius: 7px;
}

.briefcase-title.pdf:before {
    content: '\f1c1';
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--bs-danger);
}

.briefcase-title.excel:before {
    content: '\f1c3';
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--bs-success);
}

.briefcase-title.word:before {
    content: '\f1c2';
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--bs-primary);
}

.briefcase-link {
    font-weight: 600;
    text-decoration: none;
}

.folder-cover-note {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 0.7rem;
    margin-top: 20px;
    color: grey;
    overflow-y: auto;
    height: 100%;
    max-height: 200px;
}

.folders {
    display: inline-block;
}

.folder-wrapper {
    filter: drop-shadow(0 12px 12px silver);
    width: 300px;
    height: 300px;
    display: inline-flex;
}

    .folder-wrapper.selected {
        filter: drop-shadow(0 12px 12px black);
    }

.folder-icon {
    width: 100%;
    height: 100%;
    padding-top: 90px;
    padding-left: 50px;
    padding-right: 30px;
    background-color: #FFE9A2;
    mask: url('../assets/images/icons/foldericon.svg') center / contain no-repeat;
    -webkit-mask: url('../assets/images/icons/foldericon.svg') center / contain no-repeat;
}

.folder-num-items {
    font-size: 0.6rem;
}

.red-row > td {
    background-color: darkred;
    color: white;
}

.red-row:hover > td {
    background-color: silver;
    color: red;
}

.tbl-txt-sm-7 > thead > tr > th,
.tbl-txt-sm-7 > tbody > tr > td,
.txt-sm-7 * {
    font-size: 0.7rem
}
.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group-title {
    width: 100%;
}

.filter-item {
}

    .filter-item > .filter-before-operand {
    }

.filter-field-name {
    display: inline-block;
    width: 250px;
    font-weight: 600
}

.filter-field-operand {
    display: inline-block;
    width: 150px;
    font-weight: 600;
}


.global-search {
    width: 560px;
    max-width: 400px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
}

.shortcut {
    font-size: 12px;
    color: #C7CEDA;
    margin-left: auto;
    white-space: nowrap;
    flex: 0 0 auto;
}

.search-input {
    width: 100%;
    background-color: transparent;
    border: none;
    color: var(--chrome-text);
}

.global-search:before {
    content: "\f002";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: white;
}

.page-title {
    font-size: 32px;
    line-height: 40px;
    font-weight: 800;
    margin: 0 0 4px;
}

.page-subtitle {
    font-size: 16px;
    color: var(--muted);
    margin: 0 0 24px;
}

.egp-btn {
    height: var(--box-height);
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    text-decoration: none;
    width: fit-content;
}

    .egp-btn:disabled {
        background: linear-gradient(180deg,silver,grey);
    }

.btn-expand-collapse {
    font-size: 0.8rem;
    padding: 3px 7px;
    margin-right: 12px;
    border: 1px solid var(--egp-text-green);
    color: white;
    background: linear-gradient(180deg,var(--egp-green),#0AA894);
}

.btn-primary {
    background: linear-gradient(180deg,var(--egp-green),#0AA894);
    color: #fff;
    box-shadow: 0 10px 22px rgba(60,219,192,.22)
}

    .btn-primary:disabled, .btn-success:disabled {
        background: linear-gradient(180deg, #7FCFC0, #6BB8A8);
        color: #E3F5F2;
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.75
    }

    .btn-primary:hover {
        background: var(--egp-green-hover)
    }

.btn-secondary {
    background: #fff;
    border-color: var(--border-strong);
    color: var(--egp-dark)
}

.btn-danger {
    background: var(--danger);
    color: #fff
}

.btn-soft {
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--border);
    font-size: 14px;
    color: var(--egp-dark)
}

.btn-blue {
    background: #3B82F6;
    color: #fff
}

.btn-search:before {
    content: "\f002";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    margin-right: 8px;
}

.btn-secondary {
    background: #fff;
    border-color: var(--border-strong);
    color: var(--egp-dark);
}

.search-box {
    height: var(--box-height);
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 0 16px;
    min-width: 320px;
    flex: 0 1 520px;
}

.matter-status {
    height: 28px;
    border-radius: 999px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 13px;
}

.matter-status-open {
    background: var(--rag-light-green);
    color: var(--rag-green);
}

.matter-status-closed {
    background: var(--rag-light-red);
    color: var(--rag-red);
}

.matter-reference {
    font-weight: 800;
    color: var(--rag-green);
}
.pages {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px
}

.page-btn {
    width: 100%
}

.sub-headding {
    font-size: 18px;
    line-height: 28px;
    font-weight: 800;
    margin: 0;
    color: var(--text);
}

.settings-page-grid {
    display: grid;
    gap: 28px;
}

.settings-group {
    display: grid;
    gap: 16px;
}

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

.settings-card-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px;
}

.view, .card, .table-card, .table-wrap, .matter-panel, .settings-option, .setup-step-card {
    min-width: 0;
    max-width: 100%;
}

.settings-option-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #ECFDF5;
    color: var(--egp-text-green);
    display: grid;
    place-items: center;
    font-size: 24px;
    flex: 0 0 auto;
}

.settings-option-copy {
    display: block;
    align-self: center;
}

.settings-option {
    min-height: 112px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 20px;
    align-items: center;
    text-align: left;
    color: var(--text);
    transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}

    .settings-option:hover {
        transform: translateY(-1px);
        border-color: var(--border-strong);
        box-shadow: 0 10px 24px rgba(15,23,42,.06);
    }

.setting-desc {
    display: block;
}

.settings-form-card {
    background: var(--section-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 28px;
    margin-bottom: 24px;
}

.control-label {
    font-weight: 700;
    color: var(--label-colour)
}

.btn-back {
    display: block;
    position: absolute;
    top: 30px;
    right: 30px;
}

    .btn-back:before {
        content: '\f060';
        font-family: "Font Awesome 7 Free";
        font-weight: 900;
        margin-right: 8px;
    }

@media (max-width: 860px) {
    .settings-option {
        min-height: 96px;
        padding: 16px;
        gap: 14px;
    }
}

@media (max-width: 1500px) {
    .hide-1500 {
        display: none;
    }
}

.profile-layout {
    display: grid;
    grid-template-columns: 360px minmax(0,1fr);
    gap: 24px;
}

.profile-photo-card {
    text-align: center;
}

.profile-avatar-large {
    width: 190px;
    height: 190px;
    border-radius: 999px;
    background: #DFF8F2;
    color: #0BA896;
    display: grid;
    place-items: center;
    font-size: 56px;
    font-weight: 800;
    margin: 36px auto 20px;
    position: relative;
}

.profile-camera {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: #0BA896;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow);
    font-size: 20px;
}

.mfa-card {
    display: grid;
    gap: 0;
}

.mfa-step {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr);
    gap: 22px;
    padding: 28px;
    border-bottom: 1px solid var(--border);
}

.mfa-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #ECFDF5;
    color: var(--egp-text-green);
    display: grid;
    place-items: center;
    font-size: 24px;
}

.muted {
    color: var(--muted);
}

.settings-form-card h2 {
    font-size: 18px;
    margin: 0 0 22px;
}

.mfa-key {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    max-width: 410px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    background: #fff;
    font-weight: 700;
    color: #334155;
}

.fa-copy:hover {
    cursor: pointer;
}

.shudder {
    animation: shudder 0.5s;
}

@keyframes shudder {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.status {
    height: 28px;
    border-radius: 999px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: inherit;
}
.matter-title .status{
    font-size:13px;
}
.status.reduced-rate {
    background-color: var(--rag-light-green);
    color: var(--rag-green);
}

    .status.standard-rate {
        background-color: var(--status-light-blue);
        color: var(--status-blue);
    }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    color: var(--muted);
    margin-left: 20px;
}

.pages {
    display: flex;
    gap: 12px;
}

.page-btn {
    height: 44px;
    min-width: 44px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    font-weight: 800;
    color: var(--muted);
}

    .page-btn.active {
        background: var(--egp-green);
        border-color: var(--egp-green);
        color: #fff;
    }

.settings-detail-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 24px;
}

.subscription-grid {
    align-items: stretch;
}

.subscription-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.subscription-card.current {
    border-color: var(--egp-green);
}

.subscription-card {
    display: grid;
    grid-template-rows: auto 72px auto 30px 1fr auto;
    gap: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px;
    display: grid;
    align-content: start;
    min-height: 560px;
}

    .subscription-card .plan-heading {
        min-height: 34px;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 8px;
        position: relative;
    }

        .subscription-card .plan-heading .status {
            position: absolute;
            top: 0px;
            left: 0;
            margin: -24px;
            width: calc(100% + 48px);
            text-align: center;
        }

    .subscription-card .plan-description {
        min-height: 72px;
        margin: 0 !important;
        line-height: 24px;
    }

    .subscription-card .price {
        min-height: 48px;
        display: flex;
        align-items: flex-end;
        margin: 0 !important;
    }

    .subscription-card .billing-note {
        min-height: 30px;
        margin: 0 !important;
    }

    .subscription-card .feature-list {
        align-self: start;
        margin-top: 18px;
    }

.feature-list {
    display: grid;
    gap: 12px;
    margin: 22px 0 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.status-green, .status.solicitor {
    background: var(--rag-light-green);
    color: var(--rag-green);
}

.status-red {
    background: var(--rag-light-red);
    color: var(--rag-red);
}

.status-blue, .status.agency {
    background: var(--status-light-blue);
    color: var(--status-blue);
}

.status-purple, .status.court {
    background: var(--status-light-purple);
    color: var(--status-purple);
}

.status-grey, .status.barrister {
    background: var(--status-light-grey);
    color: var(--status-grey);
}


.subscription-card .plan-heading h2 {
    margin: 10px 0 0 0;
    font-size: 24px;
    line-height: 30px;
}

.subscription-card .plan-heading .status {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.subscription-card .price {
    min-height: 48px;
    display: flex;
    align-items: flex-end;
    margin: 0 !important;
}

.price {
    font-size: 34px;
    font-weight: 800;
}

    .price small {
        font-size: 14px;
        color: #475569;
    }

.subscription-card .btn {
    align-self: end;
    margin-top: 20px;
    width: 100%;
}

.matter-name {
    font-size: 32px;
    line-height: 40px;
    margin: 0
}

.matter-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #ECFDF5;
    color: var(--egp-text-green);
    display: grid;
    place-items: center;
    font-size: 30px;
    flex: 0 0 64px;
}

.ai-case-overview {
    align-self: stretch;
    min-width: 260px;
    max-width: 360px;
    padding: 14px 16px;
    border: 1px dashed #A7F3D0;
    border-radius: 14px;
    background: #F0FDF9;
    display: grid;
    align-content: center;
    gap: 6px;
}

    .ai-case-overview .ai-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 900;
        color: #0F2747;
    }

.ai-soon-badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    border-radius: 999px;
    background: #D9FBEA;
    color: #087A5A;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ai-case-overview .ai-title i {
    color: var(--egp-text-green);
}

.ai-case-overview p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 18px;
}

.matter-tabs {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0 16px;
    padding-top: 12px;
    background: #fff;
    border: 1px solid var(--border);
}

.matter-tab.active {
    color: var(--egp-text-green);
}

.matter-tab {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
    text-align: center;
    height: 42px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font-weight: 600;
    position: relative;
    color: #334155;
}

    .matter-tab.active:after {
        content: "";
        height: 4px;
        background: var(--egp-green);
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        border-radius: 4px 4px 0 0;
    }

.matter-card-title {
    height: var(--matter-card-title-height);
    padding: 5px 16px 5px 20px;
    border-bottom: 1px solid silver;
}

    .matter-card-title h4 {
        font-weight: 600;
        font-size: 1.3rem;
        display: inline;
        line-height: 2
    }

    .matter-card-title span {
        color: grey;
        font-size: 0.8rem;
    }

.matter-section-add-btn {
    float: right;
    display: inline;
    height: 30px;
    margin-top: 5px;
}

.matter-card-title:before {
    content: '\f078';
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    margin-right: 8px;
}

.matter-card-title.collapsed:before {
    height: var(--matter-card-title-height);
    overflow: hidden;
    content: '\f054';
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    margin-right: 8px;
}

.matter-card-title.empty h4:after {
    padding-left: 10px;
    content: '(empty)';
    font-size: 0.6rem;
    font-weight: 300;
    color: var(--danger);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: linear-gradient(180deg,#06111D,#071321);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 150;
    transition: width .22s ease,transform .25s ease;
    box-shadow: 12px 0 28px rgba(0,0,0,.18);
}

    .sidebar.collapsed:not(.is-open) {
        width: var(--sidebar-width-icon-only);
    }

        .sidebar.collapsed:not(.is-open) .menu-word {
            display: none;
        }

        .sidebar.collapsed:not(.is-open) .menu-count {
            display: none;
        }

        .sidebar.collapsed:not(.is-open) .nav-item:hover .menu-word {
            position: fixed;
            left: 80px;
            background-color: var(--egp-dark) !important;
            padding: 3px 8px;
            display: block;
            overflow: visible;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

    .sidebar.collapsed .logo-row {
        width: 60px;
        overflow: hidden;
    }

        .sidebar.collapsed .logo-row img {
            width: 200px !important;
        }



.topbar {
    height: var(--top);
    background: #071321;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 var(--pad);
    position: sticky;
    top: 0;
    z-index: 30;
}

.matter-overview {
    width: 50%;
}

@media (max-width: 1550px) {

    .matter-overview {
        width: fit-content;
    }
}

.form-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
}

    .form-panel > .manual-section-title {
        align-items: center;
        margin: 0 0 18px;
        color: #0F2747;
        font-size: 20px;
    }

        .form-panel > .manual-section-title > svg {
            color: var(--egp-green);
        }

.external-ref {
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 7px;
}

.chase:after {
    content: '(chase)';
    font-size: 0.6rem;
    color: silver;
    padding-left: 6px;
}
.toggle-side-menu {
    position: absolute;
    right: -12px;
    background: var(--egp-green);
    padding: 4px;
    border: 3px solid black;
    border-radius: 100%;
    color: black;
    font-size: 0.8rem;
    height: 24px;
    width: 24px;
    text-align: center;
    line-height: 0.9;
    z-index: 200;
}

    .toggle-side-menu:before {
        content: '\f104';
        font-family: "Font Awesome 7 Free";
        font-weight: 900;
    }

    .toggle-side-menu.collapsed:before {
        content: '\f105';
        font-family: "Font Awesome 7 Free";
        font-weight: 900;
    }

    .toggle-side-menu:hover {
        cursor: pointer;
    }

.sidebar.collapsed .logo-name, .sidebar.collapsed .logo-sub {
    display: none
}

.main.collapsed {
    margin-left: var(--sidebar-width-icon-only);
}

.logo-sub.collapsed {
    display: none
}

.sidebar.collapsed > .sidebar-user {
    display: block;
}

#panelHelp {
    position: fixed;
    z-index: 100;
    right: 10px;
    min-height: 120px;
    min-width: 200px;
    border: 2px solid silver;
    top: 50px;
    background-color: white;
    border-radius: 12px;
    padding: 7px;
    display: none;
    max-width: 450px;
}

    #panelHelp.open {
        display: block;
    }

.context-help-btn {
    position: fixed;
    top: 15px;
    right: 120px;
    height: 40px;
    min-width: 40px;
    border: 1px solid var(--egp-green);
    background: linear-gradient(180deg,var(--egp-green),#0AA894);
    color: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(60,219,192,.24);
    z-index: 3;
}

    .context-help-btn i {
        font-size: 15px;
    }

.icon-green {
    background: var(--green)
}

.icon-orange {
    background: var(--orange)
}

.icon-purple {
    background: var(--purple)
}

.icon-red {
    background: var(--red)
}

.company-panel-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

@media (max-width:1500px) {
    .company-panel-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .tbl.sml-on-1500 td * {
        font-size: 10px !important;
    }
}

.dashboard-company-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    display: flex;
}

    .dashboard-company-panel.disabled {
        color: grey !important;
    }

        .dashboard-company-panel.disabled > .metric-icon {
            background: grey !important;
            color: silver !important;
            opacity: 0.5;
        }

.dashboard-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px,1fr) );
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-panel {
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

    .dashboard-panel .card-head {
        height: 86px;
        min-height: 86px;
        align-items: center;
        padding: 18px 24px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .dashboard-panel .card-title {
        min-height: 44px;
        align-items: center;
        font-size: 16px;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
    }

.text-link {
    border: 0;
    background: transparent;
    color: #0A8F80;
    font-weight: 800;
    padding: 0;
}

.empty-dashboard {
    height: 280px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
    padding: 28px;
}

.dashboard-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--egp-green);
    color: #0BA896;
    display: inline-grid;
    place-items: center;
    font-size: 24px;
    flex: 0 0 44px;
}

.context-help-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 14px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
}

.context-help-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #E8FAF6;
    color: #0A8F80;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex: 0 0 38px;
}

.context-help-kicker {
    margin: 1px 0 2px;
    color: #0A8F80;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.context-help-heading {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
    color: var(--text);
}

.context-help-body {
    padding: 18px;
}

.context-help-intro {
    margin: 0 0 14px;
    color: #475569;
    line-height: 22px;
}

.context-help-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: context-help-step;
    display: grid;
    gap: 12px;
}

    .context-help-steps li {
        counter-increment: context-help-step;
        display: grid;
        grid-template-columns: 28px minmax(0,1fr);
        gap: 10px;
        align-items: start;
        color: #334155;
        line-height: 21px;
    }

        .context-help-steps li::before {
            content: counter(context-help-step);
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: #E8FAF6;
            color: #087A6D;
            display: grid;
            place-items: center;
            font-size: 12px;
            font-weight: 900;
        }

.context-help-tip {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid #BAE6FD;
    border-radius: 10px;
    background: #F0F9FF;
    color: #475569;
    display: flex;
    gap: 10px;
    line-height: 20px;
}

.context-help-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: 18px;
    flex: 0 0 34px;
}

.filter-btn, .grid-select {
    height: 48px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 800;
    color: var(--egp-dark);
}

.finance-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 2rem;
}

.finance-figs {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid silver;
    border-radius: 7px;
}

.finance-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
}

.finance-stat-icon, .finance-stat-icon > i {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #DCFCE7;
    color: #16A34A;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.finance-stat strong {
    font-size: 28px;
}

.finance-title {
    text-align: center;
}

.finance-stat > strong > span {
    font-size: 0.7rem;
}

.egp-modal-info {
    z-index: 2000;
    border: 1px solid silver;
    margin-top: 20%;
    min-height: 200px;
    min-width: 400px;
    padding: 12px;
    border-radius: 8px;
    position: fixed;
    top: calc(10vh - 100px);
    left: calc(100vh - 100px);
    background-color: white;
}

.add-matter-grid {
    display: grid 1fr;
    grid-template-columns: 200px;
    gap: 20px;
    align-items: center;
    width: 600px;
    margin: 12px auto;
}

.add-matter-or {
    margin-top: 15px;
    height: 60px;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
}

@media(max-width:830px) {
    .add-matter-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: center;
    }

    .add-matter-or {
        height: auto;
        width: auto;
        font-size: 1.8rem;
        font-weight: 600;
        text-align: center;
    }
}

.add-matter-item {
    border: 1px solid silver;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    min-height: 180px;
    vertical-align: middle;
}

    .add-matter-item h2 {
        font-size: 1.3rem;
        font-weight: 600;
    }

.add-matter-import {
    text-align: left;
}

.info-lite {
    color: silver;
    font-size: 0.8rem;
}

.lbl-disabled {
    color: silver;
}

.welcome-topbar-logo {
    width: 100%
}

.matter-stage-group > span {
    font-size: 0.9rem;
    margin-left: 26px;
    color: silver;
}

    .matter-stage-group > span > span {
        font-size: 0.6rem;
        margin-left: 6px;
        color: silver;
    }

.matter-stage-group.complete {
    height: 25px;
    overflow: hidden;
}

.card-matter {
    min-height: 300px;
    transition: min-height 0.3s ease;
}

    .card-matter:has(.matter-card-title.collapsed) {
        min-height: 50px !important;
    }


.approach-panel {
    width: min(100%, 1120px);
    margin: 0 auto;
}

.approach-intro {
    min-height: 70px;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.eyebrow {
    margin-bottom: 5px;
    color: #159d92;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.approach-intro h1 {
    margin: 0;
    color: #07182d;
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.approach-intro p {
    margin: 7px 0 0;
    color: #677b92;
    font-size: 14px;
    line-height: 1.45;
}

.review-note {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64788e;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

    .review-note .icon {
        width: 16px;
        height: 16px;
        color: #17b6a8;
    }

.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-note {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64788e;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.method-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.method-card {
    position: relative;
    min-height: 304px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d4deea;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(36, 67, 97, .09);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .method-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        background: linear-gradient(90deg, #24cfbf, #49e2d4);
    }

    .method-card:hover {
        transform: translateY(-2px);
        border-color: #b9d7d4;
        box-shadow: 0 14px 34px rgba(36, 67, 97, .13);
    }

.method-content {
    height: 100%;
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
}

.method-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.method-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #c4eee8;
    border-radius: 12px;
    background: #eafbf8;
    color: #13a99d;
}

    .method-icon .icon {
        width: 22px;
        height: 22px;
        stroke-width: 2.1;
    }

.method-copy {
    min-width: 0;
    flex: 1;
}

#DataFile {
    display: none;
}

.method-kicker {
    margin-bottom: 4px;
    color: #7890a7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.method-card h2 {
    margin: 0;
    color: #07182d;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.method-description {
    margin: 13px 0 0;
    color: #60758d;
    font-size: 13px;
    line-height: 1.5;
}

.method-benefits {
    margin: 18px 0 20px;
    padding: 0;
    display: grid;
    gap: 9px;
    list-style: none;
}

.method-button {
    width: 100%;
    height: 42px;
    margin-top: auto;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(180deg, #32d5c5 0%, #18b7aa 100%);
    box-shadow: 0 7px 18px rgba(27, 190, 177, .18);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.choice-separator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid #d5dfeb;
    border-radius: 50%;
    background: #f7f9fc;
    box-shadow: 0 3px 10px rgba(40, 66, 92, .08);
    color: #8293a7;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.method-card.import::before {
    background: linear-gradient(90deg, #2aa7c6, #2fd4c3);
}

.method-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #24cfbf, #49e2d4);
}

.dropzone {
    min-height: 102px;
    margin: 17px 0 13px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1.5px dashed #a9c8d1;
    border-radius: 11px;
    background: #f7fbfc;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.drop-file-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e5f5f7;
    color: #258ca7;
}

    .drop-file-icon .icon {
        width: 21px;
        height: 21px;
    }

.drop-copy {
    min-width: 0;
    flex: 1;
}

.drop-title {
    color: #173249;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.drop-subtitle {
    margin-top: 4px;
    overflow: hidden;
    color: #788ca1;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browse-chip {
    height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid #bed1df;
    border-radius: 8px;
    background: #fff;
    color: #24465f;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(37, 67, 94, .05);
}

.import-meta {
    margin: -1px 2px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #8495a7;
    font-size: 10px;
    font-weight: 700;
}

.method-button:disabled {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none;
}

.method-button {
    width: 100%;
    height: 42px;
    margin-top: auto;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(180deg, #32d5c5 0%, #18b7aa 100%);
    box-shadow: 0 7px 18px rgba(27, 190, 177, .18);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.disabled-row > td {
    color: silver;
}

    .disabled-row > td:hover {
        cursor: not-allowed;
    }

.btn-briefcase {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 7px;
    background-color: var(--bs-success);
    color: white;
}

    .btn-briefcase.inserted {
        font-size: 0.7rem;
        background-color: var(--bs-danger);
    }

.task-list-matter {
    font-weight: 800;
}

    .task-list-matter.suppressed {
        font-weight: 500;
        color: silver;
        font-size: 0.6rem;
    }

.min-list-content-height {
    min-height: calc(100vh - 300px);
}
.follow-on-cell  {
    font-size: 0.7rem!important;
    color: silver!important;
}