/* ============================================================
   CHRONOSENSE — MAIN STYLESHEET
   Structural integrity pass. No redesign.
   ============================================================ */

:root {
    --color-bg: #f1f5f9;
    --color-surface: #ffffff;
    --color-border: #8fa4b8;
    --color-border-light: #d0d9e4;
    --color-text: #1e293b;
    --color-text-secondary: #475569;
    --color-text-muted: #556070;
    --color-text-faint: #64748b;
    --sidebar-bg: #0f172a;
    --sidebar-hover: #1e293b;
    --sidebar-active: #334155;
    --sidebar-text: #94a3b8;
    --sidebar-text-bright: #e2e8f0;
    --sidebar-border: #334155;
    --sidebar-width: 220px;
    --color-compliant: #059669;
    --color-compliant-bg: #ecfdf5;
    --color-info: #2563eb;
    --color-info-bg: #eff6ff;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fcd34d;
    --color-critical: #dc2626;
    --color-critical-bg: #fef2f2;
    --color-critical-border: #fca5a5;
    --color-overdue: #991b1b;
    --color-overdue-bg: #fef2f2;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --radius: 4px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    font-size: 14px; line-height: 1.5;
    color: var(--color-text); background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-info); text-decoration: none; }
a:hover { text-decoration: underline; }

.error-message {
    background: var(--color-critical-bg); color: var(--color-critical);
    padding: 10px 14px; border-radius: var(--radius);
    font-size: 13px; border-left: 3px solid var(--color-critical); margin-top: 12px;
}

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

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width); background: var(--sidebar-bg);
    position: fixed; top: 0; left: 0; height: 100vh;
    display: flex; flex-direction: column; z-index: 200;
    border-right: 1px solid var(--sidebar-border);
}
.sidebar-header {
    padding: 0px 16px;          /* was: 10px 16px */
    border-bottom: 1px solid var(--sidebar-border);
    text-align: center;
}

.sidebar-logo { height: 125px; width: auto; max-width: 100%; }

