/* Calm theme, after the Delore Care finance portal: warm cream ground, white
 * cards, Figtree for headings and Noto Sans for text, in the group palette
 * (Kokoodi blue, Appnable green, Wingato orange). Scoped to body.calm; every
 * page in the app opts in. */

body.calm {
    --c-bg: #faf7f2;
    --c-card: #ffffff;
    --c-ink: #1f2937;
    --c-ink-2: #4b5563;
    --c-muted: #6b6f76;
    --c-border: #ebe5da;
    --c-border-soft: #f3efe7;
    --c-tint: #f6f2ea;
    /* Group palette: Kokoodi blue leads; Appnable green and Wingato orange
     * mark which company an invoice belongs to. Red is kept for overdue only. */
    --c-accent: #156d99;        /* Kokoodi blue, deepened for 5.7:1 with white text */
    --c-accent-hover: #105a80;
    --c-accent-soft: #e6f2f8;
    --c-chart-accent: #1a84b8;  /* Kokoodi blue as sampled from the logo; passes the palette checks against #c62f2f */
    --c-kokoodi: #1a84b8;
    --c-appnable: #7fb83f;
    --c-appnable-ink: #4d7a1f;
    --c-appnable-soft: #eef6e4;
    --c-wingato: #e47c2a;
    --c-wingato-ink: #a5520f;
    --c-wingato-soft: #fdf0e5;
    --c-critical: #c62f2f;
    --c-critical-soft: #fdf1f0;
    --c-critical-border: #f3cfcb;
    --c-good: #0f8a6a;
    --c-good-soft: #e6f5ef;

    background: var(--c-bg);
    color: var(--c-ink);
    font-family: 'Noto Sans', 'Inter', system-ui, sans-serif;
}

/* ── Frame ─────────────────────────────────────────────────────────────── */
.calm .main-content { background: var(--c-bg); }
.calm .app-header { background: rgba(250, 247, 242, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--c-border); }
.calm .header-left h1 { font-family: 'Figtree', 'Noto Sans', sans-serif; font-size: 18px; font-weight: 600; color: var(--c-ink); }
.calm .content { padding: 28px 32px 48px; }

.calm .btn { border-radius: 10px; font-weight: 600; }
.calm .btn-primary { background: var(--c-accent); color: #fff; }
.calm .btn-primary:hover { background: var(--c-accent-hover); }
.calm .btn-secondary { background: var(--c-card); color: var(--c-ink); border: 1px solid var(--c-border); }
.calm .btn-secondary:hover { background: var(--c-tint); }
.calm .btn-icon { color: var(--c-ink-2); border-radius: 8px; }
.calm .btn-icon:hover { background: var(--c-tint); color: var(--c-accent); }

.calm .card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04); }
.calm .card-header { border-bottom: 1px solid var(--c-border-soft); }
.calm .card-header h2 { font-family: 'Figtree', 'Noto Sans', sans-serif; font-size: 15px; color: var(--c-ink); }
.calm .muted { color: var(--c-muted); }

.calm .form-input { border-color: var(--c-border); border-radius: 10px; background: #fff; }
.calm .form-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); outline: none; }
.calm .form-group label { color: var(--c-muted); letter-spacing: 0.12em; font-size: 10.5px; }

/* ── Dashboard ─────────────────────────────────────────────────────────── */
.dash { margin-bottom: 28px; }
.dash-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin: 0 0 10px;
}
.dash-eyebrow-list { margin-top: 4px; }
.dash-headline {
    font-family: 'Figtree', 'Noto Sans', sans-serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    margin: 0 0 8px;
}
.dash-sub { font-size: 15px; line-height: 1.55; color: var(--c-ink-2); max-width: 720px; margin: 0 0 28px; }
.dash-empty { color: var(--c-muted); font-size: 14px; margin: 4px 0; }

/* Money cards */
.money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; }
.money-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
}
.money-card.has-overdue { background: linear-gradient(180deg, var(--c-critical-soft) 0%, #fff 70%); border-color: var(--c-critical-border); }
.money-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.money-code { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--c-ink); background: var(--c-tint); border-radius: 6px; padding: 3px 7px; }
.money-name { font-size: 13px; color: var(--c-muted); }
.money-value { font-family: 'Noto Sans', sans-serif; font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--c-ink); }
.money-caption { font-size: 13px; color: var(--c-muted); margin: 4px 0 16px; }
.money-none { font-size: 13px; color: var(--c-muted); margin: 0 0 16px; }

