/* ============================================
   PPMan Theme System
   CSS Variables for badge colors + dark mode overrides
   Matches HANK Coder Portal pattern
   ============================================ */

/* Sticky-footer shell: keep the shared chrome footer at the viewport bottom on
   short pages and below content on tall ones. The body carries Tailwind
   `min-h-screen`; this flex column does the rest. Used by base.html (admin
   shell) and the /connect page, both of which set `class="hank-shell"`. */
body.hank-shell {
    display: flex;
    flex-direction: column;
}
body.hank-shell > main {
    flex: 1 0 auto;
}

:root {
    /* Badge colors - light mode */
    --color-badge-success-bg: #dcfce7;
    --color-badge-success-text: #166534;
    --color-badge-error-bg: #fee2e2;
    --color-badge-error-text: #991b1b;
    --color-badge-warning-bg: #fef3c7;
    --color-badge-warning-text: #92400e;
    --color-badge-info-bg: #dbeafe;
    --color-badge-info-text: #1e40af;
    --color-badge-neutral-bg: #f3f4f6;
    --color-badge-neutral-text: #374151;
    --color-badge-orange-bg: #ffedd5;
    --color-badge-orange-text: #9a3412;
    --color-badge-purple-bg: #f3e8ff;
    --color-badge-purple-text: #7c3aed;
    --color-badge-indigo-bg: #e0e7ff;
    --color-badge-indigo-text: #4338ca;
    --color-badge-teal-bg: #ccfbf1;
    --color-badge-teal-text: #0f766e;
    --color-badge-cyan-bg: #cffafe;
    --color-badge-cyan-text: #0e7490;
    --color-badge-slate-bg: #e2e8f0;
    --color-badge-slate-text: #334155;
    --color-badge-amber-bg: #fef3c7;
    --color-badge-amber-text: #78350f;
    --color-badge-sky-bg: #e0f2fe;
    --color-badge-sky-text: #075985;
    --color-badge-pink-bg: #fce7f3;
    --color-badge-pink-text: #9d174d;
}

.dark {
    /* Badge colors - dark mode (semi-transparent, matches HANK Coder Portal) */
    --color-badge-success-bg: rgba(22, 101, 52, 0.3);
    --color-badge-success-text: #86efac;
    --color-badge-error-bg: rgba(153, 27, 27, 0.3);
    --color-badge-error-text: #fca5a5;
    --color-badge-warning-bg: rgba(146, 64, 14, 0.3);
    --color-badge-warning-text: #fcd34d;
    --color-badge-info-bg: rgba(30, 64, 175, 0.3);
    --color-badge-info-text: #93c5fd;
    --color-badge-neutral-bg: #374151;
    --color-badge-neutral-text: #d1d5db;
    --color-badge-orange-bg: rgba(154, 52, 18, 0.3);
    --color-badge-orange-text: #fdba74;
    --color-badge-purple-bg: rgba(124, 58, 237, 0.3);
    --color-badge-purple-text: #c4b5fd;
    --color-badge-indigo-bg: rgba(67, 56, 202, 0.3);
    --color-badge-indigo-text: #a5b4fc;
    --color-badge-teal-bg: rgba(15, 118, 110, 0.3);
    --color-badge-teal-text: #5eead4;
    --color-badge-cyan-bg: rgba(14, 116, 144, 0.3);
    --color-badge-cyan-text: #67e8f9;
    --color-badge-slate-bg: rgba(51, 65, 85, 0.3);
    --color-badge-slate-text: #cbd5e1;
    --color-badge-amber-bg: rgba(120, 53, 15, 0.3);
    --color-badge-amber-text: #fcd34d;
    --color-badge-sky-bg: rgba(7, 89, 133, 0.3);
    --color-badge-sky-text: #7dd3fc;
    --color-badge-pink-bg: rgba(157, 23, 77, 0.3);
    --color-badge-pink-text: #f9a8d4;
}

