/* ==========================================================================
   HiveHits Design System — "Obsidian & Honey"
   --------------------------------------------------------------------------
   Single source of truth for the web UI.

   The guiding rule: honey gold is EARNED, not sprayed. It marks the primary
   action, the active nav item, and the brand — nothing else. Everything
   structural (surfaces, borders, muted text) uses the neutral obsidian ramp,
   which is what lets the gold read as special when it does appear.

   Tokens are wired into Bootstrap 5.3's own CSS variables so components
   inherit the theme natively. That is what removes the need for !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces — a warm-tinted obsidian ramp, four steps of elevation. */
    --hh-bg:            #0B0E14;
    --hh-surface:       #12161F;
    --hh-surface-2:     #181D28;
    --hh-surface-3:     #212836;
    --hh-surface-inset: #0D1017;

    /* Borders are NEUTRAL. A gold hairline on every card is what flattened
       the old hierarchy — everything shouted at the same volume. */
    --hh-border:        #242B38;
    --hh-border-strong: #333C4C;

    /* Text emphasis ramp. Muted text is desaturated slate, never gold. */
    --hh-text:          #EEF2F8;
    --hh-text-muted:    #97A3B6;
    --hh-text-subtle:   #6A7486;

    /* Brand honey — the single accent. */
    --hh-honey:         #F5A524;
    --hh-honey-bright:  #FFC554;
    --hh-honey-deep:    #C77B08;
    --hh-honey-ink:     #17110A;
    --hh-honey-rgb:     245, 165, 36;

    /* Semantic status. Deliberately not amber, so "success" and "paused"
       can never be mistaken for brand emphasis. */
    --hh-success:       #34D399;
    --hh-success-bg:    rgba(52, 211, 153, 0.12);
    --hh-danger:        #F87171;
    --hh-danger-bg:     rgba(248, 113, 113, 0.12);
    --hh-info:          #60A5FA;
    --hh-info-bg:       rgba(96, 165, 250, 0.12);
    --hh-neutral-bg:    rgba(151, 163, 182, 0.12);

    /* Elevation replaces decorative borders as the depth cue. */
    --hh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --hh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --hh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --hh-glow:      0 0 0 1px rgba(var(--hh-honey-rgb), 0.35),
                    0 6px 24px rgba(var(--hh-honey-rgb), 0.18);

    /* Radius */
    --hh-radius-sm: 8px;
    --hh-radius:    12px;
    --hh-radius-lg: 16px;
    --hh-radius-pill: 999px;

    /* Dense dashboard spacing scale */
    --hh-space-1: 4px;
    --hh-space-2: 8px;
    --hh-space-3: 12px;
    --hh-space-4: 16px;
    --hh-space-5: 24px;
    --hh-space-6: 32px;
    --hh-space-7: 48px;

    /* Type */
    --hh-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hh-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Layout */
    --hh-sidebar-w: 252px;
    --hh-topbar-h: 60px;

    --hh-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Bootstrap bridge
   Map our tokens onto Bootstrap's variables so its components theme
   themselves. Everything below this point is refinement, not overrides.
   -------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --bs-body-bg: var(--hh-bg);
    --bs-body-color: var(--hh-text);
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--hh-text-muted);
    --bs-secondary-bg: var(--hh-surface-2);
    --bs-tertiary-color: var(--hh-text-subtle);
    --bs-tertiary-bg: var(--hh-surface);
    --bs-border-color: var(--hh-border);
    --bs-border-color-translucent: var(--hh-border);

    --bs-primary: var(--hh-honey);
    --bs-primary-rgb: var(--hh-honey-rgb);
    --bs-link-color: var(--hh-honey);
    --bs-link-color-rgb: var(--hh-honey-rgb);
    --bs-link-hover-color: var(--hh-honey-bright);

    --bs-success: var(--hh-success);
    --bs-danger: var(--hh-danger);
    --bs-info: var(--hh-info);
    --bs-warning: var(--hh-honey);

    --bs-card-bg: var(--hh-surface);
    --bs-card-border-color: var(--hh-border);
    --bs-dropdown-bg: var(--hh-surface-2);
    --bs-dropdown-border-color: var(--hh-border);
    --bs-dropdown-link-color: var(--hh-text);
    --bs-dropdown-link-hover-bg: var(--hh-surface-3);
    --bs-dropdown-link-hover-color: var(--hh-text);
    --bs-modal-bg: var(--hh-surface);
    --bs-modal-border-color: var(--hh-border);
    --bs-modal-header-border-color: var(--hh-border);
    --bs-modal-footer-border-color: var(--hh-border);

    --bs-heading-color: var(--hh-text);
    --bs-code-color: var(--hh-honey-bright);
    --bs-focus-ring-color: rgba(var(--hh-honey-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

body {
    font-family: var(--hh-font);
    background-color: var(--hh-bg);
    color: var(--hh-text);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--hh-text);
}

/* Numbers line up in columns and don't jitter as they tick. */
.hh-num,
.stat-value,
td.hh-num,
.hh-metric-value {
    font-family: var(--hh-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

::selection { background: rgba(var(--hh-honey-rgb), 0.3); color: #fff; }

/* One visible, consistent focus ring everywhere. Never removed. */
:focus-visible {
    outline: 2px solid var(--hh-honey);
    outline-offset: 2px;
    border-radius: 4px;
}

a { text-decoration: none; transition: color var(--hh-transition); }

.text-muted, .text-secondary { color: var(--hh-text-muted) !important; }
.hh-text-subtle { color: var(--hh-text-subtle); }

/* Scrollbars, so they don't punch a light hole in a dark UI. */
* { scrollbar-width: thin; scrollbar-color: var(--hh-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--hh-border-strong);
    border-radius: var(--hh-radius-pill);
    border: 3px solid var(--hh-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #46516400; background: #465164; }

/* --------------------------------------------------------------------------
   4. Brand
   -------------------------------------------------------------------------- */

.hh-wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--hh-space-2);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--hh-text);
}

.hh-wordmark__mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    color: var(--hh-honey-ink);
    background: linear-gradient(145deg, var(--hh-honey-bright), var(--hh-honey));
    /* Hexagon — the hive motif, used here and in empty states only. */
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    font-size: 0.85rem;
}

.hh-wordmark__accent { color: var(--hh-honey); }

/* Faint honeycomb texture. Used behind the brand block and empty states —
   nowhere with text on top of it. */
.hh-honeycomb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23F5A524' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34L25 30.6V17.9l-11.01-6.35L3 17.9z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   5. App shell
   -------------------------------------------------------------------------- */

.hh-shell { display: flex; min-height: 100vh; }

.hh-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--hh-sidebar-w);
    background: var(--hh-surface);
    border-right: 1px solid var(--hh-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform var(--hh-transition);
}

.hh-sidebar__brand {
    height: var(--hh-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 var(--hh-space-5);
    border-bottom: 1px solid var(--hh-border);
    flex: 0 0 auto;
}

.hh-sidebar__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--hh-space-4) 0; }