.flag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.flag svg { width: 13px; height: 13px; }
.flag-overdue { color: var(--c-critical); background: #fff; border: 1px solid var(--c-critical-border); }

/* Two-part meter: the 2px gap is the spacer between fills. */
.meter { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--c-border-soft); }
.meter-seg { display: block; height: 100%; min-width: 4px; }
.meter-seg:first-child { border-radius: 999px 0 0 999px; }
.meter-seg:last-child { border-radius: 0 999px 999px 0; }
.meter-seg:only-child { border-radius: 999px; }
.meter-overdue { background: var(--c-critical); }
.meter-notdue { background: var(--c-chart-accent); }
.meter-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 13px; color: var(--c-ink-2); }
.meter-legend strong { color: var(--c-ink); font-weight: 600; margin-left: 4px; }
.key { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.key-overdue { background: var(--c-critical); }
.key-notdue { background: var(--c-chart-accent); }

.money-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--c-border-soft); }
.money-foot dt { font-size: 11px; color: var(--c-muted); margin-bottom: 3px; }
.money-foot dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--c-ink); white-space: nowrap; }

/* Panels */
.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-panel { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.dash-two .dash-panel { margin-bottom: 0; }
.dash-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-panel-head h3 { font-family: 'Figtree', 'Noto Sans', sans-serif; font-size: 16px; font-weight: 600; color: var(--c-ink); display: flex; align-items: center; gap: 8px; margin: 0; }
.dash-panel-head h3 svg { width: 17px; height: 17px; color: var(--c-accent); }
.dash-panel .table-wrap { margin: 0 -20px -18px; }

/* Coming in the next 30 days */
.upcoming ul { list-style: none; margin: 0; padding: 0; }
.upcoming li { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--c-border-soft); }
.upcoming li:first-child { border-top: 0; padding-top: 2px; }
.up-date, .up-who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.up-date strong { font-weight: 600; }
.up-date .muted, .up-who .muted { font-size: 12px; }
.up-amount { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.calm .invoices-table thead th { background: var(--c-tint); color: var(--c-muted); border-bottom: 1px solid var(--c-border); letter-spacing: 0.1em; font-size: 11px; }
.calm .invoices-table tbody td { border-bottom: 1px solid var(--c-border-soft); color: var(--c-ink); }
.calm .invoices-table tbody tr:hover,
.calm .invoices-table tbody tr:hover td.actions-col { background: #fcfaf6; }
.calm .invoices-table th:last-child { background: var(--c-tint); }
.calm .invoices-table td.actions-col { background: #fff; }
.calm .invoices-table .invoice-number { color: var(--c-ink); }
.calm .owed-clients thead th:last-child { background: var(--c-tint); }
.calm .owed-overdue { color: var(--c-critical) !important; }
.calm .owed-late { color: var(--c-critical); }

.calm .status-pill { font-weight: 600; letter-spacing: 0.04em; border: 1px solid transparent; }
.calm .status-pill.draft { background: var(--c-tint); color: var(--c-ink-2); border-color: var(--c-border); }
.calm .status-pill.sent  { background: var(--c-accent-soft); color: var(--c-accent); }
.calm .status-pill.paid  { background: var(--c-good-soft); color: var(--c-good); }
.calm .status-note.owed-overdue { font-weight: 600; }

@media (max-width: 1100px) {
    .dash-two { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .calm .content { padding: 20px 16px 40px; }
    .dash-headline { font-size: 24px; }
    .money-foot { grid-template-columns: 1fr 1fr; }
    .upcoming li { grid-template-columns: 1fr auto; }
    .up-date { grid-column: 1 / -1; flex-direction: row; gap: 8px; }
    .calm .filter-bar { grid-template-columns: 1fr 1fr; }
    .calm .table-wrap { max-width: 100%; }
}

/* Draft rows carry six icons plus "Mark sent"; keep them inside 1280px. */
.calm #invoicesTbody .row-actions .btn-icon { width: 24px; height: 24px; }

/* ── View tabs ─────────────────────────────────────────────────────────── */
.view-tabs { display: flex; gap: 4px; margin: 0 0 24px; border-bottom: 1px solid var(--c-border); }
.view-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px 12px; margin-bottom: -1px;
    font-family: 'Figtree', 'Noto Sans', sans-serif; font-size: 15px; font-weight: 600;
    color: var(--c-muted); text-decoration: none;
    border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
}
.view-tab svg { width: 17px; height: 17px; }
.view-tab:hover { color: var(--c-ink); background: var(--c-tint); }
.view-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.view-tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tab-badge { font-family: 'Noto Sans', sans-serif; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--c-tint); color: var(--c-ink-2); }
.tab-badge-alert { background: var(--c-critical-soft); color: var(--c-critical); border: 1px solid var(--c-critical-border); }
.view[hidden] { display: none !important; }

.dash-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--c-accent); text-decoration: none; }
.dash-link:hover { text-decoration: underline; }
.dash-link svg { width: 14px; height: 14px; }

