/*
 * GENERATED FILE: edit resources/assets/css/admin/*.css
 * Then run: php scripts/sync_assets.php
 */
/* ===== resources/assets/css/admin/00-tokens.css ===== */
:root {
    /* Surfaces */
    --bg:               #f8fafc;
    --surface:          #ffffff;
    --surface-alt:      #f1f5f9;
    --surface-raised:   #ffffff;

    /* Borders */
    --border:           #e2e8f0;
    --border-strong:    #cbd5e1;

    /* Text */
    --text:             #1e293b;
    --text-strong:      #0f172a;
    --muted:            #64748b;
    --muted-strong:     #475569;

    /* Brand accent — calmer trust blue for navigation + stronger CTA contrast */
    --accent:           #2563eb;
    --accent-dark:      #1d4ed8;
    --accent-soft:      #eef4ff;
    --accent-stronger:  #1e40af;

    /* Action semantics */
    --action-primary:        #2563eb;
    --action-primary-hover:  #1d4ed8;
    --action-primary-soft:   #eff6ff;
    --action-save:           #0f766e;
    --action-save-hover:     #115e59;
    --action-save-soft:      #f0fdfa;
    --action-danger:         #c53030;
    --action-danger-hover:   #a82828;
    --action-danger-soft:    #fef2f2;
    --action-warning:        #c27803;
    --action-warning-soft:   #fffbeb;
    --action-neutral-bg:     #ffffff;
    --action-neutral-hover:  #f8fafc;
    --action-neutral-border: #cbd5e1;
    --action-neutral-text:   #0f172a;
    --action-info:           #1e40af;
    --action-info-soft:      #eff6ff;

    /* Semantic */
    --success:          #15803d;
    --success-soft:     #f0fdf4;
    --success-border:   #bbf7d0;
    --warning:          #b45309;
    --warning-soft:     #fff7ed;
    --warning-border:   #fdba74;
    --danger:           #c53030;
    --danger-soft:      #fef5f5;
    --danger-border:    #fed7d7;
    --info:             #1e40af;
    --info-soft:        #eff6ff;
    --info-border:      #bfdbfe;

    /* Shape */
    --radius-sm:    5px;
    --radius-md:    8px;
    --radius-lg:    9px;
    --radius-xl:    12px;

    /* Shadow */
    --shadow-sm:   0 1px 2px rgba(15,23,42,.05);
    --shadow-md:   0 2px 8px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.03);
    --shadow-lg:   0 8px 24px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.04);

    /* Backwards-compatible aliases used by customer/workspace refinements */
    --primary:         var(--accent);
    --brand:           var(--accent);
    --accent-strong:   var(--accent-dark);
    --accent-border:   var(--info-border);
    --shadow-xs:       var(--shadow-sm);
    --shadow-soft:     var(--shadow-md);
    --surface-hover:   var(--surface-alt);
    --border-soft:     var(--border);
    --text-muted:      var(--muted);
    --radius:          var(--radius-lg);
    --gap:             18px;

    /* Typography */
    --font: "Inter", "Segoe UI", system-ui, sans-serif;

    /* Sidebar */
    --sidebar-bg:    #0f172a;
    --sidebar-width: 240px;
    --topbar-h:      56px;
}

/* ===== resources/assets/css/admin/01-base.css ===== */
/* Base reset — element defaults, focus, placeholder, shared inline-note. */

/* --------------------------------------------------------------------------
   2. Base reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { color-scheme: light; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 { margin: 0; color: var(--text-strong); }

h1 { font-size: 1.5rem; line-height: 1.2; }
h2 { font-size: 1.2rem; line-height: 1.25; }
h3 { font-size: 1rem;   line-height: 1.3;  }
h4 { font-size: .9rem;  line-height: 1.35; }

p { margin: 0; }

input::placeholder, textarea::placeholder { color: #94a3b8; }

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

.inline-form-note {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    color: var(--muted-strong);
    font-size: 13px;
}

.inline-form-note--error {
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    color: var(--danger);
}

input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
    border-color: var(--accent) !important;
}

select option { color: var(--text); background: #fff; }


/* ===== resources/assets/css/admin/02-layout.css ===== */
/* App shell — grid, sidebar, topbar, main, shell chrome. */
/* --------------------------------------------------------------------------
   3. App shell grid
   -------------------------------------------------------------------------- */
.app-shell {
    display: grid;
    grid-template-areas:
        "topbar topbar"
        "sidebar main";
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) 1fr;
    min-height: 100vh;
    transition: grid-template-columns 200ms ease;
}

/* Collapsed sidebar */
.sidebar-collapsed .app-shell {
    grid-template-columns: 0 minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   4. Sidebar
   -------------------------------------------------------------------------- */
.sidebar {
    grid-area: sidebar;
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px 20px;
    background: var(--sidebar-bg);
    border-right: 1px solid rgba(255,255,255,.06);
    scrollbar-width: none;
    transition: transform 200ms ease, opacity 200ms ease;
    z-index: 20;
}
.sidebar::-webkit-scrollbar { display: none; }

.brand {
    display: flex;
    align-items: center;
    padding: 4px 8px 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.brand-logo-img {
    display: block;
    width: 100%;
    max-width: 140px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .92;
    transition: opacity 150ms;
}

.brand-logo-link:hover .brand-logo-img { opacity: 1; }

.nav { display: grid; gap: 8px; }
.nav-section { display: grid; gap: 2px; }

/* <details> reset */
.nav-section[open] > summary { margin-bottom: 2px; }

.nav-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(148,163,184,.55);
    list-style: none;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-sm);
    transition: color 120ms;
}
.nav-section-label::-webkit-details-marker { display: none; }
.nav-section-label:hover { color: rgba(148,163,184,.85); }

/* Collapse chevron */
.nav-section-label::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    transition: transform 160ms ease, opacity 160ms;
    flex-shrink: 0;
    margin-top: -2px;
}
.nav-section[open] > .nav-section-label::after {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.nav-section-links { display: grid; gap: 2px; }

.nav a, .nav-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    color: rgba(203,213,225,.78);
    font-size: 13px;
    font-weight: 500;
    transition: background 120ms, color 120ms;
    border: 1px solid transparent;
    position: relative;
}

.nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
}

.nav a.is-active {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.1);
}

.nav a.is-active::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 2.5px;
    border-radius: 999px;
    background: #60a5fa;
}

.nav-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: currentColor;
    opacity: .8;
}

.nav a.is-active .nav-icon { opacity: 1; }

.sidebar-footer {
    margin-top: 20px;
    padding: 10px 8px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    display: grid;
    gap: 3px;
}

.sidebar-footer-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: rgba(148,163,184,.5); }
.sidebar-footer strong { color: #fff; font-size: 12px; }

/* --------------------------------------------------------------------------
   5. Topbar
   -------------------------------------------------------------------------- */
.topbar, .app-topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: 40;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--topbar-h);
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.topbar-start {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 0 1 auto;
}

.topbar-context { min-width: 0; }

.topbar-caption {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 1px;
}

.topbar-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
}

.topbar-title-row strong {
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 650;
}

.topbar-divider {
    width: 1px;
    height: 13px;
    background: var(--border-strong);
    flex: 0 0 auto;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topbar-actions form { margin: 0; }

.topbar-section-label,
.topbar-group-label {
    min-width: 0;
}

.topbar-date {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--muted-strong);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Clickable badge */
.badge--clickable {
    text-decoration: none;
    cursor: pointer;
    transition: filter 120ms, box-shadow 120ms;
}
.badge--clickable:hover {
    filter: brightness(.95);
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 15%, transparent);
}
.topbar-overdue-wrap {
    position: relative;
}
.topbar-overdue-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(460px, calc(100vw - 40px));
    max-height: 70vh;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
    z-index: 1200;
}
.topbar-overdue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
}
.topbar-overdue-header strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
}
.topbar-overdue-header a {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.topbar-overdue-header a:hover {
    text-decoration: underline;
}
.topbar-overdue-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(70vh - 48px);
    overflow-y: auto;
    padding: 12px;
}
.topbar-overdue-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.topbar-overdue-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.topbar-overdue-group-head > span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-strong);
}
.topbar-overdue-group-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.topbar-overdue-group-meta strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-strong);
}
.topbar-overdue-group-meta a {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.topbar-overdue-group-meta a:hover {
    text-decoration: underline;
}
.topbar-overdue-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.topbar-overdue-item {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-alt);
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.topbar-overdue-item:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}
.topbar-overdue-item-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.topbar-overdue-item-copy strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}
.topbar-overdue-item-copy small {
    font-size: 12px;
    color: var(--text-muted);
}
.topbar-overdue-empty {
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* ------------ Topbar center — search bar ------------ */
.topbar-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    max-width: 520px;
    min-width: 0;
    margin: 0 12px;
}

.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    transition: border-color 150ms, box-shadow 150ms, background 150ms;
}

.topbar-search:focus-within {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.topbar-search-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: var(--muted);
    transition: fill 150ms;
}

.topbar-search:focus-within .topbar-search-icon { fill: var(--accent); }

.topbar-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    color: var(--text-strong);
    line-height: 34px;
}

.topbar-search-input::placeholder { color: var(--muted); }

.topbar-search-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.topbar-search:focus-within .topbar-search-trigger {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.topbar-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 32px rgba(15,23,42,.12);
    max-height: 380px;
    overflow-y: auto;
}

.topbar-search-results:empty { display: none; }

#topbar-search-results .search-results-overlay { padding: 6px 0; }
#topbar-search-results .search-results-list { list-style: none; padding: 0; margin: 0; }
#topbar-search-results .search-results-list a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 16px; text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 80ms;
}
#topbar-search-results .search-results-list li:last-child a { border-bottom: none; }
#topbar-search-results .search-results-list a:hover { background: var(--surface-alt); }
#topbar-search-results .search-results-list strong { font-size: 13px; font-weight: 600; color: var(--text); }
#topbar-search-results .search-results-list small { font-size: 11px; color: var(--muted); }
#topbar-search-results .search-results-category {
    padding: 6px 16px 4px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
#topbar-search-results .search-no-results { padding: 16px; text-align: center; font-size: 13px; color: var(--muted); }

/* ------------ User avatar dropdown ------------ */
.user-avatar-wrap {
    position: relative;
}

.user-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: border-color 120ms, box-shadow 120ms;
    padding: 0;
}

.user-avatar-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.user-avatar-initials {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 36px rgba(15,23,42,.14);
    overflow: hidden;
}

.user-menu-header {
    display: grid;
    gap: 2px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
}

.user-menu-name { font-size: 14px; font-weight: 650; color: var(--text-strong); }
.user-menu-role { font-size: 12px; color: var(--muted); }

.user-menu-links { padding: 6px; }

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    transition: background 100ms, color 100ms;
}

.user-menu-item svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    opacity: .7;
}

.user-menu-item:hover { background: var(--surface-alt); color: var(--text-strong); }

.user-menu-item--danger { color: var(--danger); }
.user-menu-item--danger:hover { background: var(--danger-soft); color: var(--danger); }

.user-menu-footer {
    padding: 6px;
    border-top: 1px solid var(--border);
}

.user-menu-logout-form { margin: 0; }

/* ------------ Settings page ------------ */
.workspace-page--settings {
    grid-template-columns: minmax(0, 1120px);
    justify-content: center;
    gap: 22px;
}

.workspace-page--settings .workspace-main {
    gap: 18px;
}

.workspace-page--settings .workspace-panel {
    padding: 18px 18px 16px;
}

.workspace-page--settings .workspace-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.workspace-page--settings .section-intro {
    margin-top: 6px;
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted-strong);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: color 120ms ease, border-color 120ms ease;
}

.settings-tab:hover {
    background: transparent;
    color: var(--text-strong);
    border-color: var(--border-strong);
}

.settings-tab--active,
.settings-tab[aria-selected="true"] {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: none;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
}

.settings-grid--email {
    gap: 18px;
}

.workspace-page--settings .settings-card {
    background: var(--surface);
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    padding: 24px 28px 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.workspace-page--settings .settings-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.workspace-page--settings .settings-form {
    display: grid;
    gap: 18px;
}

.workspace-page--settings .settings-form .form-group {
    display: grid;
    gap: 6px;
}

.workspace-page--settings .settings-address-row {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.workspace-page--settings .settings-address-row .form-group {
    min-width: 0;
}

.workspace-page--settings .settings-form label,
.workspace-page--settings .settings-form .checkbox-label span {
    font-size: 13px;
    font-weight: 600;
    color: #334e68;
}

.workspace-page--settings .settings-form .form-control,
.workspace-page--settings .settings-form input[type="text"],
.workspace-page--settings .settings-form input[type="email"],
.workspace-page--settings .settings-form input[type="url"],
.workspace-page--settings .settings-form input[type="tel"],
.workspace-page--settings .settings-form input[type="password"],
.workspace-page--settings .settings-form input[type="number"],
.workspace-page--settings .settings-form select,
.workspace-page--settings .settings-form textarea {
    min-height: 40px;
    border-radius: 8px;
    border: 1px solid #cfd8e3;
    background: #ffffff;
    box-shadow: none;
}

.workspace-page--settings .settings-form textarea {
    min-height: 90px;
    padding-top: 10px;
}

.workspace-page--settings .settings-form .form-control:focus,
.workspace-page--settings .settings-form input:focus,
.workspace-page--settings .settings-form select:focus,
.workspace-page--settings .settings-form textarea:focus {
    border-color: #8fb3e8;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    outline: none;
}

.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #7b8ba1;
}

.settings-email-status-table {
    max-width: 640px;
}

.settings-email-status-table td:first-child {
    width: 150px;
    font-weight: 650;
    color: var(--text-strong);
}

.settings-email-template-form,
.settings-email-test-form {
    max-width: 680px;
}

.settings-email-template-body {
    min-height: 140px;
    resize: vertical;
}

.settings-email-test-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.settings-email-required {
    margin-left: 4px;
    font-size: 11px;
    color: var(--muted);
}

.settings-email-result {
    display: block;
    margin-top: 10px;
    font-size: 13px;
}

.settings-email-result--success { color: var(--success); }
.settings-email-result--danger { color: var(--danger); }
.settings-email-result--neutral { color: var(--muted); }

.settings-email-recent-table {
    font-size: 13px;
}

.settings-email-cell--truncate {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-email-cell--muted {
    color: var(--muted);
}

.settings-email-cell--nowrap {
    white-space: nowrap;
}

.workspace-page--settings .button-small {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
}

.workspace-page--settings .settings-list-editor {
    display: grid;
    gap: 10px;
    padding: 18px 20px 16px;
    background: #f8fbff;
    border: 1px solid #e8eef6;
    border-radius: 12px;
}

.workspace-page--settings .settings-list-editor__subhead {
    display: grid;
    gap: 4px;
}

.workspace-page--settings .settings-list-editor__subhead-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
}

.workspace-page--settings .settings-list-editor__header {
    display: grid;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.workspace-page--settings .settings-list-editor__header--pair {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 180px) 172px;
}

.workspace-page--settings .settings-list-editor__header--simple {
    grid-template-columns: minmax(0, 1fr) 172px;
}

.workspace-page--settings .settings-list-editor__rows {
    display: grid;
    gap: 8px;
}

.workspace-page--settings .settings-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 0;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    min-height: 44px;
}

.workspace-page--settings .settings-list-row__fields {
    display: grid;
    gap: 8px;
}

.workspace-page--settings .settings-list-row__fields--simple {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-page--settings .settings-list-row__fields--pair {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 180px);
}

.workspace-page--settings .settings-key-input {
    color: var(--muted-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.workspace-page--settings .settings-key-details {
    align-self: start;
    color: var(--muted);
    font-size: 12px;
}

.workspace-page--settings .settings-key-details summary {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--muted-strong);
    font-weight: 600;
}

.workspace-page--settings .settings-key-details .settings-key-input {
    margin-top: 6px;
}

.workspace-page--settings .settings-list-row__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}

.workspace-page--settings .settings-list-editor__footer {
    display: flex;
    justify-content: flex-start;
}

.workspace-page--settings .settings-list-editor__validation {
    font-size: 12px;
    color: var(--danger);
}

.workspace-page--settings [data-settings-key-input][data-has-duplicate="1"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.workspace-page--settings .settings-grid--system-top {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.workspace-page--settings .settings-grid--system-bottom {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.workspace-page--settings .settings-grid--system-general {
    grid-template-columns: 1fr;
    align-items: start;
}

.workspace-page--settings .settings-grid--system-lists {
    grid-template-columns: 1fr;
}

.workspace-page--settings .settings-grid--system-links {
    grid-template-columns: 1fr;
    margin-top: 28px;
}

.workspace-page--settings .settings-card--full {
    min-width: 0;
}

.workspace-page--settings .settings-lists-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.workspace-page--settings .settings-form-actions {
    margin-top: 28px;
}

/* Login link form styles */
.workspace-page--settings .ll-intro {
    margin-bottom: 16px;
}

.workspace-page--settings .ll-create-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 24px;
}

.workspace-page--settings .ll-create-form__field {
    margin: 0;
    flex: 1;
    min-width: 180px;
}

.workspace-page--settings .ll-create-form__btn {
    align-self: end;
}

.workspace-page--settings .ll-result {
    margin-bottom: 24px;
    padding: 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
}

.workspace-page--settings .ll-result__title {
    margin: 0 0 8px;
    font-weight: 600;
    color: #065f46;
}

.workspace-page--settings .ll-result__url-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.workspace-page--settings .ll-result__url-input {
    font-family: monospace;
    font-size: .85rem;
}

.workspace-page--settings .settings-grid--company-profile {
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    align-items: start;
}

.workspace-page--settings .settings-card--company-address {
    grid-column: span 1;
}

.workspace-page--settings .settings-card--company-brand {
    grid-column: span 1;
}

.workspace-page--settings .settings-grid--user-admin {
    grid-template-columns: minmax(320px, 420px) minmax(320px, 420px);
    align-items: start;
}

.workspace-page--settings .settings-user-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.5fr) 180px 120px 140px auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: #f8fbff;
    border-bottom: 1px solid #dfe7f1;
}

.workspace-page--settings .settings-user-row__cell {
    min-width: 0;
}

.workspace-page--settings .settings-user-row__cell--actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.workspace-page--settings .settings-user-row-form {
    margin: 0;
}

.workspace-page--settings .settings-inline-form {
    display: inline-flex;
    margin: 0;
}

.settings-user-row__cell .form-control {
    border-color: transparent !important;
    background: transparent !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-weight: 500;
}
.settings-user-row__cell .form-control:hover,
.settings-user-row__cell .form-control:focus {
    border-color: var(--accent) !important;
    background: var(--surface) !important;
}

.workspace-page--settings .settings-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workspace-page--settings .smart-table-wrap {
    overflow-x: auto;
}

.workspace-page--settings .smart-table td {
    vertical-align: top;
}

@media (max-width: 1100px) {
    .workspace-page--settings .settings-grid--system-top,
    .workspace-page--settings .settings-grid--system-bottom,
    .workspace-page--settings .settings-grid--system-general,
    .workspace-page--settings .settings-grid--company-profile,
    .workspace-page--settings .settings-grid--user-admin {
        grid-template-columns: 1fr;
    }

    .workspace-page--settings .settings-lists-grid {
        grid-template-columns: 1fr;
    }

    .workspace-page--settings .settings-card {
        padding: 20px 18px 18px;
    }

    .workspace-page--settings .settings-user-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .workspace-page--settings .settings-user-row__cell--actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .workspace-page--settings .settings-list-editor__header--pair {
        display: none;
    }

    .workspace-page--settings .settings-list-row,
    .workspace-page--settings .settings-list-row__fields--pair {
        grid-template-columns: 1fr;
    }

    .workspace-page--settings .settings-list-row__actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .workspace-page--settings .settings-address-row {
        grid-template-columns: 1fr;
    }
}

.settings-info-dl { display: grid; gap: 0; }

.settings-info-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.settings-info-row:last-child { border-bottom: none; }
.settings-info-row dt { color: var(--muted); font-weight: 500; }
.settings-info-row dd { color: var(--text-strong); margin: 0; }

/* --------------------------------------------------------------------------
   6. Main content
   -------------------------------------------------------------------------- */
.main {
    grid-area: main;
    padding: 24px 28px 40px;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   7. Shell chrome (toggle, overlay)
   -------------------------------------------------------------------------- */
.icon-button, .shell-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--muted-strong);
    cursor: pointer;
    box-shadow: none;
    transition: border-color 120ms, background 120ms, color 120ms;
    flex: 0 0 auto;
}

.icon-button:hover, .shell-toggle:hover {
    border-color: var(--border-strong);
    color: var(--accent);
    background: var(--surface-alt);
    box-shadow: none;
}

.icon-button svg, .shell-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.shell-overlay {
    position: fixed;
    inset: var(--topbar-h) 0 0;
    z-index: 25;
    border: 0;
    background: rgba(15,23,42,.18);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   32. Sidebar collapsed state
   -------------------------------------------------------------------------- */
.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.sidebar-collapsed .topbar.app-topbar {
    width: 100%;
    left: 0;
}

/* ===== resources/assets/css/admin/03-panels.css ===== */
/* Panels — workspace-panel, rail-card, generic .panel. */
/* --------------------------------------------------------------------------
   8. Panels — workspace-panel, panel, rail-card
   -------------------------------------------------------------------------- */
.workspace-panel {
    position: relative;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.panel,
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.workspace-rail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.workspace-rail-card h3,
.workspace-rail-card h4 { margin-bottom: 12px; }

.workspace-rail-card p { color: var(--muted); font-size: 13px; }

.workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.workspace-panel--list {
    padding-top: 18px;
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
}

.workspace-panel--list .workspace-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom-color: color-mix(in srgb, var(--border) 88%, white 12%);
}

.workspace-panel--list .workspace-header .eyebrow {
    margin-bottom: 8px;
    color: var(--muted-strong);
}

.workspace-panel--list .workspace-header h2 {
    letter-spacing: -.045em;
    line-height: 1.08;
}

.workspace-panel--list .section-intro {
    max-width: 760px;
    margin-top: 6px;
    line-height: 1.5;
}

.workspace-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 0 auto;
}

.workspace-page {
    display: grid;
    grid-template-columns: minmax(0,1fr) 296px;
    gap: 18px;
    align-items: start;
    transition: grid-template-columns 220ms ease;
    max-width: 100%;
}

.workspace-page.rail-is-collapsed {
    grid-template-columns: minmax(0,1fr) 40px;
}

.workspace-page,
.workspace-page.rail-is-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
}

.workspace-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.main,
.workspace-panel,
.smart-table-wrap,
.workspace-header,
.workspace-actions,
.inline-actions,
.smart-toolbar-group,
.smart-toolbar-meta {
    min-width: 0;
}

.workspace-rail {
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
    height: calc(100svh - var(--topbar-h) - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workspace-rail,
.edge-rail,
.customer-edge-rail {
    display: none !important;
}

/* ── Rail collapsible toggle ─────────────────────────────────────── */
.rail-collapser {
    position: absolute;
    top: 12px;
    left: -13px;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    color: var(--muted);
    box-shadow: var(--shadow-sm);
    transition: background 120ms, color 120ms, box-shadow 120ms;
}
.rail-collapser:hover {
    background: var(--surface-alt);
    color: var(--text);
    box-shadow: var(--shadow-md);
}
.rail-collapser svg { transition: transform 220ms ease; }
.rail-collapser.is-collapsed svg { transform: rotate(180deg); }

/* Collapsed: reposition toggle since inner is hidden */
.workspace-rail.rail-is-collapsed .rail-collapser {
    left: 7px;
    top: 0;
}

/* Inner wrapper — hides on collapse ─────────────────────────────── */
.rail-inner { display: flex; flex-direction: column; gap: 12px; }
.workspace-rail.rail-is-collapsed .rail-inner { display: none; }

/* ── Rail tab navigation ─────────────────────────────────────────── */
.rail-tab-nav {
    display: flex;
    gap: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 3px;
}
.rail-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 4px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    white-space: nowrap;
    line-height: 1.2;
}
.rail-tab-btn svg { flex-shrink: 0; }
.rail-tab-btn.is-active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.rail-tab-btn:hover:not(.is-active) { color: var(--text); }

/* ── Rail tab panels ─────────────────────────────────────────────── */
.rail-tab-panel { display: flex; flex-direction: column; gap: 12px; }
.rail-tab-panel[hidden] { display: none; }

/* ── Rail dark theme (navy) ──────────────────────────────────────── */
.workspace-rail {
    background: linear-gradient(180deg, #123a60 0%, #102d4a 100%);
    border-radius: var(--radius-xl);
    padding: 10px 10px 12px;
    box-shadow: 0 18px 34px rgba(9, 22, 37, 0.18);
}

.rail-inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.rail-inner::-webkit-scrollbar { width: 4px; }
.rail-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.rail-inner::-webkit-scrollbar-track { background: transparent; }

/* Toggle button on dark bg */
.workspace-rail .rail-collapser {
    background: #1a4068;
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.65);
    box-shadow: none;
}
.workspace-rail .rail-collapser:hover {
    background: #1f4d7a;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* Tab nav on dark bg */
.workspace-rail .rail-tab-nav {
    background: rgba(0,0,0,.25);
    border-color: rgba(255,255,255,.1);
}
.workspace-rail .rail-tab-btn { color: rgba(255,255,255,.55); }
.workspace-rail .rail-tab-btn.is-active {
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.12));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.14);
}
.workspace-rail .rail-tab-btn:hover:not(.is-active) { color: rgba(255,255,255,.9); }

