/* RQ ERP design tokens — ARCHITECTURE.md Section 14/15 */
:root {
    --rq-primary: #1769AA;
    --rq-secondary: #00A6A6;
    --rq-dark: #172B4D;
    --rq-bg: #F5F8FC;
    --rq-surface: #FFFFFF;
    --rq-text: #172B4D;
    --rq-text-muted: #5B6B85;
    --rq-border: #E2E8F0;
    --rq-success: #1BA97A;
    --rq-warning: #E0A030;
    --rq-danger: #D64550;
    --rq-info: #3B82C4;
    --rq-sidebar-bg: #FFFFFF;
    --rq-sidebar-text: #5B6B85;
    --rq-sidebar-heading: #97A3BC;
    --rq-sidebar-active: #1769AA;
    --rq-sidebar-active-bg: #EAF2FB;
    --rq-sidebar-border: #EDF1F7;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --rq-bg: #0F1B30;
        --rq-surface: #16233C;
        --rq-text: #E7ECF5;
        --rq-text-muted: #93A2BE;
        --rq-border: #26365555;
        --rq-primary: #4A9FDB;
        --rq-secondary: #29C4C4;
        --rq-sidebar-bg: #16233C;
        --rq-sidebar-text: #93A2BE;
        --rq-sidebar-heading: #6C7C9E;
        --rq-sidebar-active: #4A9FDB;
        --rq-sidebar-active-bg: #1D2E4D;
        --rq-sidebar-border: #26365555;
    }
}

:root[data-theme="dark"] {
    --rq-bg: #0F1B30;
    --rq-surface: #16233C;
    --rq-text: #E7ECF5;
    --rq-text-muted: #93A2BE;
    --rq-border: #26365555;
    --rq-primary: #4A9FDB;
    --rq-secondary: #29C4C4;
    --rq-sidebar-bg: #16233C;
    --rq-sidebar-text: #93A2BE;
    --rq-sidebar-heading: #6C7C9E;
    --rq-sidebar-active: #4A9FDB;
    --rq-sidebar-active-bg: #1D2E4D;
    --rq-sidebar-border: #26365555;
}

body {
    background: var(--rq-bg);
    color: var(--rq-text);
    font-family: "Segoe UI", Tahoma, sans-serif;
}

a { color: var(--rq-primary); }

.rq-navbar {
    background: var(--rq-surface);
    border-bottom: 1px solid var(--rq-border);
}

.rq-sidebar {
    background: var(--rq-sidebar-bg);
    color: var(--rq-sidebar-text);
    min-height: 100vh;
    width: 264px;
    border-inline-end: 1px solid var(--rq-sidebar-border);
}

.rq-sidebar .nav-link {
    color: var(--rq-sidebar-text);
    border-radius: .6rem;
    margin-inline: .5rem;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.rq-sidebar .nav-link.active,
.rq-sidebar .nav-link:hover {
    background: var(--rq-sidebar-active-bg);
    color: var(--rq-sidebar-active);
}

.rq-nav-section {
    margin-top: .35rem;
}

.rq-nav-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--rq-sidebar-heading);
    padding: .5rem 1rem;
    cursor: pointer;
}

.rq-nav-section-has-active > .rq-nav-section-toggle {
    color: var(--rq-sidebar-active);
}

.rq-nav-section-chevron {
    display: inline-block;
    transition: transform .18s ease;
    font-size: .9rem;
}

.rq-nav-section-toggle[aria-expanded="true"] .rq-nav-section-chevron {
    transform: rotate(-90deg);
}

.rq-sidebar .nav-link.disabled {
    color: var(--rq-text-muted);
    opacity: .55;
}

.rq-sidebar .badge-soon {
    font-size: .65rem;
}

