/* ============================================================
   ClaimsPro — Design System
   .NET 9 Blazor / Razor App
   ============================================================ */

/* ------------------------------------------------------------
   1. Fonts
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&family=Sora:wght@700&display=swap');

/* ------------------------------------------------------------
   2. CSS Custom Properties (Light + Dark)
   ------------------------------------------------------------ */
:root {
    /* Brand — Sapphire palette */
    --cp-blue-50:  #EEF3FD;
    --cp-blue-100: #8FB0F7;
    --cp-blue-200: #5E8FF0;
    --cp-blue-400: #2F6BFF;
    --cp-blue-600: #2056D6;
    --cp-blue-800: #14307E;
    --cp-blue-900: #0A1733;

    /* Semantic status */
    --cp-success-bg:   #EAF3DE;
    --cp-success-text: #3B6D11;
    --cp-warning-bg:   #FAEEDA;
    --cp-warning-text: #854F0B;
    --cp-danger-bg:    #FCEBEB;
    --cp-danger-text:  #A32D2D;
    --cp-info-bg:      #EEF3FD;
    --cp-info-text:    #2056D6;
    --cp-neutral-bg:   #F1EFE8;
    --cp-neutral-text: #5F5E5A;

    /* Surfaces */
    --cp-bg-page:      #F6F7FA;
    --cp-bg-primary:   #FFFFFF;
    --cp-bg-secondary: #F8F8F6;

    /* Text */
    --cp-text-primary:   #0A1733;
    --cp-text-secondary: #6B6B68;
    --cp-text-tertiary:  #9B9B98;

    /* Borders */
    --cp-border-subtle:   rgba(0,0,0,0.10);
    --cp-border-default:  rgba(0,0,0,0.15);
    --cp-border-emphasis: rgba(0,0,0,0.25);

    /* Radius */
    --cp-radius-sm: 6px;
    --cp-radius-md: 8px;
    --cp-radius-lg: 12px;
    --cp-radius-xl: 16px;
    --cp-radius-full: 9999px;

    /* Sidebar */
    --cp-sidebar-width: 230px;
    --cp-topbar-height: 52px;

    /* Typography */
    --cp-font:      'Inter', system-ui, -apple-system, sans-serif;
    --cp-font-sora: 'Sora', system-ui, sans-serif;
    --cp-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --cp-bg-page:      #111110;
        --cp-bg-primary:   #1C1C1A;
        --cp-bg-secondary: #252523;

        --cp-text-primary:   #F0EFEC;
        --cp-text-secondary: #A0A09D;
        --cp-text-tertiary:  #6B6B68;

        --cp-border-subtle:   rgba(255,255,255,0.08);
        --cp-border-default:  rgba(255,255,255,0.12);
        --cp-border-emphasis: rgba(255,255,255,0.20);

        --cp-success-bg:   #1A2E0D;
        --cp-success-text: #7AC043;
        --cp-warning-bg:   #2C1E05;
        --cp-warning-text: #F0A030;
        --cp-danger-bg:    #2A0E0E;
        --cp-danger-text:  #F07070;
        --cp-info-bg:      #0D1E35;
        --cp-info-text:    #5AA3E8;
        --cp-neutral-bg:   #2C2C2A;
        --cp-neutral-text: #A0A09D;
    }
}

/* ------------------------------------------------------------
   3. Reset / Base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--cp-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cp-text-primary);
    background: var(--cp-bg-page);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cp-blue-400); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   4. App Shell Layout
   ------------------------------------------------------------ */
.cp-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.cp-sidebar {
    width: var(--cp-sidebar-width);
    flex-shrink: 0;
    background: var(--cp-bg-primary);
    border-right: 0.5px solid var(--cp-border-subtle);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
}

.cp-sidebar-logo {
    padding: 16px 20px 14px;
    border-bottom: 0.5px solid var(--cp-border-subtle);
    flex-shrink: 0;
}

.cp-brand-logo {
    width: 100%;
    max-width: 186px;
    height: auto;
    display: block;
}