/* ── Sidebar (every page) ──────────────────────────────────────────────── */
.calm .sidebar {
    background: #fdfbf8;
    color: var(--c-ink);
    border-right: 1px solid var(--c-border);
    width: 240px;
}
.calm .main-content { margin-left: 240px; }
.calm .sidebar::before {
    /* The three companies in one thin rule across the top. */
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--c-kokoodi) 0 33.33%, var(--c-appnable) 33.33% 66.66%, var(--c-wingato) 66.66% 100%);
}
.calm .sidebar-brand { border-bottom: 1px solid var(--c-border-soft); padding: 18px 20px; }
.calm .sidebar-title { color: var(--c-ink); font-family: 'Figtree', 'Noto Sans', sans-serif; font-size: 14px; }
.calm .sidebar-nav { padding: 14px 12px; }
.calm .nav-section {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-muted); padding: 10px 12px 6px;
}
.calm .nav-item {
    color: var(--c-ink-2);
    align-items: flex-start;
    padding: 9px 12px;
    border-radius: 10px;
    margin-bottom: 2px;
}
.calm .nav-item svg { color: var(--c-muted); margin-top: 1px; flex-shrink: 0; }
.calm .nav-item:hover { background: var(--c-tint); color: var(--c-ink); }
.calm .nav-item.active { background: var(--c-accent-soft); color: var(--c-accent); }
.calm .nav-item.active svg { color: var(--c-accent); }
.calm .nav-text { display: flex; flex-direction: column; gap: 1px; }
.calm .nav-label { font-size: 14px; font-weight: 600; }
.calm .nav-desc { font-size: 12px; font-weight: 400; color: var(--c-muted); line-height: 1.35; }
.calm .nav-item.active .nav-desc { color: var(--c-accent); opacity: 0.8; }
.calm .nav-divider { background: var(--c-border); margin: 10px 4px; }
.calm .sidebar-footer { border-top: 1px solid var(--c-border-soft); color: var(--c-muted); padding: 14px 20px; }
.calm .group-line { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--c-ink-2); margin-bottom: 6px; }
.calm .group-line span { display: inline-flex; align-items: center; gap: 5px; }
.calm .group-line i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.calm .dot-kokoodi { background: var(--c-kokoodi); }
.calm .dot-appnable { background: var(--c-appnable); }
.calm .dot-wingato { background: var(--c-wingato); }
.calm .sidebar-footer div, .calm .sidebar-footer span { color: var(--c-muted); }

/* ── Issuer tags (invoices) ───────────────────────────────────────────── */
.issuer-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.issuer-tag::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.issuer-tag.appnable { background: var(--c-appnable-soft); color: var(--c-appnable-ink); }
.issuer-tag.appnable::before { background: var(--c-appnable); }
.issuer-tag.wingato { background: var(--c-wingato-soft); color: var(--c-wingato-ink); }
.issuer-tag.wingato::before { background: var(--c-wingato); }