.hh-nav-label {
    padding: var(--hh-space-4) var(--hh-space-5) var(--hh-space-2);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
}

.hh-nav { list-style: none; margin: 0; padding: 0 var(--hh-space-3); }

.hh-nav__link {
    display: flex;
    align-items: center;
    gap: var(--hh-space-3);
    padding: 9px var(--hh-space-3);
    margin-bottom: 2px;
    border-radius: var(--hh-radius-sm);
    color: var(--hh-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    /* 44px min touch target on coarse pointers is handled below. */
    transition: background var(--hh-transition), color var(--hh-transition);
}

.hh-nav__link i { width: 18px; font-size: 0.95rem; text-align: center; }

.hh-nav__link:hover { background: var(--hh-surface-2); color: var(--hh-text); }

/* The active item is one of the few places gold is spent. */
.hh-nav__link.is-active {
    background: rgba(var(--hh-honey-rgb), 0.11);
    color: var(--hh-honey-bright);
    font-weight: 600;
}

.hh-nav__link.is-active i { color: var(--hh-honey); }

.hh-sidebar__footer {
    flex: 0 0 auto;
    padding: var(--hh-space-4) var(--hh-space-5);
    border-top: 1px solid var(--hh-border);
    font-size: 0.75rem;
    color: var(--hh-text-subtle);
}

.hh-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-start: var(--hh-sidebar-w);
    display: flex;
    flex-direction: column;
    transition: margin var(--hh-transition);
}

