/*
 * OneIDEX Theme Override
 * ---------------------
 * Apply on top of styles.css to match the OneIDEX brand aesthetic.
 *
 * To enable:  add this line to index.html after styles.css
 *     <link rel="stylesheet" href="theme-oneidex.css">
 *
 * To white-label for a different brand: copy this file, update the design tokens
 * in :root below, and swap the href to point at your new theme file.
 *
 * Design tokens extracted from the OneIDEX Keycloak login theme (oneidex-login.css):
 *   Primary navy:       #003866   (primary buttons, link hover color)
 *   Action blue:        #0073c8   (hover/active states, input focus)
 *   Dark navy:          #003e7e   (secondary button borders, accent links)
 *   Focus ring:         #2575fc   (keyboard focus indicator)
 *   Muted text:         #6c757d   (secondary labels, footer text)
 *   Border:             #ced4da   (input/card borders)
 *   Font:               Roboto Variable (Google Fonts via CDN)
 *   Border radius:      0.5rem    (cards), 0.375rem (inputs/buttons)
 *   Reset icon:         #3399dc   (info icon color)
 */

/* ─── Design Tokens ─────────────────────────────────────────────────────── */
:root {
    --primary-color:    #003866;  /* deep navy — primary CTAs */
    --primary-hover:    #0073c8;  /* action blue — hover/active states */
    --secondary-color:  #003e7e;  /* dark navy — secondary element borders */
    --secondary-hover:  #0073c8;
    --background:       #f8f9fa;
    --surface:          #ffffff;
    --text-primary:     #212529;
    --text-secondary:   #6c757d;
    --border-color:     #ced4da;
    --accent-color:     #003866;  /* matches primary navy */
    --surface-hover:    #f8f9fa;
    --shadow:           0 1px 6px rgba(0, 0, 0, 0.12);
    --shadow-lg:        0 4px 6px rgba(0, 0, 0, 0.10);
}

/* ─── Typography ────────────────────────────────────────────────────────── */
body {
    font-family: 'Roboto Variable', Roboto, -apple-system, BlinkMacSystemFont,
        'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Page header — uppercase brand treatment from #kc-header-wrapper */
header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
}

header .subtitle,
header #app-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

header {
    border-bottom: 3px solid var(--accent-color);
    border-radius: 12px 12px 0 0;
    background: var(--surface);
    padding: 28px 30px;
    margin-bottom: 0;
    box-shadow: none;
}

/* ─── Card / Section accent (from .card-pf: border-top accent) ───────────── */
.token-section,
.auth-section,
.info-section {
    border-top: 4px solid var(--accent-color);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow);
}

/* First section flush under the header */
.token-sections {
    margin-top: 0;
    gap: 24px;
}

/* Auth header row (logged-in state) */
.auth-header {
    border-top: 4px solid var(--accent-color);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow);
    margin-bottom: 0;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    transform: none;              /* remove lift; use shadow only */
    box-shadow: var(--shadow-lg);
}

.btn-primary {
    background: var(--primary-color);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

/* ─── Avatar ─────────────────────────────────────────────────────────────── */
.avatar {
    background: var(--primary-color);
    border-radius: 4px;           /* square-ish, matching PF avatar style */
}

/* ─── Info cards ─────────────────────────────────────────────────────────── */
.info-card {
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.info-card:hover {
    background: #e8f0fb;
    border-color: #b3c8e8;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge-valid {
    background: #dce8f5;
    color: #003866;
}

/* ─── Section headings ───────────────────────────────────────────────────── */
.token-section h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.token-section h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

/* details/summary toggle — make arrow use brand colour */
.token-section details > summary::before {
    color: var(--primary-color);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

footer a {
    color: var(--primary-color);
}

footer a:hover {
    color: var(--primary-hover);
}

/* ─── Diagnostic help section ────────────────────────────────────────────── */
.help-section {
    border-radius: 6px;
    border-color: #b3c8e8 !important;
    background: #e8f0fb !important;
}

.help-section h4 {
    color: #003866;
}