/* ── Shared controls on the other pages ───────────────────────────────── */
.calm .btn-success { background: var(--c-accent); color: #fff; }
.calm .btn-success:hover { background: var(--c-accent-hover); transform: none; box-shadow: none; }
.calm .btn-ghost { color: var(--c-ink-2); }
.calm input[type="checkbox"] { accent-color: var(--c-accent); }
.calm .toast.success { background: var(--c-good); }

/* Figures wear text ink, not green; tabular only where they line up. */
.calm .stat-value { font-family: 'Noto Sans', sans-serif; color: var(--c-ink); }
.calm .stat-value.money { font-family: 'Noto Sans', sans-serif; color: var(--c-ink); font-size: 20px; }
.calm .total-cell, .calm .grand-total { font-family: 'Noto Sans', sans-serif; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.calm .payment-item input, .calm .bonus-person .form-input { font-family: 'Noto Sans', sans-serif; font-variant-numeric: tabular-nums; }
.calm .payment-item select, .calm .payment-item input { border-color: var(--c-border); border-radius: 8px; }
.calm .payment-item select:focus, .calm .payment-item input:focus { border-color: var(--c-accent); }
.calm .btn-add-item { color: var(--c-accent); }
.calm .type-badge.intern { background: var(--c-accent-soft); color: var(--c-accent); }
.calm .type-badge.staff { background: var(--c-good-soft); color: var(--c-good); }
.calm .data-grid thead th { background: var(--c-tint); color: var(--c-muted); border-bottom: 1px solid var(--c-border); letter-spacing: 0.1em; font-size: 11px; }
.calm .data-grid tbody td { border-bottom: 1px solid var(--c-border-soft); }
.calm .data-grid tbody tr:hover td,
.calm .data-grid tbody tr:hover td:last-child { background: #fcfaf6; }
.calm .card-footer { background: var(--c-tint); border-top: 1px solid var(--c-border-soft); }
.calm .card-footer.bulk-bar { background: rgba(246, 242, 234, 0.96); }

/* Recruitment tabs, matched to the invoice tabs */
.calm .tab-bar { border-bottom: 1px solid var(--c-border); }
.calm .tab-btn { font-family: 'Figtree', 'Noto Sans', sans-serif; font-size: 15px; font-weight: 600; color: var(--c-muted); border-radius: 8px 8px 0 0; }
.calm .tab-btn:hover { color: var(--c-ink); background: var(--c-tint); }
.calm .tab-btn.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.calm .tab-count { background: var(--c-tint); color: var(--c-ink-2); }

/* The printed payslip keeps its own look: no cream behind it. */
@media print {
    body.calm, .calm .main-content { background: #fff !important; }
}

@media (max-width: 900px) {
    .calm .main-content { margin-left: 0; }
    .calm .sidebar { box-shadow: 8px 0 24px rgba(31, 41, 55, 0.12); }
}

/* The main column must not grow to fit a wide table: the table scrolls in
   its own box instead. */
.calm .main-content { min-width: 0; }
@media (min-width: 901px) {
    .calm .content { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1439px) {
    .calm .invoices-table .col-issued { display: none; }
}

/* ── One grid: a 64px top band across sidebar and header, and one 24px
   left edge for the logo, menu, page title and cards. ───────────────── */
.calm .sidebar::before { height: 4px; }
.calm .sidebar-brand { height: 60px; box-sizing: border-box; padding: 0 24px; border-bottom: 1px solid var(--c-border); }
.calm .app-header { height: 64px; box-sizing: border-box; padding: 0 24px; flex-wrap: nowrap; }
.calm .sidebar-nav { padding: 16px 12px; }
.calm .nav-section { padding: 12px 12px 6px; }
.calm .nav-section:first-child { padding-top: 0; }
.calm .sidebar-footer { padding: 14px 24px; border-top: 1px solid var(--c-border); }
.calm .content { padding-top: 24px; }
.calm .card, .calm .dash-panel, .calm .money-card { border-color: var(--c-border); }
@media (min-width: 901px) {
    .calm .mobile-menu { display: none !important; }
}
.calm .clients-table td.actions-col, .calm .invoices-table td.actions-col { white-space: nowrap; }

/* Clients: long recipient lists wrap inside a fixed width. */
.calm .invoices-table .col-recipients { max-width: 230px; overflow-wrap: anywhere; font-size: 13px; color: var(--c-ink-2); }
@media (max-width: 1439px) {
    .calm .invoices-table .col-project { display: none; }
}
.calm .nowrap { white-space: nowrap; }
.calm .tab-panel .invoices-table tbody td,
.calm .tab-panel .invoices-table thead th { padding-left: 10px; padding-right: 10px; }

/* ── Access ───────────────────────────────────────────────────────────── */
.calm .nav-item[hidden], .calm .tabbar .tab[hidden], .calm .nav-page-actions[hidden], .calm .header-right[hidden] { display: none !important; }
/* Until the API says what this person may open, show the frame, not the page. */
.calm.access-pending .content { visibility: hidden; }
.access-panel { max-width: 460px; margin: 64px auto; text-align: center; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px; padding: 36px 28px; }
.access-panel svg { width: 34px; height: 34px; color: var(--c-accent); margin-bottom: 10px; }
.access-panel h2 { font-family: 'Figtree', 'Noto Sans', sans-serif; font-size: 20px; margin: 0 0 8px; color: var(--c-ink); }
.access-panel p { color: var(--c-ink-2); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }

/* ── Phones: bottom tab bar and a slide-in menu ───────────────────────── */
.tabbar { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 900px) {
    .calm .mobile-menu { display: inline-flex !important; }
    .calm .app-header { padding: 0 16px; gap: 10px; }
    .calm .header-left h1 { font-size: 17px; }
    .calm .header-right { gap: 6px; }
    .calm .header-right .btn { padding: 8px 12px; font-size: 13px; }
    .calm .user-info-container { display: none; }

    .calm .sidebar { width: 280px; max-width: 86vw; z-index: 300; transform: translateX(-100%); transition: transform 0.25s ease; }
    .calm .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(31, 41, 55, 0.38); z-index: 250; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
    .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
    body.menu-open { overflow: hidden; }

    .tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
        background: rgba(253, 251, 248, 0.97); backdrop-filter: blur(8px);
        border-top: 1px solid var(--c-border);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .tabbar .tab {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px; border-radius: 10px; text-decoration: none;
        color: var(--c-muted); font-size: 11px; font-weight: 600;
    }
    .tabbar .tab svg { width: 21px; height: 21px; }
    .tabbar .tab.active { color: var(--c-accent); background: var(--c-accent-soft); }
    /* Room so the last row is not hidden behind the bar. */
    .calm .content { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .calm .card-footer.bulk-bar { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ── Home ─────────────────────────────────────────────────────────────── */
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.home-tile { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; min-height: 210px; }
.home-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.home-tile-head h3 { font-family: 'Figtree', 'Noto Sans', sans-serif; font-size: 16px; font-weight: 600; margin: 0; color: var(--c-ink); }
.home-tile-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--c-accent-soft); color: var(--c-accent); display: inline-flex; align-items: center; justify-content: center; }
.home-tile-icon svg { width: 18px; height: 18px; }
.home-tile-body { flex: 1; }
.home-stat { font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--c-ink); }
.home-stat.is-alert { color: var(--c-critical); }
.home-line { margin: 4px 0 0; font-size: 14px; color: var(--c-ink-2); }
.home-error { color: var(--c-critical); font-size: 13px; }
.home-tile-link { margin-top: 16px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--c-accent); text-decoration: none; }
.home-tile-link svg { width: 15px; height: 15px; }
.home-tile-link:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--c-tint); color: var(--c-ink-2); border: 1px solid var(--c-border); }
.chip strong { color: var(--c-ink); }

/* ── Admin ────────────────────────────────────────────────────────────── */
.seat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 18px; }
.seat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-ink-2); background: var(--c-card); border: 1px solid var(--c-border); border-radius: 999px; padding: 5px 12px; }
.seat svg { width: 15px; height: 15px; color: var(--c-good); }
.seat.is-full svg { color: var(--c-critical); }
.people { display: flex; flex-direction: column; }
.person { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; border-top: 1px solid var(--c-border-soft); }
.person:first-child { border-top: 0; padding-top: 0; }
.person.is-paused .person-main { opacity: 0.6; }
.person-name { font-weight: 600; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.person-email { font-size: 13px; color: var(--c-muted); margin-top: 2px; overflow-wrap: anywhere; }
.person-meta { font-size: 12px; color: var(--c-muted); margin-top: 8px; }
.person-note { font-size: 12px; color: var(--c-muted); text-align: right; }
.person-actions { display: flex; gap: 8px; flex-shrink: 0; }
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.badge-owner { background: var(--c-accent-soft); color: var(--c-accent); }
.badge-admin { background: var(--c-tint); color: var(--c-ink-2); border: 1px solid var(--c-border); }
.badge-paused { background: var(--c-critical-soft); color: var(--c-critical); }
.audit ul { list-style: none; margin: 0; padding: 0; }
.audit li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--c-border-soft); font-size: 13px; }
.audit li:first-child { border-top: 0; }
.audit-when { color: var(--c-muted); }

