/* ============================================================
   Completion Cards — Global Dark Theme (Cyber Blue palette)
   Applied on top of Bootstrap 5. Does NOT touch site.css or
   _Layout.cshtml.css — those are left as-is for now.
   ============================================================ */

/* --- Palette custom properties --- */
:root {
    --cc-bg:              #0B0F1A;
    --cc-surface:         #131A2A;
    --cc-surface-elevated:#1B2440;
    --cc-primary:         #3BA7FF;
    --cc-primary-hover:   #5BB8FF;
    --cc-secondary:       #6EE7FF;
    --cc-text:            #F3F7FF;
    --cc-text-muted:      #94A3B8;
    --cc-text-dim:        #5A6A85;   /* fine print, serial numbers */
    --cc-border:          #24304A;
    --cc-success:         #22C55E;
    --cc-danger:          #FF4D6D;
    --cc-warning:         #FBBF24;

    /* RGB triplets for rgba() tints and glows — keep in sync with the hex values above */
    --cc-primary-rgb:     59, 167, 255;
    --cc-success-rgb:     34, 197, 94;
    --cc-danger-rgb:      255, 77, 109;
    --cc-warning-rgb:     251, 191, 36;

    /* Fonts */
    --cc-font-mono:       'Cascadia Code', 'Fira Code', monospace;   /* serial numbers, prices, order IDs */

    /* Type scale (add sizes here as pages need them) */
    --cc-text-xs:         0.75rem;   /* fine print */
    --cc-text-2xl:        1.5rem;    /* section titles */

    /* Spacing scale (add steps here as pages need them) */
    --cc-space-md:        1rem;
    --cc-space-lg:        1.5rem;

    /* Border radius scale */
    --cc-radius-sm:       4px;      /* inputs, small buttons, badges */
    --cc-radius-md:       8px;      /* cards, panels */
    --cc-radius-lg:       12px;     /* large feature blocks */
    --cc-radius-full:     9999px;   /* pills, avatars */

    /* Card template / collectible accents (reserved for later) */
    --cc-gold:            #AA853E;
    --cc-bronze-title:    #503820;
    --cc-card-border:     #90714F;

    /* Logo reference colors */
    --cc-logo-bg:         #0B75E7;
    --cc-logo-star:       #AA853E;
    --cc-logo-trophy:     #F5E54A;
    --cc-logo-ribbon:     #803839;

    /* Glow effect for CTAs / hover */
    --cc-glow:            0 0 12px rgba(var(--cc-primary-rgb), 0.35);
    --cc-glow-strong:     0 0 20px rgba(var(--cc-primary-rgb), 0.5);
}

/* --- Base --- */
html {
    background-color: var(--cc-bg);
    overflow-x: hidden;
}

body {
    background-color: var(--cc-bg);
    color: var(--cc-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Push footer to bottom */
body > .container,
body > main,
body > div.container {
    flex: 1 0 auto;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--cc-text);
}

p, li, td, th, label, span {
    color: var(--cc-text);
}

.text-muted,
small.text-muted {
    color: var(--cc-text-muted) !important;
}

a {
    color: var(--cc-primary);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--cc-secondary);
}

::selection {
    background: rgba(var(--cc-primary-rgb), 0.3);
    color: var(--cc-text);
}

/* --- Navbar --- */
.cc-navbar {
    background-color: var(--cc-surface);
    border-bottom: 1px solid var(--cc-border);
    padding: 0.5rem 0;
}

.cc-navbar .navbar-brand {
    color: var(--cc-text);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.cc-navbar .navbar-brand:hover {
    color: var(--cc-primary);
}

.cc-navbar .nav-link {
    color: var(--cc-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
}

.cc-navbar .nav-link:hover,
.cc-navbar .nav-link:focus {
    color: var(--cc-text);
}

.cc-navbar .nav-link.active {
    color: var(--cc-primary);
}

/* Hamburger icon for mobile */
.cc-navbar .navbar-toggler {
    border-color: var(--cc-border);
    padding: 0.25rem 0.5rem;
}

.cc-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(243,247,255,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Profile chip (logged-in user) */
.cc-profile-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--cc-surface-elevated);
    border: 1px solid var(--cc-border);
    color: var(--cc-text);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-profile-chip:hover {
    border-color: var(--cc-primary);
    box-shadow: var(--cc-glow);
    color: var(--cc-text);
    text-decoration: none;
}

.cc-profile-chip img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* Login button in navbar */
.cc-login-btn {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    background: none;
    border: none;
}

.cc-login-btn img {
    height: 35px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.cc-login-btn img:hover {
    opacity: 1;
}

/* --- Footer --- */
.cc-footer {
    background-color: var(--cc-surface);
    border-top: 1px solid var(--cc-border);
    padding: 2rem 0;
    margin-top: auto;
    flex-shrink: 0;
}

.cc-footer a {
    color: var(--cc-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

.cc-footer-brand {
    color: var(--cc-text);
    font-weight: 600;
    font-size: 0.95rem;
}

.cc-footer-copy {
    color: var(--cc-text-muted);
    font-size: 0.8rem;
    margin: 0;
}

.cc-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.cc-footer-links li a {
    font-size: 0.85rem;
}

.cc-footer-email {
    color: var(--cc-text-muted);
    font-size: 0.8rem;
}

.cc-footer-email a {
    color: var(--cc-text-muted);
}

/* --- Buttons (global overrides) --- */
.btn-primary {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cc-primary-hover);
    border-color: var(--cc-primary-hover);
    box-shadow: var(--cc-glow);
}

.btn-outline-primary {
    color: var(--cc-primary);
    border-color: var(--cc-primary);
}

.btn-outline-primary:hover {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
    color: #fff;
    box-shadow: var(--cc-glow);
}

/* --- Forms (global dark overrides) --- */
.form-control,
.form-select {
    background-color: var(--cc-surface-elevated);
    border: 1px solid var(--cc-border);
    color: var(--cc-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--cc-surface-elevated);
    border-color: var(--cc-primary);
    color: var(--cc-text);
    box-shadow: 0 0 0 0.2rem rgba(var(--cc-primary-rgb), 0.25);
}

.form-control::placeholder {
    color: var(--cc-text-muted);
}

/* --- Alerts --- */
.alert-warning {
    background-color: rgba(var(--cc-danger-rgb), 0.15);
    border-color: var(--cc-danger);
    color: var(--cc-danger);
}

.alert-success {
    background-color: rgba(var(--cc-success-rgb), 0.15);
    border-color: var(--cc-success);
    color: var(--cc-success);
}

/* --- Cards / panels (Bootstrap .card) --- */
.card {
    background-color: var(--cc-surface);
    border: 1px solid var(--cc-border);
    color: var(--cc-text);
}

.card-header {
    background-color: var(--cc-surface-elevated);
    border-bottom: 1px solid var(--cc-border);
}

/* --- Tables --- */
.table {
    color: var(--cc-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(27, 36, 64, 0.5);
    --bs-table-hover-bg: rgba(var(--cc-primary-rgb), 0.08);
    border-color: var(--cc-border);
}

/* Beta ribbon stays yellow (defined in site.css) */

/* --- Scrollbar (subtle dark styling) --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--cc-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--cc-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cc-text-muted);
}