.rq-brand-mark {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.rq-brand-mark .rq-brand-logo {
    width: 34px;
    height: 34px;
    border-radius: .65rem;
    background: linear-gradient(135deg, var(--rq-primary), var(--rq-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}

.card {
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: .85rem;
}

/* Top navbar: quick-nav search, notification bell, user chip */
.rq-navbar {
    padding-block: .6rem;
}

.rq-quicknav {
    position: relative;
    width: 260px;
}

.rq-quicknav input {
    border-radius: 2rem;
    background: var(--rq-bg);
    border-color: var(--rq-border);
    padding-inline-start: 2.25rem;
}

.rq-quicknav-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: .75rem;
    transform: translateY(-50%);
    color: var(--rq-text-muted);
    pointer-events: none;
}

.rq-quicknav-results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: .6rem;
    box-shadow: 0 8px 24px rgba(23, 43, 77, .12);
    z-index: 1050;
    overflow: hidden;
}

.rq-quicknav-results a {
    display: block;
    padding: .5rem .85rem;
    font-size: .85rem;
    color: var(--rq-text);
    text-decoration: none;
}

.rq-quicknav-results a:hover,
.rq-quicknav-results a.active {
    background: var(--rq-sidebar-active-bg);
    color: var(--rq-primary);
}

.rq-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rq-bg);
    border: 1px solid var(--rq-border);
    color: var(--rq-text);
    position: relative;
    font-size: 1.05rem;
}

.rq-icon-btn .badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    font-size: .62rem;
    padding: .2rem .38rem;
}

.rq-user-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}

.rq-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--rq-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}

/* Dashboard: KPI cards */
.rq-kpi-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem;
}

.rq-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.rq-kpi-icon-primary { background: rgba(23, 105, 170, .12); color: var(--rq-primary); }
.rq-kpi-icon-success { background: rgba(27, 169, 122, .12); color: var(--rq-success); }
.rq-kpi-icon-info { background: rgba(59, 130, 196, .12); color: var(--rq-info); }
.rq-kpi-icon-warning { background: rgba(224, 160, 48, .14); color: var(--rq-warning); }
.rq-kpi-icon-secondary { background: rgba(0, 166, 166, .12); color: var(--rq-secondary); }

.rq-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.rq-kpi-delta-up { color: var(--rq-success); }
.rq-kpi-delta-down { color: var(--rq-danger); }

/* Dashboard: compact widget cards (mosaic grid) */
.rq-widget-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rq-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--rq-border);
}

.rq-widget-header h2 {
    font-size: .95rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rq-widget-body {
    padding: .9rem 1.1rem;
    flex-grow: 1;
}

.rq-widget-table {
    width: 100%;
    font-size: .82rem;
}

.rq-widget-table th {
    color: var(--rq-text-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding-block: .4rem;
    border-bottom: 1px solid var(--rq-border);
}

.rq-widget-table td {
    padding-block: .55rem;
    border-bottom: 1px solid var(--rq-border);
    vertical-align: middle;
}

.rq-widget-table tr:last-child td {
    border-bottom: none;
}

.rq-stat-row {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    margin-bottom: .85rem;
}

.rq-stat-pill {
    flex: 1 0 auto;
    min-width: 108px;
    background: var(--rq-bg);
    border-radius: .6rem;
    padding: .55rem .7rem;
}

.rq-stat-pill .rq-stat-value {
    font-weight: 700;
    font-size: 1.05rem;
}

.rq-stat-pill .rq-stat-label {
    font-size: .72rem;
    color: var(--rq-text-muted);
}

.rq-usage-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.rq-usage-row:last-child {
    margin-bottom: 0;
}

.rq-usage-icon {
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    background: var(--rq-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rq-donut-wrap {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin-inline: auto;
}

.rq-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.rq-donut-center .rq-donut-total {
    font-size: 1.5rem;
    font-weight: 700;
}

.rq-donut-center .rq-donut-label {
    font-size: .7rem;
    color: var(--rq-text-muted);
}

.rq-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-inline-end: .4rem;
}

.rq-report-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: .6rem;
    border: 1px solid var(--rq-border);
    text-decoration: none;
    color: var(--rq-text);
    font-size: .82rem;
    height: 100%;
}

.rq-report-chip:hover {
    background: var(--rq-sidebar-active-bg);
    border-color: var(--rq-primary);
    color: var(--rq-primary);
}

.btn-primary {
    background-color: var(--rq-primary);
    border-color: var(--rq-primary);
}

.btn-primary:hover {
    filter: brightness(0.92);
}

.text-rq-secondary { color: var(--rq-secondary); }
.bg-rq-success { background: var(--rq-success); }
.badge-status-active { background: var(--rq-success); }
.badge-status-trialing { background: var(--rq-info); }
.badge-status-past_due, .badge-status-suspended { background: var(--rq-warning); color: #3a2a00; }
.badge-status-cancelled, .badge-status-expired { background: var(--rq-danger); }

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-card {
    max-width: 440px;
    width: 100%;
}

.rq-brand {
    font-weight: 700;
    color: var(--rq-primary);
}