.sidebar-nav {
    flex: 1; padding: 12px 8px;
    display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-nav-spacer { flex: 1; }

.nav-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; color: var(--sidebar-text);
    font-size: 13px; font-weight: 500;
    border-radius: var(--radius); text-decoration: none; margin-bottom: 2px;
    transition: background 0.15s, color 0.15s;
}
.nav-item span { flex: 1; }
.nav-item span svg { display: block; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-bright); text-decoration: none; }
.nav-item.active { background: var(--sidebar-active); color: #ffffff; }

.nav-group { margin-top: 4px; }

.sidebar-footer {
    padding: 12px 16px; border-top: 1px solid var(--sidebar-border);
}
.sidebar-footer-org {
    font-size: 12px; font-weight: 600; color: var(--sidebar-text-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.sidebar-footer-user {
    font-size: 11px; color: var(--sidebar-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px;
}
.sidebar-logout-btn {
    display: block; width: 100%; padding: 6px 0;
    background: none; border: 1px solid #64748b;
    border-radius: var(--radius); color: var(--sidebar-text);
    font-size: 12px; font-family: inherit; cursor: pointer;
}
.sidebar-logout-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text-bright); }

/* ── Main Content ────────────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-width); flex: 1; min-height: 100vh;
    display: flex; flex-direction: column;
}

.sidebar-toggle {
    display: none; position: fixed; top: 10px; left: 10px; z-index: 300;
    background: var(--sidebar-bg); color: #fff; border: none;
    padding: 8px 12px; border-radius: var(--radius); font-size: 18px; cursor: pointer;
}

/* ── Verification Banner ─────────────────────────────────── */
.verification-banner {
    background: #fffbeb; border-bottom: 1px solid #fde68a;
    padding: 8px 32px; display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: #92400e;
}
.verification-banner-btn {
    background: none; border: 1px solid #d97706; color: #d97706;
    padding: 3px 10px; border-radius: var(--radius);
    font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.verification-banner-btn:hover:not(:disabled) { background: #fef3c7; }
.verification-banner-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   ALERT BAR — CSS kept; element removed from dashboard template.
   Classes remain available for future use.
   ============================================================ */
.alert-bar {
    padding: 10px 32px; display: flex;
    justify-content: space-between; align-items: center;
    border-bottom: 1px solid; font-size: 14px;
}
.alert-bar-left { display: flex; align-items: center; gap: 8px; }
.alert-bar-icon { font-size: 15px; }
.alert-bar-text { font-weight: 600; }
.alert-bar-right { font-size: 12px; color: #556070; }

.alert-bar-compliant { background: #f0fdf4; border-color: #c6e9d4; }
.alert-bar-compliant .alert-bar-icon { color: #166534; }
.alert-bar-compliant .alert-bar-text { color: #166534; font-weight: 500; }

.alert-bar-warning { background: #fefce8; border-color: #e5dba8; }
.alert-bar-warning .alert-bar-icon { color: #a16207; }
.alert-bar-warning .alert-bar-text { color: #854d0e; }

.alert-bar-critical { background: #fef2f2; border-color: #e5c0c0; }
.alert-bar-critical .alert-bar-icon { color: #991b1b; }
.alert-bar-critical .alert-bar-text { color: #991b1b; }

.alert-bar-overdue { background: #fef2f2; border-color: #dca0a0; }
.alert-bar-overdue .alert-bar-icon { color: #7f1d1d; }
.alert-bar-overdue .alert-bar-text { color: #7f1d1d; }

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.dashboard-columns {
    display: flex; gap: 24px;
    padding: 44px 32px; max-width: 1200px; width: 100%;
    margin: 0 auto;
    align-items: stretch;
}

/* CHANGE 3: was flex: 2 — now flex: 1 so the single remaining column
   fills the full container width after right column removal. */
.dashboard-col-left { flex: 1; min-width: 0; }

.section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text);
    margin-bottom: 14px;
    padding-left: 10px;
    border-left: 3px solid var(--sidebar-bg);
}

/* ── Attention Block ─────────────────────────────────────── */
.attention-block {
    background:    #0f172a;
    border:        1px solid #1e293b;
    border-left:   4px solid #d97706;
    border-radius: 8px;
    padding:       20px 24px;
    margin-bottom: 24px;
    box-shadow:    0 2px 8px  rgba(15, 23, 42, 0.20),
                   0 8px 24px rgba(15, 23, 42, 0.28);
}

.attention-block.attention-critical { border-left-color: #dc2626; }
.attention-block.attention-overdue  { border-left-color: #991b1b; }

.attention-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
}

.attention-text {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.attention-label {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color:          #d97706;
    line-height:    1;
}
.attention-critical .attention-label { color: #f87171; }
.attention-overdue  .attention-label { color: #fca5a5; }

.attention-message {
    font-size:   14px;
    font-weight: 500;
    color:       #e2e8f0;
    line-height: 1.4;
}

.attention-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         9px 20px;
    background:      #d97706;
    color:           #ffffff;
    border-radius:   6px;
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  0.01em;
    text-decoration: none;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      background 0.15s, box-shadow 0.15s;
}
.attention-cta:hover {
    background:      #b45309;
    color:           #ffffff;
    text-decoration: none;
    box-shadow:      0 2px 8px rgba(180, 83, 9, 0.40);
}
.attention-cta:active { background: #92400e; }

.attention-critical .attention-cta        { background: #dc2626; }
.attention-critical .attention-cta:hover  { background: #b91c1c; box-shadow: 0 2px 8px rgba(185, 28, 28, 0.40); }
.attention-critical .attention-cta:active { background: #991b1b; }

.attention-overdue .attention-cta         { background: #991b1b; }
.attention-overdue .attention-cta:hover   { background: #7f1d1d; box-shadow: 0 2px 8px rgba(127, 29, 29, 0.40); }
.attention-overdue .attention-cta:active  { background: #450a0a; }

/* ── Tool Blocks ─────────────────────────────────────────── */
.tool-blocks { display: flex; flex-direction: column; gap: 24px; }

.tool-block {
    background:      var(--color-surface);
    border:          2px solid #1e293b;
    border-radius:   10px;
    padding:         20px 20px 20px 24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22),
                0 20px 56px rgba(15, 23, 42, 0.38);
    transition:      box-shadow 0.2s ease, transform 0.2s ease;
}

.tool-block:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28),
                0 28px 64px rgba(15, 23, 42, 0.44);
    transform:   translateY(-1px);
}

.tool-block-body {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    justify-content: center;
}
.tool-block-badge {
    flex-shrink: 0;
}
.tool-block-name {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    margin-bottom: 14px;
    transition: color 0.15s;
}
.tool-block-name:hover {
    color: #334155;
    text-decoration: underline;
}
.tool-block-stats { display: flex; gap: 32px; margin-bottom: 14px; }
.tool-block-stat-label {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.3px; color: var(--color-text-muted); margin-bottom: 2px;
}
.tool-block-stat-value { font-size: 16px; font-weight: 700; color: var(--color-text); }
.tool-block-footer { display: flex; justify-content: flex-end; }

/* CHANGE 4: "Open Tool →" strengthened as primary operational action.
   font-size: 12px → 13px | font-weight: 500 → 600 | color: text-faint → text-secondary
   Remains a text link — no button conversion, no new colors, no animation. */
.tool-block-action {
    font-size: 13px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none;
}
/* CHANGE 4: hover darkens to full text color — clear, restrained. */
.tool-block-action:hover { color: var(--color-text); text-decoration: none; }

.tool-accent-warning  { border-left: 4px solid var(--color-warning); }
.tool-accent-critical { border-left: 4px solid var(--color-critical); }
.tool-accent-overdue  { border-left: 4px solid var(--color-overdue); }
.tool-block-empty, .tool-block-loading {
    padding: 32px 16px; text-align: center; color: var(--color-text-muted); font-size: 13px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.tool-block-nodata { font-size: 12px; color: var(--color-text-faint); font-style: italic; }



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

.tool-block-status {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            12px;
    flex-shrink:    0;
    width:          200px;
    background:     #0f172a;
    border-radius:  8px;
    padding:        16px 18px;
}

.tool-status-title {
    font-size:   14px;
    font-weight: 700;
    color:       #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.tool-status-monitoring {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    font-size:   15px;
    font-weight: 600;
    color:       #f1f5f9;
}

.tool-status-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    #22c55e;
    border:        none;
    flex-shrink:   0;
    animation:     tool-status-pulse 2s ease-out infinite;
}

@keyframes tool-status-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.75); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
}

/* Badge spans full width of the status panel */
.tool-block-status .tool-block-badge {
    display: block;
}

.tool-block-status .severity-badge {
    display:         flex;
    width:           100%;
    justify-content: center;
}

/* ── Severity Badges ─────────────────────────────────────── */
.severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.severity-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.severity-compliant {
    background: var(--color-compliant-bg);
    color: var(--color-compliant);
    border-color: #a7f3d0;
}
.severity-compliant::before { background: var(--color-compliant); }

.severity-info {
    background: var(--color-info-bg);
    color: var(--color-info);
    border-color: #bfdbfe;
}
.severity-info::before { background: var(--color-info); }

.severity-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: #fde68a;
}
.severity-warning::before { background: var(--color-warning); }

.severity-critical {
    background: var(--color-critical-bg);
    color: var(--color-critical);
    border-color: #fca5a5;
}
.severity-critical::before {
    background: var(--color-critical);
}

.severity-overdue {
    background: var(--color-overdue-bg);
    color: var(--color-overdue);
    border-color: #fca5a5;
}
.severity-overdue::before {
    background: var(--color-overdue);
}

.severity-unknown {
    background: var(--color-border-light);
    color: var(--color-text-faint);
    border-color: var(--color-border);
}
.severity-unknown::before { background: var(--color-text-faint); }

.severity-inactive {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #d1d5db;
}
.severity-inactive::before { background: #9ca3af; }

.tool-block.tool-accent-inactive { border-left-color: #d1d5db; }

@keyframes badge-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.65); }
}

/* ── Role Badges — Neutral, authoritative ────────────────── */
.role-badge {
    display: inline-block; padding: 2px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.role-owner  { background: #f3f4f6; color: #111827; }
.role-admin  { background: #f3f4f6; color: #374151; }
.role-member { background: #f3f4f6; color: #374151; }

/* ============================================================
   GOVERNANCE PANEL — CSS kept; element removed from dashboard
   template only. Preserved for upcoming sidebar relocation pass.
   ============================================================ */
.gov-panel {
    background: var(--color-surface); border: 2px solid #7b8ea0;
    border-radius: var(--radius); overflow: hidden;
}
.gov-panel-section { padding: 20px 20px; }
.gov-panel-divider { height: 1px; background: #c8d4e0; margin: 16px 16px; }

.gov-section-label {
    font-size:      11px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-text-secondary);
    margin-bottom:  20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #94a3b8;
    text-align:     center;
}
.gov-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         13px 0;
    font-size:       13px;
    border-bottom: 1px solid #94a3b8;
}

.gov-row:last-of-type {
    border-bottom: none;
}

.gov-key { color: var(--color-text-muted); }
.gov-value {
    color:       var(--color-text);
    font-weight: 600;
    font-size:   14px;
}

.gov-btn-action {
    display: inline-block; padding: 7px 14px;
    background: var(--sidebar-bg); color: #ffffff;
    border: none; border-radius: 6px;
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; text-align: center;
    transition: background 0.15s;
}
.gov-btn-action:not(:disabled):hover  { background: var(--sidebar-hover); }
.gov-btn-action:not(:disabled):active { background: var(--sidebar-active); }
.gov-btn-action:disabled { opacity: 0.55; cursor: not-allowed; }

.gov-subscriptions-list { list-style: none; padding: 0; margin: 0; }
.gov-subscriptions-list li {
    padding: 5px 0; font-size: 13px; color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
}
.gov-subscriptions-list li:last-child { border-bottom: none; }
.gov-sub-empty { color: var(--color-text-faint); font-style: italic; }

/* ── Activity Log ─────────────────────────────────────────────────────────── */

.activity-section {
    padding-top: 24px;
    position:    relative;
    z-index:     1;
}

.activity-list {
    background:     var(--color-surface);
    border:         2px solid #1e293b;
    border-top:     none;
    border-radius:  0 0 10px 10px;
    padding:        8px 16px 14px;
    max-height:     400px;
    overflow-y:     auto;
    display:        flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22),
                0 20px 56px rgba(15, 23, 42, 0.38);
}

.log-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid #94a3b8;
    align-items: flex-start;
}

.log-entry:last-of-type {
    border-bottom: none;
}

.log-time {
    font-size: 0.72rem;
    color: var(--color-text-faint);
    letter-spacing: 0.01em;
}

.log-body {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.log-narrative {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-top: 2px;
    margin-bottom: 20px;
}

.activity-section .settings-tabs {
    background:    #0f172a;
    border:        2px solid #1e293b;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding:       0 8px;
    margin-top:    14px !important;
    margin-bottom: 0    !important;
    position:      relative;
    z-index:       1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22),
                0 20px 56px rgba(15, 23, 42, 0.38);
}

.activity-section .settings-tab {
    color:         #94a3b8;
    border-bottom: 2px solid transparent;
    padding:       11px 18px;
    transition:    color 0.15s;
}

.activity-section .settings-tab:hover {
    color: #cbd5e1;
}

.activity-section .settings-tab.active {
    color:              #f1f5f9;
    border-bottom-color: #f1f5f9;
}

/* ── Product badge ────────────────────────────────────────────────────────── */

.log-product-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.log-badge-government {
    background: #e8f0fe;
    color: #1a56db;
}

.log-badge-platform {
    background: #f3e8ff;
    color: #7c3aed;
}

.log-badge-contractual {
    background: #e8faf0;
    color: #059669;
}

/* ── Count footer ─────────────────────────────────────────────────────────── */

.activity-count {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-faint);
    padding: 10px 0 4px;
    letter-spacing: 0.01em;
}

/* ── Show more ────────────────────────────────────────────────────────────── */

.activity-show-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 4px;
}

.activity-show-more {
    background: transparent;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    color: var(--color-text-faint);
    font-size: 0.78rem;
    padding: 5px 18px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.activity-show-more:hover {
    border-color: var(--color-text-secondary, #6b7280);
    color: var(--color-text-secondary, #6b7280);
}

/* ── Empty / loading states ───────────────────────────────────────────────── */

.activity-empty,
.activity-loading {
    color: var(--color-text-faint);
    font-size: 13px;
    padding: 8px 0;
    text-align: center;
}

/* ============================================================
   TOOL PAGE HEADER — replace the existing .tool-page-header
   block entirely
   ============================================================ */
.tool-page-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 32px; height: 100px;
    border-bottom: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
}
.tool-page-header h1 { font-size: 17px; font-weight: 700; color: #ffffff; margin: 0; }
.tool-page-org { font-size: 13px; color: var(--sidebar-text); margin-top: 2px; display: block; }
.tool-page-actions { display: flex; gap: 8px; align-items: center; }

/* Buttons sitting on the dark header need a glass treatment —
   solid navy on navy would be invisible */
.tool-page-header .btn-primary,
.tool-page-header .btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.tool-page-header .btn-primary:hover,
.tool-page-header .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   BUTTONS — replace the existing BUTTONS section entirely
   ============================================================ */
.btn-primary {
    display:       inline-block;
    padding:       10px 24px;
    margin-top:    14px;
    background:    #0f172a;
    color:         #ffffff;
    border:        1.5px solid #0f172a;
    border-radius: 8px;
    font-size:     14px;
    font-weight:   600;
    font-family:   inherit;
    letter-spacing: 0.02em;
    cursor:        pointer;
    box-shadow:    0 1px 3px rgba(15, 23, 42, 0.20),
                   0 2px 8px rgba(15, 23, 42, 0.14);
    transition:    all 0.15s ease;
}

.btn-primary:hover {
    background:  #1e293b;
    border-color: #1e293b;
    box-shadow:  0 2px 8px  rgba(15, 23, 42, 0.24),
                 0 4px 16px rgba(15, 23, 42, 0.18);
    transform:   translateY(-1px);
}

.btn-primary:active {
    background:  #334155;
    border-color: #334155;
    box-shadow:  0 1px 2px rgba(15, 23, 42, 0.12);
    transform:   translateY(1px);
}

.btn-secondary {
    display:       inline-block;
    padding:       10px 24px;
    margin-top:    14px;
    background:    #ffffff;
    color:         #0f172a;
    border:        1.5px solid #334155;
    border-radius: 8px;
    font-size:     14px;
    font-weight:   600;
    font-family:   inherit;
    letter-spacing: 0.02em;
    cursor:        pointer;
    box-shadow:    0 1px 3px rgba(15, 23, 42, 0.08);
    transition:    all 0.15s ease;
}

.btn-secondary:hover {
    background:   #f1f5f9;
    border-color: #1e293b;
    box-shadow:   0 2px 6px rgba(15, 23, 42, 0.12);
    transform:    translateY(-1px);
}

.btn-secondary:active {
    background: #e2e8f0;
    transform:  translateY(1px);
    box-shadow: none;
}

.btn-secondary:disabled {
    background:    #f1f5f9;
    color:         #94a3b8;
    border-color:  #cbd5e1;
    box-shadow:    none;
    cursor:        not-allowed;
    opacity:       0.65;
    transform:     none;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    display:         none;
    position:        fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:      rgba(15, 23, 42, 0.65);
    z-index:         500;
    align-items:     center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background:    var(--color-surface);
    border-radius: 12px;
    width:         100%;
    max-width:     440px;
    border:        1px solid #e2e8f0;
    box-shadow:    0 4px 16px  rgba(15, 23, 42, 0.14),
                   0 20px 60px rgba(15, 23, 42, 0.28);
}
.modal-header {
    padding:         16px 24px;
    border-bottom:   1px solid var(--color-border-light);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    background:      #f8fafc;
    border-radius:   12px 12px 0 0;
}

.modal-header h3 {
    font-size:   15px;
    font-weight: 700;
    color:       var(--color-text);
}

.modal-close {
    background: none; border: none; font-size: 20px;
    color: var(--color-text-muted); cursor: pointer; padding: 0 4px; line-height: 1;
}
.modal-body { padding: 20px; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; }
.modal-field input, .modal-field select {
    display: block; width: 100%; padding: 8px 10px;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: 13px; font-family: inherit; color: var(--color-text);
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.18);
}
.modal-note {
    font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
    padding: 10px 12px; background: #edf1f7;
    border-radius: var(--radius); margin-bottom: 14px;
}
.modal-footer {
    padding: 14px 20px; border-top: 1px solid var(--color-border);
    display: flex; justify-content: flex-end; gap: 8px;
}

.invite-code-label {
    font-size:     12px;
    font-weight:   600;
    color:         var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.invite-code-value {
    display:       inline-block;
    font-family:   'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size:     24px;
    font-weight:   700;
    letter-spacing: 0.18em;
    color:         var(--color-text);
    background:    #f1f5f9;
    border:        1px solid #c8d4e0;
    border-radius: 8px;
    padding:       14px 24px;
}

/* ============================================================
   PLACEHOLDER PAGES
   ============================================================ */
.page-container {
    padding: 32px;
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;    /* ← was: center */
    align-items: stretch;
}
.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: 17px; font-weight: 700; text-align: center; }
.placeholder-box {
    background:    var(--color-surface);
    border:        2px solid #1e293b;
    border-radius: 10px;
    padding:       24px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22),
                0 20px 56px rgba(15, 23, 42, 0.38);
}
.placeholder-text { color: var(--color-text-muted); font-size: 13px; }
.settings-tabs { display: flex; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
.settings-tab {
    padding: 10px 18px; font-size: 13px; font-weight: 600; font-family: inherit;
    color: var(--color-text-muted); background: none; border: none;
    border-bottom: 2px solid transparent; cursor: pointer;
}
.settings-tab:hover { color: var(--color-text); }
.settings-tab.active { color: var(--color-text); border-bottom-color: var(--color-text); }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #94a3b8; font-size: 13px;
}
.settings-row:last-child { border-bottom: none; }
.settings-label { color: var(--color-text-muted); min-width: 48%; }
.settings-value { color: var(--color-text); font-weight: 500; flex: 1; }
.settings-btn-disabled {
    padding: 8px 18px;
    background: var(--sidebar-bg); color: #ffffff;
    border: none; border-radius: 6px;
    font-size: 12px; font-weight: 600; font-family: inherit;
    cursor: not-allowed; opacity: 0.55;
}
.support-email { font-size: 15px; font-weight: 600; color: var(--color-info); }

.loading-spinner {
    width: 24px; height: 24px;
    border: 3px solid #c8d4e0; border-top-color: var(--color-info);
    border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PAGE TITLE BAR — add this as a new block after
   the PLACEHOLDER PAGES section
   ============================================================ */
.page-title-bar {
    width: 100%;
    height: 132px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* ← left aligned, matches FCC RMD */
    padding: 0 32px;               /* ← aligns with content below */
    flex-shrink: 0;
}
.page-title-bar h1 {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.01em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    /* CHANGE 3: removed orphaned .dashboard-col-right rule (element no longer in template) */
    .dashboard-columns { flex-direction: column; }
}
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .sidebar-toggle { display: block; }
    .alert-bar { padding: 10px 16px; padding-left: 50px; }
    .dashboard-columns { padding: 20px 16px; }
    .activity-section { padding: 20px 16px 16px; }
    .tool-block-stats { flex-direction: column; gap: 8px; }
    .tool-page-header { padding: 16px; flex-direction: column; gap: 12px; }
    .page-title-bar { height: 72px; padding-left: 50px; }
}

/* ============================================================
   PROFILE — user action buttons (Add / Remove, side by side)
   ============================================================ */
.gov-user-actions {
    display:         flex;
    gap:             16px;
    justify-content: center;
    flex-wrap:       wrap;
    align-items:     center;
    width:           100%;
    padding-top:     24px;
    border-top:      1px solid #94a3b8;  /* ← matches gov-row and gov-section-label */
    margin-top:      8px;
}

.gov-user-actions .btn-secondary {
    margin-top: 14px;
}

/* ============================================================
   REMOVE USER MODAL — selectable member list
   ============================================================ */
.remove-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
    transition: background 0.1s, border-color 0.1s;
}
.remove-user-item:last-child  { margin-bottom: 0; }
.remove-user-item:hover       { background: var(--color-border-light); }
.remove-user-item.selected    {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

.remove-user-checkbox {
    font-size: 16px;
    line-height: 1;
    width: 18px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.remove-user-item.selected .remove-user-checkbox { color: var(--color-info); }

.remove-user-name {
    flex: 1;
    font-weight: 500;
    color: var(--color-text);
}

#usageWrap > div:last-child {
    background:    #64748b !important;
    height:        8px    !important;
    border-radius: 6px    !important;
}

#planMeta {
    color: #374151 !important;
}

/* ============================================================
   ACTIVITY LOG — EXPAND BUTTON + FULLSCREEN OVERLAY
   ============================================================ */

.activity-expand-btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         #94a3b8;
    margin-left:   auto;
    padding:       4px 8px;
    border-radius: var(--radius);
    display:       flex;
    align-items:   center;
    line-height:   1;
    transition:    color 0.15s, background 0.15s;
}
.activity-expand-btn:hover {
    color:      #f1f5f9;
    background: rgba(255, 255, 255, 0.08);
}

.activity-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(10, 18, 32, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index:         1200;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
}

.activity-overlay-shell {
    background:     #ffffff;
    border:         2px solid #1e293b;
    border-radius:  12px;
    width:          100%;
    max-width:      900px;
    max-height:     calc(100vh - 48px);
    display:        flex;
    flex-direction: column;
    box-shadow:     0 20px 60px rgba(15, 23, 42, 0.45),
                    0 6px  20px rgba(15, 23, 42, 0.25);
    overflow:       hidden;
}

.activity-overlay-header {
    display:       flex;
    align-items:   center;
    padding:       0 16px 0 24px;
    background:    #0f172a;
    border-bottom: 1px solid #1e293b;
    flex-shrink:   0;
    gap:           12px;
}

.activity-overlay-title {
    font-size:    14px;
    font-weight:  700;
    color:        #f1f5f9;
    white-space:  nowrap;
    padding:      14px 0;
    margin-right: 4px;
}

.activity-overlay-tabs-row {
    display: flex;
    flex:    1;
}

.activity-overlay-tabs-row .settings-tab {
    color:         #94a3b8;
    border-bottom: 2px solid transparent;
    border-top:    none;
    border-left:   none;
    border-right:  none;
    padding:       14px 18px;
    background:    none;
    font-size:     13px;
    font-weight:   600;
    font-family:   inherit;
    cursor:        pointer;
    transition:    color 0.15s;
}
.activity-overlay-tabs-row .settings-tab:hover  { color: #cbd5e1; }
.activity-overlay-tabs-row .settings-tab.active {
    color:               #f1f5f9;
    border-bottom-color: #f1f5f9;
}

.activity-overlay-close {
    background:    none;
    border:        none;
    color:         #94a3b8;
    font-size:     22px;
    line-height:   1;
    cursor:        pointer;
    padding:       6px 8px;
    border-radius: var(--radius);
    flex-shrink:   0;
    transition:    color 0.15s, background 0.15s;
}
.activity-overlay-close:hover {
    color:      #f1f5f9;
    background: rgba(255, 255, 255, 0.08);
}

.activity-overlay-content {
    flex:       1;
    overflow-y: auto;
    padding:    8px 24px 20px;
}