.admin-modal { width: 560px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.admin-modal .modal-body { overflow-y: auto; }
.admin-modal .modal-header { display: flex; justify-content: space-between; align-items: center; }
.segmented { display: flex; gap: 4px; background: var(--c-tint); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.seg { flex: 1; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--c-ink-2); cursor: pointer; }
.seg.active { background: #fff; color: var(--c-accent); box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dir-results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.dir-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--c-border); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.dir-row:hover:not(:disabled) { border-color: var(--c-accent); }
.dir-row:disabled { opacity: 0.55; cursor: default; }
.dir-row > span:first-child, .chosen { display: flex; flex-direction: column; gap: 2px; }
.chosen { background: var(--c-accent-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.module-checks { border: 0; padding: 0; margin: 4px 0 8px; }
.module-checks legend { font-size: 13px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; }
.check > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.check .muted { font-size: 12px; }
.email-preview { font-size: 13px; color: var(--c-ink-2); margin: -4px 0 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.password-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: var(--c-tint); border: 1px dashed var(--c-border); border-radius: 10px; padding: 14px; margin: 12px 0; }
.password-box code { font-size: 18px; font-weight: 600; letter-spacing: 0.04em; user-select: all; word-break: break-all; }
.handover { padding-left: 18px; font-size: 13px; color: var(--c-ink-2); line-height: 1.55; }

/* ── Phones: every table becomes a stack of cards ─────────────────────── */
@media (max-width: 720px) {
    .calm .table-wrap { overflow: visible; }
    .calm .invoices-table, .calm .invoices-table tbody, .calm .invoices-table tr,
    .calm .data-grid, .calm .data-grid tbody, .calm .data-grid tr { display: block; width: 100%; }
    .calm .invoices-table thead, .calm .data-grid thead { display: none; }
    .calm .invoices-table tbody tr, .calm .data-grid tbody tr {
        background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
        margin: 0 0 10px; padding: 8px 14px;
    }
    .calm .card .invoices-table tbody tr, .calm .card .data-grid tbody tr { margin: 10px; width: auto; }
    .calm .invoices-table tbody td, .calm .data-grid tbody td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 6px 0; border: 0; text-align: right; min-height: 28px;
    }
    .calm .invoices-table tbody td::before, .calm .data-grid tbody td::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        font-size: 12px; font-weight: 600; color: var(--c-muted);
    }
    .calm .invoices-table tbody td:first-child { font-size: 15px; }
    .calm .invoices-table tbody td.empty-state, .calm .data-grid tbody td.empty-state { display: block; text-align: center; }
    .calm .invoices-table tbody td.empty-state::before, .calm .data-grid tbody td.empty-state::before { display: none; }
    .calm .invoices-table td.actions-col, .calm .data-grid tbody td:last-child {
        position: static; box-shadow: none; background: none;
        border-top: 1px solid var(--c-border-soft); margin-top: 6px; padding-top: 10px;
    }
    .calm .invoices-table td.actions-col::before, .calm .data-grid tbody td:last-child::before { display: none; }
    .calm .row-actions, .calm .action-btns { flex-wrap: wrap; justify-content: flex-start; width: 100%; gap: 8px; }
    .calm .row-actions .btn-icon { width: 36px; height: 36px; }
    .calm .row-actions .btn-sm { padding: 8px 14px; font-size: 13px; }
    .calm td[data-label=""]::before { display: none; }

    .person { flex-direction: column; }
    .person-actions { width: 100%; }
    .person-actions .btn { flex: 1; }
    .person-note { text-align: left; }
    .audit li { grid-template-columns: 1fr; gap: 2px; }
    .form-two { grid-template-columns: 1fr; }
}
.access-panel .btn { text-decoration: none; }

@media (max-width: 720px) {
    /* Header: secondary actions shrink to their icon (the label stays for screen readers); the main action keeps its words. */
    .calm .header-right .btn-secondary { font-size: 0; padding: 9px 10px; gap: 0; }
    .calm .header-right .btn-secondary svg { width: 18px; height: 18px; }
    .calm .header-right { flex-wrap: nowrap; }
    .calm .header-right .btn-primary { white-space: nowrap; }
    /* Cards skip fields with nothing in them. */
    .calm .invoices-table tbody td:empty, .calm .data-grid tbody td:empty { display: none; }
}
@media (max-width: 720px) {
    /* A header with three or more actions shows them all as icons. */
    .calm .header-right:has(> .btn:nth-child(3)) .btn-primary { font-size: 0; padding: 9px 10px; gap: 0; }
    .calm .header-right:has(> .btn:nth-child(3)) .btn-primary svg { width: 18px; height: 18px; }
    .calm .header-left { min-width: 0; }
    .calm .header-left h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 720px) {
    /* Payslip cards: label above each field, since the fields hold editable lines. */
    .calm .data-grid tbody td { flex-direction: column; align-items: stretch; text-align: left; gap: 6px; }
    .calm .data-grid tbody td::before { margin-bottom: 2px; }
    .calm .data-grid tbody td:first-child { flex-direction: row; align-items: center; }
    .calm .data-grid .payment-item { flex-wrap: wrap; }
    .calm .data-grid .payment-item select { flex: 1 1 140px; min-width: 0; }
    .calm .data-grid .payment-item input { flex: 1 1 100px; width: auto; }
    /* The bulk bar: one compact row. */
    .calm .card-footer.bulk-bar { padding: 10px 12px; gap: 8px; }
    .calm .card-footer.bulk-bar .selection-info { font-size: 12px; gap: 10px; width: 100%; }
    .calm .card-footer.bulk-bar .btn-secondary, .calm .card-footer.bulk-bar .btn-ghost { font-size: 0; padding: 9px 10px; gap: 0; }
    .calm .card-footer.bulk-bar .btn-secondary svg, .calm .card-footer.bulk-bar .btn-ghost svg { width: 18px; height: 18px; }
    .calm .card-footer.bulk-bar .btn-primary, .calm .card-footer.bulk-bar .btn-success { padding: 9px 14px; font-size: 13px; }
}

/* ── Overview, tidied ─────────────────────────────────────────────────── */
.year-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--c-ink-2); margin: -4px 0 20px; }
.year-strip strong { color: var(--c-ink); font-weight: 600; margin-right: 4px; }
.year-sep { width: 1px; height: 14px; background: var(--c-border); }
.chase ul { list-style: none; margin: 0; padding: 0; }
.chase li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--c-border-soft); }
.chase li:first-child { border-top: 0; padding-top: 2px; }
.chase-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.chase .owed-late { margin-left: 0; font-weight: 600; }
.dash-more { margin: 10px 0 0; }
.dash-foot { margin: 4px 0 0; }
.dash-fold > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.dash-fold > summary::-webkit-details-marker { display: none; }
.dash-fold[open] > summary { margin-bottom: 14px; }
.dash-fold-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--c-accent); }
.dash-fold-hint svg { width: 15px; height: 15px; transition: transform 0.2s; }
.dash-fold[open] .dash-fold-hint svg { transform: rotate(180deg); }
.dash-fold[open] .dash-fold-hint { font-size: 0; }
.dash-fold[open] .dash-fold-hint svg { font-size: 13px; }
.dash-panel-head h3 .muted { font-family: 'Noto Sans', sans-serif; font-weight: 400; font-size: 13px; }
@media (max-width: 720px) {
    .chase li { grid-template-columns: 1fr auto; }
    .chase li .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ── Phones: purpose-built cards for the main lists ──────────────────────
   The generic "label: value" card (above) is the fallback for any table.
   These four lists get a layout that reads like the thing itself: the name
   and its state first, detail underneath, no labels unless a bare value
   would be unclear. Cells are placed by column position, so if a column is
   added to one of these tables, update its grid here too. */
@media (max-width: 720px) {
    #candidatesTbody tr:not(:has(.empty-state)),
    #campaignsTbody tr:not(:has(.empty-state)),
    #invoicesTbody tr:not(:has(.empty-state)),
    #clientsTbody tr:not(:has(.empty-state)) {
        display: grid !important; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px !important;
    }
    #candidatesTbody td, #campaignsTbody td, #invoicesTbody td, #clientsTbody td {
        display: block !important; padding: 0 !important; min-height: 0 !important; text-align: left !important;
    }
    #candidatesTbody td::before, #campaignsTbody td::before, #invoicesTbody td::before, #clientsTbody td::before { display: none !important; }
    #candidatesTbody td:last-child, #campaignsTbody td:last-child, #invoicesTbody td:last-child, #clientsTbody td:last-child {
        border-top: 1px solid var(--c-border-soft); margin-top: 10px !important; padding-top: 10px !important;
    }

    /* Candidates: ☐ Name ............ [Stage] / role / email / owner · added */
    #candidatesTbody tr { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas:
        "check name stage" ". role role" ". email email" ". owner added" "actions actions actions"; }
    #candidatesTbody td:nth-child(1) { grid-area: check; }
    #candidatesTbody td:nth-child(2) { grid-area: name; font-size: 16px; font-weight: 600; }
    #candidatesTbody td:nth-child(3) { grid-area: email; font-size: 13px; color: var(--c-muted); overflow-wrap: anywhere; }
    #candidatesTbody td:nth-child(4) { grid-area: role; font-size: 14px; color: var(--c-ink-2); }
    #candidatesTbody td:nth-child(5) { grid-area: stage; justify-self: end; }
    #candidatesTbody td:nth-child(6) { grid-area: owner; font-size: 12px; color: var(--c-muted); margin-top: 6px !important; }
    #candidatesTbody td:nth-child(6)::after { content: ' · owner'; }
    #candidatesTbody td:nth-child(7) { grid-area: added; font-size: 12px; color: var(--c-muted); justify-self: end; margin-top: 6px !important; }
    #candidatesTbody td:nth-child(8) { grid-area: actions; }

    /* Campaigns: Name ............ [Status] / template ... created / from / Sent n ... m recipients */
    #campaignsTbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas:
        "name status" "template created" "from from" "sent recipients" "actions actions"; }
    #campaignsTbody td:nth-child(1) { grid-area: name; font-size: 16px; }
    #campaignsTbody td:nth-child(2) { grid-area: template; font-size: 13px; color: var(--c-ink-2); }
    #campaignsTbody td:nth-child(3) { grid-area: from; font-size: 13px; color: var(--c-muted); }
    #campaignsTbody td:nth-child(4) { grid-area: recipients; justify-self: end; font-size: 13px; color: var(--c-ink-2); margin-top: 6px !important; }
    #campaignsTbody td:nth-child(4)::before { display: inline !important; content: 'Recipients ' !important; font-size: 13px !important; font-weight: 400 !important; color: var(--c-ink-2) !important; }
    #campaignsTbody td:nth-child(5) { grid-area: sent; font-size: 13px; color: var(--c-ink-2); margin-top: 6px !important; }
    #campaignsTbody td:nth-child(5)::before { display: inline !important; content: 'Sent ' !important; font-size: 13px !important; font-weight: 400 !important; color: var(--c-ink-2) !important; }
    #campaignsTbody td:nth-child(6) { grid-area: status; justify-self: end; }
    #campaignsTbody td:nth-child(7) { grid-area: created; justify-self: end; font-size: 12px; color: var(--c-muted); }
    #campaignsTbody td:nth-child(8) { grid-area: actions; }

    /* Invoices: Client ............ £Total / number ... [Status] / [Issuer] ... Due date */
    #invoicesTbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas:
        "client total" "number status" "issuer due" "actions actions"; }
    #invoicesTbody td:nth-child(1) { grid-area: number; font-size: 13px !important; }
    #invoicesTbody td:nth-child(1) .invoice-number { font-weight: 600; color: var(--c-ink-2); }
    #invoicesTbody td:nth-child(2) { grid-area: client; font-size: 16px; font-weight: 600; }
    #invoicesTbody td:nth-child(3) { grid-area: issuer; margin-top: 6px !important; }
    #invoicesTbody td:nth-child(4), #invoicesTbody td:nth-child(5) { display: none !important; }
    #invoicesTbody td:nth-child(6) { grid-area: due; justify-self: end; font-size: 13px; color: var(--c-ink-2); margin-top: 6px !important; }
    #invoicesTbody td:nth-child(6)::before { display: inline !important; content: 'Due ' !important; font-size: 13px !important; font-weight: 400 !important; color: var(--c-muted) !important; }
    #invoicesTbody td:nth-child(7) { grid-area: total; justify-self: end; font-size: 16px; font-weight: 600; }
    #invoicesTbody td:nth-child(8) { grid-area: status; justify-self: end; text-align: right !important; }
    #invoicesTbody td:nth-child(8) .status-note { text-align: right; }
    #invoicesTbody td:nth-child(9) { grid-area: actions; }

    /* Clients: Company ............ [Issuer] / contact ... code / recipients / terms · VAT */
    #clientsTbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas:
        "company issuer" "contact code" "recipients recipients" "terms vat" "actions actions"; }
    #clientsTbody td:nth-child(1) { grid-area: code; justify-self: end; font-size: 12px; color: var(--c-muted); }
    #clientsTbody td:nth-child(2) { grid-area: company; font-size: 16px; font-weight: 600; }
    #clientsTbody td:nth-child(3) { grid-area: contact; font-size: 14px; color: var(--c-ink-2); }
    #clientsTbody td:nth-child(4) { grid-area: issuer; justify-self: end; }
    #clientsTbody td:nth-child(5) { display: none !important; }
    #clientsTbody td:nth-child(6) { grid-area: recipients; font-size: 13px; color: var(--c-muted); max-width: none !important; margin-top: 4px !important; }
    #clientsTbody td:nth-child(7) { grid-area: terms; font-size: 12px; color: var(--c-muted); margin-top: 6px !important; }
    #clientsTbody td:nth-child(7)::before { display: inline !important; content: 'Terms ' !important; font-size: 12px !important; font-weight: 400 !important; color: var(--c-muted) !important; }
    #clientsTbody td:nth-child(8) { grid-area: vat; justify-self: end; font-size: 12px; color: var(--c-muted); margin-top: 6px !important; }
    #clientsTbody td:nth-child(8)::before { display: inline !important; content: 'VAT ' !important; font-size: 12px !important; font-weight: 400 !important; color: var(--c-muted) !important; }
    #clientsTbody td:nth-child(9) { grid-area: actions; }

    /* Long names wrap inside the card rather than widening it. */
    #candidatesTbody td, #campaignsTbody td, #invoicesTbody td, #clientsTbody td { min-width: 0; overflow-wrap: anywhere; }
    #campaignsTbody .invoice-number, #invoicesTbody .invoice-number { white-space: normal; }

    /* Payslips: the name needs no "Person" label. */
    .calm .data-grid tbody td:nth-child(2)::before { display: none; }
    /* Payslips: alternate cards sit on a light cream so each person stands apart. */
    .calm .data-grid tbody tr:nth-child(even) { background: var(--c-tint); }
    .calm .data-grid tbody tr:nth-child(even) td { background: transparent !important; }
}