/* Rail cards on dark bg */
.workspace-rail .workspace-rail-card {
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06));
    border-color: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.workspace-rail .workspace-rail-card h3,
.workspace-rail .workspace-rail-card h4 { color: rgba(255,255,255,.92); }
.workspace-rail .workspace-rail-card .eyebrow { color: #5ba4e0; }
.workspace-rail .workspace-rail-card p,
.workspace-rail .workspace-rail-card .section-intro { color: rgba(255,255,255,.58); }
.workspace-rail .workspace-rail-label { color: rgba(255,255,255,.5); }
.workspace-rail .workspace-rail-value { color: rgba(255,255,255,.95); font-weight: 700; }

/* Buttons inside dark rail */
.workspace-rail .workspace-rail-card .button-secondary {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.85);
}
.workspace-rail .workspace-rail-card .button-secondary:hover {
    background: rgba(255,255,255,.16);
    color: #fff;
}

.customer-edge-rail-page {
    display: block;
    padding-right: 0;
}

.customer-edge-rail-page:not(.rail-is-collapsed) {
    padding-right: 0;
}

.customer-edge-rail {
    position: fixed;
    top: calc(var(--topbar-h) + 16px);
    right: 16px;
    width: min(308px, calc(100vw - 24px));
    height: calc(100svh - var(--topbar-h) - 32px);
    z-index: 3;
    max-width: calc(100vw - 24px);
}

.customer-edge-rail .rail-collapser {
    top: 50%;
    left: -16px;
    width: 30px;
    height: 82px;
    border-radius: 18px 0 0 18px;
    transform: translateY(-50%);
    box-shadow: var(--shadow-md);
}

.customer-edge-rail .rail-collapser svg {
    width: 14px;
    height: 14px;
}

.customer-edge-rail .rail-inner {
    height: 100%;
    overscroll-behavior: contain;
}

.customer-edge-rail.rail-is-collapsed {
    width: 34px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    right: 16px;
}

.customer-edge-rail.rail-is-collapsed .rail-collapser {
    left: -6px;
    top: 50%;
}

.edge-rail-page {
    display: block;
    padding-right: 0;
}

.edge-rail-page .workspace-main {
    min-width: 0;
}

.edge-rail {
    position: fixed;
    top: calc(var(--topbar-h) + 16px);
    right: 16px;
    width: min(308px, calc(100vw - 24px));
    height: calc(100svh - var(--topbar-h) - 32px);
    z-index: 2;
    max-width: calc(100vw - 24px);
}

.edge-rail .rail-inner,
.edge-rail {
    overscroll-behavior: contain;
}

.edge-rail .rail-inner {
    height: 100%;
}

/* Links inside dark rail */
.workspace-rail a { color: #7ec4f8; }
.workspace-rail a:hover { color: #a8d8fb; }

.workspace-kicker {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, white 12%);
}

.workspace-kicker-meta { display: grid; gap: 4px; }

.task-entry-strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.task-entry-main {
    display: grid;
    gap: 10px;
}

.task-entry-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-entry-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
}

.section-intro {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.hero {
    background: var(--surface);
}


/* ===== resources/assets/css/admin/04-buttons.css ===== */
/* Buttons — .button + variants. */
/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.button,
.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 15px;
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff;
    font-weight: 650;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
    transition: background 140ms, border-color 140ms, box-shadow 140ms, filter 140ms;
}

.button:hover,
.button-primary:hover {
    background: var(--accent-dark);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);
}

.button:active,
.button-primary:active { filter: brightness(.95); }

.button-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-strong);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.button-secondary:hover {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.button-success {
    background: var(--success);
    border-color: #166534;
    color: #fff;
    box-shadow: 0 1px 2px rgba(21, 128, 61, 0.18);
}

.button-success:hover {
    background: #166534;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.22);
}

.button-warning {
    background: var(--warning);
    border-color: #92400e;
    color: #fff;
    box-shadow: 0 1px 2px rgba(180, 83, 9, 0.18);
}

.button-warning:hover {
    background: #92400e;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.22);
}

.button-danger {
    background: var(--danger);
    border-color: #991b1b;
    color: #fff;
    box-shadow: 0 1px 2px rgba(180, 35, 24, 0.18);
}

.button-danger:hover {
    background: #991b1b;
    box-shadow: 0 2px 6px rgba(180, 35, 24, 0.22);
}

.button-ghost {
    background: rgba(255,255,255,0.62);
    border-color: transparent;
    color: var(--muted-strong);
    box-shadow: none;
}
.button-ghost:hover {
    background: var(--surface-alt);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
    color: var(--text);
    box-shadow: none;
    transform: none;
}

.button-small {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 10px;
}

.button-icon {
    gap: 8px;
}


.form-actions,
.modal-actions,
.modal-footer {
    align-items: center;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}




/* ===== resources/assets/css/admin/05-badges.css ===== */
/* Badges & pills — status chips, user-pill. */
/* --------------------------------------------------------------------------
   10. Badges & pills
   -------------------------------------------------------------------------- */
.badge, .user-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .015em;
}

.badge--neutral {
    background: var(--surface-alt);
    color: var(--muted-strong);
    border-color: var(--border);
}

.badge--success {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-border);
}

.badge--warning {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning-border);
}

.badge--danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-border);
}

.badge--info {
    background: var(--info-soft);
    color: var(--info);
    border-color: var(--info-border);
}

.badge--alert {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-border);
    font-weight: 700;
}

.badge--ok {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-border);
}

.badge--warning-soft {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning-border);
}

.badge-adjusted  { background: var(--info-soft);    color: var(--info);    border-color: var(--info-border); }
.badge-overridden{ background: #f5f3ff;              color: #5b21b6;        border-color: #ddd6fe; }
.badge-shifted   { background: var(--warning-soft);  color: var(--warning); border-color: var(--warning-border); }


/* ===== resources/assets/css/admin/06-tables.css ===== */
/* Tables — smart-toolbar (filters row) + smart-table. */
/* --------------------------------------------------------------------------
   11. Smart toolbar (filters row above tables)
   -------------------------------------------------------------------------- */
.smart-toolbar,
.table-filter-bar,
.planner-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.table-filter-bar {
    display: grid;
    grid-template-columns: 2fr minmax(180px,240px) auto;
    gap: 10px;
    align-items: end;
}

.planner-filter-bar {
    display: grid;
    grid-template-columns: 2fr repeat(3, minmax(0,1fr)) auto;
    gap: 10px;
    align-items: end;
}

.smart-toolbar-group {
    display: grid;
    gap: 6px;
    flex: 0 1 210px;
    min-width: 160px;
}

.smart-toolbar-group--grow {
    flex: 1 1 280px;
    min-width: min(280px, 100%);
}

.smart-toolbar-meta,
.table-filter-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    color: var(--muted);
    font-size: 12px;
    margin-left: auto;
    align-self: flex-end;
    flex-wrap: wrap;
    white-space: nowrap;
}

.planner-list-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.top-gap { margin-top: 14px; }

/* --------------------------------------------------------------------------
   12. Smart table
   -------------------------------------------------------------------------- */
.smart-table-wrap {
    position: relative;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    max-width: 100%;
}

.data-table,
.smart-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 720px;
}

.table-inline-link {
    color: inherit;
    text-decoration: none;
}

.table-inline-link:hover,
.table-inline-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

.customer-register-mobile {
    display: grid;
    gap: 12px;
}

.data-table th,
.smart-table thead th {
    padding: 12px 16px;
    background: rgba(248, 250, 252, 0.96);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(8px);
}

.data-table td,
.smart-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    vertical-align: middle;
    background: var(--surface);
    transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.data-table tbody tr,
.smart-table tbody tr {
    transition: transform 120ms ease;
}

.data-table tbody tr:nth-child(even):not(.is-overdue) td,
.smart-table tbody tr:nth-child(even):not(.is-overdue) td {
    background: color-mix(in srgb, var(--surface) 96%, var(--surface-alt) 4%);
}

.smart-table tbody tr:last-child td,
.data-table tbody tr:last-child td { border-bottom: 0; }

.table-action-row,
.table-link-row {
    cursor: pointer;
    transition: background 100ms;
}

.table-action-row:hover td,
.table-link-row:hover td {
    background: #f5f9ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(219, 233, 247, 0.9);
}

.table-action-row:focus td,
.table-link-row:focus td {
    background: #eaf3ff;
    outline: none;
}

.table-action-row.is-selected td,
.table-link-row.is-selected td {
    background: var(--accent-soft);
}

.table-action-row:hover td:first-child,
.table-link-row:hover td:first-child,
.table-action-row:focus td:first-child,
.table-link-row:focus td:first-child,
.table-action-row.is-selected td:first-child,
.table-link-row.is-selected td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 48%, white 52%);
}

/* Overdue row highlight — background only, no left border */
.is-overdue td {
    background: linear-gradient(180deg, #fff7f7 0%, #fff3f3 100%);
}
.is-overdue:hover td {
    background: linear-gradient(180deg, #ffecec 0%, #ffe5e5 100%);
}

.cell-primary { display: grid; gap: 4px; }
.cell-primary-link {
    display: grid;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

.cell-primary-link:hover strong,
.cell-primary-link:focus strong {
    text-decoration: underline;
}

.cell-primary-link:focus {
    outline: none;
}

.cell-primary strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.35;
}
.cell-meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
.cell-meta--body { color: var(--text-base); }
.cell-meta--file { display: inline-flex; align-items: center; gap: 6px; }
.muted-cell { color: var(--muted); min-width: 200px; }

.relation-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.relation-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
}

.relation-chip--origin {
    border-color: var(--border);
    background: var(--surface-alt);
    color: var(--muted-strong);
}

.relation-chip--deadline {
    border-color: var(--info-border);
    background: var(--info-soft);
    color: var(--info);
}

.relation-chip--waiting {
    border-color: var(--warning-border);
    background: var(--warning-soft);
    color: var(--warning);
}

.relation-chip--done {
    border-color: var(--success-border);
    background: var(--success-soft);
    color: var(--success);
}

a.relation-chip:hover {
    border-color: var(--accent);
    color: var(--accent-stronger);
}

.requirement-request-handoff {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

.requirement-request-handoff a {
    font-weight: 700;
    color: var(--accent);
}

.column-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.column-sort::after {
    content: "↕";
    font-size: 9px;
    color: var(--border-strong);
}

.column-sort.is-active { color: var(--text-strong); }
.column-sort.is-active[data-sort-direction="asc"]::after  { content: "↑"; color: var(--accent); }
.column-sort.is-active[data-sort-direction="desc"]::after { content: "↓"; color: var(--accent); }

/* Table inline actions */
.table-inline-button {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 11px;
}

.table-inline-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.table-inline-actions form { margin: 0; }

.billing-row-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.35fr) minmax(130px, .9fr);
    gap: 6px;
    min-width: 330px;
    margin: 0;
}

.billing-row-form .inline-input,
.inline-input--amount {
    width: 100%;
    min-width: 0;
}

.inline-input--amount {
    max-width: 110px;
}

.billing-status-form select {
    min-width: 150px;
}

.table-inline-button--danger {
    color: var(--danger);
    border-color: var(--danger-border);
    background: var(--danger-soft);
}
.table-inline-button--danger:hover { background: #fee2e2; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
}

.task-quick-assign-form {
    display: grid;
    gap: 4px;
    min-width: 170px;
}

.task-quick-assign-form--mobile {
    min-width: 0;
    max-width: 240px;
    margin-top: 4px;
}

.task-quick-assign-select {
    width: 100%;
    min-height: 34px;
    padding: 0 34px 0 12px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, white);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--surface-raised) 65%, #ffffff 35%)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364758b' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 14px;
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    appearance: none;
    cursor: pointer;
}

.task-quick-assign-select.is-unassigned {
    border-color: color-mix(in srgb, var(--warning-border) 72%, white);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--warning-soft) 72%, #ffffff 28%), #ffffff),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2392400e' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 14px;
    color: var(--warning);
}

.task-quick-assign-select:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
    outline-offset: 1px;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.task-quick-assign-select:disabled {
    opacity: .72;
    cursor: wait;
}

.task-quick-assign-state {
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.task-quick-assign-form.is-saving .task-quick-assign-state {
    color: var(--info);
}

/* Compact table */
.compact-table td, .compact-table th { vertical-align: top; }
.compact-table select,
.compact-table input[type="date"],
.compact-table input[type="text"],
.compact-table input[data-date-input] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 7px 10px;
    font: inherit;
    background: var(--surface);
    color: var(--text);
}

/* ===== resources/assets/css/admin/07-stats.css ===== */
/* Stat cards & KPI rows. */
/* --------------------------------------------------------------------------
   13. Stat cards & KPIs
   -------------------------------------------------------------------------- */
.stat-row {
    display: flex;
    gap: 0;
    margin: 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.stat-row .stat-card {
    flex: 1 1 0;
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
}
.stat-row .stat-card:last-child { border-right: none; }

.stat-card, .overview-kpi {
    display: grid;
    gap: 3px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.stat-card strong, .overview-kpi strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-strong);
}

.stat-card span, .overview-kpi span {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Colored stat card variants */
.stat-card--success { background: var(--success-soft); border-color: var(--success-border); }
.stat-card--success strong { color: var(--success); }
.stat-card--warning { background: var(--warning-soft); border-color: var(--warning-border); }
.stat-card--warning strong { color: var(--warning); }
.stat-card--danger  { background: var(--danger-soft);  border-color: var(--danger-border);  }
.stat-card--danger strong  { color: var(--danger); }
.stat-card--info    { background: var(--info-soft);    border-color: var(--info-border);    }
.stat-card--info strong    { color: var(--info); }

/* Overview KPI grid (dashboard) */
.overview-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin: 20px 0;
}

a.overview-kpi {
    text-decoration: none;
    transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
a.overview-kpi:hover {
    border-color: var(--border-strong);
    background: var(--surface-alt);
}

.overview-kpi--danger  { background: var(--danger-soft);  border-color: var(--danger-border);  }
.overview-kpi--danger strong  { color: var(--danger); }
.overview-kpi--warning { background: var(--warning-soft); border-color: var(--warning-border); }
.overview-kpi--warning strong { color: var(--warning); }
.overview-kpi--info    { background: var(--info-soft);    border-color: var(--info-border);    }
.overview-kpi--info strong    { color: var(--info); }

.kpi-icon {
    font-size: 18px;
    line-height: 1;
    opacity: .6;
    margin-bottom: 4px;
}

.kpi-link-hint {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--accent);
    text-transform: uppercase;
    margin-top: 6px;
    opacity: .75;
}


/* ===== resources/assets/css/admin/08-forms.css ===== */
/* Forms — inputs, fieldsets, date input, flatpickr overrides. */
/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form-grid { display: grid; gap: 14px; margin-top: 16px; }

.form-grid label,
.table-filter-bar label,
.planner-filter-bar label,
.modal-grid label,
.smart-toolbar-group label { display: grid; gap: 5px; }

.form-grid label > span:first-child,
.modal-grid label > span:first-child {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted-strong);
}

/* Toolbar filter labels — hidden, placeholders carry the meaning */
.table-filter-bar label > span:first-child,
.planner-filter-bar label > span:first-child,
.smart-toolbar-group label > span:first-child {
    display: none;
}

.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select,
.form-grid textarea,
.table-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.table-filter-bar select,
.planner-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.planner-filter-bar select,
.smart-toolbar input:not([type="checkbox"]):not([type="radio"]),
.smart-toolbar select {
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    min-height: 44px;
    padding: 10px 12px;
    background: var(--surface);
    color: var(--text);
    transition: border-color 120ms, box-shadow 120ms, background-color 120ms;
}

/* Modal fields — sunken look so they read as editable vs surface */
.modal-grid input:not([type="checkbox"]):not([type="radio"]),
.modal-grid select,
.modal-grid textarea {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 8px 11px;
    background: var(--surface-alt);
    color: var(--text);
    box-shadow: inset 0 1px 3px rgba(15,23,42,.08);
    transition: border-color 120ms, box-shadow 120ms;
}

.form-grid input:not([type="checkbox"]):not([type="radio"]):hover,
.form-grid select:hover,
.form-grid textarea:hover,
.smart-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.smart-toolbar select:hover {
    border-color: var(--border-strong);
    background: #ffffff;
}

.modal-grid input:not([type="checkbox"]):not([type="radio"]):hover,
.modal-grid select:hover,
.modal-grid textarea:hover {
    border-color: var(--accent);
    box-shadow: inset 0 1px 3px rgba(15,23,42,.07), 0 0 0 3px rgba(29,78,216,.08);
}

.modal-grid input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-grid select:focus,
.modal-grid textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: inset 0 1px 3px rgba(15,23,42,.07), 0 0 0 3px rgba(29,78,216,.12);
}

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

.checkbox { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.form-grid label.checkbox,
.modal-grid label.checkbox,
.check-grid label.checkbox { display: flex; align-items: center; gap: 10px; }
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    min-height: 0;
    padding: 0;
    border-radius: 4px;
    accent-color: var(--accent);
    box-shadow: none;
}
.checkbox span { display: inline; line-height: 1.45; }

.file-picker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

.file-picker-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.file-picker-button {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
}

.file-picker-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 13px;
}

.form-inline-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.form-inline-choice {
    align-self: flex-start;
    width: fit-content;
    max-width: min(100%, 560px);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}

.billing-option {
    color: var(--text);
    max-width: min(100%, 640px);
}

.form-actions--create {
    justify-content: flex-start;
    margin-top: 2px;
}

.form-actions--create .button {
    width: auto;
    min-width: 180px;
    max-width: 280px;
}

.task-check-toggle-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.task-check-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.task-check-toggle input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-height: 0;
    padding: 0;
    accent-color: var(--success);
}
.task-review-checkbox { align-items: center; padding-top: 4px; }
.modal-inline-choice {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}
.modal-inline-choice span {
    display: grid;
    gap: 2px;
}
.modal-inline-choice strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}
.modal-inline-choice small {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

/* Dropdown checkbox list */
.check-dropdown {
    position: relative;
}

.check-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 11px;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 1px 3px rgba(15,23,42,.08);
    transition: border-color 120ms, box-shadow 120ms;
}

.check-dropdown-trigger:hover {
    border-color: var(--accent);
    box-shadow: inset 0 1px 3px rgba(15,23,42,.08), 0 0 0 3px rgba(29,78,216,.08);
}

.check-dropdown-trigger[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: inset 0 1px 3px rgba(15,23,42,.08), 0 0 0 3px rgba(29,78,216,.12);
}

.check-dropdown-trigger svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform 150ms;
}

.check-dropdown-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.check-dropdown-label {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.check-dropdown-label--placeholder {
    color: var(--muted);
}

.check-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 220px;
    overflow-y: auto;
}

.check-dropdown-panel[hidden] { display: none; }

.check-dropdown-panel .checkbox {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    min-height: unset;
    cursor: pointer;
}

.check-dropdown-panel .checkbox:hover {
    background: var(--surface-alt);
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}

.compact-form { margin-top: 12px; }

.helper-text { margin-top: 12px; color: var(--muted); font-size: 13px; }
.inline-note { color: var(--muted); font-size: 12px; margin-top: 4px; }

.field-label { display: inline-flex; align-items: center; gap: 8px; }

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 0;
    background: center / contain no-repeat url("/assets/icons/info-circle.svg");
    color: transparent;
    font-size: 0;
    cursor: help;
    flex: 0 0 auto;
    opacity: .98;
}

.info-icon::before {
    display: none;
}

.segmented { display: flex; gap: 6px; }

/* --------------------------------------------------------------------------
   25. Date input components
   -------------------------------------------------------------------------- */
.date-input { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.date-control {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
}

.date-proxy-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: 0;
    border: 0; opacity: 0;
    pointer-events: none;
}

.date-trigger {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--muted-strong);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: border-color 120ms, background 120ms;
}

.date-trigger:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.date-trigger svg { width: 16px; height: 16px; fill: currentColor; }

.date-helper {
    display: none;
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
}

/* Popover hidden in theme */
.date-popover { display: none !important; }

/* --------------------------------------------------------------------------
   26. Flatpickr overrides
   -------------------------------------------------------------------------- */
.flatpickr-calendar {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-family: var(--font);
    width: 320px;
    font-size: 12px;
    z-index: 20050 !important;
}

.flatpickr-calendar.open {
    max-width: min(320px, calc(100vw - 24px));
}

.flatpickr-months {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
}

.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year { color: var(--text-strong); font-weight: 600; }

.flatpickr-prev-month, .flatpickr-next-month { fill: var(--accent); color: var(--accent); }
.flatpickr-weekdays { background: var(--surface-alt); }
span.flatpickr-weekday { color: var(--muted); font-weight: 700; }

.flatpickr-rContainer,
.flatpickr-days,
.flatpickr-weekdaycontainer,
.dayContainer {
    width: 308px;
    min-width: 308px;
    max-width: 308px;
}

.flatpickr-day {
    border-radius: var(--radius-md);
    color: var(--text);
    max-width: 44px;
    height: 34px;
    line-height: 34px;
}

.flatpickr-day.today {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.flatpickr-day:hover, .flatpickr-day:focus {
    background: var(--accent-soft);
    border-color: var(--info-border);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: none;
}

.flatpickr-day.inRange {
    background: var(--info-soft);
    border-color: var(--info-border);
    box-shadow: none;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--danger-border) !important;
    box-shadow: 0 0 0 3px var(--danger-soft);
}

/* ===== resources/assets/css/admin/09-alerts.css ===== */
/* Alerts — alert-bar, notice-bar, empty-state. */
/* --------------------------------------------------------------------------
   15. Alert bar
   -------------------------------------------------------------------------- */
.alert {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--warning-border);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 13px;
}

.alert--error, .alert--danger {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
}

.alert--success {
    border-color: var(--success-border);
    background: var(--success-soft);
    color: var(--success);
}

.highlighted {
    animation: row-highlight 3s ease-out;
}

@keyframes row-highlight {
    0% { background-color: rgba(59, 130, 246, 0.3); }
    100% { background-color: transparent; }
}

/* --------------------------------------------------------------------------
   16. Notice bar
   -------------------------------------------------------------------------- */
.notice-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    background: var(--surface-alt);
}

.notice-bar strong { font-size: 13px; color: var(--text-strong); font-weight: 600; }
.notice-bar p { color: var(--muted); font-size: 12px; margin-top: 1px; }

/* --------------------------------------------------------------------------
   27. Empty state
   -------------------------------------------------------------------------- */
.empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    padding: 32px 20px;
    color: var(--muted);
}

.empty-state h3 { font-size: 1rem; color: var(--text-strong); }
.empty-state p { font-size: 13px; max-width: 380px; }

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.empty-state-icon {
    width: 36px; height: 36px;
    fill: var(--border-strong);
    margin-bottom: 2px;
}

.queue-lifecycle-strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}

.workspace-panel--list .queue-lifecycle-strip {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.workspace-panel--list .queue-lifecycle-step {
    border-radius: 14px;
    background: #fff;
}

.queue-lifecycle-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.queue-lifecycle-copy strong {
    font-size: 15px;
    line-height: 1.35;
    color: var(--text-strong);
}

.queue-lifecycle-copy p {
    max-width: 760px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-strong);
}

.queue-lifecycle-steps {
    flex: 0 0 min(440px, 42%);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.queue-lifecycle-step {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
}

.queue-lifecycle-step--info {
    border-color: var(--info-border);
    background: var(--info-soft);
    color: var(--accent);
}

.queue-lifecycle-step--warning {
    border-color: var(--warning-border);
    background: var(--warning-soft);
    color: #92400e;
}

.queue-lifecycle-step--success {
    border-color: var(--success-border);
    background: var(--success-soft);
    color: var(--success);
}

.queue-lifecycle-step--danger {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
}

.empty-inline-state { display: grid; gap: 4px; padding: 14px 0; color: var(--muted); font-size: 13px; }


/* ===== resources/assets/css/admin/10-modals.css ===== */
/* Modal & dialog + right-side drawer. */
/* --------------------------------------------------------------------------
   17. Modal / dialog
   -------------------------------------------------------------------------- */
dialog[data-modal] {
    display: flex;
    flex-direction: column;
    width: min(740px, calc(100vw - 32px));
    max-height: calc(100svh - 32px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    background: var(--surface);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.15);
    color: var(--text);
    overflow: hidden;
}

dialog[data-modal]:not([open]) {
    display: none;
}

dialog[data-modal].modal-lg {
    width: min(860px, calc(100vw - 32px));
}

dialog[data-modal].modal-xl {
    width: min(1040px, calc(100vw - 32px));
}

dialog[data-modal]::backdrop {
    background: rgba(15,23,42,.32);
    backdrop-filter: blur(4px);
}

.modal-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    max-width: 640px;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.modal-panel select { max-width: 100%; }
.modal-panel--wide { min-width: min(560px, 90vw); }

.modal-panel:not(.request-update-panel):not(.secure-send-panel) {
    max-width: 700px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 0;
    padding: 16px 20px 12px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255,255,255,0.98));
    border-bottom: 1px solid var(--border);
}

