/* Quiver C2 Dashboard — UNC-themed design system on Pico CSS */

/* ============================================================
   1. LIGHT THEME (default)
   ============================================================ */
:root {
    /* Typography — shared across themes */
    --pico-font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --pico-line-height: 1.6;
    --pico-border-radius: 0.375rem;
}

:root,
[data-theme="light"] {
    /* Quiver design tokens */
    --q-bg: #FFFFFF;
    --q-bg-surface: #F2F5F9;
    --q-bg-surface-hover: #E8ECF2;
    --q-text: #13294B;
    --q-text-muted: #5A6A7E;
    --q-primary: #4B9CD3;
    --q-primary-hover: #3A87BD;
    --q-primary-focus: rgba(75, 156, 211, 0.2);
    --q-accent-success: #2E7D4F;
    --q-accent-danger: #C0392B;
    --q-accent-warning: #C78C06;
    --q-border: #D1D9E0;
    --q-nav-bg: #13294B;
    --q-nav-text: #FFFFFF;
    --q-shadow: 0 1px 3px rgba(19, 41, 75, 0.08);

    /* Pico overrides — light */
    --pico-primary: #4B9CD3;
    --pico-primary-hover: #3A87BD;
    --pico-primary-focus: rgba(75, 156, 211, 0.2);
    --pico-primary-inverse: #FFFFFF;
    --pico-primary-background: #4B9CD3;
    --pico-primary-background-hover: #3A87BD;
    --pico-primary-underline: rgba(75, 156, 211, 0.5);
    --pico-background-color: #FFFFFF;
    --pico-color: #13294B;
    --pico-h1-color: #13294B;
    --pico-h2-color: #13294B;
    --pico-h3-color: #13294B;
    --pico-h4-color: #13294B;
    --pico-card-background-color: #F2F5F9;
    --pico-card-sectioning-background-color: #E8ECF2;
    --pico-muted-color: #5A6A7E;
    --pico-muted-border-color: #D1D9E0;
    --pico-secondary: #5A6A7E;
    --pico-secondary-hover: #475567;
    --pico-secondary-focus: rgba(90, 106, 126, 0.2);
    --pico-secondary-inverse: #FFFFFF;
    --pico-contrast: #13294B;
    --pico-contrast-hover: #0D1F33;
    --pico-contrast-focus: rgba(19, 41, 75, 0.2);
    --pico-contrast-inverse: #FFFFFF;
    --pico-table-border-color: #D1D9E0;
    --pico-form-element-background-color: #FFFFFF;
    --pico-form-element-border-color: #D1D9E0;
    --pico-form-element-focus-color: #4B9CD3;
    --pico-form-element-color: #13294B;
    --pico-switch-background-color: #D1D9E0;
    --pico-switch-checked-background-color: #4B9CD3;
    --pico-code-background-color: #F2F5F9;
    --pico-code-color: #13294B;
    --pico-blockquote-border-color: #4B9CD3;
    --pico-blockquote-footer-color: #5A6A7E;
    --pico-mark-background-color: rgba(75, 156, 211, 0.15);
    --pico-mark-color: #13294B;
    --pico-hr-border-color: #D1D9E0;
}

/* ============================================================
   2. DARK THEME
   ============================================================ */
