/* ==========================================================================
   THEME VARIABLES - single place to change the app's look and feel.
   Values below match the Tailwind zinc/indigo/rose/amber shades the shell
   (views/layouts/main.tt) used to reference directly as hardcoded utility
   classes - same look today, but now adjustable from here instead of
   hunting through every template. RGB triplets (no #) are for classes that
   need an alpha/opacity variant via rgba(var(--x-rgb), N).
   ========================================================================== */
:root {
    --shell-bg-rgb: 24, 24, 27;            /* zinc-900 */
    --shell-bg-elevated-rgb: 9, 9, 11;     /* zinc-950 */
    --shell-surface-rgb: 39, 39, 42;       /* zinc-800 */
    --shell-border-rgb: 39, 39, 42;        /* zinc-800 */

    --shell-text: #f4f4f5;                 /* zinc-100 */
    --shell-text-heading: #ffffff;
    --shell-text-subtle: #d4d4d8;          /* zinc-300 */
    --shell-text-muted: #a1a1aa;           /* zinc-400 */

    --shell-accent: #818cf8;               /* indigo-400 */
    --shell-accent-strong: #4f46e5;        /* indigo-600 */
    --shell-accent-strong-hover: #6366f1;  /* indigo-500 */

    --shell-danger: #fb7185;               /* rose-400 */
    --shell-danger-bg-rgb: 76, 5, 25;       /* rose-950 */

    --shell-warning: #fbbf24;              /* amber-400 */
    --shell-warning-strong: #f59e0b;       /* amber-500 */

    --shell-alert-bg: #b91c1c;             /* red-700, offline banner */
}

/* Shell surfaces/backgrounds */
.shell-bg { background-color: rgb(var(--shell-bg-rgb)); }
.shell-header-bg { background-color: rgba(var(--shell-bg-rgb), 0.8); border-color: rgba(var(--shell-border-rgb), 1); }
.shell-drawer-bg { background-color: rgba(var(--shell-bg-elevated-rgb), 0.95); border-color: rgba(var(--shell-border-rgb), 0.8); }
.shell-overlay-bg { background-color: rgba(var(--shell-bg-elevated-rgb), 0.6); }
.shell-bottomnav-bg { background-color: rgba(var(--shell-bg-rgb), 0.8); border-color: rgba(var(--shell-border-rgb), 0.8); }
.shell-badge-bg { background-color: rgb(var(--shell-surface-rgb)); border-color: rgb(var(--shell-border-rgb)); }
.shell-border { border-color: rgb(var(--shell-border-rgb)); }
.shell-hover-surface:hover { background-color: rgb(var(--shell-surface-rgb)); }
.shell-hover-bg:hover { background-color: rgb(var(--shell-bg-rgb)); }
.shell-hover-danger-bg:hover { background-color: rgba(var(--shell-danger-bg-rgb), 0.3); }
.shell-offline-banner {
    background-color: var(--shell-alert-bg);
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* Shell text colors */
.shell-text { color: var(--shell-text); }
.shell-text-heading { color: var(--shell-text-heading); }
.shell-text-subtle { color: var(--shell-text-subtle); }
.shell-text-muted { color: var(--shell-text-muted); }
.shell-hover-white:hover { color: var(--shell-text-heading); }
.shell-accent { color: var(--shell-accent); }
.shell-hover-accent:hover { color: var(--shell-accent); }
.shell-danger { color: var(--shell-danger); }
.shell-hover-danger:hover { color: var(--shell-danger); }
.shell-warning { color: var(--shell-warning); }
.shell-warning-strong { color: var(--shell-warning-strong); }

/* Shell buttons/active states */
.shell-btn-accent { background-color: var(--shell-accent-strong); color: #fff; }
.shell-btn-accent:hover { background-color: var(--shell-accent-strong-hover); }
.shell-nav-active { color: var(--shell-accent) !important; font-weight: 600; }

/* Base scaling */
html {
    font-size: 16px; /* Explicit base */
    background-color: #0f172a; /* Locks background color early to stop light flashbangs */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #f1f5f9; /* Slate-100: Soft white text base */
    -webkit-font-smoothing: antialiased;
}

/* Responsive typography */
h1 { font-size: 2.25rem; color: #ffffff; }
h2 { font-size: 1.85rem; color: #f8fafc; }
p, li, div { font-size: 1.1rem; } /* Bumping standard text up slightly for PC */

@media (max-width: 768px) {
    html {
        font-size: 14px; /* Scales everything down slightly for smaller mobile screens */
    }
}

/* Custom smooth transitions */
a, button {
    transition: all 0.2s ease-in-out;
}

/* Better form inputs for mobile (Slate Dark Theme Matching) */
input, select, textarea {
    appearance: none;
    width: 100%;
    padding: 12px;
    background-color: #1e293b; /* Slate-800 input boxes */
    color: #ffffff;
    border: 1px solid #334155; /* Slate-700 borders */
    border-radius: 8px;
    font-size: 16px; /* Prevents iOS zoom on focus */
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #0d9488; /* Teal-600 focus ring */
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

/* Dark theme optimized custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0f172a; /* Slate-900 background matching canvas */
}
::-webkit-scrollbar-thumb {
    background: #334155; /* Slate-700 grab bar */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569; /* Slate-600 grab bar hover state */
}

/* Login/Auth Specific Layout Styling */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh; /* Centers the card vertically below the nav bar */
}

.login-card {
    background: #1e293b; /* Slate-800 card base */
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid #334155;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-header i {
    font-size: 3rem;
    color: #0d9488; /* Swapped Blue to Teal-600 matching anchor elements */
    margin-bottom: 1rem;
}

.login-header h1 {
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.error-message {
    background: #451a1a; /* Dark Crimson block */
    color: #fca5a5;
    border: 1px solid #7f1d1d;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.success-message {
    background: #123329; /* Dark teal block, mirrors .error-message's crimson treatment */
    color: #6ee7b7;
    border: 1px solid #065f46;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.btn-secondary {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: #cbd5e0;
    border: 1px solid #4a5568;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 1rem;
}
.btn-secondary:hover { background: rgba(255,255,255,0.05); }

.auth-form {
    text-align: left;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #94a3b8; /* Slate-400 label typography */
}

.auth-form input {
    width: 100%;
    padding: 0.75rem;
    background-color: #0f172a; /* Slate-900 inputs inside Slate-800 login card */
    border: 1px solid #334155;
    color: white;
    border-radius: 6px;
    font-size: 1rem;
}

.btn-primary {
    width: 100%;
    background: #0d9488; /* Dynamic Teal theme buttons */
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #0f766e; /* Teal-700 deep hover overlay */
}