.modal-header h3 { color: var(--text-strong); }
.modal-header p { margin-top: 4px; color: var(--muted); font-size: 13px; }

.modal-panel > .modal-header,
dialog[data-modal] > .modal-header {
    flex: 0 0 auto;
}

.modal-body,
.modal-panel > form.modal-grid,
.modal-panel > .modal-grid,
dialog[data-modal] > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 20px 20px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.modal-body > .subsection,
.modal-grid > .subsection {
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, white 12%);
}

.modal-grid { display: grid; gap: 12px; align-content: start; }
.modal-grid.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.modal-grid .full-width { grid-column: 1 / -1; }
.modal-grid > .modal-actions { grid-column: 1 / -1; }

.modal-panel:not(.request-update-panel):not(.secure-send-panel) > form.modal-grid,
.modal-panel:not(.request-update-panel):not(.secure-send-panel) > .modal-grid {
    gap: 14px 16px;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid label {
    gap: 7px;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid label > span:first-child,
.modal-panel:not(.request-update-panel):not(.secure-send-panel) .task-followers-label,
.modal-panel:not(.request-update-panel):not(.secure-send-panel) .workspace-rail-label {
    font-size: 11px;
    letter-spacing: .08em;
}

.modal-note {
    display: grid;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    font-size: 12px;
    margin: 0;
}
.modal-note strong { color: var(--text-strong); }
.modal-note span { color: var(--muted); }
.modal-note dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}
.modal-note dt {
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}
.modal-note dd {
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-note {
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    font-size: 13px;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-note span,
.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-note dd {
    color: var(--muted-strong);
    line-height: 1.6;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-note dl {
    gap: 6px 12px;
    font-size: 13px;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-note dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.modal-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 12px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 2px;
    background: linear-gradient(to top, rgba(255,255,255,.98) 78%, rgba(255,255,255,0));
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid input:not([type="checkbox"]):not([type="file"]),
.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid select,
.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid textarea {
    min-height: 46px;
    padding: 10px 12px;
    border-color: color-mix(in srgb, var(--border-strong) 88%, white 12%);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), inset 0 1px 2px rgba(15,23,42,.03);
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid textarea {
    min-height: 104px;
    resize: vertical;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid input[type="number"] {
    min-height: 46px;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid input[type="file"] {
    padding: 10px 12px;
    border: 1px dashed color-mix(in srgb, var(--border-strong) 82%, white 18%);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: var(--muted-strong);
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-alt);
    color: var(--text-strong);
    font: inherit;
    cursor: pointer;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-grid small,
.modal-panel:not(.request-update-panel):not(.secure-send-panel) .field-help,
.modal-panel:not(.request-update-panel):not(.secure-send-panel) .recipient-detail-meta,
.modal-panel:not(.request-update-panel):not(.secure-send-panel) .cell-meta {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .discussion-stream {
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, white 14%);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.modal-panel:not(.request-update-panel):not(.secure-send-panel) .modal-actions {
    margin-top: 12px;
    padding-top: 16px;
    padding-bottom: 4px;
}


.request-update-panel {
    max-width: 820px;
}

.request-update-grid {
    gap: 16px;
}

.request-update-summary {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, white 18%);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.request-update-summary__main {
    display: grid;
    gap: 10px;
}

.request-update-summary__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid color-mix(in srgb, var(--border) 78%, white 22%);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.request-update-summary__title {
    color: var(--text-strong);
    font-size: 24px;
    line-height: 1.2;
}

.request-update-summary__text {
    margin: 0;
    color: var(--muted-strong);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.request-update-summary__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.request-update-summary__meta-card,
.request-update-summary__hint,
.request-update-toggle,
.request-update-followup,
.request-update-reply {
    border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
    border-radius: var(--radius-lg);
}

.request-update-summary__meta-card {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
    background: rgba(255, 255, 255, 0.86);
}

.request-update-summary__meta-card span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.request-update-summary__meta-card strong {
    color: var(--text-strong);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.request-update-summary__hint {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    background: #f8fbff;
}

.request-update-summary__hint strong,
.request-update-assist__copy strong,
.request-update-reply__title {
    color: var(--text-strong);
    font-size: 14px;
}

.request-update-summary__hint span,
.request-update-assist__copy span,
.request-update-reply__text {
    color: var(--muted-strong);
    font-size: 13px;
    line-height: 1.6;
}

.request-update-assist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.request-update-assist__copy {
    display: grid;
    gap: 4px;
    max-width: 520px;
}

.request-update-toggle,
.request-update-followup {
    background: #f8fafc;
    padding: 14px 16px;
}

.request-update-toggle label.checkbox,
.request-update-followup label.checkbox {
    margin: 0;
}

.request-update-followup {
    display: grid;
    gap: 12px;
}

.request-update-reply {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
    border-color: #a7f3d0;
}

.request-update-reply__title,
.request-update-reply__text {
    margin: 0;
}

.request-update-reply__text {
    white-space: pre-wrap;
}

.secure-send-panel {
    max-width: 700px;
}

.secure-send-grid {
    gap: 16px;
}

.secure-send-summary,
.secure-send-note {
    border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
    border-radius: var(--radius-lg);
}

.secure-send-summary {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.secure-send-summary__identity {
    display: grid;
    gap: 4px;
}

.secure-send-summary__eyebrow,
.secure-send-summary__meta-item span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.secure-send-summary__identity strong,
.secure-send-summary__meta-item strong,
.secure-send-note strong {
    color: var(--text-strong);
}

.secure-send-summary__identity strong {
    font-size: 18px;
    line-height: 1.3;
}

.secure-send-summary__identity span:last-child,
.secure-send-note span {
    color: var(--muted-strong);
    line-height: 1.6;
}

.secure-send-summary__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.secure-send-summary__meta-item {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, white 12%);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.92);
}

.secure-send-summary__meta-item strong {
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.secure-send-note {
    display: grid;
    gap: 6px;
    padding: 15px 16px;
    background: linear-gradient(180deg, #effcf6 0%, #f8fffb 100%);
    border-color: color-mix(in srgb, #8fd6b5 60%, var(--border) 40%);
}

.modal-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    background: linear-gradient(to top, rgba(255,255,255,.98) 82%, rgba(255,255,255,0));
    border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   17b. Right-side document drawer
   -------------------------------------------------------------------------- */
dialog[data-drawer="right"] {
    /* Override browser dialog defaults + data-modal rule */
    position: fixed !important;
    inset: 0 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: min(920px, 96vw) !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border: none !important;
    border-left: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: -6px 0 40px rgba(15,23,42,.18) !important;
    color: var(--text) !important;
    overflow: hidden !important;
    /* Do NOT set display here — browser keeps it hidden until open */
}

/* Only apply flex layout when the dialog is actually open */
dialog[data-drawer="right"][open] {
    display: flex !important;
    flex-direction: column !important;
}

dialog[data-drawer="right"]::backdrop {
    background: rgba(15,23,42,.28);
    backdrop-filter: blur(3px);
}

.drawer-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,253,0.95));
    position: sticky;
    top: 0;
    z-index: 2;
}
.drawer-header .eyebrow { margin-bottom: 2px; }
.drawer-header h3 { color: var(--text-strong); font-size: 1rem; margin: 0 0 2px; }
.drawer-header p { color: var(--muted); font-size: 13px; margin: 0; }

.drawer-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.drawer-sidebar {
    width: 332px;
    flex-shrink: 0;
    border-right: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border));
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f7fbff 0%, #f8fafc 100%);
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.drawer-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.drawer-section .form-grid {
    min-width: 0;
}
.drawer-section input[type="file"],
.drawer-section select,
.drawer-section .button {
    width: 100%;
}
.drawer-upload-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.drawer-upload-actions .button {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}
.drawer-section input[type="file"] {
    max-width: 100%;
    font-size: 12px;
    min-width: 0;
}
.drawer-section input[type="file"]::file-selector-button {
    margin-right: 10px;
    margin-bottom: 6px;
}
.drawer-section h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 0 0 10px;
}

.drawer-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.drawer-empty strong { display: block; color: var(--text); margin-bottom: 4px; }
.drawer-empty p { margin: 0; }

.document-file-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.document-file-item {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    transition: background 100ms;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.document-file-item:hover { background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.document-file-item.is-active { background: linear-gradient(180deg, var(--accent-soft) 0%, #dbeafe 100%); }
.document-file-item.is-active strong { color: var(--accent); }
.document-file-item strong { font-size: 13px; color: var(--text); font-weight: 600; }
.document-file-item .cell-meta { font-size: 11px; color: var(--muted); }

.document-evidence-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.document-evidence-row .badge {
    min-height: 24px;
    padding: 0 10px;
}

.document-evidence-row .cell-meta {
    text-align: right;
    white-space: nowrap;
}

.drawer-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--surface);
}

.drawer-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.drawer-preview-head h4 { font-size: 14px; font-weight: 600; margin: 0 0 2px; color: var(--text-strong); }
.drawer-preview-head p { font-size: 12px; color: var(--muted); margin: 0; }
.drawer-preview-head .table-inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.document-preview-context {
    padding: 8px 20px;
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}

.document-preview-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 48px 32px;
    color: var(--muted);
}
.document-preview-empty strong { color: var(--text); font-size: 15px; font-weight: 600; }
.document-preview-empty p { font-size: 13px; margin: 0; max-width: 320px; line-height: 1.55; }

.document-preview-frame {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 0;
    display: block;
}


/* ===== resources/assets/css/admin/11-misc.css ===== */
/* Shared utilities — grid layouts, misc components, task-context panel, extracted view classes. */
/* --------------------------------------------------------------------------
   18. Grid layouts
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 16px; }
.two-up { grid-template-columns: 2fr 1fr; margin-bottom: 16px; }
.three-up { grid-template-columns: repeat(3,1fr); }
.four-up { grid-template-columns: repeat(4,minmax(0,1fr)); }
.customer-layout { grid-template-columns: 2fr 1fr; }
.split-panels { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }

/* --------------------------------------------------------------------------
   28. Misc components
   -------------------------------------------------------------------------- */
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-actions form { margin: 0; }
.table-inline-form { display: contents; }

.stack-actions { display: grid; gap: 8px; align-items: start; justify-items: start; }
.stack-actions .button { max-width: 100%; }
.summary-card strong { display: block; font-size: 22px; font-weight: 800; margin-bottom: 4px; color: var(--text-strong); }
.summary-card p { color: var(--muted); font-size: 13px; }

.compact-cards { margin-bottom: 14px; }

.quick-workspace-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.quick-workspace-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms, background 120ms, transform 120ms;
}

.quick-workspace-item:hover {
    border-color: var(--border-strong);
    background: var(--surface-alt);
}

.quick-workspace-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.quick-workspace-copy strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
}

.quick-workspace-copy small {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
}

.quick-workspace-value {
    flex: 0 0 auto;
    min-width: 32px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-strong);
    text-align: center;
}

.quick-workspace-item--primary {
    border-color: var(--info-border);
    background: var(--info-soft);
}

.quick-workspace-item--primary .quick-workspace-value {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--info-border);
    color: var(--info);
}

.quick-workspace-item--warning {
    border-color: var(--warning-border);
    background: var(--warning-soft);
}

.quick-workspace-item--warning .quick-workspace-value {
    background: rgba(245, 158, 11, 0.12);
    border-color: var(--warning-border);
    color: var(--warning);
}

/* Queue tile icons */
.queue-tile-icon {
    width: 18px; height: 18px;
    fill: var(--muted);
    opacity: .8;
}

/* Nav icon */
.nav-icon {
    width: 15px; height: 15px;
    fill: currentColor;
    flex: 0 0 auto;
    opacity: .75;
}

.nav a.is-active .nav-icon,
.nav a:hover .nav-icon { opacity: 1; }

/* Customer form */
.customer-form .subsection {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.customer-register-shell {
    display: grid;
    gap: 18px;
}

.customer-register-tabs-shell {
    margin-bottom: 8px;
    padding: 12px 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(246, 249, 252, .92), rgba(255, 255, 255, .98));
    box-shadow: var(--shadow-xs);
}

.customer-register-tabs-shell .page-tabs {
    gap: 10px;
    padding: 0 0 4px;
}

.customer-register-tabs-shell .page-tab {
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    border-bottom-width: 1px;
    background: rgba(255, 255, 255, .75);
    color: var(--muted-strong);
    font-weight: 700;
    min-width: 132px;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.06);
}

.customer-register-tabs-shell .page-tab:hover {
    color: var(--text-strong);
    border-color: var(--border-strong);
    background: var(--surface);
}

.customer-register-tabs-shell .page-tab.is-active,
.customer-register-tabs-shell .page-tab[aria-selected="true"] {
    color: var(--accent-strong);
    border-color: var(--accent-border);
    background: color-mix(in srgb, var(--accent-soft) 82%, white 18%);
}

.customer-register-panel {
    display: grid;
    gap: 18px;
}

.field-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.checkbox-group {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fbfdff;
}

.checkbox-group-heading {
    display: grid;
    gap: 4px;
}

.checkbox-group-heading strong {
    color: var(--text-strong);
    font-size: 14px;
}

.checkbox-group-heading span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.checkbox-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
}

/* --------------------------------------------------------------------------
   Task context panel — collapsible <details> inside workspace-panel
   -------------------------------------------------------------------------- */
.task-context-panel {
    margin: 0;
}

.task-context-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: var(--radius-md);
}
.task-context-summary::-webkit-details-marker { display: none; }

.task-context-summary-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.task-context-summary-label .eyebrow { flex-shrink: 0; }

.task-context-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron built from a border trick — no SVG needed */
.task-context-summary::after {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 180ms ease;
    margin-right: 2px;
    margin-top: -3px;
}
.task-context-panel[open] .task-context-summary::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.task-context-summary:hover .task-context-title { color: var(--accent); }
.task-context-summary:hover::after { border-color: var(--accent); }

.task-context-badge { pointer-events: none; flex-shrink: 0; }

.task-context-body { padding-bottom: 4px; }
.task-context-body .notice-bar { margin-bottom: 0; }

.requirement-file-inline-status {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.top-gap-small {
    margin-top: 4px;
}
/* --------------------------------------------------------------------------
   Extracted view classes — inline style cleanup pass
   -------------------------------------------------------------------------- */

/* Error pages (403 etc.) */
.error-page-panel      { text-align: center; padding: 80px 40px; }
.error-page-code       { font-size: 64px; font-weight: 800; color: var(--border); margin-bottom: 8px; }
.error-page-heading    { margin: 0 0 8px; }
.error-page-message    { color: var(--muted); max-width: 400px; margin: 0 auto 28px; }

/* Auth pages — shared footer link + 2FA code input */
.auth-footer-link      { margin-top: 1rem; text-align: center; }
.auth-code-input       { letter-spacing: .3em; text-align: center; font-size: 1.5rem; }

/* Customer header — small service/info tag badges */
.badge--service-tag {
    margin-top: 4px;
    font-weight: normal;
    border-radius: 12px;
    font-size: 11px;
}

/* Settings — logo preview */
.logo-preview-block {
    background: var(--sidebar-bg, #1e293b);
    padding: 16px 24px;
    border-radius: 8px;
    display: inline-block;
}
.logo-preview-img { max-height: 40px; filter: brightness(0) invert(1); }

.logo-preview-block--surface {
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
}

.logo-preview-img--natural {
    display: block;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: none;
}

/* Settings — form actions spacing */
.form-actions--top-gap { margin-top: 1.5rem; }

/* Settings — user row td (no padding for nested form layout) */
.settings-user-row-td  { padding: 0; }

/* Settings — inline checkbox label */
.checkbox-label--inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

/* Task form — followers group */
.task-followers-group  { display: grid; gap: 5px; }
.task-followers-label  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-strong); }

/* Tax planner — accordion details */
.tax-planner-accordion {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
}
.tax-planner-accordion + .tax-planner-accordion { margin-top: 0; }
.tax-planner-accordion:first-of-type { margin-bottom: 8px; }
.tax-planner-accordion > summary { font-weight: 500; }
.tax-planner-accordion > .detail-list {
    margin-top: 12px;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}

/* ── Recipient detail meta (below mottagare selects) ─────────────── */
.recipient-detail-meta {
    display: block;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--muted);
    margin-top: 4px;
    min-height: 0;
}
.recipient-detail-meta:empty { display: none; }

/* ===== resources/assets/css/admin/12-auth.css ===== */
/* Auth card + error pages. */
/* --------------------------------------------------------------------------
   19. Auth card
   -------------------------------------------------------------------------- */
.auth-card {
    max-width: 540px;
    margin: 60px auto;
    padding: 32px;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

body.auth-portal-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(147, 197, 253, 0.18), transparent 36%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(160deg, #08111f 0%, #0d1c30 38%, #0a1626 100%);
    color: #e2e8f0;
}

.auth-portal {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.auth-portal-background {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(6, 11, 22, 0.84) 0%, rgba(8, 17, 31, 0.72) 30%, rgba(8, 17, 31, 0.32) 58%, rgba(8, 17, 31, 0.72) 100%),
        var(--auth-login-image) center center / cover no-repeat;
    filter: saturate(0.92) contrast(1.04);
    transform: scale(1.02);
}

.auth-portal-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    pointer-events: none;
}

.auth-portal-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 32px;
    display: grid;
    place-items: center;
}

.auth-shell {
    width: min(460px, 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.auth-brand-lockup__company {
    display: inline-block;
    letter-spacing: 0.015em;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(241, 245, 249, 0.96);
    text-shadow: 0 1px 10px rgba(8, 17, 31, 0.18);
}

.auth-brand-lockup__year {
    color: rgba(191, 219, 254, 0.62);
    font-size: 0.92rem;
    font-weight: 500;
}

.auth-login-card.auth-card {
    max-width: none;
    width: min(460px, 100%);
    margin: 0 auto;
    min-height: 0;
    padding: 40px 38px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(244, 248, 252, 0.8) 100%);
    border: 1px solid rgba(255,255,255,0.54);
    box-shadow: 0 28px 80px rgba(3, 7, 18, 0.36);
    backdrop-filter: blur(14px);
}

.auth-card-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.auth-login-card__logo {
    width: min(300px, 82%);
    max-width: 100%;
    height: auto;
    opacity: 0.98;
    filter: drop-shadow(0 16px 30px rgba(8, 15, 27, 0.18));
}

.auth-card-footer {
    color: #526175;
}

.auth-card-footer {
    margin-top: 18px;
    padding-top: 10px;
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.auth-form-grid {
    display: grid;
    gap: 18px;
}

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-field > span {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-input {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(255,255,255,0.88);
    color: #0f172a;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.auth-input::placeholder {
    color: #7c8ca0;
}

.auth-input:hover {
    border-color: rgba(59, 130, 246, 0.36);
}

.auth-input:focus {
    outline: none;
    border-color: rgba(29, 78, 216, 0.62);
    background: rgba(255,255,255,0.98);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.auth-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    color: #0f172a;
}

.auth-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-checkbox-control {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 6px;
    border: 1px solid rgba(37, 99, 235, 0.34);
    background: rgba(255,255,255,0.9);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.06);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-checkbox-control::after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: translate(6px, 2px) rotate(45deg);
}

.auth-remember input:checked + .auth-checkbox-control {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.auth-remember input:checked + .auth-checkbox-control::after {
    border-right-color: #fff;
    border-bottom-color: #fff;
}

.auth-remember input:focus-visible + .auth-checkbox-control {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.auth-remember-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.auth-remember-copy strong {
    font-size: 0.93rem;
    color: #0f172a;
}

.auth-support-link {
    white-space: nowrap;
    font-size: 0.92rem;
    color: #1e40af;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.auth-support-link:hover,
.auth-support-link:focus-visible,
.link-muted:hover,
.link-muted:focus-visible {
    color: #1e40af;
}

.link-muted {
    color: #2563eb;
    font-weight: 600;
}

.auth-submit-button.button {
    min-height: 56px;
    border-radius: 16px;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 28px rgba(8, 47, 73, 0.2);
}

.auth-submit-button.button:hover {
    box-shadow: 0 4px 12px rgba(8, 47, 73, 0.18);
}

@media (max-width: 980px) {
    .auth-portal-stage {
        padding: 22px;
    }

    .auth-shell {
        max-width: 460px;
    }

    .auth-login-card.auth-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .auth-portal-stage {
        padding: 16px;
    }

    .auth-login-card.auth-card {
        padding: 28px 20px 22px;
        border-radius: 24px;
    }

    .auth-login-card__logo {
        width: min(220px, 82%);
    }

    .auth-options-row {
        flex-direction: column;
        align-items: stretch;
    }

    .auth-support-link {
        white-space: normal;
    }
}


/* ===== resources/assets/css/admin/13-tabs.css ===== */
/* Tab components — customer-tabs, view-toggle, page-tabs, sub-tabs. */
/* --------------------------------------------------------------------------
   20. Customer tabs
   -------------------------------------------------------------------------- */
.customer-tabs-shell {
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    position: sticky;
    top: var(--topbar-h);
    z-index: 30;
    background: var(--bg, #fff);
    --customer-tab-fade-width: 52px;
}

/* Right-edge fade — signals that the tab row is scrollable on tighter viewports */
.customer-tabs-shell::after {
    content: '';
    display: none;
    position: absolute;
    right: 0;
    bottom: 1px;
    width: var(--customer-tab-fade-width);
    height: 52px;
    background: linear-gradient(to right, transparent, var(--bg, #fff) 85%);
    pointer-events: none;
    z-index: 2;
}

.customer-tabs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.customer-tabs-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.customer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    overflow-x: visible;
    margin-bottom: -1px;
    padding-bottom: 0;
    scrollbar-width: none;
}
.customer-tabs::-webkit-scrollbar { display: none; }

.customer-tabs a {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-alt) 62%, #fff);
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: color 120ms, border-color 120ms, background 120ms;
    scroll-snap-align: start;
}

.customer-tab-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
}

.customer-tabs a:hover { color: var(--text-strong); }

.customer-tabs a.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--info-soft) 55%, white);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    border-bottom-color: var(--accent);
}

.sub-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.sub-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

.sub-tab.is-active,
.sub-tab[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
    background: color-mix(in srgb, var(--accent-soft) 72%, white 28%);
    color: var(--accent);
}

.sub-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 700;
}

.sub-tab-count--alert {
    background: color-mix(in srgb, var(--danger-soft) 86%, white 14%);
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   30. View toggle (table / timeline)
   -------------------------------------------------------------------------- */

.view-toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 3px;
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.view-toggle-btn svg { width: 16px; height: 16px; }

.view-toggle-btn:hover { color: var(--text); }

.view-toggle-btn.is-active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* Timeline */
.deadline-timeline { padding: 4px 0 24px; }

.timeline-group {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0 20px;
    position: relative;
}

.timeline-group + .timeline-group { margin-top: 4px; }

/* Vertical spine */
.timeline-spine {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 16px;
    position: relative;
}

.timeline-spine::after {
    content: '';
    position: absolute;
    top: 26px;
    right: -11px;
    bottom: -4px;
    width: 2px;
    background: var(--border);
}

.timeline-group:last-child .timeline-spine::after { display: none; }

.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
    border: 2px solid var(--surface);
    position: absolute;
    right: -15px;
    top: 18px;
    z-index: 1;
}

.timeline-dot--danger  { background: var(--danger); }
.timeline-dot--warning { background: #f59e0b; }
.timeline-dot--success { background: var(--success); }

.timeline-date {
    text-align: right;
    padding-right: 4px;
    padding-top: 12px;
}

.timeline-date-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    white-space: nowrap;
}

.timeline-date-label--danger  { color: var(--danger); }
.timeline-date-label--warning { color: #b45309; }

.timeline-date-full {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
    margin-top: 1px;
    white-space: nowrap;
}

.timeline-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 20px;
}

.timeline-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 120ms, box-shadow 120ms;
}

.timeline-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(29,78,216,.07);
}

.timeline-card-body { display: grid; gap: 4px; }

.timeline-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.3;
}

.timeline-card-meta {
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.timeline-card-meta span::before {
    content: attr(data-label) ': ';
    font-weight: 600;
    color: var(--muted-strong);
}

.timeline-card-aside {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mytodo-workstack {
    display: grid;
    gap: 14px;
}

.mytodo-workgroup {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: var(--shadow-soft);
}

.mytodo-workgroup--danger {
    border-color: rgba(220, 38, 38, 0.22);
    background: linear-gradient(180deg, #fff4f4 0%, #ffffff 100%);
}

.mytodo-workgroup--warning {
    border-color: rgba(217, 119, 6, 0.22);
    background: linear-gradient(180deg, #fff8ed 0%, #ffffff 100%);
}

.mytodo-workgroup--success {
    border-color: rgba(5, 150, 105, 0.18);
    background: linear-gradient(180deg, #f1fff8 0%, #ffffff 100%);
}

.mytodo-workgroup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.mytodo-workgroup-header > div {
    display: grid;
    gap: 3px;
}

.mytodo-workgroup-header strong {
    font-size: 1rem;
    color: var(--text-strong);
}

.mytodo-workgroup-header span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.mytodo-workgroup-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: var(--text-strong);
    font-weight: 700;
}

.mytodo-workgroup-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.mytodo-card {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.mytodo-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.mytodo-card strong {
    color: var(--text-strong);
}

.mytodo-card span,
.mytodo-card small {
    color: var(--text-muted);
}

.mytodo-card-meta {
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   31. Page tabs (ärende, etc.)
   -------------------------------------------------------------------------- */

.page-tabs-shell {
    position: sticky;
    top: var(--topbar-h);
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}

.page-tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--gap);
    overflow-x: auto;
    scrollbar-width: none;
}

.page-tabs::-webkit-scrollbar { display: none; }

.page-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    gap: 6px;
    padding: 11px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 120ms, border-color 120ms;
    margin-bottom: -1px;
    min-width: 0;
}

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

.page-tab.is-active,
.page-tab[aria-selected="true"] {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.page-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--border);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--border-strong) 55%, transparent);
    vertical-align: middle;
}