[data-theme="dark"] {
    --q-bg: #0B1A2E;
    --q-bg-surface: #13294B;
    --q-bg-surface-hover: #1A3460;
    --q-text: #E4E9F0;
    --q-text-muted: #8FA3B8;
    --q-primary: #4B9CD3;
    --q-primary-hover: #6DB3E0;
    --q-primary-focus: rgba(75, 156, 211, 0.25);
    --q-accent-success: #5CB85C;
    --q-accent-danger: #E74C3C;
    --q-accent-warning: #F0AD4E;
    --q-border: #1E3A5F;
    --q-nav-bg: #081426;
    --q-nav-text: #FFFFFF;
    --q-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    --pico-primary: #4B9CD3;
    --pico-primary-hover: #6DB3E0;
    --pico-primary-focus: rgba(75, 156, 211, 0.25);
    --pico-primary-inverse: #FFFFFF;
    --pico-primary-background: #4B9CD3;
    --pico-primary-background-hover: #6DB3E0;
    --pico-primary-underline: rgba(75, 156, 211, 0.5);
    --pico-background-color: #0B1A2E;
    --pico-color: #E4E9F0;
    --pico-h1-color: #E4E9F0;
    --pico-h2-color: #E4E9F0;
    --pico-h3-color: #E4E9F0;
    --pico-h4-color: #E4E9F0;
    --pico-card-background-color: #13294B;
    --pico-card-sectioning-background-color: #1A3460;
    --pico-muted-color: #8FA3B8;
    --pico-muted-border-color: #1E3A5F;
    --pico-secondary: #8FA3B8;
    --pico-secondary-hover: #A8BACA;
    --pico-secondary-focus: rgba(143, 163, 184, 0.25);
    --pico-secondary-inverse: #0B1A2E;
    --pico-contrast: #E4E9F0;
    --pico-contrast-hover: #FFFFFF;
    --pico-contrast-focus: rgba(228, 233, 240, 0.25);
    --pico-contrast-inverse: #0B1A2E;
    --pico-table-border-color: #1E3A5F;
    --pico-form-element-background-color: #13294B;
    --pico-form-element-border-color: #1E3A5F;
    --pico-form-element-focus-color: #4B9CD3;
    --pico-form-element-color: #E4E9F0;
    --pico-switch-background-color: #1E3A5F;
    --pico-switch-checked-background-color: #4B9CD3;
    --pico-code-background-color: #13294B;
    --pico-code-color: #E4E9F0;
    --pico-blockquote-border-color: #4B9CD3;
    --pico-blockquote-footer-color: #8FA3B8;
    --pico-mark-background-color: rgba(75, 156, 211, 0.2);
    --pico-mark-color: #E4E9F0;
    --pico-hr-border-color: #1E3A5F;
}

/* ============================================================
   3. THEME TRANSITION
   ============================================================ */
body,
nav,
main,
footer,
article,
table,
.request-card,
.stat-card,
.flash-success {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
code,
.event-type,
.timestamp {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

h1, h2, h3, h4 {
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* ============================================================
   5. NAV BAR (top-level site nav only)
   ============================================================ */
body > nav,
nav.container-fluid {
    background: var(--q-nav-bg);
    padding: 0.75rem 1.5rem;
    border-bottom: 2px solid var(--q-primary);
}

body > nav a,
nav.container-fluid a {
    color: var(--q-nav-text);
    opacity: 0.8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity 0.15s;
}

body > nav a:hover,
nav.container-fluid a:hover {
    color: var(--q-nav-text);
    opacity: 1;
}

nav.container-fluid strong {
    letter-spacing: 0.15em;
    color: var(--q-primary);
    font-size: 1.05rem;
}

/* ============================================================
   6. THEME TOGGLE
   ============================================================ */
.theme-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.2rem 0.5rem;
    color: var(--q-nav-text);
    transition: border-color 0.15s;
    line-height: 1;
    margin: 0;
    width: auto;
}

.theme-toggle:hover {
    border-color: var(--q-primary);
}

/* ============================================================
   7. FOOTER
   ============================================================ */
footer {
    border-top: 1px solid var(--q-border);
    padding-top: 1rem;
    margin-top: 2rem;
}

footer small {
    color: var(--q-text-muted);
}

/* ============================================================
   8. TABLES
   ============================================================ */
table {
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

thead th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--q-text-muted);
    font-weight: 600;
}

.overflow-wrapper {
    overflow-x: auto;
}

/* ============================================================
   9. STAT CARDS (Dashboard)
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    text-align: center;
    padding: 1.5rem;
    border-left: 3px solid var(--q-primary);
}

.stat-card h2 {
    font-size: 2.5rem;
    margin-bottom: 0;
    color: var(--q-primary);
    font-weight: 700;
}

.stat-card p {
    color: var(--q-text-muted);
    margin-bottom: 0;
}

/* ============================================================
   10. INJECT FORM
   ============================================================ */
.inject-form textarea {
    min-height: 8rem;
}

.team-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.25rem 1rem;
    margin-bottom: 1rem;
}