.cp-logo-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-logo-name {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--cp-font-sora);
    color: var(--cp-text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.cp-logo-sub {
    font-size: 9px;
    color: var(--cp-text-tertiary);
    font-family: var(--cp-font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.34em;
}

/* Nav */
.cp-nav {
    padding: 12px 10px;
    flex: 1;
    overflow-y: auto;
}

.cp-nav-label {
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cp-text-tertiary);
    padding: 8px 10px 4px;
}

.cp-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--cp-radius-md);
    font-size: 13px;
    color: var(--cp-text-secondary);
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 2px;
    transition: background 0.12s, color 0.12s;
}

.cp-nav-item:hover {
    background: var(--cp-bg-secondary);
    color: var(--cp-text-primary);
    text-decoration: none;
}

.cp-nav-item.active {
    background: var(--cp-blue-50);
    color: var(--cp-blue-600);
    font-weight: 500;
}

.cp-nav-item .cp-nav-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.cp-nav-badge {
    margin-left: auto;
    background: var(--cp-blue-600);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--cp-radius-full);
    line-height: 1.6;
}

/* Sidebar footer / user */
.cp-sidebar-footer {
    padding: 10px;
    border-top: 0.5px solid var(--cp-border-subtle);
    flex-shrink: 0;
}

.cp-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--cp-radius-md);
    cursor: pointer;
    transition: background 0.12s;
}

.cp-user-row:hover { background: var(--cp-bg-secondary); }

.cp-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cp-blue-100);
    color: var(--cp-blue-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.cp-user-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--cp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-user-role {
    font-size: 11px;
    color: var(--cp-text-secondary);
}

/* Main area */
.cp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Top bar */
.cp-topbar {
    height: var(--cp-topbar-height);
    background: var(--cp-bg-primary);
    border-bottom: 0.5px solid var(--cp-border-subtle);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    flex-shrink: 0;
}

.cp-topbar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-text-primary);
    flex: 1;
}

/* Page content */
.cp-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--cp-bg-page);
}

/* ------------------------------------------------------------
   5. Cards
   ------------------------------------------------------------ */
.cp-card {
    background: var(--cp-bg-primary);
    border: 0.5px solid var(--cp-border-subtle);
    border-radius: var(--cp-radius-lg);
    padding: 16px;
}

.cp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cp-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--cp-text-primary);
}

.cp-card-action {
    font-size: 12px;
    color: var(--cp-blue-600);
    cursor: pointer;
    text-decoration: none;
}

.cp-card-action:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   6. Metric Cards
   ------------------------------------------------------------ */
.cp-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.cp-metric {
    background: var(--cp-bg-primary);
    border: 0.5px solid var(--cp-border-subtle);
    border-radius: var(--cp-radius-md);
    padding: 14px 16px;
}

.cp-metric-label {
    font-size: 12px;
    color: var(--cp-text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cp-metric-value {
    font-size: 22px;
    font-weight: 500;
    color: var(--cp-text-primary);
    line-height: 1.2;
}

.cp-metric-delta {
    font-size: 11px;
    margin-top: 4px;
}

.cp-delta-up   { color: var(--cp-success-text); }
.cp-delta-down { color: var(--cp-danger-text); }

/* ------------------------------------------------------------
   7. Badges / Status Pills
   ------------------------------------------------------------ */
.cp-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--cp-radius-full);
    white-space: nowrap;
    line-height: 1.6;
}

.cp-badge-open     { background: var(--cp-info-bg);    color: var(--cp-info-text); }
.cp-badge-review   { background: var(--cp-warning-bg); color: var(--cp-warning-text); }
.cp-badge-approved { background: var(--cp-success-bg); color: var(--cp-success-text); }
.cp-badge-denied   { background: var(--cp-danger-bg);  color: var(--cp-danger-text); }
.cp-badge-closed   { background: var(--cp-neutral-bg); color: var(--cp-neutral-text); }

/* ------------------------------------------------------------
   8. Buttons
   ------------------------------------------------------------ */