.page-tab.is-active .page-tab-count,
.page-tab[aria-selected="true"] .page-tab-count {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
}

.page-tab-count--empty {
    background: color-mix(in srgb, var(--border) 55%, white);
    color: var(--muted);
    border-color: color-mix(in srgb, var(--border-strong) 35%, transparent);
}

.page-tab-count--alert {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}

.page-tab.is-active .page-tab-count--alert,
.page-tab[aria-selected="true"] .page-tab-count--alert {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

.customer-tabs-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 var(--gap) 8px;
    border-left: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
    padding-left: 14px;
}

.customer-tabs-heading p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.customer-tabs-heading--compact p {
    max-width: 52ch;
}

.page-tabs-shell .customer-tabs-heading {
    margin: 0 var(--gap);
    padding-right: 0;
}

.page-tabs-shell--sectioned {
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.92), rgba(255, 255, 255, 0.98));
    border-bottom-color: color-mix(in srgb, var(--border-strong) 45%, transparent);
}

.page-tabs-shell--sectioned .page-tabs {
    gap: 8px;
    padding-top: 6px;
    padding-bottom: 10px;
}

.page-tabs-shell--sectioned .page-tab {
    border-bottom: none;
    border-radius: 999px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.page-tabs-shell--sectioned .page-tab.is-active,
.page-tabs-shell--sectioned .page-tab[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent-soft) 78%, white 22%);
    border-color: color-mix(in srgb, var(--primary) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.command-palette {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.command-palette-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.32);
    border: 0;
}

.command-palette-panel {
    position: relative;
    width: min(760px, calc(100vw - 32px));
    margin: 10vh auto 0;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.command-palette-search-row {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.command-palette-search-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    color: var(--muted);
}

.command-palette-input {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 17px;
    color: var(--text-strong);
}

.command-palette-esc-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 700;
}

.command-palette-results {
    display: grid;
    gap: 2px;
    max-height: min(56vh, 520px);
    overflow: auto;
    padding: 10px;
}

.command-palette-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
}

.command-palette-item:hover,
.command-palette-item.is-active {
    background: color-mix(in srgb, var(--accent-soft) 82%, white 18%);
}

.command-palette-item-copy {
    display: grid;
    gap: 2px;
}

.command-palette-item-copy strong {
    font-size: 14px;
    color: var(--text-strong);
}

.command-palette-item-copy small,
.command-palette-item-href,
.command-palette-empty {
    font-size: 12px;
    color: var(--muted-strong);
}

.command-palette-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.command-palette-open {
    overflow: hidden;
}

.workspace-rail-card--focus {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.98));
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

.workspace-rail-card--warning {
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255, 251, 235, 0.94), rgba(255, 255, 255, 0.98));
    border-color: color-mix(in srgb, var(--warning) 22%, var(--border));
}

.workspace-rail-card--danger {
    background:
        radial-gradient(circle at top right, rgba(248, 113, 113, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(254, 242, 242, 0.94), rgba(255, 255, 255, 0.98));
    border-color: color-mix(in srgb, var(--danger) 22%, var(--border));
}

.workspace-rail-card--neutral {
    background:
        radial-gradient(circle at top right, rgba(148, 163, 184, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.98));
}

.action-clusters {
    display: grid;
    gap: 14px;
}

.action-cluster {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.45), rgba(255, 255, 255, 0.95));
}

.action-cluster-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-strong);
}

.field-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

.service-lock-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning-soft) 88%, #fff);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    font-size: 11px;
    font-weight: 600;
}

.service-picker-entry.is-attached .service-picker-card,
.service-picker-entry.is-locked .service-picker-card {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

.customer-edge-rail-page .tab-panel > .workspace-panel,
.customer-edge-rail-page .workspace-main > .workspace-panel {
    position: relative;
    overflow: hidden;
}

.customer-edge-rail-page .tab-panel > .workspace-panel::before,
.customer-edge-rail-page .workspace-main > .workspace-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent 72%);
}

.customer-edge-rail-page .workspace-panel + .workspace-panel {
    margin-top: 14px;
}

/* Tighter workspace-header on the customer card — global headers feel heavy with many panels */
.customer-edge-rail-page .workspace-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
}

/* Secondary action row — slim buttons so deep-work links don't fight the summary grid */
.customer-edge-rail-page .inline-actions .button {
    min-height: 30px;
    padding: 4px 11px;
    font-size: 12px;
}

/* Lift section-intro slightly — customer panels are dense, less breathing room needed for meta text */
.customer-edge-rail-page .workspace-header .section-intro {
    font-size: 12.5px;
}

.tab-panel[hidden] { display: none; }

.customer-overview-hub {
    display: grid;
    gap: 16px;
}

.customer-work-summary,
.customer-domain-intro {
    display: grid;
    gap: 16px;
}

.customer-work-summary-grid,
.customer-domain-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.customer-work-summary-card,
.customer-domain-summary-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
}

.customer-work-summary-card strong,
.customer-domain-summary-card strong {
    font-size: 28px;
    line-height: 1.1;
    color: var(--text-strong);
}

.customer-work-summary-card p,
.customer-domain-summary-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.customer-work-summary-card--warning {
    border-left: 4px solid var(--warning);
}

.customer-work-summary-card--info {
    border-left: 4px solid var(--accent);
}

.customer-work-summary-card--danger {
    border-left: 4px solid var(--danger);
}

.customer-work-summary-card--neutral {
    border-left: 4px solid var(--border-strong);
}

.customer-overview-hub-main {
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.99));
    box-shadow: var(--shadow-xs);
}

.customer-overview-hub-main--danger {
    border-left-color: var(--danger);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.99));
}

.customer-overview-hub-main--warning {
    border-left-color: var(--warning);
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.99));
}

.customer-overview-hub-main--info {
    border-left-color: var(--accent);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.99));
}

.customer-overview-hub-main--neutral {
    border-left-color: var(--border-strong);
}

.customer-overview-alerts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.customer-overview-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.customer-overview-group {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.customer-overview-group-head {
    display: grid;
    gap: 2px;
}

.customer-overview-group-head h4 {
    font-size: 16px;
}

.customer-overview-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.customer-overview-group-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}

.customer-overview-group-list strong {
    color: var(--text-strong);
    font-size: 18px;
}

.customer-activity-feed {
    display: grid;
    gap: 12px;
}

.customer-activity-feed-item {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
}

.customer-activity-feed-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}

.customer-activity-feed-item h4 {
    font-size: 15px;
}

.customer-activity-feed-item p {
    color: var(--muted-strong);
}

.customer-activity-timeline-shell {
    display: grid;
    gap: 16px;
}

.customer-activity-timeline-shell[open] {
    padding-top: 2px;
}

.customer-activity-timeline-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}

.customer-activity-timeline-summary::-webkit-details-marker {
    display: none;
}

.customer-activity-timeline-summary h3 {
    margin: 4px 0 0;
}

.customer-activity-timeline-summary p {
    margin: 6px 0 0;
}

.customer-activity-timeline-summary-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 78%, white 22%);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.customer-activity-timeline {
    display: grid;
    gap: 8px;
}

.customer-activity-timeline-group {
    grid-template-columns: 128px 1fr;
}

.customer-activity-timeline-date {
    padding-top: 10px;
}

.customer-activity-timeline-cards {
    padding-top: 6px;
}

.customer-activity-timeline-card {
    cursor: default;
}

.customer-activity-timeline-card p {
    margin: 0;
    color: var(--muted-strong);
}

.customer-journal-composer {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--info-soft) 55%, white) 0%, #fff 100%);
}

.customer-journal-field {
    display: grid;
    gap: 8px;
}

.customer-journal-field span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
}

.customer-journal-field textarea {
    min-height: 120px;
    resize: vertical;
}

.customer-journal-composer-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.customer-journal-composer-actions .section-intro {
    margin: 0;
}

.customer-journal-card {
    cursor: default;
}

.customer-journal-card-text {
    color: var(--muted-strong);
    line-height: 1.55;
    white-space: normal;
}

/* ===== resources/assets/css/admin/14-lifecycle.css ===== */
/* Lifecycle visuals — journey, prospect, track picker, metric/detail lists. */
/* --------------------------------------------------------------------------
   21. Journey / lifecycle steps
   -------------------------------------------------------------------------- */
.journey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.journey-step {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    background: var(--surface);
    display: grid;
    gap: 6px;
}

.journey-step strong { font-size: 14px; color: var(--text-strong); }
.journey-step span { color: var(--muted); font-size: 13px; }
.journey-step-current { border-color: var(--accent); background: var(--accent-soft); }
.journey-step-done { border-color: var(--success-border); background: var(--success-soft); }

/* --------------------------------------------------------------------------
   22. Prospect lifecycle
   -------------------------------------------------------------------------- */
.prospect-lifecycle-strip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px,1fr));
    gap: 12px;
    counter-reset: prospect-step;
}

.prospect-lifecycle-strip li {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-height: 86px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, white 14%);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow: hidden;
}

.prospect-lifecycle-strip li::after {
    content: "";
    position: absolute;
    left: 31px;
    right: -18px;
    top: 25px;
    height: 2px;
    background: color-mix(in srgb, var(--border-strong) 72%, white 28%);
    z-index: 0;
}

.prospect-lifecycle-strip li:last-child::after {
    display: none;
}

.prospect-lifecycle-strip li strong { display: block; color: var(--text-strong); }
.prospect-lifecycle-strip li span:last-child { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

.prospect-lifecycle-dot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 999px;
    margin-top: 1px;
    border: 1px solid var(--border-strong);
    background: #ffffff;
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.prospect-lifecycle-strip li.is-current {
    border-color: var(--info-border);
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}
.prospect-lifecycle-strip li.is-current .prospect-lifecycle-dot {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: #ffffff;
}
.prospect-lifecycle-strip li.is-complete {
    border-color: var(--success-border);
}
.prospect-lifecycle-strip li.is-complete::after {
    background: var(--success-border);
}
.prospect-lifecycle-strip li.is-complete .prospect-lifecycle-dot {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

.prospect-lifecycle-strip--interactive li { padding: 0; }
.prospect-lifecycle-form { margin: 0; width: 100%; }
.prospect-lifecycle-btn {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-height: 86px;
    width: 100%;
    padding: 13px 14px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}
.prospect-lifecycle-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.prospect-lifecycle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prospect-lifecycle-btn:disabled { cursor: default; }
.prospect-lifecycle-text { position: relative; z-index: 1; display: block; min-width: 0; }
.prospect-lifecycle-text strong { display: block; color: var(--text-strong); }
.prospect-lifecycle-text span:last-child { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

.prospect-primary-link {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}

.prospect-primary-link-meta { display: grid; gap: 3px; }
.prospect-primary-link-meta strong { font-size: 16px; color: var(--text-strong); }
.prospect-status-badge { align-self: flex-start; }

/* --------------------------------------------------------------------------
   23. Track picker, chip grid
   -------------------------------------------------------------------------- */
.track-picker {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    background: var(--surface-alt);
}

.helper-text--notice {
    color: var(--accent);
    font-weight: 700;
}

.track-picker legend { padding: 0 6px; font-weight: 700; }

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.choice-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    background: var(--surface);
    color: var(--muted-strong);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}
.choice-chip:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.choice-chip input[type="checkbox"],
.choice-chip input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    border-radius: 4px;
    accent-color: var(--accent);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   24. Metric / detail lists
   -------------------------------------------------------------------------- */
.metric-list, .list, .detail-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 10px;
}

.metric-list li, .detail-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.workspace-rail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.workspace-rail-list li { display: grid; gap: 2px; }
.workspace-rail-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.workspace-rail-value { font-size: 13px; font-weight: 600; color: var(--text); }

/* ===== resources/assets/css/admin/15-notifications.css ===== */
/* Notification bell & panel. */
/* --------------------------------------------------------------------------
   30. Notification bell & panel
   -------------------------------------------------------------------------- */
.notif-bell-wrap {
    position: relative;
    z-index: 80;
}
.notif-bell-btn {
    position: relative;
}
.notif-bell-wrap:has(.notif-badge:not([hidden])) .notif-bell-btn {
    border-color: color-mix(in srgb, var(--warning) 44%, var(--border));
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
    color: var(--warning);
    box-shadow: 0 8px 16px rgba(180, 83, 9, 0.10);
}
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(420px, calc(100vw - 24px));
    min-height: 320px;
    max-height: min(72vh, 720px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    display: flex;
    flex-direction: column;
    z-index: 1200;
    overflow: hidden;
}
.notif-panel-enter {
    transition: opacity .15s ease, transform .15s ease;
}
.notif-panel-enter-start {
    opacity: 0;
    transform: translateY(-6px);
}
.notif-panel-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.notif-panel-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-strong);
}
.notif-markall-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    font-family: inherit;
}
.notif-markall-btn:hover { text-decoration: underline; }
.notif-panel-body {
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
    background: var(--surface);
    overscroll-behavior: contain;
}

.vivi-brief-card {
    position: relative;
}

.vivi-brief-card .vivi-panel-body {
    padding-top: 0;
}

.vivi-brief-card .vivi-empty {
    margin-top: 0.25rem;
}

.vivi-brief-card-header {
    align-items: flex-start;
}

.vivi-center-wrap {
    position: relative;
    z-index: 80;
}
.vivi-center-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.vivi-center-btn svg {
    width: 18px;
    height: 18px;
}
.vivi-center-wrap.is-loading .vivi-center-btn {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 45%, transparent);
}
.vivi-center-wrap.is-loading .vivi-center-btn::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35);
    animation: vivi-pulse 1.2s ease-out infinite;
}
.vivi-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(440px, calc(100vw - 24px));
    max-height: min(72vh, 760px);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    display: flex;
    flex-direction: column;
    z-index: 1200;
    overflow: hidden;
}
.vivi-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
}
.vivi-panel-header strong {
    display: block;
    color: var(--text-strong);
    margin-bottom: 4px;
}
.vivi-panel-header p {
    color: var(--muted);
    font-size: 12px;
}
.vivi-panel-body {
    padding: 14px 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.vivi-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.vivi-list {
    display: grid;
    gap: 10px;
}
.vivi-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 13px;
    background: var(--surface);
    display: grid;
    gap: 10px;
}
.vivi-item-copy {
    display: grid;
    gap: 4px;
}
.vivi-item-copy strong {
    color: var(--text-strong);
    font-size: 13px;
}
.vivi-item-copy p {
    color: var(--muted-strong);
    font-size: 12px;
}
.vivi-item--danger {
    border-color: var(--danger-border);
    background: var(--danger-soft);
}
.vivi-item--warning {
    border-color: var(--warning-border);
    background: var(--warning-soft);
}
.vivi-item--success {
    border-color: var(--success-border);
    background: var(--success-soft);
}
.vivi-item--info {
    border-color: var(--info-border);
    background: var(--info-soft);
}
@keyframes vivi-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
    70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.notif-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 0;
}
.notif-error { color: var(--danger); }
.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item--unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.notif-item--unread:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.notif-item-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 5px;
}
.notif-item-body {
    flex: 1 1 0;
    min-width: 0;
}
.notif-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.notif-item-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.notif-item-title:hover { color: var(--accent); text-decoration: underline; }
.notif-item-msg {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}
.notif-item-time {
    font-size: 11px;
    color: var(--text-muted);
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}
.notif-item-read-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 1px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-item-read-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.notif-item-read-btn:hover { color: var(--accent); background: var(--bg); }

/* ===== resources/assets/css/admin/16-chat.css ===== */
/* Chat — discussion box, @mention autocomplete, internal chat drawer + chat-launch. */
/* --------------------------------------------------------------------------
   31. Chat / Discussion box
   -------------------------------------------------------------------------- */

/* Container — full width, bordered card */
.chat-box {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--surface);
}

/* ── Message stream ─────────────────────────────── */
.chat-stream {
    flex: 1 1 auto;
    min-height: 300px;
    max-height: 480px;
    overflow-y: auto;
    padding: 20px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg);
    scroll-behavior: smooth;
}

/* Date divider */
.chat-date-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.chat-date-divider::before,
.chat-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Empty state */
.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
}
.chat-empty svg {
    width: 36px;
    height: 36px;
    fill: var(--border);
}
.chat-empty strong {
    display: block;
    font-size: 14px;
    color: var(--text-strong);
}
.chat-empty p {
    margin: 0;
    font-size: 13px;
}

/* ── Individual message ────────────────────────── */
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 80%;
    margin-bottom: 6px;
}
.chat-message--other {
    align-self: flex-start;
    flex-direction: row;
}
.chat-message--own {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* Avatar circle */
.chat-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-bottom: 2px;
}
.chat-message--own .chat-avatar {
    background: color-mix(in srgb, var(--accent) 70%, #000 10%);
}

/* Bubble */
.chat-bubble {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.chat-bubble-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 4px;
}
.chat-message--own .chat-bubble-meta {
    flex-direction: row-reverse;
}
.chat-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.chat-time {
    font-size: 10px;
    color: var(--text-muted);
    opacity: .7;
}
.chat-bubble-body {
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-message--other .chat-bubble-body {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
    color: var(--text);
}
.chat-message--own .chat-bubble-body {
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
/* mention chip inside own bubble — invert colors */
.chat-message--own mark.mention {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* ── Composer ──────────────────────────────────── */
.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 10px 12px;
}
.chat-input-wrap {
    flex: 1 1 auto;
    position: relative;
}
.chat-input {
    display: block;
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.5;
    color: var(--text);
    padding: 6px 8px;
    max-height: 160px;
    overflow-y: auto;
}
.chat-input::placeholder { color: var(--text-muted); }

.chat-send-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .1s;
    margin-left: 8px;
    margin-bottom: 1px;
}
.chat-send-btn:hover  { background: color-mix(in srgb, var(--accent) 85%, #000); }
.chat-send-btn:active { transform: scale(.92); }
.chat-send-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transform: translateX(1px);
}

.chat-hint {
    padding: 4px 14px 6px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface);
    margin: 0;
}
.chat-hint kbd {
    font-family: inherit;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 3px;
    font-size: 10px;
}

/* Drop the mention dropdown above the input */
.chat-input-wrap .mention-dropdown {
    bottom: calc(100% + 4px);
    top: auto;
}

/* ── workspace-panel that wraps a chat-box: remove double padding ── */
.workspace-panel:has(.chat-box) {
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   32. @mention autocomplete dropdown + highlight
   -------------------------------------------------------------------------- */
.discussion-composer-wrap {
    position: relative;
}
.mention-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
    z-index: 300;
    overflow: hidden;
}
.mention-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.mention-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    transition: background .1s;
}
.mention-item:hover,
.mention-item--active {
    background: var(--bg);
    color: var(--accent);
}
/* @[Name] rendered as a highlight in message bubbles */
mark.mention {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-weight: 500;
    border-radius: 3px;
    padding: 0 2px;
    font-style: normal;
}


/* Internal chat drawer */
.internal-chat-drawer {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(500px, calc(100vw - 16px));
}
.internal-chat-drawer[hidden] { display: none !important; }
.internal-chat-backdrop {
  border: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.internal-chat-panel {
  height: 100%;
  min-width: 0;
  max-width: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-left: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: -28px 0 72px rgba(15, 23, 42, 0.18);
  display: grid;
  grid-template-rows: auto auto 1fr;
}
.internal-chat-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,253,0.95));
  position: sticky;
  top: 0;
  z-index: 2;
}
.internal-chat-header h3 { margin: 2px 0 4px; }
.internal-chat-header p { margin: 0; color: #475569; }
.internal-chat-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  color: #334155;
  flex-wrap: wrap;
}
.internal-chat-summary strong { font-size: 0.95rem; }
.internal-chat-summary span { font-size: 0.86rem; color: #64748b; }
.internal-chat-body { min-height: 0; padding: 0; }
.chat-box--drawer {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 18%);
}
.chat-box--drawer .chat-stream {
  min-height: 0;
  padding: 18px;
}
.chat-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chat-launch-btn--icon {
  width: auto;
  min-width: 52px;
  justify-content: center;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 10px;
  border-radius: 16px;
  position: relative;
}
.chat-launch-btn--icon.table-inline-button {
  min-width: 32px;
  padding: 6px;
  border-radius: 8px;
}
.chat-launch-copy {
  display: none;
}
.chat-launch-copy strong {
  font-size: 0.95rem;
  color: #0f172a;
}
.chat-launch-copy span {
  font-size: 0.82rem;
  color: #64748b;
}
.chat-launch-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}
.chat-launch-btn--icon.table-inline-button .chat-launch-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: transparent;
  box-shadow: none;
}
.chat-rail-card {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.chat-launch-icon svg {
  width: 20px;
  height: 20px;
}
.chat-launch-btn--icon:not(.table-inline-button) .chat-launch-icon svg {
  width: 22px;
  height: 22px;
}
.chat-launch-btn--icon.table-inline-button .chat-launch-icon svg {
  width: 16px;
  height: 16px;
}
.chat-rail-card {
  position: sticky;
  top: 14px;
}
.chat-launch-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0 5px;
}
.chat-launch-btn--icon .chat-launch-badge {
  position: absolute;
  top: -4px;
  right: -4px;
}
.chat-launch-btn--icon.table-inline-button .chat-launch-badge {
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  font-size: 0.66rem;
  padding: 0 4px;
}
.chat-launch-badge[hidden] { display: none !important; }
.inline-actions--table {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
body.has-internal-chat-open {
  overflow: hidden;
}
@media (max-width: 900px) {
  .internal-chat-drawer {
    grid-template-columns: 1fr;
  }
  .internal-chat-backdrop {
    display: none;
  }
  .internal-chat-panel {
    border-left: 0;
    box-shadow: none;
    width: min(100vw, 100%);
  }
}



/* ===== resources/assets/css/admin/20-page-customer.css ===== */
/* Form submit rail */
.form-submit-rail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
    backdrop-filter: blur(10px);
    z-index: 4;
}
.form-submit-rail--top { position: sticky; top: 72px; }
.form-submit-rail--bottom {
    border-bottom: none;
    border-top: 1px solid var(--border);
    margin-bottom: 0;
    margin-top: 28px;
    padding-top: 20px;
    position: sticky;
    bottom: 0;
    padding-bottom: 12px;
}
.form-submit-copy { display: grid; gap: 2px; }
.form-submit-copy strong { font-size: 14px; color: var(--text-strong); }
.form-submit-copy span { font-size: 13px; color: var(--muted); }
.form-submit-actions { display: flex; gap: 8px; flex-shrink: 0; }

.customer-register-shell > .panel-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-bottom: 14px;
    margin-bottom: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
    backdrop-filter: blur(10px);
}

/* Customer mode grid */
.customer-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 14px 0 0;
}