.hh-topbar {
    height: var(--hh-topbar-h);
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hh-space-4);
    padding: 0 var(--hh-space-5);
    background: rgba(11, 14, 20, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hh-border);
}

.hh-content { flex: 1 1 auto; padding: var(--hh-space-5); }

@media (min-width: 1400px) {
    .hh-content { padding: var(--hh-space-5) var(--hh-space-6); }
}

.hh-footer {
    padding: var(--hh-space-4) var(--hh-space-5);
    border-top: 1px solid var(--hh-border);
    color: var(--hh-text-subtle);
    font-size: 0.8125rem;
}

.hh-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--hh-radius-sm);
    background: transparent;
    color: var(--hh-text-muted);
    cursor: pointer;
    transition: background var(--hh-transition), color var(--hh-transition);
}

.hh-icon-btn:hover { background: var(--hh-surface-2); color: var(--hh-text); }

/* Balance readout — a quiet chip, not a gold slab. The number is the point. */
.hh-balance {
    display: inline-flex;
    align-items: center;
    gap: var(--hh-space-2);
    padding: 7px var(--hh-space-4);
    border-radius: var(--hh-radius-pill);
    background: var(--hh-surface-2);
    border: 1px solid var(--hh-border);
    font-size: 0.875rem;
    color: var(--hh-text-muted);
    white-space: nowrap;
}

.hh-balance i { color: var(--hh-honey); font-size: 0.8rem; }
.hh-balance strong { color: var(--hh-text); font-weight: 700; }

.hh-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--hh-radius-pill);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--hh-honey-ink);
    background: linear-gradient(145deg, var(--hh-honey-bright), var(--hh-honey));
}

/* --------------------------------------------------------------------------
   6. Cards & surfaces
   -------------------------------------------------------------------------- */

.card {
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow-sm);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hh-border);
    padding: var(--hh-space-4) var(--hh-space-5);
    font-weight: 650;
    color: var(--hh-text);
}

.card-body { padding: var(--hh-space-5); }

/* Opt-in emphasis. Exactly one card per screen should carry this. */
.card.hh-card--feature {
    border-color: rgba(var(--hh-honey-rgb), 0.35);
    box-shadow: var(--hh-shadow-md);
}

.hh-panel {
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
}

/* --------------------------------------------------------------------------
   7. Metric tiles
   -------------------------------------------------------------------------- */

.hh-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--hh-space-4);
    margin-bottom: var(--hh-space-5);
}

.hh-metric {
    position: relative;
    padding: var(--hh-space-5);
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
    overflow: hidden;
    transition: border-color var(--hh-transition), transform var(--hh-transition);
}

.hh-metric:hover { border-color: var(--hh-border-strong); }

.hh-metric__label {
    display: flex;
    align-items: center;
    gap: var(--hh-space-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
    margin-bottom: var(--hh-space-3);
}

.hh-metric__value {
    font-family: var(--hh-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--hh-text);
}

.hh-metric__meta { margin-top: var(--hh-space-2); font-size: 0.8125rem; color: var(--hh-text-muted); }

.hh-metric__icon {
    position: absolute;
    top: var(--hh-space-4);
    right: var(--hh-space-4);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--hh-radius-sm);
    background: var(--hh-surface-2);
    color: var(--hh-text-subtle);
    font-size: 0.9rem;
}