.cp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 32px;
    border-radius: var(--cp-radius-md);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--cp-font);
    cursor: pointer;
    border: none;
    transition: background 0.12s, transform 0.1s;
    text-decoration: none;
    white-space: nowrap;
}

.cp-btn:active { transform: scale(0.98); }

.cp-btn-primary {
    background: var(--cp-blue-600);
    color: #fff;
}
.cp-btn-primary:hover { background: var(--cp-blue-800); color: #fff; text-decoration: none; }

.cp-btn-secondary {
    background: var(--cp-bg-primary);
    color: var(--cp-text-primary);
    border: 0.5px solid var(--cp-border-emphasis);
}
.cp-btn-secondary:hover { background: var(--cp-bg-secondary); }

.cp-btn-danger {
    background: var(--cp-danger-bg);
    color: var(--cp-danger-text);
    border: 0.5px solid var(--cp-danger-text);
}
.cp-btn-danger:hover { opacity: 0.85; }

.cp-btn-sm {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
}

/* ------------------------------------------------------------
   9. Search Box
   ------------------------------------------------------------ */
.cp-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cp-bg-secondary);
    border: 0.5px solid var(--cp-border-default);
    border-radius: var(--cp-radius-md);
    padding: 0 10px;
    height: 32px;
    min-width: 200px;
}

.cp-search input {
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: var(--cp-font);
    color: var(--cp-text-primary);
    outline: none;
    width: 100%;
}

.cp-search input::placeholder { color: var(--cp-text-tertiary); }