.customer-mode-card,
.mode-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.customer-mode-card input[type="radio"],
.mode-card input[type="radio"] {
    appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid rgba(148,163,184,.8);
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 3px #fff;
    transition: border-color 140ms ease, background 140ms ease;
}
.customer-mode-card strong,
.mode-card-title { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 2px; }
.customer-mode-card p,
.mode-card-description { font-size: 12px; color: var(--muted-strong); line-height: 1.4; margin: 0; }
.customer-mode-card:hover,
.mode-card:hover {
    border-color: var(--accent-border);
    background: var(--surface-alt);
}
.customer-mode-card.is-selected,
.mode-card:has(input:checked) {
    border-color: rgba(37,99,235,.35);
    background: var(--accent-soft);
    box-shadow: var(--shadow-sm);
}
.customer-mode-card.is-selected input[type="radio"],
.mode-card:has(input:checked) input[type="radio"] {
    border-color: var(--accent);
    background: var(--accent);
}
.customer-mode-card.is-selected strong,
.mode-card:has(input:checked) .mode-card-title { color: var(--accent); }
.customer-mode-card--warning.is-selected { border-color: var(--warning-border); background: linear-gradient(180deg, #fff, rgba(255,247,237,.98)); }
.customer-mode-card--warning.is-selected strong { color: var(--warning); }
.customer-mode-card--danger.is-selected { border-color: var(--danger-border); background: linear-gradient(180deg, #fff, rgba(254,242,242,.98)); }
.customer-mode-card--danger.is-selected strong { color: var(--danger); }

.customer-status-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.customer-status-chip {
    display: grid;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.customer-status-chip strong {
    color: var(--text-strong);
    font-size: 16px;
}

.customer-register-blocks {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.customer-register-block {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.customer-register-block-header {
    display: grid;
    gap: 4px;
}

.customer-register-block-header h3 {
    font-size: 17px;
}

.customer-register-block-header p {
    color: var(--muted);
    font-size: 13px;
}

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

.compliance-choice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.compliance-choice input {
    margin-top: 4px;
}

.compliance-choice-copy {
    display: grid;
    gap: 4px;
}

.compliance-choice-copy strong {
    font-size: 14px;
    color: var(--text-strong);
}

.compliance-choice-copy small {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
}

.top-gap-small {
    margin-top: 8px;
}

.register-service-groups {
    display: grid;
    gap: 18px;
}

.register-service-group {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}

.register-service-group-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
    flex-wrap: wrap;
}

.register-service-group-header h3 {
    font-size: 14px;
}

.register-service-group-header h4 {
    font-size: 13px;
}

.register-service-group-header p {
    max-width: 680px;
    color: var(--muted);
    font-size: 12px;
}

.register-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.register-service-card {
    display: grid;
    gap: 3px;
    align-content: start;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}

.register-service-card:hover {
    border-color: var(--border-strong);
}

.register-service-card.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.register-service-card.is-disabled {
    opacity: .55;
    background: var(--surface-alt);
    cursor: not-allowed;
}

.register-service-card--special {
    border-style: dashed;
    background: var(--surface-alt);
}

.register-service-card input[type="checkbox"] {
    margin: 0;
}

.register-service-card-title {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 700;
}

.register-service-card-description {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.register-service-card-meta {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

/* Service picker */
.service-scope-form {
    display: grid;
    gap: 24px;
}

.service-picker-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    width: 100%;
}

.service-picker-shell > .stat-row,
.service-picker-shell > .service-scope-section {
    min-width: 0;
    width: 100%;
}

.service-readiness-panel,
.service-readiness-mini {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.service-readiness-panel--success,
.service-readiness-mini--success {
    border-color: color-mix(in srgb, var(--success-border, #bbf7d0) 82%, white);
}

.service-readiness-panel--warning,
.service-readiness-mini--warning {
    border-color: color-mix(in srgb, var(--warning-border, #fed7aa) 82%, white);
    background: linear-gradient(135deg, rgba(255, 251, 245, .96), rgba(255, 255, 255, .98));
}

.service-readiness-head,
.service-readiness-mini-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.service-readiness-head h3 {
    margin: 4px 0 0;
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.service-readiness-metrics,
.service-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.service-readiness-card,
.service-readiness-list {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.service-readiness-card strong,
.service-readiness-list > strong,
.service-readiness-mini-head strong {
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.1;
}

.service-readiness-card p,
.service-readiness-list .section-intro,
.service-readiness-mini p,
.service-readiness-mini-alert span {
    margin: 0;
    color: var(--muted-strong);
    font-size: 13px;
    line-height: 1.5;
}

.service-readiness-list > strong,
.service-readiness-mini-head strong {
    font-size: 14px;
    line-height: 1.35;
}

.service-readiness-list ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-readiness-list li {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-soft, #f8fafc) 78%, white);
}

.service-readiness-list li span {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 700;
}

.service-readiness-list li small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.service-readiness-mini {
    padding: 14px;
    border-radius: var(--radius-lg);
}

.service-readiness-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-readiness-mini-stats span,
.service-readiness-mini-alert {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-soft, #dbeafe) 45%, white);
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 700;
}

.service-readiness-mini-alert {
    display: grid;
    gap: 2px;
    background: color-mix(in srgb, var(--warning-soft, #fef3c7) 46%, white);
}

.service-readiness-mini-alert strong {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.service-taxonomy-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.service-taxonomy-card {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.service-taxonomy-card strong {
    font-size: 14px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--text-strong);
}

.service-taxonomy-card p {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45;
}

@media (min-width: 1200px) {
    .service-profile-stack {
        grid-template-columns: minmax(0, 1fr);
    }
}

.service-selection-toolbar {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.service-scope-section {
    position: relative;
}

.service-scope-section + .service-scope-section {
    margin-top: 4px;
}

.service-selection-status {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.service-selection-status-copy {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.service-selection-status-copy strong {
    font-size: 18px;
    color: var(--accent);
}

.service-selection-status-copy span {
    color: var(--muted-strong);
}

.service-selection-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-selection-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 78%, white 22%);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 600;
}

.service-picker-group { display: grid; gap: 12px; }

.service-selector-modal-body {
    display: grid;
    gap: 14px;
}

.service-selector-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, white 12%);
}

.service-selector-search {
    display: grid;
    gap: 4px;
    flex: 1 1 360px;
}

.service-selector-search span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted-strong);
}

.service-selector-toolbar-meta {
    display: grid;
    gap: 2px;
    min-width: 92px;
    justify-items: end;
}

.service-selector-toolbar-meta strong {
    font-size: 18px;
    color: var(--text-strong);
}

.service-selector-toolbar-meta span {
    font-size: 12px;
    color: var(--muted);
}

.service-selector-nav {
    position: sticky;
    top: -4px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 2px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
}

.service-selector-nav-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.service-selector-nav-link:hover,
.service-selector-nav-link:focus-visible {
    color: var(--accent-strong);
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.service-selector-nav-link.is-active {
    color: var(--accent-strong);
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

.service-selector-sections {
    display: grid;
    gap: 10px;
}

.service-selector-group-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.service-selector-group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, white 15%);
}

.service-selector-group-summary strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    color: var(--text-strong);
}

.service-selector-group-count {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-alt) 72%, white 28%);
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
}

.service-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    padding: 8px 14px 12px;
}

.service-picker-entry,
.service-special-entry {
    position: relative;
    display: block;
    cursor: pointer;
}

.service-picker-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}
.service-picker-checkbox { flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); }
.service-picker-copy strong { display: block; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.service-picker-copy p {
    font-size: 12px;
    color: var(--muted);
    margin-top: 1px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.service-picker-card:hover { border-color: var(--border-strong); }
.service-picker-card.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.service-picker-card.is-selected .service-picker-copy strong { color: var(--accent); }

.service-special-shell {
    display: grid;
    gap: 14px;
}

.service-special-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    padding: 12px 18px 18px;
}

.service-special-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    cursor: pointer;
}

.service-special-item.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.service-special-item strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
}

.service-special-item p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
}

.service-config-trigger {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 96px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted-strong);
    box-shadow: var(--shadow-xs);
    transition: border-color 120ms, background 120ms, color 120ms;
}

.service-config-trigger svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-config-trigger span {
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.service-config-trigger:hover {
    border-color: var(--border-strong);
    background: var(--surface-alt);
    color: var(--text-strong);
}

.service-config-trigger.is-incomplete {
    border-color: var(--warning-border);
    background: var(--warning-soft);
    color: var(--warning);
}

.service-config-trigger.is-ready {
    border-color: var(--info-border);
    background: var(--info-soft);
    color: var(--info);
}

.service-quick-config-panel {
    margin: 0 0 18px;
    padding: 20px;
    border: 1px solid rgba(148,163,184,.34);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    box-shadow: 0 16px 36px rgba(15,23,42,.05);
}

.service-quick-config-panel--secondary {
    background: linear-gradient(180deg, rgba(248, 250, 252, .92), rgba(255, 255, 255, .98));
}

.service-quick-config-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border: 1px solid rgba(203,213,225,.9);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15,23,42,.04);
}

.service-quick-config-table {
    width: 100%;
    border-collapse: collapse;
}

.service-quick-config-table th,
.service-quick-config-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(226,232,240,.95);
    text-align: left;
    vertical-align: top;
}

.service-quick-config-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: rgba(100,116,139,.95);
    background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.92));
}

.service-quick-config-table tbody tr:last-child td {
    border-bottom: 0;
}

.service-quick-config-table .table-field {
    min-width: 148px;
}

.service-quick-config-table .table-field input,
.service-quick-config-table .table-field select {
    appearance: none;
    min-width: 148px;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(203,213,225,.95);
    border-radius: 16px;
    color: var(--text-strong);
    background: linear-gradient(180deg, #fff, rgba(248,250,252,.86));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(15,23,42,.04);
    color-scheme: light;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.service-quick-config-table .table-field select {
    padding-right: 44px;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(37,99,235,.95) 50%),
        linear-gradient(135deg, rgba(37,99,235,.95) 50%, transparent 50%),
        linear-gradient(180deg, #fff, rgba(248,250,252,.86));
    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 16px) 50%,
        0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
}

.service-quick-config-table .table-field input:hover,
.service-quick-config-table .table-field select:hover {
    border-color: rgba(37,99,235,.28);
    background-color: #fff;
}

.service-quick-config-table .table-field input:focus,
.service-quick-config-table .table-field select:focus {
    border-color: rgba(37,99,235,.55) !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37,99,235,.20), 0 12px 24px rgba(37,99,235,.08);
}

.service-quick-config-table .table-field select option {
    color: var(--text-strong);
    background: #fff;
}

.service-scope-form select,
.service-config-body select {
    color: var(--text-strong);
    background: #fff;
    color-scheme: light;
}

.service-scope-form select option,
.service-config-body select option {
    color: var(--text-strong);
    background: #fff;
}

.service-quick-config-table .date-control {
    min-width: 184px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.service-quick-config-table .date-control .date-input {
    min-width: 0;
}

.service-quick-config-table .date-trigger {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border-color: rgba(203,213,225,.95);
    background: linear-gradient(180deg, #fff, rgba(239,246,255,.85));
    color: var(--accent);
    box-shadow: 0 8px 18px rgba(15,23,42,.04);
}

.service-quick-service-name {
    display: grid;
    gap: 4px;
}

.service-quick-service-name strong {
    font-size: 14px;
}

.service-quick-service-name small {
    color: var(--muted);
    font-size: 12px;
}

.service-quick-config-table .service-config-trigger {
    position: static;
}

.assistant-shell {
    display: grid;
    gap: 16px;
    margin-bottom: 22px;
}

.assistant-shell--compact {
    gap: 12px;
    padding: 16px 18px;
    border-left: 4px solid color-mix(in srgb, var(--accent) 55%, white 45%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 76%, white 24%), rgba(255, 255, 255, 0.98));
}

.assistant-compact-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.assistant-compact-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.assistant-compact-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.assistant-compact-copy {
    display: grid;
    gap: 4px;
}

.assistant-compact-copy strong {
    font-size: 13px;
    color: var(--text-strong);
}

.assistant-compact-copy p {
    margin: 0;
    font-size: 12px;
    color: var(--muted-strong);
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .service-summary-columns,
    .customer-overview-groups {
        grid-template-columns: 1fr;
    }
}

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

.assistant-column {
    display: grid;
    gap: 10px;
    align-content: start;
}

.assistant-column-header {
    display: grid;
    gap: 2px;
}

.assistant-column-header strong {
    font-size: 14px;
    color: var(--text-strong);
}

.assistant-column-header span {
    font-size: 12px;
    color: var(--muted-strong);
    line-height: 1.45;
}

.assistant-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.assistant-card strong {
    font-size: 14px;
    color: var(--text-strong);
}

.assistant-card p {
    margin: 0;
    font-size: 13px;
    color: var(--muted-strong);
    line-height: 1.5;
}

.assistant-card--danger {
    border-color: rgba(194, 73, 73, 0.28);
    background: rgba(250, 236, 236, 0.92);
}

.assistant-card--warning {
    border-color: rgba(191, 144, 44, 0.28);
    background: rgba(253, 247, 230, 0.96);
}

.assistant-card--success {
    border-color: rgba(57, 146, 100, 0.24);
    background: rgba(236, 249, 242, 0.96);
}

.assistant-card--info {
    border-color: rgba(48, 104, 177, 0.24);
    background: rgba(236, 244, 255, 0.96);
}

.assistant-card--neutral {
    background: var(--surface-alt);
}

.assistant-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 10%, white);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    text-decoration: none;
    transition: background 120ms, color 120ms, border-color 120ms;
}

.assistant-link:hover,
.assistant-link:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.vivi-item--danger .assistant-link {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, white);
    border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}
.vivi-item--danger .assistant-link:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.vivi-item--warning .assistant-link {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 10%, white);
    border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}
.vivi-item--warning .assistant-link:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

.assistant-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.assistant-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.assistant-feedback-form {
    margin: 0;
}

.assistant-feedback-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(28, 50, 74, 0.14);
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.assistant-feedback-button:hover,
.assistant-feedback-button:focus-visible {
    border-color: rgba(32, 87, 165, 0.22);
    color: var(--accent-strong);
}

.assistant-feedback-button--subtle {
    color: var(--muted-strong);
    background: transparent;
}

.assistant-empty {
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 13px;
}

.assistant-engine-badge span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Service trigger tags */
.service-trigger-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.service-trigger {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--muted-strong);
}

/* Special process list */
.service-special-shell { display: grid; gap: 12px; }
.service-special-list { display: grid; gap: 6px; }
.service-special-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 48px 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 120ms;
}
.service-special-item input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); }
.service-special-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.service-special-item p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.service-special-item:hover { border-color: var(--border-strong); }
.service-special-item.is-selected { border-color: var(--accent); background: var(--accent-soft); }

/* Service profile cards */
.service-profile-stack { display: grid; gap: 16px; margin-top: 8px; }

.service-profile-summary {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.service-summary-empty {
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
}

.service-summary-empty strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-strong);
}

.service-summary-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.service-summary-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(148,163,184,.28);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: none;
    transition: border-color 140ms ease, background 140ms ease;
}

.service-summary-item:hover {
    border-color: var(--border-strong);
    background: var(--surface-alt);
}

.service-summary-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.service-summary-copy strong {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-strong);
}

.service-summary-copy small {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(203,213,225,.9);
    background: rgba(248,250,252,.88);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted-strong);
}

.service-summary-meta {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.service-summary-action {
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.service-summary-item--needs {
    border-color: var(--warning-border);
    background: var(--warning-soft);
}

.service-summary-item--needs .service-summary-action {
    border-color: var(--warning-border);
    background: #fff;
    color: var(--warning);
}

.service-summary-item--ready {
    border-color: var(--info-border);
    background: var(--info-soft);
}

.service-summary-item--ready .service-summary-action {
    border-color: var(--info-border);
    background: #fff;
    color: var(--info);
}

.service-profile-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}
.service-profile-card--process { border-color: var(--warning-border); }

.service-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}
.service-profile-card--process .service-profile-header { background: var(--warning-soft); }

.service-profile-heading {
    display: grid;
    gap: 4px;
}

.service-profile-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-profile-header h4 { margin-top: 4px; }
.service-profile-header p { font-size: 13px; color: var(--muted); margin-top: 2px; }

.service-profile-guidance {
    margin: 12px 20px 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--info-border) 75%, white);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(239, 246, 255, .86), rgba(255, 255, 255, .96));
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.5;
}

.service-primary-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-strong);
    white-space: nowrap;
    cursor: pointer;
}
.service-primary-toggle input { accent-color: var(--accent); }

.service-process-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    white-space: nowrap;
}

.service-profile-card .form-grid { padding: 16px 20px; margin-top: 0; }
.service-config-body .service-profile-card .form-grid { padding: 14px 16px; gap: 12px; }
.service-config-body .service-profile-card textarea { min-height: 88px; }
.service-config-body .service-profile-card label > span { font-size: 12px; }

.service-config-related-note,
.service-config-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0 8px 8px 0;
    padding: 0 10px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
}

.service-config-related-note {
    border: 1px solid var(--info-border);
    background: var(--info-soft);
    color: var(--text);
}

.service-config-status--needs {
    border: 1px solid var(--warning-border);
    background: var(--warning-soft);
    color: var(--text-strong);
}

.service-config-status--ready {
    border: 1px solid var(--success-border);
    background: var(--success-soft);
    color: var(--text-strong);
}

.service-config-body .service-profile-card {
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
}

.service-config-body .service-profile-header {
    padding: 0 0 8px;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.service-config-body .service-profile-title-row {
    gap: 8px;
}

.service-config-body .service-profile-card .form-grid {
    padding-left: 0;
    padding-right: 0;
}

.service-config-body .service-profile-guidance {
    margin: 10px 0 0;
}

.service-config-body .service-profile-card .form-grid {
    gap: 8px 12px;
}

.service-config-body .service-profile-card textarea {
    min-height: 80px;
}

.service-config-body .payroll-employee-config {
    padding: 14px;
}

.service-config-body .payroll-employee-row {
    grid-template-columns: 1fr 1fr auto;
}

.service-selector-modal-body {
    display: grid;
    gap: 14px;
}

.service-selector-toolbar {
    align-items: end;
}

.service-selector-group-summary {
    padding: 14px 16px;
}

.service-selector-group-summary strong {
    font-size: 17px;
}

.service-selector-group-summary small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.service-empty-state {
    padding: 24px;
    color: var(--muted);
    font-size: 13px;
    background: var(--surface-alt);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-strong);
    text-align: center;
}
.service-empty-state strong { display: block; margin-bottom: 4px; color: var(--text-strong); }


/* Customer identity card */
.customer-id-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: var(--gap);
}

.customer-id-card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.customer-id-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
    line-height: 1.3;
}

.customer-id-brief {
    margin: 0 0 12px;
    max-width: 78ch;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted-strong);
}

.customer-id-number {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.customer-id-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.customer-id-chip {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.customer-id-consultant {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.customer-id-consultant svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.customer-id-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.customer-id-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    color: var(--primary);
    text-decoration: none;
    transition: opacity 120ms;
}

.customer-id-contact-item:hover { opacity: 0.75; }

.customer-id-contact-item svg { flex-shrink: 0; }

.customer-id-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

/* Customer info DL */
.customer-info-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0;
}

.customer-info-row {
    display: contents;
}

.customer-info-row dt,
.customer-info-row dd {
    padding: 9px 14px;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border);
    margin: 0;
}

.customer-info-row:last-child dt,
.customer-info-row:last-child dd {
    border-bottom: none;
}

.customer-info-row dt {
    color: var(--text-muted);
    font-weight: 500;
    background: var(--surface-alt, var(--bg));
    border-right: 1px solid var(--border);
}

.customer-info-row dd {
    color: var(--text);
    background: var(--surface);
}

.service-config-store {
    display: none !important;
}

.service-profile-stack {
    display: grid;
    gap: 16px;
}

.service-summary-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 14px;
    align-items: start;
}

.service-summary-column {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}

.service-summary-column-header {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(226,232,240,.95);
}

.service-summary-column-header strong {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-strong);
}

.service-summary-column-header span {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45;
}

.service-summary-list {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.service-summary-item {
    text-decoration: none;
}

.empty-state-panel {
    padding: 24px 26px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.98));
}

.customer-reports-shell {
    display: grid;
    gap: 18px;
}

.customer-reports-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.customer-report-placeholder-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(248, 250, 252, .92), rgba(255, 255, 255, .98));
    box-shadow: var(--shadow-xs);
}

.customer-report-placeholder-card strong {
    color: var(--text-strong);
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -.04em;
}

.customer-report-placeholder-card p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 13px;
    line-height: 1.55;
}

.customer-report-placeholder-card .badge {
    justify-self: start;
}

.customer-reports-empty-panel {
    margin: 0;
}

.financial-report-upload-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.financial-report-upload-field {
    flex: 1 1 360px;
}

.financial-report-upload-field small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.financial-report-year-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.financial-report-year-chip {
    display: grid;
    gap: 3px;
    min-width: 132px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    text-decoration: none;
    color: var(--text-strong);
}

.financial-report-year-chip span {
    color: var(--text-muted);
    font-size: 12px;
}

.financial-report-year-chip.is-active {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: linear-gradient(180deg, #eef4ff, #fff);
    box-shadow: var(--shadow-xs);
}

.financial-report-two-grid,
.financial-report-compare-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.financial-report-card,
.financial-report-compare-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.financial-report-bullet-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: var(--text-strong);
    line-height: 1.6;
}

.financial-report-coverage-value {
    font-size: 24px;
    letter-spacing: -.05em;
    color: var(--text-strong);
}

.financial-report-coverage-track,
.financial-report-month-track {
    width: 100%;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.financial-report-coverage-track {
    height: 14px;
}

.financial-report-coverage-track span,
.financial-report-month-bar {
    display: block;
    border-radius: inherit;
}

.financial-report-coverage-track span {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.financial-report-month-bars {
    display: grid;
    gap: 12px;
}

.financial-report-month-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 14px;
}

.financial-report-month-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.financial-report-month-track {
    height: 12px;
}

.financial-report-month-bar {
    height: 100%;
    min-width: 8%;
}

.financial-report-month-bar--success {
    background: linear-gradient(90deg, #16a34a, #86efac);
}

.financial-report-month-bar--danger {
    background: linear-gradient(90deg, #dc2626, #fca5a5);
}

.financial-report-month-bar--neutral {
    background: linear-gradient(90deg, #64748b, #cbd5e1);
}

.financial-report-month-row strong,
.financial-report-compare-card strong {
    color: var(--text-strong);
}

.financial-report-compare-card {
    display: grid;
    gap: 10px;
}

.financial-report-compare-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 720px) {
    .financial-report-month-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.payroll-control-shell {
    display: grid;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fe 100%);
}

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

.payroll-action-banner {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.payroll-action-banner strong {
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.3;
}

.payroll-action-banner p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.payroll-action-banner--warning {
    border-left-color: var(--warning, #d97706);
    background: linear-gradient(180deg, #fffdfa 0%, #fff8eb 100%);
}

.payroll-action-banner--info {
    border-left-color: var(--brand, #2563eb);
    background: linear-gradient(180deg, #fbfdff 0%, #f2f8ff 100%);
}

.payroll-action-banner--neutral {
    border-left-color: var(--border-strong, #94a3b8);
}

.payroll-control-card {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.payroll-control-card strong {
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.3;
}

.payroll-control-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.payroll-control-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.86);
}

.payroll-control-note {
    display: grid;
    gap: 4px;
}

.payroll-control-note strong {
    color: var(--text-strong);
}

.payroll-control-note span {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.payroll-control-actions .workspace-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.payroll-control-actions form {
    margin: 0;
}

.mobile-only,
.mobile-record-list,
.mobile-quick-hub {
    display: none !important;
}

.mobile-record-list {
    gap: 12px;
}

.mobile-record-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.mobile-record-card--danger {
    border-color: var(--danger-border);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.94), rgba(255, 255, 255, 0.99));
}

.mobile-record-card--empty {
    text-align: center;
    color: var(--muted);
}

.mobile-record-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mobile-record-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-strong);
}

.mobile-record-subtitle {
    margin-top: 3px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.mobile-record-hint {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--success-border);
    border-radius: var(--radius-md);
    background: var(--success-soft);
    color: var(--muted-strong);
    font-size: 12px;
    line-height: 1.45;
}

.customer-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.customer-portfolio-card {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid var(--border-subtle);
    border-left-width: 4px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #fff 100%);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-align: left;
}

.customer-portfolio-card strong {
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--text-strong);
}

.customer-portfolio-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted-strong);
}

.customer-portfolio-card--warning { border-left-color: #f59e0b; }
.customer-portfolio-card--success { border-left-color: #16a34a; }
.customer-portfolio-card--neutral { border-left-color: #94a3b8; }
.customer-portfolio-card--danger { border-left-color: #dc2626; }

.mobile-record-meta-grid {
    display: grid;
    gap: 8px;
}

.mobile-record-meta-grid span {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted-strong);
}

.mobile-record-meta-grid strong {
    color: var(--text-strong);
}

.mobile-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-record-actions .button {
    min-height: 42px;
}

.mobile-record-card .table-inline-button,
.mobile-record-card .button {
    min-width: 120px;
}

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

.mobile-summary-card {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.99));
}

.mobile-summary-card strong {
    font-size: 18px;
    line-height: 1.1;
    color: var(--text-strong);
}

.mobile-summary-card span {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.desktop-only {
    display: block;
}


/* ===== resources/assets/css/admin/21-page-engagement.css ===== */
/* Engagement page — activity switch used above the ärende/engagement tables. */
.activity-switch { margin-bottom: 14px; display: flex; gap: 6px; }
.activity-switch .button {
    background: var(--surface);
    color: var(--muted-strong);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
.activity-switch .button.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--info-border);
}

/* Prospect → customer conversion readiness panel. */
.engagement-conversion {
    border-left: 4px solid var(--warning-border);
}
.engagement-conversion--ready {
    border-left-color: var(--success-border);
    background: var(--success-soft);
}
.engagement-conversion .workspace-actions .button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.readiness-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 8px;
}
.readiness-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
}
.readiness-item__mark {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background: var(--muted);
}
.readiness-item.is-done {
    background: var(--success-soft);
    border-color: var(--success-border);
}
.readiness-item.is-done .readiness-item__mark {
    background: var(--success);
}
.readiness-item.is-missing {
    background: var(--danger-soft);
    border-color: var(--danger-border);
}
.readiness-item.is-missing .readiness-item__mark {
    background: var(--danger);
}
.readiness-item.is-pending {
    background: var(--warning-soft);
    border-color: var(--warning-border);
}
.readiness-item.is-pending .readiness-item__mark {
    background: var(--warning);
}
.readiness-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.readiness-item__body strong {
    font-size: 13px;
    color: var(--text-strong);
    font-weight: 600;
}
.readiness-item__body span {
    font-size: 12px;
    color: var(--muted-strong);
    overflow-wrap: anywhere;
}
.readiness-item__tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--border);
    color: var(--muted-strong);
    font-size: 10px;
    font-weight: 500;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ===== resources/assets/css/admin/22-page-onboarding.css ===== */