/* The primary metric — balance — is the one tile that gets gold. */
.hh-metric--primary { border-color: rgba(var(--hh-honey-rgb), 0.3); }
.hh-metric--primary .hh-metric__value { color: var(--hh-honey-bright); }
.hh-metric--primary .hh-metric__icon {
    background: rgba(var(--hh-honey-rgb), 0.14);
    color: var(--hh-honey);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    border-radius: var(--hh-radius-sm);
    padding: 8px 16px;
    font-size: 0.875rem;
    transition: background var(--hh-transition), border-color var(--hh-transition),
                color var(--hh-transition), transform var(--hh-transition);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--hh-honey);
    --bs-btn-border-color: var(--hh-honey);
    --bs-btn-color: var(--hh-honey-ink);
    --bs-btn-hover-bg: var(--hh-honey-bright);
    --bs-btn-hover-border-color: var(--hh-honey-bright);
    --bs-btn-hover-color: var(--hh-honey-ink);
    --bs-btn-active-bg: var(--hh-honey-deep);
    --bs-btn-active-border-color: var(--hh-honey-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--hh-surface-3);
    --bs-btn-disabled-border-color: var(--hh-border);
    --bs-btn-disabled-color: var(--hh-text-subtle);
}

.btn-secondary {
    --bs-btn-bg: var(--hh-surface-2);
    --bs-btn-border-color: var(--hh-border-strong);
    --bs-btn-color: var(--hh-text);
    --bs-btn-hover-bg: var(--hh-surface-3);
    --bs-btn-hover-border-color: var(--hh-border-strong);
    --bs-btn-hover-color: var(--hh-text);
}

.btn-outline-secondary {
    --bs-btn-color: var(--hh-text-muted);
    --bs-btn-border-color: var(--hh-border-strong);
    --bs-btn-hover-bg: var(--hh-surface-2);
    --bs-btn-hover-border-color: var(--hh-border-strong);
    --bs-btn-hover-color: var(--hh-text);
}

/* Bootstrap compiles outline variants with literal Sass colours rather than
   the runtime --bs-primary, so overriding the token alone leaves these blue. */
.btn-outline-primary {
    --bs-btn-color: var(--hh-honey);
    --bs-btn-border-color: rgba(var(--hh-honey-rgb), 0.45);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(var(--hh-honey-rgb), 0.12);
    --bs-btn-hover-border-color: var(--hh-honey);
    --bs-btn-hover-color: var(--hh-honey-bright);
    --bs-btn-active-bg: rgba(var(--hh-honey-rgb), 0.2);
    --bs-btn-active-border-color: var(--hh-honey);
    --bs-btn-active-color: var(--hh-honey-bright);
}

/* Light/warning buttons have no place in this palette; alias them to the
   brand so stray usages cannot punch a hole in the dark UI. */
.btn-light, .btn-warning {
    --bs-btn-bg: var(--hh-honey);
    --bs-btn-border-color: var(--hh-honey);
    --bs-btn-color: var(--hh-honey-ink);
    --bs-btn-hover-bg: var(--hh-honey-bright);
    --bs-btn-hover-border-color: var(--hh-honey-bright);
    --bs-btn-hover-color: var(--hh-honey-ink);
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--hh-text-muted);
}

.btn-ghost:hover { background: var(--hh-surface-2); color: var(--hh-text); }

.btn-danger {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(248, 113, 113, 0.4);
    --bs-btn-color: var(--hh-danger);
    --bs-btn-hover-bg: var(--hh-danger-bg);
    --bs-btn-hover-border-color: var(--hh-danger);
    --bs-btn-hover-color: var(--hh-danger);
}

/* --------------------------------------------------------------------------
   9. Badges & pills
   -------------------------------------------------------------------------- */