.team-checkboxes label {
    font-size: 0.9rem;
    cursor: pointer;
}

.select-all-controls {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.select-all-controls a {
    cursor: pointer;
    margin-right: 1rem;
}

/* ============================================================
   11. REQUEST CARDS
   ============================================================ */
.request-card {
    border-left: 4px solid var(--q-primary);
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--pico-card-background-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--q-shadow);
}

.request-card.resolved {
    border-left-color: var(--pico-muted-border-color);
    opacity: 0.7;
}

/* ============================================================
   12. STATUS BADGES
   ============================================================ */
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.status-badge.pending {
    background: var(--q-accent-warning);
    color: #000;
}

.status-badge.approved {
    background: var(--q-accent-success);
    color: #fff;
}

.status-badge.denied {
    background: var(--q-accent-danger);
    color: #fff;
}

/* ============================================================
   13. EVENT LOG
   ============================================================ */
.event-type {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.85rem;
}

.event-label {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   14. FLASH / SUCCESS MESSAGES
   ============================================================ */
.flash-success {
    padding: 0.75rem 1rem;
    background: var(--q-accent-success);
    color: #fff;
    border-radius: var(--pico-border-radius);
    margin-bottom: 1rem;
    font-weight: 500;
}

[data-theme="dark"] .flash-success {
    background: #2d4a2d;
    border: 1px solid var(--q-accent-success);
    color: var(--q-text);
}

/* ============================================================
   15. EXPANDABLE TEXT
   ============================================================ */
.expandable .text-full {
    display: none;
}

.expandable.open .text-short {
    display: none;
}

.expandable.open .text-full {
    display: inline;
}

.expand-link {
    cursor: pointer;
    color: var(--q-primary);
    font-size: 0.8rem;
    text-decoration: underline;
}

/* ============================================================
   16. TIMESTAMPS
   ============================================================ */
.timestamp {
    font-size: 0.8rem;
    color: var(--q-text-muted);
}

/* ============================================================
   17. DELIVERY STATUS
   ============================================================ */
.delivery-status {
    font-size: 0.8rem;
    font-weight: 600;
}

.delivery-status.delivering {
    color: var(--q-accent-warning);
}

.delivery-status.delivered {
    color: var(--q-accent-success);
}

/* ============================================================
   18. STATUS INDICATORS (bot, channels)
   ============================================================ */
.status-online {
    color: var(--q-accent-success);
    font-weight: 600;
}

.status-offline {
    color: var(--q-accent-danger);
    font-weight: 600;
}

.channel-configured {
    color: var(--q-accent-success);
}

.channel-missing {
    color: var(--q-accent-danger);
}

/* ============================================================
   19. LAYOUT UTILITIES
   ============================================================ */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.flex-row {
    display: flex;
    gap: 0.5rem;
}

.flex-center {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filter-bar label {
    margin-bottom: 0;
}

.filter-bar select {
    margin-bottom: 0;
}

.filter-bar button {
    margin-bottom: 0;
}

.icon-col {
    width: 3rem;
    text-align: center;
    font-size: 1.2rem;
}

.page-info {
    align-self: center;
}

.flex-center a[role="button"] {
    margin-bottom: 0;
}

.attach-label {
    font-size: 0.85rem;
}

.attach-label input {
    margin-top: 0.25rem;
}

.bot-status-wrapper {
    margin-bottom: 1rem;
}