/* Onboarding page — step summary + step modal grid. */
.onboarding-modal-panel {
    max-width: 780px;
}

.modal-section-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.modal-section-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.modal-section-card__head strong {
    color: var(--text-strong);
    font-size: 14px;
}

.modal-section-card__head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.onboarding-step-summary {
    gap: 14px;
    padding: 18px;
}

.onboarding-step-summary__hero {
    display: grid;
    gap: 6px;
}

.onboarding-step-summary__hero strong {
    color: var(--text-strong);
    font-size: 22px;
    line-height: 1.2;
}

.onboarding-step-summary__hero span:last-child {
    color: var(--muted-strong);
    font-size: 14px;
    line-height: 1.6;
}

.onboarding-step-summary__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.onboarding-step-summary__card {
    display: grid;
    gap: 4px;
    padding: 14px 15px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, white 16%);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
}

.onboarding-step-summary__card > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.onboarding-step-summary__card strong {
    color: var(--text-strong);
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.onboarding-step-summary__card p,
.onboarding-step-summary__impact {
    margin: 0;
    color: var(--muted-strong);
    font-size: 13px;
    line-height: 1.6;
}

.onboarding-step-modal-grid {
    gap: 16px 18px;
}

.onboarding-step-modal-grid__request {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.onboarding-step-modal-grid__request-actions,
.onboarding-step-modal-grid__send {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.onboarding-step-modal-grid__request-actions {
    justify-content: flex-end;
}

/* ===== resources/assets/css/admin/30-dashboard.css ===== */
/* Dashboard v7 — full-width landing layout. */
/* ==========================================================================
   Dashboard v7 — full redesign
   ========================================================================== */

/* Dashboard uses full-width layout, no workspace-page/rail */
.dash {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.dash-greeting {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
    line-height: 1.3;
}
.dash-date {
    font-size: 13px;
    color: var(--muted);
    margin: 4px 0 0;
}
.dash-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.dash-search-wrap {
    position: relative;
    width: 320px;
}
.dash-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    fill: var(--muted);
    pointer-events: none;
}
.dash-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    color: var(--text);
    transition: border-color 120ms, box-shadow 120ms;
}
.dash-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.dash-search-input::placeholder {
    color: var(--muted);
}
.dash-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}
.dash-refresh-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--muted);
}
.dash-refresh-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-alt);
}

/* ── KPI strip ────────────────────────────────────────────────────────── */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.dash-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 120ms, box-shadow 120ms;
}
.dash-kpi:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.dash-kpi-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-strong);
}
.dash-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
}
.dash-kpi--danger  { background: var(--danger-soft);  border-color: var(--danger-border); }
.dash-kpi--danger .dash-kpi-value { color: var(--danger); }
.dash-kpi--warning { background: var(--warning-soft); border-color: var(--warning-border); }
.dash-kpi--warning .dash-kpi-value { color: var(--warning); }
.dash-kpi--info    { background: var(--info-soft);    border-color: var(--info-border); }
.dash-kpi--info .dash-kpi-value { color: var(--info); }

/* ── Section headers ──────────────────────────────────────────────────── */
.dash-section { }
.dash-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}
.dash-section-header h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}
.dash-section-sub {
    font-size: 13px;
    color: var(--muted);
}
.dash-section-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.dash-section-link:hover { text-decoration: underline; }

.dash-section--focus {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.dash-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dash-focus-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}

.dash-focus-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.dash-focus-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dash-focus-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
}

.dash-focus-value {
    font-size: 28px;
    line-height: 1;
    color: var(--text-strong);
}

.dash-focus-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.dash-focus-cta {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}

.dash-focus-card--danger { border-left: 3px solid var(--danger); }
.dash-focus-card--warning { border-left: 3px solid var(--warning); }
.dash-focus-card--info { border-left: 3px solid var(--info); }
.dash-focus-card--neutral { border-left: 3px solid var(--border-strong); }

/* ── Work queue grid ──────────────────────────────────────────────────── */
.dash-queue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dash-queue {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 120ms, box-shadow 120ms;
    min-height: 0;
}
.dash-queue:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.dash-queue--empty {
    opacity: .6;
}
.dash-queue--empty:hover {
    opacity: 1;
}
.dash-queue-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dash-queue-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
}
.dash-queue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 700;
    background: var(--surface-alt);
    color: var(--text-strong);
}
.dash-queue-count--danger  { background: var(--danger-soft);  color: var(--danger);  }
.dash-queue-count--warning { background: var(--warning-soft); color: var(--warning); }
.dash-queue-count--info    { background: var(--info-soft);    color: var(--info);    }
.dash-queue-count--success { background: var(--success-soft); color: var(--success); }
.dash-queue-desc {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}
.dash-queue-preview {
    font-size: 12px;
    color: var(--muted-strong);
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Tone accents — left border */
.dash-queue--danger  { border-left: 3px solid var(--danger);  }
.dash-queue--warning { border-left: 3px solid var(--warning); }
.dash-queue--info    { border-left: 3px solid var(--info);    }
.dash-queue--success { border-left: 3px solid var(--success); }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.dash-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 16px;
}
.dash-timeline::before {
    content: '';
    position: absolute;
    left: 100px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.dash-timeline-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    position: relative;
}
.dash-timeline-date {
    flex: 0 0 80px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-align: right;
}
.dash-timeline-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
    position: relative;
    z-index: 1;
}
.dash-timeline-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dash-timeline-body strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.dash-timeline-body span {
    font-size: 12px;
    color: var(--muted);
}
.dash-timeline-row--overdue .dash-timeline-date { color: var(--danger); }
.dash-timeline-row--overdue .dash-timeline-dot  { background: var(--danger); }
.dash-timeline-row--today .dash-timeline-date   { color: var(--accent); font-weight: 700; }
.dash-timeline-row--today .dash-timeline-dot    { background: var(--accent); }

/* ── Quick actions ────────────────────────────────────────────────────── */
.dash-quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.dash-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: border-color 120ms, background 120ms;
}
.dash-quick-action svg {
    width: 16px;
    height: 16px;
    fill: var(--muted);
    flex-shrink: 0;
}
.dash-quick-action:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.dash-quick-action:hover svg { fill: var(--accent); }

/* ── Search results (replaces old overlay) ────────────────────────────── */
#dash-search-results:empty { display: none; }
#dash-search-results .search-results-overlay {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 420px;
    overflow-y: auto;
}
#dash-search-results .search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#dash-search-results .search-results-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background 120ms;
}
#dash-search-results .search-results-list a:hover {
    background: var(--surface-alt);
}
#dash-search-results .search-results-list strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
#dash-search-results .search-results-list small {
    font-size: 11px;
    color: var(--muted);
}
#dash-search-results .search-results-category {
    padding: 6px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}
#dash-search-results .search-no-results {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

#dash-search-results .search-no-results strong,
#dash-search-results .search-no-results span,
#topbar-search-results .search-no-results strong,
#topbar-search-results .search-no-results span {
    display: block;
}

#dash-search-results .search-no-results strong,
#topbar-search-results .search-no-results strong {
    margin-bottom: 4px;
    color: var(--text-strong);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dash-kpis { grid-template-columns: repeat(3, 1fr); }
    .dash-focus-grid { grid-template-columns: 1fr; }
    .dash-queue-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-search-wrap { width: 240px; }
}
@media (max-width: 600px) {
    .dash { padding: 20px 16px 40px; gap: 20px; }
    .dash-header { flex-direction: column; }
    .dash-header-right { width: 100%; }
    .dash-search-wrap { flex: 1; width: auto; }
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-focus-grid { grid-template-columns: 1fr; }
    .dash-queue-grid { grid-template-columns: 1fr; }
    .dash-quick-actions { flex-direction: column; }
}

/* ── Breadcrumb (customer context navigation) ── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0 4px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
}
.breadcrumb a {
    color: var(--accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--border, #cbd5e1); }

/* ── Conditional block (toggle-reveal inside modals) ── */
.conditional-block {
    background: var(--surface-raised, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.customer-contact-table-wrap .data-table {
    min-width: 980px;
}

/* --- Contact role help popover --- */
.contact-role-help-popover-anchor {
    position: relative;
}

.contact-role-help-popover {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 200;
    width: min(460px, 92vw);
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 0;
    margin: 0;
}

.contact-role-help-popover[open] {
    display: block;
}

.contact-role-help-popover-inner {
    padding: 16px 18px;
}

.contact-role-help-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.contact-role-help-popover-header strong {
    font-size: 14px;
    color: var(--text-strong);
}

.contact-role-help-group {
    margin-bottom: 12px;
}

.contact-role-help-group:last-child {
    margin-bottom: 0;
}

.contact-role-help-group > strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.contact-role-help-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.contact-role-help-list div {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px;
    align-items: baseline;
}

.contact-role-help-list dt {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-strong);
}

.contact-role-help-list dd {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.contact-role-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface, #f8fafc);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    padding: 0;
    transition: background .15s, color .15s;
}

.contact-role-help-trigger:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* --- Contact role picker (mini dialog) --- */
.contact-role-picker {
    min-width: 120px;
}

.contact-role-picker-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg, #fff);
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
    min-height: 34px;
}

.contact-role-picker-trigger:hover {
    border-color: var(--accent);
}

.contact-role-picker-trigger--active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg, #fff));
    color: var(--accent-strong);
}

.contact-role-picker-trigger [data-role-picker-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-role-picker-dialog {
    position: fixed;
    z-index: 1100;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg, #fff);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
    padding: 0;
    margin: auto;
    width: min(380px, calc(100vw - 28px));
    max-height: 80vh;
}

.contact-role-picker-dialog::backdrop {
    background: rgba(0, 0, 0, .18);
}

.contact-role-picker-dialog-inner {
    display: flex;
    flex-direction: column;
}

.contact-role-picker-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
}

.contact-role-picker-dialog-header strong {
    font-size: 15px;
    color: var(--text-strong);
}

.contact-role-picker-dialog-body {
    display: grid;
    gap: 8px;
    padding: 14px;
    overflow-y: auto;
    max-height: min(60vh, 520px);
}

.contact-role-picker-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    line-height: 1.4;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface, #fff);
}

.contact-role-picker-item:hover {
    border-color: var(--accent-border);
    background: var(--surface-alt, #f8fafc);
}

.contact-role-picker-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    transform: translateY(1px);
}

.contact-role-picker-item__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.contact-role-picker-item__copy strong {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-strong);
}

.contact-role-picker-item__copy small {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    white-space: normal;
}

.contact-role-picker-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 18px 16px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-alt, #f8fafc) 70%, #fff);
}

.customer-contact-table td,
.customer-contact-table th {
    vertical-align: top;
}

.customer-contact-table input[type="text"],
.customer-contact-table input[type="email"],
.customer-contact-table select {
    width: 100%;
    min-width: 120px;
}

.contact-inline-fields {
    display: grid;
    gap: 8px;
    min-width: 190px;
}


.customer-contact-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-strong);
    white-space: nowrap;
    cursor: pointer;
}

.customer-contact-switch input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.customer-contact-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.customer-contact-summary-card,
.customer-contact-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.customer-contact-summary-card strong {
    font-size: 18px;
    color: var(--text-strong);
}

.customer-contact-summary-card p,
.customer-contact-card p {
    margin: 0;
}

.customer-contact-summary-hint {
    color: var(--text-muted);
    font-size: 12px;
}

.customer-contact-groups {
    display: grid;
    gap: 16px;
}

.customer-contact-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-contact-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.customer-contact-card-head strong {
    color: var(--text-strong);
    font-size: 16px;
}

.customer-contact-card-head p {
    color: var(--text-muted);
    font-size: 13px;
}

.customer-contact-card-meta {
    display: grid;
    gap: 6px;
    font-size: 13px;
}

.inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    color: var(--text-muted);
    font-size: 13px;
}

.notice-bar--soft {
    background: color-mix(in srgb, var(--info-soft) 55%, white);
    border-color: color-mix(in srgb, var(--info) 18%, transparent);
}

/* ===== resources/assets/css/admin/31-payroll.css ===== */
/* Payroll — employee config + response review panels. */
/* --------------------------------------------------------------------------
   47. Payroll employee config + response review + panel polish
   -------------------------------------------------------------------------- */
.payroll-employee-config {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #fcfdff 0%, #f7fbff 100%);
}

.payroll-employee-config-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.payroll-employee-list,
.payroll-employee-summary-grid,
.payroll-response-list {
    display: grid;
    gap: 12px;
}

.payroll-employee-row,
.payroll-employee-summary-card,
.payroll-response-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.payroll-employee-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
}

.payroll-employee-row label {
    min-width: 0;
}

.payroll-employee-row .icon-button {
    align-self: center;
}

.payroll-employee-panel,
.payroll-response-shell {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(245, 249, 254, 0.92));
}

.payroll-employee-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.payroll-employee-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.payroll-employee-summary-card strong {
    color: var(--text-strong);
}

.payroll-response-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.payroll-response-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.payroll-response-head strong {
    display: block;
    color: var(--text-strong);
    font-size: 16px;
    margin-bottom: 4px;
}

.payroll-response-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.payroll-response-meta-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.92);
}

.payroll-response-meta-grid span {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.payroll-response-meta-grid strong {
    color: var(--text-strong);
}


.is-focused-request {
    outline: 0;
    position: relative;
    background: linear-gradient(180deg, rgba(239,246,255,0.88), rgba(219,234,254,0.72)) !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22), 0 14px 30px rgba(37, 99, 235, 0.10);
}

.is-focused-request .mobile-record-title,
.is-focused-request strong,
.is-focused-request .cell-primary strong {
    color: #0f3e75;
}

.is-focused-request-live {
    animation: request-focus-pulse 2.4s ease-out 1;
}

@keyframes request-focus-pulse {
    0% { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), 0 0 0 0 rgba(59, 130, 246, 0.24); }
    45% { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.28), 0 0 0 14px rgba(59, 130, 246, 0); }
    100% { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22), 0 14px 30px rgba(37, 99, 235, 0.10); }
}

.internal-chat-panel,
.drawer-shell,
.workspace-rail,
.task-context-panel {
    box-shadow: -28px 0 64px rgba(15, 23, 42, 0.18);
}

.internal-chat-panel,
.drawer-shell {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.internal-chat-header,
.drawer-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,253,0.95));
    backdrop-filter: blur(8px);
}

.internal-chat-summary {
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7fd 100%);
}

.chat-box--drawer .chat-stream,
.drawer-sidebar,
.drawer-preview {
    background: linear-gradient(180deg, rgba(248,251,255,0.84), rgba(255,255,255,0.98));
}

.document-file-item {
    padding: 10px 12px;
    border: 1px solid transparent;
}

.document-file-item:hover {
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.document-file-item.is-active {
    border-color: rgba(37, 99, 235, 0.18);
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.10);
}

.document-preview-frame {
    background: #fff;
}


.internal-chat-panel,
.drawer-shell {
    border-left: 1px solid rgba(148, 163, 184, 0.18);
}

.internal-chat-header .icon-button,
.drawer-header .icon-button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: #0f172a;
}

.internal-chat-header .icon-button:hover,
.drawer-header .icon-button:hover {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}

.drawer-shell {
    width: min(1180px, 96vw);
    max-width: 100%;
}

.workspace-rail {
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    max-width: 100%;
}

.workspace-rail-card {
    backdrop-filter: blur(8px);
}

.internal-chat-header .icon-button,
.drawer-header .icon-button,
.workspace-rail .rail-collapser {
    box-shadow: none;
}


/* ===== resources/assets/css/admin/80-responsive.css ===== */
/* Responsive overrides — media queries for mobile/tablet breakpoints. */
/* --------------------------------------------------------------------------
   33. Responsive
   -------------------------------------------------------------------------- */

/* Narrow desktop: keep all tabs reachable via horizontal scroll and avoid label clipping */
@media (min-width: 961px) and (max-width: 1280px) {
    .customer-tabs-shell {
        overflow: hidden;
    }

    .customer-tabs-shell::after {
        display: block;
    }

    .customer-tabs {
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 calc(-1 * var(--customer-tab-fade-width)) -1px 0;
        padding: 0 var(--customer-tab-fade-width) 8px 0;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .customer-tabs a {
        flex: 0 0 auto;
        min-width: max-content;
        max-width: 260px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-bottom-color: transparent;
        border-radius: var(--radius-md);
        white-space: nowrap;
    }

    .customer-tabs a.is-active {
        border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
        border-bottom-color: var(--accent);
        background: color-mix(in srgb, var(--accent-soft) 60%, white 40%);
    }

    .customer-tab-label {
        white-space: nowrap;
    }
}

@media (min-width: 961px) and (max-width: 1280px) {
    .edge-rail,
    .customer-edge-rail,
    .workspace-rail {
        position: static;
        top: auto;
        right: auto;
        width: auto;
        max-width: 100%;
        height: auto;
    }

    .edge-rail-page,
    .customer-edge-rail-page,
    .customer-edge-rail-page:not(.rail-is-collapsed) {
        padding-right: 0;
    }

    .edge-rail .rail-inner,
    .customer-edge-rail .rail-inner,
    .workspace-rail .rail-inner {
        height: auto;
        max-height: none;
    }

    .customer-edge-rail .rail-collapser,
    .edge-rail .rail-collapser {
        display: none;
    }
}

/* Desktop: collapsed sidebar */
@media (min-width: 961px) {
    .sidebar-collapsed .app-shell {
        grid-template-columns: 0 minmax(0,1fr);
    }

    .sidebar-collapsed .sidebar {
        transform: translateX(-240px);
        opacity: 0;
        pointer-events: none;
    }

    .shell-overlay { display: none !important; }
}

@media (max-width: 960px) {
    .mobile-only {
        display: block !important;
    }

    .mobile-record-list,
    .mobile-quick-hub {
        display: grid !important;
    }

    .desktop-only {
        display: none !important;
    }

    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas: "topbar" "main";
    }

    .two-up,
    .three-up,
    .four-up,
    .customer-layout,
    .overview-kpis,
    .workspace-page,
    .stat-row,
    .payroll-control-grid,
    .assistant-grid { grid-template-columns: 1fr; }

    .service-selector-toolbar {
        display: grid;
        align-items: stretch;
    }

    .service-selector-toolbar-meta {
        justify-items: start;
    }

    .assistant-compact-item {
        display: grid;
        justify-content: stretch;
    }

    /* Sidebar slides in from left as fixed panel */
    .sidebar {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        width: 240px;
        height: calc(100vh - var(--topbar-h));
        transform: translateX(-100%);
        opacity: 0;
        transition: transform 200ms ease, opacity 200ms ease;
        z-index: 30;
    }

    /* Shown when body is sidebar-expanded */
    .sidebar-expanded .sidebar {
        transform: translateX(0);
        opacity: 1;
    }

    .main { padding: 12px 12px 24px; }

    .main,
    .workspace-page,
    .workspace-main {
        overflow-x: clip;
    }

    .panel-header, .workspace-header,
    .workspace-kicker { flex-direction: column; align-items: stretch; }
    .task-entry-strip { flex-direction: column; }
    .task-entry-actions { justify-content: flex-start; }
    .topbar,
    .app-topbar {
        height: auto;
        min-height: var(--topbar-h);
        padding: 10px 16px;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .topbar-start {
        width: 100%;
        gap: 10px;
        align-items: flex-start;
    }
    .topbar-context {
        flex: 1;
        min-width: 0;
    }
    .topbar-title-row {
        flex-wrap: wrap;
        row-gap: 6px;
        white-space: normal;
        font-size: 12px;
    }
    .topbar-title-row strong {
        font-size: 13px;
    }
    .topbar-actions {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
    }
    .topbar-title-row .topbar-divider:first-of-type,
    .topbar-group-label {
        display: none;
    }
    .topbar-center {
        order: 3;
        width: 100%;
        max-width: none;
        margin: 4px 0 0;
    }
    .topbar-search {
        width: 100%;
    }
    .topbar-search-trigger {
        display: inline-flex;
    }
    .compliance-choice-grid { grid-template-columns: 1fr; }
    .payroll-control-actions { flex-direction: column; align-items: stretch; }

    .workspace-rail { position: static; height: auto; }
    .edge-rail,
    .customer-edge-rail { position: static; right: auto; width: auto; height: auto; }
    .edge-rail-page,
    .customer-edge-rail-page,
    .customer-edge-rail-page:not(.rail-is-collapsed) { padding-right: 0; }
    .notice-bar { flex-direction: column; align-items: stretch; }

    .form-columns,
    .table-filter-bar,
    .smart-toolbar,
    .customer-portfolio-grid,
    .planner-filter-bar,
    .settings-email-test-row,
    .modal-grid.two-columns,
    .check-grid { grid-template-columns: 1fr; }

    .workspace-actions,
    .inline-actions {
        width: 100%;
    }

    .queue-lifecycle-strip {
        display: grid;
        gap: 14px;
    }

    .queue-lifecycle-steps {
        justify-content: flex-start;
        flex: none;
    }

    .secure-send-summary__meta {
        grid-template-columns: 1fr;
    }

    .workspace-actions .button,
    .inline-actions .button,
    .mobile-record-actions .button {
        flex: 1 1 140px;
        justify-content: center;
    }

    .stack-actions {
        justify-items: stretch;
    }

    .customer-tabs-shell {
        margin-bottom: 20px;
        overflow: hidden;
    }

    .customer-tabs-shell::after {
        display: block;
        height: 56px;
    }

    .customer-tabs {
        gap: 8px;
        padding: 0 var(--customer-tab-fade-width) 8px 0;
        margin: 0 calc(-1 * var(--customer-tab-fade-width)) 0 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .customer-tabs a {
        flex: 0 0 auto;
        min-width: max-content;
        max-width: 84vw;
        padding: 10px 13px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
        border-bottom-color: var(--border);
        box-shadow: var(--shadow-xs);
        white-space: nowrap;
    }

    .customer-tabs a.is-active {
        border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
        background: color-mix(in srgb, var(--accent-soft) 74%, white 26%);
    }

    .customer-tab-label {
        white-space: nowrap;
    }

    .sub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        margin: 0 -2px 14px;
        scrollbar-width: none;
    }

    .sub-tabs::-webkit-scrollbar {
        display: none;
    }

    .sub-tab {
        flex: 0 0 auto;
        min-height: 42px;
        min-width: 158px;
        padding: 0 16px;
    }

    .customer-360-focus-card {
        display: grid;
    }

    .customer-360-focus-actions {
        width: 100%;
    }

    .customer-360-focus-actions .button {
        width: 100%;
        justify-content: center;
    }

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

    .customer-360-warning-pill {
        display: grid;
        gap: 6px;
    }

    .customer-360-warning-pill strong {
        flex: none;
    }

    .customer-360-flow-strip {
        display: grid;
        align-items: start;
    }

    .table-filter-meta,
    .smart-toolbar-meta { justify-content: flex-start; }
    .planner-list-meta { flex-direction: column; align-items: flex-start; }

    /* Customer page — stack identity card actions below info */
    .customer-id-card-body { flex-direction: column; }
    .customer-id-actions { flex-wrap: wrap; }

    /* Customer info DL — single column on narrow screens */
    .customer-info-dl { grid-template-columns: 1fr; }
    .customer-info-row dt { border-right: none; border-bottom: none; }
    .customer-info-row dd { border-bottom: 1px solid var(--border); padding-top: 0; }
    .customer-info-row:last-child dd { border-bottom: none; }

    /* Service scope cards — single column */
    .service-scope-grid { grid-template-columns: 1fr; }

    /* Rail toggle — not needed on mobile (grid is already 1 column) */
    .rail-collapser { display: none; }
    .workspace-rail.rail-is-collapsed .rail-inner { display: grid; }
    .workspace-page.rail-is-collapsed { grid-template-columns: 1fr; }

    /* Drawer — full width on mobile */
    dialog[data-drawer="right"] { width: 100vw !important; }
    .drawer-sidebar { width: 200px; }

    .notif-panel {
        position: fixed;
        top: calc(var(--topbar-h) + 8px);
        right: 12px;
        left: 12px;
        width: auto;
        min-height: 0;
        max-height: calc(100vh - var(--topbar-h) - 20px);
        border-radius: 18px;
    }

    dialog[data-modal] {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        max-height: calc(100svh - 12px);
        border-radius: 18px 18px 0 0;
        margin: auto 0 0;
    }

    .modal-panel {
        max-height: calc(100svh - 12px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .modal-header {
        padding: 18px 16px 14px;
    }

    .modal-panel > form.modal-grid,
    .modal-panel > .modal-grid,
    .modal-body,
    dialog[data-modal] > .modal-body {
        padding: 14px 16px 18px;
        overflow-y: auto;
    }

    .modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        padding-top: 10px;
    }

    .modal-actions .button {
        width: 100%;
        justify-content: center;
    }

    .request-update-summary {
        padding: 16px;
    }

    .request-update-summary__title {
        font-size: 20px;
    }

    .request-update-summary__meta {
        grid-template-columns: 1fr;
    }

    .onboarding-step-summary__grid,
    .onboarding-step-modal-grid__request {
        grid-template-columns: 1fr;
    }

    .onboarding-step-summary__hero strong {
        font-size: 20px;
    }

    .onboarding-step-modal-grid__request-actions,
    .onboarding-step-modal-grid__send {
        align-items: stretch;
    }

    .onboarding-step-modal-grid__request-actions .button,
    .onboarding-step-modal-grid__send .button {
        width: 100%;
        justify-content: center;
    }

    .request-update-assist {
        align-items: stretch;
    }

    .request-update-assist__copy {
        max-width: none;
    }

    .dash-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .topbar-search-results {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
    }

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

    .customer-work-summary-grid,
    .customer-domain-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-contact-summary-grid,
    .customer-contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .topbar,
    .app-topbar {
        gap: 10px;
    }

    .topbar-title-row {
        gap: 6px;
    }

    .topbar-actions {
        gap: 6px;
        width: 100%;
        margin-left: 0;
    }

    .topbar-center {
        display: block;
    }
    .topbar-start { flex: 1; }
    .topbar-date { display: none; }
    .topbar-search-trigger {
        display: none;
    }

    .mobile-summary-grid {
        grid-template-columns: 1fr;
    }

    .customer-overview-groups {
        grid-template-columns: 1fr;
    }

    .customer-work-summary-grid,
    .customer-domain-summary-grid {
        grid-template-columns: 1fr;
    }

    .customer-360-signal-grid {
        grid-template-columns: 1fr;
    }

    .customer-360-compliance-stats {
        grid-template-columns: 1fr;
    }

    .customer-contact-summary-grid,
    .customer-contact-cards {
        grid-template-columns: 1fr;
    }

    .date-control {
        grid-template-columns: 1fr auto;
    }

    .payroll-control-shell,
    .workspace-panel {
        padding-left: 16px;
        padding-right: 16px;
    }

    .smart-toolbar-group,
    .smart-toolbar-group--grow {
        min-width: 0;
    }

    .mobile-record-card {
        padding: 14px;
    }

    .mobile-record-actions {
        flex-direction: column;
    }

    .mobile-record-actions .button,
    .workspace-actions .button,
    .inline-actions .button,
    .payroll-control-actions .button {
        width: 100%;
        flex-basis: 100%;
    }

    .topbar-center,
    .topbar-search {
        width: 100%;
        min-width: 0;
    }

}

@media (min-width: 1400px) {
    .overview-kpis { grid-template-columns: repeat(6, minmax(0,1fr)); }
}

@media (min-width: 1100px) and (max-width: 1399px) {
    .overview-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .customer-tabs a { padding: 10px 11px; }
}

/* ===== resources/assets/css/admin/90-polish.css ===== */
.workspace-panel,
.workspace-card,
.workspace-rail-card,
.notif-panel,
.vivi-panel,
.smart-table-wrap,
.customer-card,
.info-card,
.file-card,
.settings-block,
.service-scope-section,
.customer-service-panel,
.content-card,
.review-card,
.document-panel,
dialog[data-modal] {
    border-radius: var(--radius-lg);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.workspace-panel,
.workspace-card,
.service-scope-section,
.notif-panel,
.vivi-panel,
.document-panel,
.review-card,
.settings-block {
    background: #ffffff;
}

.workspace-header,
.modal-header,
.drawer-header,
.internal-chat-header,
.notif-panel-header,
.vivi-panel-header,
.modal-footer,
.modal-actions {
    border-color: var(--border);
}

.workspace-header,
.modal-header,
.drawer-header,
.internal-chat-header,
.notif-panel-header,
.vivi-panel-header {
    gap: 12px;
    background: var(--surface);
}

.button,
.button-primary {
    min-height: 36px;
    border-radius: var(--radius-md);
    background: var(--action-primary);
    border-color: var(--action-primary-hover);
    box-shadow: none;
}

.button:hover,
.button-primary:hover {
    background: var(--action-primary-hover);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12);
}

.button-secondary,
.button-ghost,
.assistant-link {
    min-height: 36px;
    border-radius: var(--radius-md);
    background: var(--action-neutral-bg);
    border: 1px solid var(--action-neutral-border);
    color: var(--action-neutral-text);
    box-shadow: none;
}

.button-secondary:hover,
.button-ghost:hover,
.assistant-link:hover {
    background: var(--action-neutral-hover);
    border-color: #94a3b8;
    color: var(--text-strong);
    box-shadow: none;
}

.button-success,
.form-actions .button:not(.button-secondary):not(.button-danger):not(.button-warning):not(.button-ghost),
.modal-actions .button:not(.button-secondary):not(.button-danger):not(.button-warning):not(.button-ghost),
.modal-footer .button:not(.button-secondary):not(.button-danger):not(.button-warning):not(.button-ghost) {
    background: var(--action-save);
    border-color: var(--action-save-hover);
    color: #ffffff;
    box-shadow: none;
}

.button-success:hover,
.form-actions .button:not(.button-secondary):not(.button-danger):not(.button-warning):not(.button-ghost):hover,
.modal-actions .button:not(.button-secondary):not(.button-danger):not(.button-warning):not(.button-ghost):hover,
.modal-footer .button:not(.button-secondary):not(.button-danger):not(.button-warning):not(.button-ghost):hover {
    background: var(--action-save-hover);
    box-shadow: 0 1px 3px rgba(15, 118, 110, 0.12);
}

.button-warning {
    background: var(--action-warning);
    border-color: #92400e;
    box-shadow: none;
}

.button-danger {
    background: var(--action-danger);
    border-color: var(--action-danger-hover);
    box-shadow: none;
}

.button-danger:hover {
    background: var(--action-danger-hover);
    box-shadow: 0 1px 3px rgba(180, 35, 24, 0.12);
}

.user-pill,
.status-chip,
.service-chip,
.customer-tag,
.service-summary-action,
.service-config-trigger {
    border-radius: var(--radius-md);
}

.badge {
    border-color: var(--border);
    background: var(--surface-alt);
    color: var(--muted-strong);
}

.badge--success,
.badge--ok,
.badge-adjusted {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--success);
}

.badge--info,
.badge--neutral,
.badge-overridden,
.badge-shifted {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: var(--info);
}

.badge--warning,
.badge--warning-soft {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--warning);
}