/* Badge classes using CSS variables — auto-adapt to dark mode */
.theme-badge-success { background-color: var(--color-badge-success-bg); color: var(--color-badge-success-text); }
.theme-badge-error { background-color: var(--color-badge-error-bg); color: var(--color-badge-error-text); }
.theme-badge-warning { background-color: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.theme-badge-info { background-color: var(--color-badge-info-bg); color: var(--color-badge-info-text); }
.theme-badge-neutral { background-color: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); }
.theme-badge-orange { background-color: var(--color-badge-orange-bg); color: var(--color-badge-orange-text); }
.theme-badge-purple { background-color: var(--color-badge-purple-bg); color: var(--color-badge-purple-text); }
.theme-badge-indigo { background-color: var(--color-badge-indigo-bg); color: var(--color-badge-indigo-text); }
.theme-badge-teal { background-color: var(--color-badge-teal-bg); color: var(--color-badge-teal-text); }
.theme-badge-cyan { background-color: var(--color-badge-cyan-bg); color: var(--color-badge-cyan-text); }
.theme-badge-slate { background-color: var(--color-badge-slate-bg); color: var(--color-badge-slate-text); }
.theme-badge-amber { background-color: var(--color-badge-amber-bg); color: var(--color-badge-amber-text); }
.theme-badge-sky { background-color: var(--color-badge-sky-bg); color: var(--color-badge-sky-text); }
.theme-badge-pink { background-color: var(--color-badge-pink-bg); color: var(--color-badge-pink-text); }

/* Card shorthand — bg + rounded + shadow in light, border in dark */
.theme-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.dark .theme-card {
    background-color: #1f2937;
    box-shadow: none;
    border: 1px solid #374151;
}

/* Alert/banner dark overrides — background/border only; text handled per-element */
.dark .alert-warning { background-color: rgba(146, 64, 14, 0.15); border-color: #92400e; }
.dark .alert-error { background-color: rgba(153, 27, 27, 0.15); border-color: #991b1b; }

/* Code autocomplete dropdown */
.code-suggest-dropdown:not(:empty) { display: block; }
.code-suggest-dropdown:empty { display: none; }
.code-suggest-item[data-active="true"] { background-color: #eff6ff; }
.dark .code-suggest-item[data-active="true"] { background-color: #374151; }

/* --- Nav Dropdowns --- */
.nav-group {
    position: relative;
}

.nav-group-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #4b5563;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.dark .nav-group-btn {
    color: #d1d5db;
}

.nav-group-btn:hover,
.nav-group--active .nav-group-btn {
    background: #eff6ff;
    color: #2563eb;
}

.dark .nav-group-btn:hover,
.dark .nav-group--active .nav-group-btn {
    background: #1e3a5f;
    color: #93c5fd;
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    min-width: 170px;
    z-index: 50;
}

.dark .nav-dropdown {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.nav-group:hover .nav-dropdown,
.nav-group.is-open .nav-dropdown {
    display: block;
}

.nav-dropdown a {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    transition: background 0.1s;
}

.dark .nav-dropdown a {
    color: #d1d5db;
}

.nav-dropdown a:hover {
    background: #f3f4f6;
}

.dark .nav-dropdown a:hover {
    background: #374151;
}

.nav-dropdown a.nav-link--active {
    color: #2563eb;
    font-weight: 600;
}

.dark .nav-dropdown a.nav-link--active {
    color: #93c5fd;
}

/* --- Processing Control Pill --- */
.nav-processing-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.nav-processing-pill--active {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.dark .nav-processing-pill--active {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.nav-processing-pill--paused {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.dark .nav-processing-pill--paused {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.nav-processing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nav-processing-dot--active {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}

.nav-processing-dot--paused {
    background: #ef4444;
}

.nav-processing-label {
    font-weight: 500;
}

.nav-processing-btn {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s;
}

.nav-processing-btn--pause {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.nav-processing-btn--pause:hover {
    background: #fee2e2;
}

.dark .nav-processing-btn--pause {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.nav-processing-btn--resume {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.nav-processing-btn--resume:hover {
    background: #dcfce7;
}

.dark .nav-processing-btn--resume {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}