.hh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--hh-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.hh-badge i { font-size: 0.7em; }

.hh-badge--success { background: var(--hh-success-bg); color: var(--hh-success); }
.hh-badge--danger  { background: var(--hh-danger-bg);  color: var(--hh-danger); }
.hh-badge--info    { background: var(--hh-info-bg);    color: var(--hh-info); }
.hh-badge--neutral { background: var(--hh-neutral-bg); color: var(--hh-text-muted); }
.hh-badge--honey   { background: rgba(var(--hh-honey-rgb), 0.14); color: var(--hh-honey-bright); }

/* Status dot — carries meaning by shape+label too, never colour alone. */
.hh-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.hh-dot--pulse { animation: hh-pulse 2s ease-in-out infinite; }

@keyframes hh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

.hh-table-wrap { overflow-x: auto; border-radius: var(--hh-radius); }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hh-text);
    --bs-table-border-color: var(--hh-border);
    --bs-table-hover-bg: var(--hh-surface-2);
    --bs-table-hover-color: var(--hh-text);
    margin-bottom: 0;
}

.table > thead th {
    background: var(--hh-surface-inset);
    border-bottom: 1px solid var(--hh-border);
    padding: var(--hh-space-3) var(--hh-space-4);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
    white-space: nowrap;
}

.table > tbody td {
    padding: var(--hh-space-4);
    border-bottom: 1px solid var(--hh-border);
    vertical-align: middle;
}

.table > tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hh-text);
    margin-bottom: 6px;
}

.form-control, .form-select {
    background: var(--hh-surface-inset);
    border: 1px solid var(--hh-border-strong);
    border-radius: var(--hh-radius-sm);
    color: var(--hh-text);
    padding: 9px var(--hh-space-3);
    font-size: 0.9rem;
    transition: border-color var(--hh-transition), box-shadow var(--hh-transition);
}

.form-control:focus, .form-select:focus {
    background: var(--hh-surface-inset);
    border-color: var(--hh-honey);
    box-shadow: 0 0 0 3px rgba(var(--hh-honey-rgb), 0.18);
    color: var(--hh-text);
}

.form-control::placeholder { color: var(--hh-text-subtle); }
.form-control:disabled, .form-select:disabled {
    background: var(--hh-surface-2);
    color: var(--hh-text-subtle);
    cursor: not-allowed;
}

.form-text { font-size: 0.8125rem; color: var(--hh-text-muted); }

.input-group-text {
    background: var(--hh-surface-2);
    border-color: var(--hh-border-strong);
    color: var(--hh-text-muted);
}

.form-check-input { background-color: var(--hh-surface-inset); border-color: var(--hh-border-strong); }
.form-check-input:checked { background-color: var(--hh-honey); border-color: var(--hh-honey); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--hh-honey-rgb), 0.18); }

.invalid-feedback, .hh-field-error {
    display: block;
    font-size: 0.8125rem;
    color: var(--hh-danger);
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   12. Alerts
   -------------------------------------------------------------------------- */

.alert {
    border-radius: var(--hh-radius);
    border: 1px solid transparent;
    padding: var(--hh-space-4) var(--hh-space-5);
    font-size: 0.9rem;
}

.alert-success { background: var(--hh-success-bg); border-color: rgba(52, 211, 153, 0.3); color: var(--hh-success); }
.alert-danger  { background: var(--hh-danger-bg);  border-color: rgba(248, 113, 113, 0.3); color: var(--hh-danger); }
.alert-info    { background: var(--hh-info-bg);    border-color: rgba(96, 165, 250, 0.3);  color: var(--hh-info); }
.alert-warning { background: rgba(var(--hh-honey-rgb), 0.12); border-color: rgba(var(--hh-honey-rgb), 0.3); color: var(--hh-honey-bright); }
.alert-secondary { background: var(--hh-neutral-bg); border-color: var(--hh-border-strong); color: var(--hh-text-muted); }

/* --------------------------------------------------------------------------
   13. Page header & empty state
   -------------------------------------------------------------------------- */

.hh-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hh-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--hh-space-5);
}