.badge--danger,
.badge--alert {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

.icon-button,
.shell-toggle,
.modal-close,
.rail-collapser,
.internal-chat-header .icon-button,
.drawer-header .icon-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--muted-strong);
    box-shadow: none;
    font-size: 18px;
    line-height: 1;
    touch-action: manipulation;
}

.icon-button:hover,
.shell-toggle:hover,
.modal-close:hover,
.rail-collapser:hover,
.internal-chat-header .icon-button:hover,
.drawer-header .icon-button:hover {
    background: var(--action-primary-soft);
    border-color: rgba(37, 99, 235, 0.28);
    color: var(--action-primary-hover);
    box-shadow: none;
}

.modal-close,
.internal-chat-header [data-chat-close],
.notif-panel [data-notif-close],
.vivi-panel [data-vivi-close] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    min-width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.badge {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 650;
    white-space: nowrap;
    cursor: default;
}

.button {
    flex: 0 1 auto;
    max-width: 100%;
}

dialog[data-modal] {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.modal-header,
.drawer-header,
.internal-chat-header,
.notif-panel-header,
.vivi-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-actions,
.modal-footer {
    flex-wrap: wrap;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, #f8fafc 100%);
}

.notif-panel,
.vivi-panel {
    overflow: hidden;
}

.notif-panel-header,
.vivi-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.notif-markall-btn {
    min-height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--muted-strong);
    font-weight: 700;
}

.notif-markall-btn:hover {
    background: var(--surface-alt);
    color: var(--text-strong);
}

.vivi-panel-title-wrap,
.notif-panel-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.vivi-panel-meta,
.notif-panel-meta {
    min-width: 0;
}

.notif-item,
.vivi-item,
.smart-row,
.customer-mode-card,
.service-taxonomy-card,
.service-summary-item,
.service-quick-config-table,
.service-picker-panel {
    border-radius: var(--radius-lg);
}

.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select,
.form-grid textarea,
.smart-toolbar input:not([type="checkbox"]):not([type="radio"]),
.smart-toolbar select,
.table-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.table-filter-bar select,
.planner-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.planner-filter-bar select,
.modal-grid input:not([type="checkbox"]):not([type="radio"]),
.modal-grid select,
.modal-grid textarea,
.settings-form input:not([type="checkbox"]):not([type="radio"]),
.settings-form select,
.settings-form textarea,
.date-control input:not([type="checkbox"]):not([type="radio"]),
.service-quick-config-table select,
.service-quick-config-table input:not([type="checkbox"]):not([type="radio"]) {
    border-radius: var(--radius-md);
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: none;
}

.form-grid input:not([type="checkbox"]):not([type="radio"]):hover,
.form-grid select:hover,
.form-grid textarea:hover,
.smart-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.smart-toolbar select:hover,
.table-filter-bar input:not([type="checkbox"]):not([type="radio"]):hover,
.table-filter-bar select:hover,
.planner-filter-bar input:not([type="checkbox"]):not([type="radio"]):hover,
.planner-filter-bar select:hover,
.modal-grid input:not([type="checkbox"]):not([type="radio"]):hover,
.modal-grid select:hover,
.modal-grid textarea:hover,
.settings-form input:not([type="checkbox"]):not([type="radio"]):hover,
.settings-form select:hover,
.settings-form textarea:hover,
.date-control input:not([type="checkbox"]):not([type="radio"]):hover,
.service-quick-config-table select:hover,
.service-quick-config-table input:not([type="checkbox"]):not([type="radio"]):hover {
    border-color: var(--border-strong);
}

.smart-toolbar,
.table-filter-bar,
.planner-filter-bar {
    gap: 10px;
}

.workspace-panel,
.workspace-card,
.service-scope-section {
    padding: 14px 16px;
}

.workspace-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.chat-launch-btn--icon {
    border-radius: var(--radius-lg);
}

.customer-360-panel {
    display: grid;
    gap: 14px;
}

.customer-360-focus-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.customer-360-focus-card--danger {
    border-color: var(--danger-border);
    background: linear-gradient(180deg, #ffffff 0%, var(--danger-soft) 100%);
}

.customer-360-focus-card--warning {
    border-color: var(--warning-border);
    background: linear-gradient(180deg, #ffffff 0%, var(--warning-soft) 100%);
}

.customer-360-focus-card--info {
    border-color: var(--info-border);
    background: linear-gradient(180deg, #ffffff 0%, var(--info-soft) 100%);
}

.customer-360-focus-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.customer-360-focus-copy p {
    color: var(--muted-strong);
    font-size: 13px;
    line-height: 1.45;
}

.customer-360-focus-actions {
    flex: 0 0 auto;
}

.customer-360-signal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.customer-360-signal-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.customer-360-signal-card strong {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.15;
    color: var(--text-strong);
}

.customer-360-signal-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted-strong);
}

.customer-360-signal-card--warning {
    border-color: var(--warning-border);
    background: linear-gradient(180deg, #ffffff 0%, var(--warning-soft) 100%);
}

.customer-360-signal-card--danger {
    border-color: var(--danger-border);
    background: linear-gradient(180deg, #ffffff 0%, var(--danger-soft) 100%);
}

.customer-360-warning-list {
    display: grid;
    gap: 10px;
}

.customer-360-secondary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.customer-360-secondary-card {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-alt) 48%, #fff);
}

.customer-360-secondary-card strong {
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-strong);
}

.customer-360-secondary-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.customer-360-flow-strip {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.customer-360-flow-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.customer-360-flow-copy strong {
    font-size: 14px;
    color: var(--text-strong);
}

.customer-360-flow-copy p {
    font-size: 13px;
    color: var(--muted);
}

.customer-360-compliance-strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.customer-360-compliance-strip--warning {
    border-color: var(--warning-border);
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 100%);
}

.customer-360-compliance-strip--danger {
    border-color: var(--danger-border);
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.customer-360-compliance-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}

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

.customer-360-compliance-title-row strong {
    font-size: 15px;
    line-height: 1.3;
    color: var(--text-strong);
}

.customer-360-compliance-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-strong);
}

.customer-360-compliance-stats {
    flex: 0 0 auto;
    min-width: 290px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.customer-360-compliance-stat {
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #ffffff;
}

.customer-360-compliance-stat span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.customer-360-compliance-stat strong {
    display: block;
    margin-top: 6px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-strong);
}

.customer-360-compliance-stats .button {
    grid-column: 1 / -1;
    justify-content: center;
}

.customer-360-evidence-strip {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    display: grid;
    gap: 12px;
}

.customer-360-evidence-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.customer-360-evidence-head > div {
    display: grid;
    gap: 4px;
}

.customer-360-evidence-head strong {
    font-size: 14px;
    color: var(--text-strong);
}

.customer-360-evidence-list {
    display: grid;
    gap: 10px;
}

.customer-360-evidence-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.customer-360-evidence-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.customer-360-evidence-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.customer-360-evidence-topline strong {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.customer-360-evidence-copy p,
.customer-360-evidence-copy small {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted-strong);
}

.customer-360-evidence-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.customer-360-warning-pill {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}

.customer-360-warning-pill strong {
    flex: 0 0 220px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-strong);
}

.customer-360-warning-pill span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted-strong);
}

.customer-360-warning-pill--danger {
    border-color: var(--danger-border);
    background: var(--danger-soft);
}

.customer-360-warning-pill--warning {
    border-color: var(--warning-border);
    background: var(--warning-soft);
}

.customer-360-warning-pill--info {
    border-color: var(--info-border);
    background: var(--info-soft);
}

.customer-360-recent-strip {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-alt) 50%, #fff);
}

.customer-360-recent-item {
    min-width: 0;
    flex: 1 1 0;
    display: grid;
    gap: 4px;
}

.customer-360-recent-item strong {
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-strong);
}

.customer-360-recent-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.customer-360-recent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.customer-secondary-details {
    display: grid;
    gap: 16px;
}

.customer-secondary-details-summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
}

.customer-secondary-details-summary::-webkit-details-marker {
    display: none;
}

.customer-secondary-details-summary h3 {
    margin-bottom: 4px;
}

.customer-secondary-details-meta {
    flex: 0 0 auto;
    align-self: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.service-scope-section--secondary {
    background: color-mix(in srgb, var(--surface-alt) 40%, #fff);
    border-color: color-mix(in srgb, var(--border) 86%, white);
}

.service-scope-section--secondary .workspace-header h3 {
    font-size: 1.1rem;
}

.service-scope-section--secondary .service-taxonomy-card,
.service-scope-section--secondary .customer-mode-card {
    background: #fff;
}

@media (max-width: 900px) {
    .customer-360-signal-grid,
    .customer-360-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-360-recent-strip {
        display: grid;
    }

    .customer-360-compliance-strip {
        display: grid;
    }

    .customer-360-compliance-stats {
        min-width: 0;
        width: 100%;
    }

    .customer-360-evidence-head,
    .customer-360-evidence-item {
        display: grid;
    }

    .customer-360-evidence-actions {
        justify-content: flex-start;
    }

    .payroll-response-meta-grid {
        grid-template-columns: 1fr;
    }

    .payroll-employee-row {
        grid-template-columns: 1fr;
    }

    .payroll-employee-summary-card,
    .payroll-response-head,
    .payroll-employee-config-head {
        align-items: stretch;
    }
}

.group-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 10px;
}

.workspace-panel--list .group-filter-bar {
    margin: 12px 0 10px;
}

.group-filter-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 120px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: none;
    color: var(--text-strong);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.3;
}

.group-filter-btn__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.group-filter-btn:hover {
    background: var(--surface-alt);
    border-color: var(--border-strong);
}

.group-filter-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
    outline-offset: 2px;
}

.group-filter-btn[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
    font-weight: 600;
    box-shadow: none;
}

.group-filter-btn .group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--muted-strong);
    line-height: 1;
}

.group-filter-btn[aria-pressed="true"] .group-count {
    background: var(--accent);
    color: #fff;
}

.group-filter-btn--open[aria-pressed="true"] {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: var(--info);
}
.group-filter-btn--open[aria-pressed="true"] .group-count {
    background: var(--info);
    border-color: var(--info);
}

.group-filter-btn--waiting[aria-pressed="true"] {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--warning);
}
.group-filter-btn--waiting[aria-pressed="true"] .group-count {
    background: var(--warning);
    border-color: var(--warning);
}

.group-filter-btn--done[aria-pressed="true"] {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--success);
}
.group-filter-btn--done[aria-pressed="true"] .group-count {
    background: var(--success);
    border-color: var(--success);
}

.group-filter-btn--archived[aria-pressed="true"] {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--muted-strong);
}
.group-filter-btn--archived[aria-pressed="true"] .group-count {
    background: var(--muted-strong);
}

/* Grouped list section headers */
.group-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-strong);
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    cursor: pointer;
    user-select: none;
}

.group-section-header .group-section-count {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
}