.cp-search-icon {
    font-size: 15px;
    color: var(--cp-text-tertiary);
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   10. Tables
   ------------------------------------------------------------ */
.cp-table-wrap {
    overflow-x: auto;
    border-radius: var(--cp-radius-lg);
    border: 0.5px solid var(--cp-border-subtle);
    background: var(--cp-bg-primary);
}

.cp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cp-table th {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 0.5px solid var(--cp-border-subtle);
    color: var(--cp-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    background: var(--cp-bg-secondary);
}

.cp-table td {
    padding: 9px 12px;
    border-bottom: 0.5px solid var(--cp-border-subtle);
    color: var(--cp-text-primary);
    vertical-align: middle;
}

.cp-table tr:last-child td { border-bottom: none; }
.cp-table tbody tr:hover td { background: var(--cp-bg-secondary); }

.cp-table .cp-td-link {
    color: var(--cp-blue-600);
    font-weight: 500;
    cursor: pointer;
}
.cp-table .cp-td-link:hover { text-decoration: underline; }

.cp-table th.sortable { cursor: pointer; user-select: none; }
.cp-table th.sortable:hover { color: var(--cp-text-primary); }

/* ------------------------------------------------------------
   11. Filter Bar
   ------------------------------------------------------------ */
.cp-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cp-filter-label {
    font-size: 12px;
    color: var(--cp-text-secondary);
}

.cp-filter-btn {
    background: var(--cp-bg-primary);
    border: 0.5px solid var(--cp-border-default);
    border-radius: var(--cp-radius-md);
    padding: 4px 12px;
    font-size: 12px;
    font-family: var(--cp-font);
    color: var(--cp-text-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.cp-filter-btn:hover {
    border-color: var(--cp-border-emphasis);
    color: var(--cp-text-primary);
}

.cp-filter-btn.active {
    background: var(--cp-blue-50);
    color: var(--cp-blue-600);
    border-color: var(--cp-blue-600);
    font-weight: 500;
}

/* ------------------------------------------------------------
   12. Form Controls
   ------------------------------------------------------------ */
.cp-form-group { margin-bottom: 14px; }

.cp-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--cp-text-secondary);
    margin-bottom: 5px;
}

.cp-input,
.cp-select,
.cp-textarea {
    width: 100%;
    font-family: var(--cp-font);
    font-size: 13px;
    color: var(--cp-text-primary);
    background: var(--cp-bg-primary);
    border: 0.5px solid var(--cp-border-emphasis);
    border-radius: var(--cp-radius-md);
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.cp-input,
.cp-select {
    height: 36px;
    padding: 0 12px;
}

.cp-textarea {
    padding: 8px 12px;
    min-height: 80px;
    resize: vertical;
}

.cp-input:focus,
.cp-select:focus,
.cp-textarea:focus {
    border-color: var(--cp-blue-600);
    box-shadow: 0 0 0 3px rgba(32, 86, 214, 0.12);
}

.cp-input::placeholder,
.cp-textarea::placeholder { color: var(--cp-text-tertiary); }

.cp-select { appearance: none; cursor: pointer; }

.cp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cp-input.is-invalid,
.cp-select.is-invalid,
.cp-textarea.is-invalid {
    border-color: var(--cp-danger-text);
}

.cp-field-error {
    font-size: 11px;
    color: var(--cp-danger-text);
    margin-top: 4px;
}

/* ------------------------------------------------------------
   13. Upload Zone
   ------------------------------------------------------------ */
.cp-upload-zone {
    border: 1px dashed var(--cp-border-emphasis);
    border-radius: var(--cp-radius-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.cp-upload-zone:hover,
.cp-upload-zone.drag-over {
    background: var(--cp-blue-50);
    border-color: var(--cp-blue-600);
}

.cp-upload-icon {
    font-size: 28px;
    color: var(--cp-text-tertiary);
    display: block;
    margin-bottom: 8px;
}

.cp-upload-text  { font-size: 13px; color: var(--cp-text-secondary); }
.cp-upload-hint  { font-size: 11px; color: var(--cp-text-tertiary); margin-top: 4px; }
.cp-upload-link  { color: var(--cp-blue-600); cursor: pointer; }

/* ------------------------------------------------------------
   14. Timeline
   ------------------------------------------------------------ */
.cp-timeline {
    position: relative;
    padding-left: 22px;
}

.cp-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--cp-border-subtle);
}

.cp-tl-item {
    position: relative;
    margin-bottom: 16px;
}

.cp-tl-item:last-child { margin-bottom: 0; }

.cp-tl-dot {
    position: absolute;
    left: -18px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid;
}

.cp-tl-dot-blue   { border-color: var(--cp-blue-600); background: var(--cp-blue-50); }
.cp-tl-dot-green  { border-color: var(--cp-success-text); background: var(--cp-success-bg); }
.cp-tl-dot-amber  { border-color: var(--cp-warning-text); background: var(--cp-warning-bg); }
.cp-tl-dot-red    { border-color: var(--cp-danger-text); background: var(--cp-danger-bg); }
.cp-tl-dot-gray   { border-color: var(--cp-border-emphasis); background: var(--cp-bg-secondary); }

.cp-tl-title { font-size: 12px; font-weight: 500; color: var(--cp-text-primary); }
.cp-tl-meta  { font-size: 11px; color: var(--cp-text-secondary); margin-top: 2px; }

/* ------------------------------------------------------------
   15. Progress Steps
   ------------------------------------------------------------ */
.cp-steps {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.cp-step {
    display: flex;
    align-items: center;
    gap: 7px;
}

.cp-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.cp-step-num.done    { background: var(--cp-success-bg); color: var(--cp-success-text); }
.cp-step-num.current { background: var(--cp-blue-600); color: #fff; }
.cp-step-num.pending { background: var(--cp-bg-secondary); color: var(--cp-text-tertiary); border: 0.5px solid var(--cp-border-default); }

.cp-step-label       { font-size: 12px; font-weight: 500; }
.cp-step-label.done    { color: var(--cp-success-text); }
.cp-step-label.current { color: var(--cp-blue-600); }
.cp-step-label.pending { color: var(--cp-text-tertiary); }

.cp-step-sep {
    flex: 1;
    height: 1px;
    background: var(--cp-border-subtle);
    margin: 0 8px;
    min-width: 16px;
}

/* ------------------------------------------------------------
   16. Notifications
   ------------------------------------------------------------ */
.cp-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--cp-border-subtle);
}

.cp-notif-item:last-child { border-bottom: none; }

.cp-notif-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--cp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.cp-notif-title { font-size: 12px; font-weight: 500; color: var(--cp-text-primary); }
.cp-notif-desc  { font-size: 11px; color: var(--cp-text-secondary); margin-top: 2px; line-height: 1.5; }
.cp-notif-time  { font-size: 10px; color: var(--cp-text-tertiary); margin-top: 3px; }

.cp-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-blue-600);
    margin-top: 5px;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   17. Utility Helpers
   ------------------------------------------------------------ */
.cp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cp-flex-end {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cp-divider {
    border: none;
    border-top: 0.5px solid var(--cp-border-subtle);
    margin: 12px 0;
}

.cp-text-muted    { color: var(--cp-text-secondary); }
.cp-text-tertiary { color: var(--cp-text-tertiary); }
.cp-text-primary  { color: var(--cp-text-primary); }
.cp-text-blue     { color: var(--cp-blue-600); }
.cp-text-success  { color: var(--cp-success-text); }
.cp-text-danger   { color: var(--cp-danger-text); }
.cp-text-warning  { color: var(--cp-warning-text); }

.cp-fw-500 { font-weight: 500; }
.cp-fs-11  { font-size: 11px; }
.cp-fs-12  { font-size: 12px; }
.cp-fs-13  { font-size: 13px; }

.cp-mb-0  { margin-bottom: 0; }
.cp-mb-8  { margin-bottom: 8px; }
.cp-mb-12 { margin-bottom: 12px; }
.cp-mb-16 { margin-bottom: 16px; }
.cp-mb-20 { margin-bottom: 20px; }

/* Blazor validation */
.validation-message { font-size: 11px; color: var(--cp-danger-text); margin-top: 3px; }
.field-validation-error { font-size: 11px; color: var(--cp-danger-text); }
.input-validation-error { border-color: var(--cp-danger-text) !important; }

/* Blazor error UI */
#blazor-error-ui {
    background: var(--cp-danger-bg);
    border-top: 0.5px solid var(--cp-danger-text);
    color: var(--cp-danger-text);
    padding: 10px 16px;
    font-size: 13px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
}

#blazor-error-ui .dismiss { cursor: pointer; font-weight: 500; float: right; }

/* ============================================================
   SapphireClaimsSystem — Integration overrides
   ============================================================ */

/* Keep Bootstrap rem-based sizing intact (Bootstrap uses 1rem = 16px by default) */
html, body { font-size: 16px; }

/* Button elements used as nav items (Settings toggle) */
button.cp-nav-item {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--cp-font);
    line-height: 1;
}

/* OpenIconic icons inside cp-nav-item — reset main.css defaults */
.cp-nav-item .oi {
    width: auto;
    font-size: 0.9rem;
    vertical-align: middle;
    top: 0;
    flex-shrink: 0;
}

/* Collapsible settings subnav */
.cp-nav-subnav {
    padding-left: 0.5rem;
    margin-left: 1.5rem;
    border-left: 1.5px solid var(--cp-border-subtle);
    margin-bottom: 4px;
    margin-top: 2px;
}

.cp-nav-subnav .cp-nav-item {
    font-size: 12px;
    padding: 4px 8px;
}

.cp-nav-subnav .cp-nav-item .oi {
    font-size: 0.75rem;
}

/* Topbar auth links and logout button */
.cp-topbar a,
.cp-topbar a:link,
.cp-topbar a:visited {
    color: var(--cp-text-secondary);
    font-size: 13px;
    text-decoration: none;
}

.cp-topbar a:hover { color: var(--cp-text-primary); text-decoration: underline; }

.cp-topbar .btn-link {
    color: var(--cp-text-secondary);
    font-size: 13px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--cp-font);
    vertical-align: baseline;
}

.cp-topbar .btn-link:hover { color: var(--cp-text-primary); text-decoration: underline; }

/* Ensure Bootstrap page content flows correctly inside cp-content */
.cp-content h1,
.cp-content h2,
.cp-content h3 {
    color: var(--cp-text-primary);
}

/* Sidebar user role text */
.cp-user-role { color: var(--cp-text-secondary); font-size: 11px; }