/* Custom styles for AgentCube Auth Demo
 *
 * Visual goal: look like a real developer side-project, not a design-system.
 * Hand-tuned, slightly inconsistent, functional but personal.
 */

:root {
    /* Unified color palette - same across ALL pages */
    --ac-bg: #0a0e1a;                    /* deep dark blue-black */
    --ac-surface: #131827;               /* slightly lighter card bg */
    --ac-surface-hover: #1a1f2e;
    --ac-border: #2d3748;                /* gray-blue border */
    --ac-border-accent: #38bdf8;         /* cyan accent */
    
    --ac-text: #e2e8f0;                  /* light gray-blue */
    --ac-text-muted: #94a3b8;            /* muted gray */
    --ac-text-subtle: #64748b;           /* very muted */
    
    --ac-primary: #06b6d4;               /* cyan-500 - main action color */
    --ac-primary-hover: #0891b2;         /* cyan-600 */
    --ac-primary-dark: #0e7490;          /* cyan-700 */
    
    --ac-secondary: #475569;              /* slate-600 */
    --ac-secondary-hover: #64748b;        /* slate-500 */
    
    --ac-success: #10b981;                /* emerald-500 */
    --ac-error: #ef4444;                  /* red-500 */
    --ac-warning: #f59e0b;                /* amber-500 */
    --ac-info: #3b82f6;                   /* blue-500 */
    
    --ac-focus: #38bdf8;                  /* cyan-400 for focus rings */
    
    /* Inconsistent spacing on purpose */
    --ac-radius: 8px;
    --ac-radius-sm: 6px;
    --ac-radius-lg: 10px;
    --ac-pad: 16px;
    --ac-pad-sm: 12px;
    --ac-pad-lg: 20px;
    --ac-pad-xl: 28px;
}

/* Override Tailwind gradients - force consistent dark background */
body {
    background: var(--ac-bg) !important;
    background-image: none !important;
    color: var(--ac-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Remove Tailwind gradient backgrounds from navs */
nav {
    background: rgba(19, 24, 39, 0.95) !important;
    backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--ac-border) !important;
}

/* Override Tailwind card backgrounds */
.bg-white\/10,
.bg-white\/5,
[class*="bg-white/"] {
    background: var(--ac-surface) !important;
    border: 1px solid var(--ac-border) !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Text selection */
::selection {
    background: rgba(6, 182, 212, 0.3);
    color: #fff;
}

/* Links */
a {
    color: var(--ac-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--ac-primary-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--ac-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Code blocks - retro terminal feel */
code {
    background: #000;
    color: #00ff88;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Courier New', Courier, monospace;
    border: 1px solid #1a1a1a;
}

pre {
    background: #000;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: var(--ac-radius);
    overflow-x: auto;
    border: 1px solid var(--ac-border);
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.5;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: none;
}

/* Contrast boosters */
.bg-gray-900,
.bg-gray-800,
[class*="bg-gray-"] {
    background: var(--ac-surface) !important;
}

.bg-gray-900 .text-gray-400,
.bg-gray-900 .text-gray-500,
.text-gray-400,
.text-gray-500 {
    color: var(--ac-text-muted) !important;
}

.text-gray-300 {
    color: var(--ac-text) !important;
}

/* Token visualization */
.token-part {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    word-break: break-word;
}

.token-header { color: #60a5fa; }
.token-payload { color: #34d399; }
.token-signature { color: #f87171; }

/* Status indicators */
.status-success { color: var(--ac-success); }
.status-error { color: var(--ac-error); }
.status-warning { color: var(--ac-warning); }
.status-info { color: var(--ac-info); }

/* Interactive cards - hand-tuned, not perfect */
.interactive-card {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-left: 4px solid var(--ac-border-accent);
    border-radius: var(--ac-radius);
    padding: var(--ac-pad-lg);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.interactive-card:hover {
    border-left-color: var(--ac-primary);
    background: var(--ac-surface-hover);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
}

/* Buttons - less polished, more functional */
.btn-primary,
.btn-secondary,
.btn-danger,
.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--ac-radius);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    border: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.copy-btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--ac-primary);
    color: #000;
    padding: 0.6rem 1.2rem;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.btn-primary:hover {
    background: var(--ac-primary-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--ac-text);
    padding: 0.6rem 1.2rem;
    border: 1.5px solid var(--ac-border);
}

.btn-secondary:hover {
    background: var(--ac-surface-hover);
    border-color: var(--ac-border-accent);
    color: var(--ac-primary);
}

.btn-danger {
    background: var(--ac-error);
    color: #fff;
    padding: 0.6rem 1.2rem;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.copy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Focus states */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.copy-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--ac-focus);
    outline-offset: 2px;
}

/* Form inputs - retro terminal style */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    width: 100%;
    background: #0a0e1a;
    color: var(--ac-text);
    border: 1.5px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    padding: 0.6rem 0.9rem;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.15s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--ac-text-subtle);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ac-primary);
    background: #131827;
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* Loading spinner */
.spinner {
    border: 3px solid rgba(56, 189, 248, 0.2);
    border-top: 3px solid var(--ac-primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade in */
.fade-in {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Copy button */
.copy-btn {
    background: var(--ac-surface);
    color: var(--ac-text);
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
    font-weight: 600;
    border: 1px solid var(--ac-border);
}

.copy-btn:hover {
    background: var(--ac-surface-hover);
    border-color: var(--ac-primary);
    color: var(--ac-primary);
}

/* JSON viewer */
.json-viewer {
    background: #000;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: var(--ac-radius);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    border: 1px solid var(--ac-border);
    line-height: 1.6;
}

/* Policy decision visualization */
.policy-allow,
.policy-deny {
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--ac-radius-sm);
    padding: 0.75rem 1rem;
}

.policy-allow {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--ac-success);
    color: var(--ac-success);
}

.policy-deny {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--ac-error);
    color: var(--ac-error);
}

/* Token expiration countdown */
.countdown {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.countdown.expiring { color: var(--ac-warning); }
.countdown.expired { color: var(--ac-error); }

/* Override Tailwind text colors to match our palette */
.text-purple-300,
.text-purple-400,
.text-indigo-300,
.text-indigo-400,
.text-blue-300,
.text-blue-400,
.text-green-300,
.text-green-400,
.text-yellow-300,
.text-yellow-400,
.text-red-300,
.text-red-400 {
    color: var(--ac-text) !important;
}

/* Make accent colors consistent */
.text-purple-300,
.text-indigo-300,
.text-blue-300 {
    color: var(--ac-primary) !important;
}

.text-green-300,
.text-green-400 {
    color: var(--ac-success) !important;
}

.text-yellow-300,
.text-yellow-400 {
    color: var(--ac-warning) !important;
}

.text-red-300,
.text-red-400 {
    color: var(--ac-error) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .interactive-card {
        padding: var(--ac-pad);
        border-left-width: 3px;
    }
    
    .token-part {
        font-size: 0.75rem;
    }
    
    body {
        font-size: 14px;
    }
}