.group-section-header .group-section-chevron {
    margin-left: auto;
    transition: transform 0.2s;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.group-section-header[aria-expanded="false"] .group-section-chevron {
    transform: rotate(-90deg);
}

.group-section[data-collapsed="true"] .group-section-body {
    display: none;
}

.group-section-empty {
    padding: 20px 16px;
    font-size: 0.86rem;
    color: var(--muted);
    font-style: italic;
    text-align: center;
}

/* Group summary strip */
.group-summary-strip {
    display: flex;
    gap: 0;
    margin: 12px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.workspace-panel--list .group-summary-strip,
.workspace-panel--list .stat-row {
    margin: 10px 0;
    border-radius: 16px;
    background: #fff;
}

.workspace-panel--list .group-summary-cell,
.workspace-panel--list .stat-row .stat-card {
    padding: 12px 14px;
}

.workspace-panel--list .group-summary-cell--open,
.workspace-panel--list .group-summary-cell--waiting,
.workspace-panel--list .group-summary-cell--done,
.workspace-panel--list .group-summary-cell--archived {
    background: #fff;
}

.workspace-panel--list .group-summary-cell span,
.workspace-panel--list .stat-card span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.workspace-panel--list .smart-toolbar {
    margin-bottom: 12px;
    padding: 10px 0 12px;
}

.workspace-panel--list .smart-table-wrap {
    border-radius: 16px;
    box-shadow: none;
}

.workspace-panel--list .data-table th,
.workspace-panel--list .smart-table thead th {
    background: #f8fafc;
    color: var(--muted-strong);
}

.group-summary-cell {
    flex: 1 1 0;
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.group-summary-cell:last-child {
    border-right: none;
}

.group-summary-cell strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-strong);
}

.group-summary-cell span {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.group-summary-cell--open strong    { color: var(--info); }
.group-summary-cell--open           { background: var(--info-soft); }
.group-summary-cell--waiting strong  { color: var(--warning); }
.group-summary-cell--waiting         { background: var(--warning-soft); }
.group-summary-cell--done strong     { color: var(--success); }
.group-summary-cell--done            { background: var(--success-soft); }
.group-summary-cell--archived strong { color: var(--muted-strong); }
.group-summary-cell--archived        { background: var(--surface-alt); }

@media (max-width: 640px) {
    .group-filter-bar {
        gap: 8px;
    }
    .group-filter-btn {
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
        padding: 10px 12px;
    }
    .group-summary-strip {
        flex-direction: column;
    }
    .group-summary-cell {
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 16px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .group-summary-cell:last-child {
        border-bottom: none;
    }
}

/* ===== resources/assets/css/admin/95-compose.css ===== */
/* TinyMCE UI fixes + compact compose layout (secure send, internal send). */
/* ------------ TinyMCE UI Fixes ------------ */
.tox-tinymce-aux {
    z-index: 1250 !important; /* Ensure it's above the 1000 z-index panel */
}

/* ------------ Compact Compose Layout ------------ */
.compose-field--horizontal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compose-field--horizontal .compose-label {
    margin-bottom: 0;
    min-width: 65px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
}

.compose-recipient-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.compose-input-group {
    display: flex;
    flex: 1;
    gap: 4px;
}

.compose-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
}

.compose-add-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.compose-recipient-remove {
    width: 32px;
    height: 32px;
    color: var(--muted);
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compose-recipient-remove:hover {
    color: var(--danger);
}

.compose-editor-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 520px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.tox.tox-tinymce {
    flex: 1;
    border: none !important;
}



/* ------------ Communications: Compose Panel Modernized ------------ */
.compose-panel {
    z-index: 1500;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
}

.compose-panel[hidden] {
    display: none !important;
}

.compose-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
}

.compose-aside {
    position: relative;
    width: 760px !important;
    height: 100%;
    margin: 0 !important;
    background: #ffffff;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: compose-slide-in 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes compose-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.compose-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}

.compose-form {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f8fafc;
}

.compose-section {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.compose-section--grow {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.compose-field--horizontal {
    display: flex;
    align-items: center;
    gap: 16px;
}

.compose-field--horizontal .compose-label {
    margin: 0 !important;
    min-width: 80px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-strong);
    text-align: right;
}

.compose-recipient-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    align-items: center; /* Ensures everything is center-aligned */
}

.compose-input-group {
    display: flex;
    flex: 1;
    gap: 6px;
    align-items: center;
}

.compose-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.compose-recipient-remove {
    width: 32px;
    height: 32px;
    color: var(--muted);
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.compose-editor-wrap {
    flex: 1;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.tox.tox-tinymce {
    flex: 1 !important;
    height: 100% !important;
}

.compose-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* TinyMCE Modal Fix */
.tox-tinymce-aux {
    z-index: 2000 !important;
}

/* ------------ Essential Compose Styles (Restored) ------------ */
.compose-input, .compose-select {
    width: 100%;
    height: 40px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink);
    transition: all 0.2s;
    outline: none;
}

.compose-input:focus, .compose-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.compose-input--subject {
    font-weight: 600;
    font-size: 15px;
    border: none;
    box-shadow: none !important;
    background: transparent;
    padding: 0;
}

.compose-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-strong);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.compose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.compose-btn--primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}

.compose-btn--secondary {
    background: #f1f5f9;
    color: var(--ink);
    border: 1px solid var(--border);
}

.compose-subtitle {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.compose-section-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.compose-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    text-transform: uppercase;
}

/* ------------ Communications: Compose Panel Modernized (v4) ------------ */
.compose-panel {
    z-index: 1500;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
}

.compose-panel[hidden] {
    display: none !important;
}

.compose-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
}

.compose-aside {
    position: relative;
    width: 760px !important;
    height: 100%;
    margin: 0 !important;
    background: #ffffff;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: compose-slide-in 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes compose-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.compose-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.compose-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-strong);
}

.compose-form {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
}

.compose-section {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.compose-section--grow {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.compose-field--horizontal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 42px;
}

.compose-field--horizontal .compose-label {
    min-width: 60px;
    margin: 0 !important;
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.compose-input, .compose-select {
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    outline: none !important;
    transition: all 0.2s;
}

.compose-input:focus, .compose-select:focus {
    border-color: var(--accent);
}

.compose-input--subject {
    flex: 1;
    border: none !important;
    font-weight: 600;
    font-size: 15px;
    padding-left: 0;
}

.compose-recipient-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.compose-input-group {
    display: flex;
    flex: 1;
    gap: 4px;
    align-items: center;
}

.compose-add-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}

.compose-editor-wrap {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
}

.tox.tox-tinymce {
    height: 100% !important;
    border: none !important;
}

.compose-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: #fff;
    display: flex;
    justify-content: space-between;
}

.tox-tinymce-aux {
    z-index: 2000 !important;
}

.compose-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

/* ===== resources/assets/css/admin/98-visual-refresh.css ===== */
/* Visual refresh — calmer desktop rhythm for lists, settings and work queues. */

:root {
    --bg: #f5f7fb;
    --surface-alt: #f7f9fc;
    --surface-raised: #ffffff;
    --border: #dbe4ee;
    --border-strong: #bfccda;
    --text: #1f2a3a;
    --text-strong: #111827;
    --muted: #66758a;
    --muted-strong: #47566a;
    --accent: #2563d8;
    --accent-dark: #1f4fb6;
    --accent-soft: #eff5ff;
    --sidebar-bg: #101827;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 8px 22px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .03);
}

body {
    background:
        linear-gradient(180deg, #f8fafc 0, var(--bg) 240px),
        var(--bg);
}

.main {
    padding: 26px 32px 48px;
}

.topbar,
.app-topbar {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: #d7e1ec;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.topbar-search {
    height: 38px;
    border-color: #d6e0eb;
    background: #f3f7fb;
}

.topbar-search-trigger {
    border-color: #d6e0eb;
    font-weight: 700;
}

.sidebar {
    background: linear-gradient(180deg, #101827 0%, #0f1726 100%);
    border-right-color: rgba(255, 255, 255, .08);
}

.brand {
    padding-bottom: 14px;
    border-bottom-color: rgba(255, 255, 255, .1);
}

.nav {
    gap: 10px;
}

.nav-section-links {
    gap: 3px;
}

.nav a,
.nav-placeholder {
    min-height: 32px;
    color: rgba(203, 213, 225, .8);
}

.nav a:hover {
    background: rgba(255, 255, 255, .08);
}

.nav a.is-active {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .16);
}

.workspace-page,
.workspace-page--settings {
    width: 100%;
    max-width: 1720px;
    margin-inline: auto;
}

.workspace-page--settings {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-main {
    gap: 18px;
}

.workspace-panel,
.panel,
.workspace-card,
.settings-block,
.document-panel,
.review-card {
    border-color: #d8e2ed;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 10px 30px rgba(15, 23, 42, .025);
}

.workspace-panel,
.panel {
    padding: 20px 22px;
}

.workspace-header,
.panel-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom-color: #dbe4ee;
}

.workspace-panel--list .workspace-header h2 {
    letter-spacing: 0;
}

.workspace-header h2,
.panel-header h2 {
    font-size: 20px;
    line-height: 1.22;
}

.eyebrow {
    margin-bottom: 7px;
    color: #1f5fcf;
    letter-spacing: .13em;
}

.section-intro {
    color: #5f7188;
    font-size: 13px;
}

.button,
.button-primary,
.button-secondary,
.button-ghost {
    min-height: 38px;
    border-radius: 8px;
    padding-inline: 15px;
    font-weight: 700;
}

.button,
.button-primary {
    background: #2563d8;
    border-color: #1f4fb6;
    box-shadow: 0 1px 2px rgba(37, 99, 216, .12);
}

.button:hover,
.button-primary:hover {
    background: #1f4fb6;
    box-shadow: 0 3px 8px rgba(37, 99, 216, .14);
}

.button-secondary,
.button-ghost,
.assistant-link {
    border-color: #c9d5e2;
    background: #ffffff;
    color: #172033;
}

.button-secondary:hover,
.button-ghost:hover,
.assistant-link:hover {
    background: #f7f9fc;
    border-color: #aebdcb;
}

.icon-button,
.shell-toggle,
.modal-close,
.rail-collapser {
    border-color: #d0dbe7;
}

.smart-toolbar,
.table-filter-bar,
.planner-filter-bar {
    margin: 14px 0 12px;
    padding: 12px;
    border: 1px solid #dce6f0;
    border-radius: 10px;
    background: #f8fafc;
}

.smart-toolbar + .smart-table-wrap,
.table-filter-bar + .smart-table-wrap,
.planner-filter-bar + .smart-table-wrap {
    margin-top: 0;
}

.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select,
.form-grid textarea,
.smart-toolbar input:not([type="checkbox"]):not([type="radio"]),
.smart-toolbar select,
.table-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.table-filter-bar select,
.planner-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.planner-filter-bar select,
.settings-form input:not([type="checkbox"]):not([type="radio"]),
.settings-form select,
.settings-form textarea,
.compact-table input:not([type="checkbox"]):not([type="radio"]),
.compact-table select,
.inline-input,
.inline-input--amount {
    min-height: 40px;
    border-color: #cfd9e6;
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    box-shadow: none;
}

.form-grid input:not([type="checkbox"]):not([type="radio"]):focus,
.form-grid select:focus,
.form-grid textarea:focus,
.smart-toolbar input:not([type="checkbox"]):not([type="radio"]):focus,
.smart-toolbar select:focus,
.table-filter-bar input:not([type="checkbox"]):not([type="radio"]):focus,
.table-filter-bar select:focus,
.planner-filter-bar input:not([type="checkbox"]):not([type="radio"]):focus,
.planner-filter-bar select:focus,
.settings-form input:not([type="checkbox"]):not([type="radio"]):focus,
.settings-form select:focus,
.settings-form textarea:focus,
.compact-table input:not([type="checkbox"]):not([type="radio"]):focus,
.compact-table select:focus,
.inline-input:focus,
.inline-input--amount:focus {
    border-color: #7ea5df !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 216, .11);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    transition: background-color 9999s ease-in-out 0s;
}

.stat-row {
    margin: 14px 0 16px;
    border-color: #d8e2ed;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.stat-row .stat-card {
    min-height: 66px;
    padding: 13px 18px;
}

.stat-card,
.overview-kpi {
    border-color: #d8e2ed;
    border-radius: 9px;
    background: #ffffff;
}

.stat-card strong,
.overview-kpi strong {
    font-size: 20px;
    font-weight: 750;
}

.stat-card span,
.overview-kpi span {
    color: #5d6d83;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .075em;
}

.stat-card--success,
.overview-kpi--success {
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
    border-color: #c7efd3;
}

.stat-card--warning,
.overview-kpi--warning {
    background: linear-gradient(180deg, #ffffff 0%, #fff9f0 100%);
    border-color: #f2cf9e;
}

.stat-card--danger,
.overview-kpi--danger {
    background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
    border-color: #f3c7c7;
}

.stat-card--info,
.overview-kpi--info {
    background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
    border-color: #c7dcfb;
}

.smart-table-wrap {
    border-color: #d7e1ec;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.data-table th,
.smart-table thead th {
    padding: 11px 16px;
    background: #f6f8fb;
    color: #5d6d83;
    border-bottom-color: #dce6f0;
    font-size: 10.5px;
    letter-spacing: .08em;
}

.data-table td,
.smart-table td {
    padding: 13px 16px;
    border-bottom-color: #e4ebf3;
    color: #202a3a;
}

.data-table tbody tr:nth-child(even):not(.is-overdue) td,
.smart-table tbody tr:nth-child(even):not(.is-overdue) td {
    background: #fbfcfe;
}

.table-action-row:hover td,
.table-link-row:hover td {
    background: #f5f8fc;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 #dbe8f5;
}

.is-overdue td {
    background: #fffafa;
}

.is-overdue:hover td {
    background: #fff5f5;
}

.is-overdue td:first-child {
    box-shadow: inset 3px 0 0 rgba(197, 48, 48, .72);
}

.cell-primary strong {
    font-size: 14px;
    line-height: 1.32;
}

.cell-meta {
    color: #62748b;
}

.relation-chip {
    min-height: 22px;
    border-radius: 7px;
    background: #f4f7fb;
    font-weight: 700;
}

.badge {
    min-height: 22px;
    border-radius: 999px;
    font-weight: 700;
}

.workspace-page--settings .settings-card {
    border-color: #d8e2ed;
    border-radius: 10px;
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}

.workspace-page--settings .settings-card-title {
    margin-bottom: 16px;
    padding-bottom: 12px;
}

.workspace-page--settings .settings-list-editor {
    background: #f7f9fc;
    border-color: #dce6f0;
    border-radius: 10px;
    padding: 16px;
}

.workspace-page--settings .settings-list-row {
    border-color: #dce6f0;
    border-radius: 8px;
    padding: 9px 10px;
}

.workspace-page--settings .settings-list-row__actions .icon-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    font-size: 14px;
}

.workspace-page--settings .settings-key-details summary {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #d6e0eb;
    border-radius: 8px;
    background: #ffffff;
}

.workspace-page--settings .settings-key-details[open] summary {
    color: var(--accent);
    border-color: #b8cff3;
    background: #f2f7ff;
}

.workspace-page--settings .settings-key-input {
    font-size: 11.5px;
}

.settings-tabs {
    gap: 16px;
    margin-bottom: 22px;
}

.settings-tab {
    padding: 12px 0;
    font-weight: 700;
}

.form-actions {
    padding-top: 4px;
}

/* ===== resources/assets/css/admin/98-z-deadline-production.css ===== */
/* Deadlines — fixed controls with a scrollable table/timeline work area. */

.deadline-workspace-page {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 118px);
    min-height: 660px;
    overflow: hidden;
    padding: 18px 20px 20px;
}

.deadline-workspace-page .workspace-header {
    align-items: center;
    margin-bottom: 14px;
}

.deadline-workspace-page > .workspace-header,
.deadline-workspace-page > .alert,
.deadline-workspace-page > .group-summary-strip,
.deadline-workspace-page > .group-filter-bar,
.deadline-workspace-page > .stat-row,
.deadline-workspace-page > .smart-toolbar,
.deadline-type-tabs {
    flex: 0 0 auto;
}

.deadline-workspace-page .workspace-header h2 {
    font-size: 20px;
    line-height: 1.25;
}

.deadline-workspace-page .group-summary-strip {
    margin-bottom: 10px;
    min-height: 64px;
}

.deadline-workspace-page .group-filter-bar {
    margin: 0 0 12px;
    gap: 8px;
}

.deadline-workspace-page .group-filter-btn {
    min-width: 136px;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 8px;
}

.deadline-workspace-page .stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 2px 0 14px;
    border-radius: 12px;
    overflow: hidden;
    min-height: 58px;
}

.deadline-workspace-page .stat-row .stat-card {
    min-height: 58px;
    padding: 11px 16px;
    text-align: left;
}

.deadline-workspace-page .stat-row .stat-card strong {
    font-size: 18px;
}

.deadline-workspace-page .smart-toolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(150px, 190px) minmax(150px, 190px) minmax(150px, 190px) auto auto;
    gap: 10px;
    align-items: end;
    margin: 0 0 10px;
}

.deadline-workspace-page .smart-toolbar-group {
    min-width: 0;
}

.deadline-workspace-page .smart-toolbar-meta {
    margin-left: 0;
    justify-content: flex-end;
    white-space: nowrap;
}

.deadline-type-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 10px;
    padding: 2px 0 10px;
    border-bottom: 1px solid #dbe4ee;
    overflow-x: auto;
    scrollbar-width: thin;
}

.deadline-type-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #d5deea;
    border-radius: 999px;
    background: #ffffff;
    color: #344255;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.deadline-type-tab:hover {
    border-color: #94a9c2;
    background: #f8fbff;
}

.deadline-type-tab.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #174ea6;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}

.deadline-type-tab strong {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef3f8;
    color: #334155;
    font-size: 11px;
    text-align: center;
}

.deadline-type-tab.is-active strong {
    background: #dbeafe;
    color: #1d4ed8;
}

.deadline-view-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.deadline-view-panel[hidden] {
    display: none !important;
}

.deadline-table-scroll {
    height: 100%;
    min-height: 300px;
    max-height: none;
    overflow: auto;
    border-radius: 12px;
    scrollbar-width: thin;
}

.deadline-table {
    table-layout: fixed;
    min-width: 1500px;
}

.deadline-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8fafc;
    box-shadow: 0 1px 0 #dbe4ee;
}

.deadline-table th:nth-child(1),
.deadline-table td:nth-child(1) { width: 13%; }
.deadline-table th:nth-child(2),
.deadline-table td:nth-child(2) { width: 13%; }
.deadline-table th:nth-child(3),
.deadline-table td:nth-child(3) { width: 10%; }
.deadline-table th:nth-child(4),
.deadline-table td:nth-child(4) { width: 8%; }
.deadline-table th:nth-child(5),
.deadline-table td:nth-child(5) { width: 8%; }
.deadline-table th:nth-child(6),
.deadline-table td:nth-child(6) { width: 9%; }
.deadline-table th:nth-child(7),
.deadline-table td:nth-child(7) { width: 29%; }
.deadline-table th:nth-child(8),
.deadline-table td:nth-child(8) { width: 7%; }
.deadline-table th:nth-child(9),
.deadline-table td:nth-child(9) { width: 118px; }

.deadline-table td {
    height: 92px;
    vertical-align: middle;
}

.deadline-table .cell-primary {
    gap: 5px;
}

.deadline-table .cell-primary strong {
    font-size: 14px;
    line-height: 1.28;
}

.deadline-table .cell-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.deadline-table .relation-chip-row {
    gap: 5px;
    margin-top: 6px;
}

.deadline-table .relation-chip {
    max-width: 360px;
    min-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deadline-table .stack-actions {
    gap: 6px;
}

.deadline-table .table-inline-button {
    min-height: 32px;
    white-space: nowrap;
}

.deadline-table tr.is-overdue td {
    background: #fffafa;
}

.deadline-table tr.is-overdue td:first-child {
    box-shadow: inset 3px 0 0 rgba(197, 48, 48, .7);
}

.deadline-table .table-action-row:hover td {
    background: #f8fbff;
}

.deadline-timeline-scroll {
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.deadline-timeline-scroll .deadline-timeline {
    padding: 4px 4px 24px 0;
}

.deadline-timeline-scroll .timeline-card {
    border-radius: 10px;
    min-height: 74px;
}

.deadline-timeline-scroll .timeline-card-title {
    font-size: 13.5px;
}

.deadline-timeline-scroll .timeline-card-aside {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 260px;
}

@media (max-width: 1180px) {
    .deadline-workspace-page {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .deadline-workspace-page .smart-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .deadline-view-panel,
    .deadline-table-scroll,
    .deadline-timeline-scroll {
        overflow: visible;
        height: auto;
    }
}

/* ===== resources/assets/css/admin/98-z-task-production.css ===== */
/* Uppgifter — production repair for queue, detail view and task modals. */

.task-queue-page {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 118px);
    min-height: 640px;
    overflow: hidden;
    padding: 18px 20px 20px;
}

.task-queue-page .workspace-header {
    align-items: center;
    margin-bottom: 16px;
}

.task-queue-page > .workspace-header,
.task-queue-page > .alert,
.task-queue-filter-block,
.task-queue-page > .group-summary-strip,
.task-queue-page > .stat-row,
.task-queue-page > .smart-toolbar,
.task-workarea-tabs {
    flex: 0 0 auto;
}

.task-queue-page .workspace-header h2 {
    font-size: 19px;
}

.task-queue-filter-block {
    margin-top: 14px;
    padding: 10px 0 2px;
    border-top: 1px solid #dbe4ee;
}

.task-queue-page .group-filter-bar {
    margin: 0 0 12px;
    gap: 8px;
}

.task-queue-page .group-filter-btn {
    min-width: 130px;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 8px;
}

.task-queue-page .group-filter-btn__label {
    font-size: 12.5px;
}

.task-queue-page .stat-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 6px 0 14px;
    border-radius: 12px;
    overflow: hidden;
    min-height: 58px;
}

.task-queue-page .stat-row .stat-card {
    min-height: 58px;
    padding: 11px 16px;
    text-align: left;
}

.task-queue-page .stat-row .stat-card strong {
    font-size: 18px;
}

.task-queue-page .smart-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(150px, 180px) minmax(150px, 180px) minmax(150px, 180px) auto auto;
    gap: 10px;
    align-items: end;
    margin: 0 0 12px;
}

.task-queue-page .smart-toolbar-group {
    min-width: 0;
}

.task-queue-page .smart-toolbar-meta {
    margin-left: 0;
    justify-content: flex-end;
}

.task-workarea-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 10px;
    padding: 2px 0 10px;
    border-bottom: 1px solid #dbe4ee;
    overflow-x: auto;
    scrollbar-width: thin;
}

.task-workarea-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #d5deea;
    border-radius: 999px;
    background: #ffffff;
    color: #344255;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.task-workarea-tab:hover {
    border-color: #94a9c2;
    background: #f8fbff;
}

.task-workarea-tab.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #174ea6;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}

.task-workarea-tab strong {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef3f8;
    color: #334155;
    font-size: 11px;
    text-align: center;
}

.task-workarea-tab.is-active strong {
    background: #dbeafe;
    color: #1d4ed8;
}

.task-view-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.task-view-panel[hidden] {
    display: none !important;
}

.task-queue-table-wrap {
    height: 100%;
    min-height: 280px;
    max-height: none;
    overflow: auto;
    border-radius: 12px;
    scrollbar-width: thin;
}

.task-queue-table {
    table-layout: fixed;
    min-width: 1240px;
}

.task-queue-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8fafc;
    box-shadow: 0 1px 0 #dbe4ee;
}

.task-queue-table th:nth-child(1),
.task-queue-table td:nth-child(1) { width: 31%; }
.task-queue-table th:nth-child(2),
.task-queue-table td:nth-child(2) { width: 14%; }
.task-queue-table th:nth-child(3),
.task-queue-table td:nth-child(3) { width: 14%; }
.task-queue-table th:nth-child(4),
.task-queue-table td:nth-child(4) { width: 12%; }
.task-queue-table th:nth-child(5),
.task-queue-table td:nth-child(5) { width: 9%; }
.task-queue-table th:nth-child(6),
.task-queue-table td:nth-child(6) { width: 7%; }
.task-queue-table th:nth-child(7),
.task-queue-table td:nth-child(7) { width: 8%; }
.task-queue-table th:nth-child(8),
.task-queue-table td:nth-child(8) { width: 94px; }

.task-queue-table td {
    height: 70px;
    vertical-align: middle;
}

.task-queue-table td:nth-child(2),
.task-queue-table td:nth-child(3),
.task-queue-table td:nth-child(7) {
    color: #344255;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-queue-table .cell-primary {
    gap: 5px;
}

.task-queue-table .cell-primary strong {
    font-size: 14px;
    line-height: 1.28;
}

.task-queue-table .cell-meta {
    color: #6b7b90;
    font-size: 11.5px;
}

.task-queue-table .relation-chip-row {
    gap: 5px;
    margin-top: 5px;
}

.task-queue-table .relation-chip {
    max-width: 240px;
    min-height: 21px;
    padding: 3px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
}

.task-queue-table .task-quick-assign-form--desktop {
    min-width: 0;
    max-width: 148px;
}

.task-queue-table .task-quick-assign-select {
    min-height: 30px;
    padding-left: 10px;
    border-radius: 8px;
    font-size: 11.5px;
}

.task-queue-table .task-quick-assign-state {
    display: none;
}

.task-queue-table .badge {
    max-width: 100%;
    justify-content: center;
}

.task-queue-table .inline-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
}

.task-queue-table .table-inline-button {
    min-height: 32px;
}

.task-queue-table .chat-launch-btn--icon.table-inline-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
}

.task-queue-table tr[data-priority="high"] td:first-child,
.task-queue-table tr[data-priority="hog"] td:first-child {
    box-shadow: inset 3px 0 0 rgba(180, 83, 9, .64);
}

.task-queue-table tr[data-priority="critical"] td:first-child,
.task-queue-table tr[data-priority="urgent"] td:first-child {
    box-shadow: inset 3px 0 0 rgba(197, 48, 48, .72);
}

.task-queue-table tr.is-overdue td {
    background: #fffafa;
}

.task-queue-table tr.is-overdue td:first-child {
    box-shadow: inset 3px 0 0 rgba(197, 48, 48, .72);
}

.task-queue-table .table-action-row:hover td {
    background: #f8fbff;
}

.task-queue-table .table-action-row:hover td:first-child {
    box-shadow: inset 3px 0 0 rgba(37, 99, 235, .42);
}

.task-queue-table tr.is-overdue:hover td {
    background: #fff7f7;
}

.task-queue-table tr.is-overdue:hover td:first-child {
    box-shadow: inset 3px 0 0 rgba(197, 48, 48, .72);
}

.task-queue-table .inline-actions .button-secondary {
    border-color: #b9c8da;
    color: #172033;
}

.task-timeline-scroll {
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.task-date-timeline {
    padding: 4px 4px 24px 0;
}

.task-timeline-card {
    border-radius: 10px;
    min-height: 74px;
}

.task-timeline-card .timeline-card-title span {
    color: #64748b;
    font-weight: 500;
}

.task-timeline-card .timeline-card-aside {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 260px;
}

.task-detail-page {
    max-width: 1720px;
}

.task-detail-page .workspace-main {
    gap: 14px;
}

.task-detail-page .workspace-panel {
    padding: 18px 20px;
}

.task-detail-page .workspace-kicker {
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.task-detail-page .workspace-kicker h2 {
    font-size: 21px;
    line-height: 1.25;
}

.task-detail-page .stat-row {
    margin: 0;
}

.task-detail-page .stat-row .stat-card {
    min-height: 62px;
    text-align: left;
}

.task-detail-page .task-entry-strip {
    align-items: center;
}

.task-detail-page .task-entry-main {
    gap: 8px;
}

.task-detail-page .task-entry-actions .button {
    min-width: 132px;
}

.task-detail-page .page-tabs-shell {
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.task-detail-page .page-tabs {
    padding: 0 16px;
}

.task-detail-page .page-tab {
    min-height: 44px;
    padding-inline: 14px;
    font-weight: 650;
}

.task-detail-page .task-context-summary {
    padding: 12px 14px;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    background: #f8fafc;
}

.task-detail-page .task-context-body {
    padding-top: 10px;
}

.task-detail-page .prose-block {
    color: #243044;
    font-size: 14px;
    line-height: 1.65;
}

.task-detail-page #tab-checklista .inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.task-detail-page #tab-checklista .inline-form input[type="text"] {
    width: min(340px, 100%);
    min-height: 38px;
    border: 1px solid #cfd9e6;
    border-radius: 8px;
    padding: 8px 10px;
}

.task-detail-page #tab-diskussion .discussion-panel,
.task-detail-page #tab-diskussion .chat-box {
    min-height: 320px;
}

#task-create-modal,
#task-update-modal {
    width: min(920px, calc(100vw - 48px));
    max-height: calc(100svh - 48px);
    border-radius: 14px;
}

#task-create-modal .modal-panel,
#task-update-modal .modal-panel {
    max-width: none;
    width: 100%;
}

#task-create-modal .modal-header,
#task-update-modal .modal-header {
    padding: 18px 22px 14px;
}

#task-create-modal .modal-panel > form.modal-grid,
#task-update-modal .modal-panel > form.modal-grid {
    padding: 16px 22px 12px;
    gap: 14px 18px;
    scroll-padding-bottom: 96px;
}

#task-create-modal .modal-grid.two-columns,
#task-update-modal .modal-grid.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#task-create-modal .modal-grid label,
#task-update-modal .modal-grid label,
#task-create-modal .modal-grid .check-dropdown,
#task-update-modal .modal-grid .check-dropdown {
    min-width: 0;
    max-width: 100%;
}

#task-create-modal .modal-grid input:not([type="checkbox"]):not([type="file"]),
#task-create-modal .modal-grid select,
#task-update-modal .modal-grid input:not([type="checkbox"]):not([type="file"]),
#task-update-modal .modal-grid select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 42px;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#task-create-modal .modal-grid textarea,
#task-update-modal .modal-grid textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 94px;
    border-radius: 8px;
}

#task-create-modal .modal-grid select option,
#task-update-modal .modal-grid select option {
    max-width: 58ch;
    white-space: normal;
    overflow-wrap: anywhere;
}

#task-update-modal .modal-note {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 14px 22px 0;
    padding: 12px 14px;
    gap: 7px 16px;
    background: #f8fafc;
}

#task-update-modal .modal-note > span {
    min-width: 0;
}

#task-update-modal .modal-context-actions {
    padding: 12px 22px 0;
}

#task-create-modal .modal-actions,
#task-update-modal .modal-actions {
    position: sticky;
    bottom: -12px;
    z-index: 3;
    margin: 8px 0 -12px;
    padding: 14px 22px 16px;
    border-top: 1px solid #dbe4ee;
    background: linear-gradient(180deg, rgba(255,255,255,.96), #f8fafc);
}

#task-create-modal .modal-grid textarea,
#task-update-modal .modal-grid textarea,
#task-update-modal .task-modal-history {
    margin-bottom: 4px;
}

.task-modal-history {
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
}

.task-modal-history summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
}

.task-modal-history summary::-webkit-details-marker {
    display: none;
}

.task-modal-history summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid #6b7b90;
    border-bottom: 2px solid #6b7b90;
    transform: rotate(45deg);
}

.task-modal-history[open] summary::after {
    transform: rotate(-135deg);
}

.task-modal-history .eyebrow {
    margin: 0;
}

.task-modal-history strong {
    font-size: 13px;
}

.task-modal-history .discussion-stream {
    border: 0 !important;
    border-top: 1px solid #dbe4ee !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

@media (max-width: 1100px) {
    .task-queue-page .smart-toolbar,
    .task-queue-page .stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-queue-page .smart-toolbar-meta {
        justify-content: flex-start;
    }
}

/* ===== resources/assets/css/admin/99-theme-dark.css ===== */
/* Dark mode overrides — activated by <body class="dark">. */
/* =============================================================================
   14. Theme: Dark Mode (Prepared)
   =============================================================================
   To enable dark mode, add class="dark" to <body>.
   All tokens are already defined using CSS custom properties,
   so changing the values below enables dark mode.

   Example implementation in JS (theme.js):
   ```
   const theme = localStorage.getItem('viljan.theme') 
       || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
   if (theme === 'dark') document.body.classList.add('dark');
   ```
   ============================================================================= */

body.dark {
    color-scheme: dark;

    /* Surfaces */
    --bg:              #0f172a;
    --surface:         #1e293b;
    --surface-alt:     #334155;
    --surface-raised: #1e293b;

    /* Borders */
    --border:          #334155;
    --border-strong:   #475569;

    /* Text */
    --text:            #e2e8f0;
    --text-strong:     #f8fafc;
    --muted:           #94a3b8;
    --muted-strong:    #cbd5e1;

    /* Note: Keep brand accent for trust consistency */
    /* --accent:        #3b82f6; */

    /* Action semantics — softer variants for dark */
    --action-neutral-bg:    #1e293b;
    --action-neutral-hover: #334155;
    --action-neutral-border: #334155;
    --action-neutral-text:   #e2e8f0;

    /* Semantic */
    /* Keep success/danger/warning colors for accessibility */
}