.hh-page-head__title { font-size: 1.375rem; font-weight: 700; margin: 0 0 2px; }
.hh-page-head__sub { color: var(--hh-text-muted); font-size: 0.875rem; margin: 0; }

.hh-empty {
    text-align: center;
    padding: var(--hh-space-7) var(--hh-space-5);
    border-radius: var(--hh-radius);
}

.hh-empty__mark {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--hh-space-4);
    display: grid;
    place-items: center;
    color: var(--hh-honey);
    background: rgba(var(--hh-honey-rgb), 0.1);
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    font-size: 1.35rem;
}

.hh-empty__title { font-size: 1.05rem; font-weight: 650; margin-bottom: var(--hh-space-2); }
.hh-empty__text { color: var(--hh-text-muted); font-size: 0.9rem; max-width: 42ch; margin: 0 auto var(--hh-space-5); }

/* --------------------------------------------------------------------------
   14. Misc components
   -------------------------------------------------------------------------- */

.progress {
    background: var(--hh-surface-inset);
    border-radius: var(--hh-radius-pill);
    height: 6px;
}

.progress-bar { background: var(--hh-honey); }

.dropdown-menu {
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow-lg);
    padding: 6px;
}

.dropdown-item { border-radius: 6px; padding: 8px 12px; font-size: 0.875rem; }
.dropdown-divider { border-color: var(--hh-border); }

.modal-content { border-radius: var(--hh-radius-lg); box-shadow: var(--hh-shadow-lg); }
.modal-header, .modal-footer { padding: var(--hh-space-4) var(--hh-space-5); }
.modal-body { padding: var(--hh-space-5); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: 0.6; }
.btn-close:hover { opacity: 1; }

.hh-copy-field {
    display: flex;
    align-items: center;
    gap: var(--hh-space-2);
    padding: var(--hh-space-3) var(--hh-space-4);
    background: var(--hh-surface-inset);
    border: 1px dashed var(--hh-border-strong);
    border-radius: var(--hh-radius-sm);
    font-family: var(--hh-font-mono);
    font-size: 0.85rem;
    color: var(--hh-honey-bright);
    word-break: break-all;
}

/* --------------------------------------------------------------------------
   15. Auth screens
   -------------------------------------------------------------------------- */

.hh-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--hh-space-5);
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(var(--hh-honey-rgb), 0.10), transparent 70%),
        var(--hh-bg);
}

.hh-auth__card {
    width: 100%;
    max-width: 420px;
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius-lg);
    box-shadow: var(--hh-shadow-lg);
    padding: var(--hh-space-6);
}

.hh-auth__title { font-size: 1.35rem; font-weight: 700; margin-bottom: 4px; }
.hh-auth__sub { color: var(--hh-text-muted); font-size: 0.875rem; margin-bottom: var(--hh-space-5); }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

.hh-sidebar__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1035;
}

@media (max-width: 991.98px) {
    .hh-sidebar { transform: translateX(-100%); }
    .hh-sidebar.is-open { transform: translateX(0); box-shadow: var(--hh-shadow-lg); }
    .hh-sidebar__backdrop.is-open { display: block; }
    .hh-main { margin-inline-start: 0; }
    .hh-content { padding: var(--hh-space-4); }
    .hh-metric__value { font-size: 1.5rem; }
}

@media (min-width: 992px) {
    .hh-sidebar.is-collapsed { transform: translateX(-100%); }
    .hh-main.is-wide { margin-inline-start: 0; }
}

/* Comfortable hit targets on touch devices without bloating the desktop UI. */
@media (pointer: coarse) {
    .hh-nav__link { padding-block: 12px; }
    .btn { padding-block: 11px; }
    .hh-icon-btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}