/* ========================================
   BOOTSTRAP 5 THEME CUSTOMIZATION
   vbn-game - Gothic Theme
   
   This file customizes Bootstrap 5 components and utilities
   to match the gothic aesthetic while leveraging Bootstrap's
   base functionality. Only brand-specific styling is applied here.
   ======================================== */

/* ===== TYPOGRAPHY THEME ===== */
/* Body font: single source in global.css (loaded after this file) */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-brand), 'IM Fell English', serif;
}

/* Code/Monospace - Source Code Pro (Art Bible spec) */
code,
kbd,
pre,
samp,
.code,
.monospace {
    font-family: 'Source Code Pro', 'Courier New', monospace;
}

/* ===== FORM THEME ===== */
/* Customize Bootstrap form controls to match gothic theme */
.form-control,
.form-select {
    background-color: rgba(26, 15, 15, 0.6);
    border: 2px solid rgba(139, 0, 0, 0.4);
    border-radius: 0.75rem;
    color: var(--text-light);
    font-family: var(--font-body), 'Source Serif Pro', serif;
}

textarea {
    background-color: rgba(26, 15, 15, 0.6);
}

input[type="text"] {
    background-color: rgba(26, 15, 15, 0.6);
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(26, 15, 15, 0.8);
    border-color: var(--blood-red);
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.3);
    color: var(--text-light);
}

/* Make placeholder text readable - NEVER grey/unreadable */
.form-control::placeholder {
    color: var(--text-light);
    opacity: 1;
}

/* Helper text under labels — do not use .form-text, .text-muted, or opacity utilities on copy (text-muted-dark-background.mdc) */
.vbn-form-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--vbn-text-soft);
}

/* De-emphasized inline / table secondary copy (replaces opacity-* on text in JS templates) */
.vbn-text-soft {
    color: var(--vbn-text-soft);
}

/*
 * Bootstrap’s default .text-muted (#6c757d) is illegible on the gothic dark shell.
 * Remap the utility site-wide to theme secondary body text (see text-muted-dark-background.mdc).
 * Prefer explicit .vbn-text-soft / var(--text-mid) in new markup; this keeps legacy Bootstrap classes readable.
 */
.text-muted {
    color: var(--text-mid) !important;
    opacity: 1 !important;
}

.form-control::-webkit-input-placeholder {
    color: var(--text-light);
    opacity: 1;
}

.form-control::-moz-placeholder {
    color: var(--text-light);
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: var(--text-light);
    opacity: 1;
}

/* Make default select option text readable - NEVER grey/unreadable */
.form-select option:first-child,
.form-select option[value=""] {
    color: var(--text-light);
}

.form-select option {
    background-color: rgba(26, 15, 15, 0.95);
    color: var(--text-light);
}

.form-label {
    font-family: var(--font-title), 'Libre Baskerville', serif;
    color: var(--text-light);
    font-weight: 600;
}

/* ===== ALERT THEME ===== */
/* Customize Bootstrap alerts to match gothic theme */
.alert {
    border-radius: 4px;
    font-family: var(--font-body), 'Source Serif Pro', serif;
}

.alert-danger {
    background-color: rgba(139, 0, 0, 0.3);
    border-left: 4px solid var(--blood-red);
    color: var(--text-light);
}

.alert-success {
    background-color: rgba(0, 100, 0, 0.3);
    border-left: 4px solid #228B22;
    color: #d4f5d3;
}

/* ========================================
   BUTTON THEMING (Scoped to Bootstrap classes)
   Matches existing gothic button styling without changing visuals
   ======================================== */

.btn-primary {
    background: linear-gradient(135deg, var(--blood-red) 0%, #600000 100%);
    border: 2px solid #b30000;
    color: var(--text-light);
    border-radius: 0.75rem;
    font-family: var(--font-title), 'Libre Baskerville', serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #b30000 0%, var(--blood-red) 100%);
    border-color: #b30000;
    color: var(--text-light);
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Secondary: transparent with gold border (Art Bible spec) */
.btn-secondary {
    background: transparent;
    border: 2px solid var(--muted-gold);
    color: var(--muted-gold);
    border-radius: 0.75rem;
    font-family: var(--font-title), 'Libre Baskerville', serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--muted-gold);
    color: var(--bg-dark);
    border-color: var(--muted-gold);
    box-shadow: 0 5px 20px rgba(212, 176, 109, 0.4);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* Outline primary: red border/text, fills on hover */
.btn-outline-primary {
    background: transparent;
    color: var(--blood-red);
    border: 2px solid var(--blood-red);
    border-radius: 0.75rem;
    font-family: var(--font-title), 'Libre Baskerville', serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: linear-gradient(135deg, var(--blood-red) 0%, #600000 100%);
    color: var(--text-light);
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.4);
}

.btn-outline-primary:active {
    transform: translateY(0);
}

/* Outline danger — Bootstrap default contrast fails on gothic --bs-body-bg; force light label */
.btn-outline-danger {
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--blood-red);
    border-radius: 0.75rem;
    font-family: var(--font-title), 'Libre Baskerville', serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: linear-gradient(135deg, var(--blood-red) 0%, #600000 100%);
    border-color: #b30000;
    color: var(--text-light);
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.4);
}

.btn-outline-danger:active {
    transform: translateY(0);
}

/* Danger: Art Bible spec - Dark red, shadowed, brighter red on hover */
.btn-danger {
    background: linear-gradient(135deg, #660000 0%, #4a0000 100%);
    border: 2px solid #770000;
    color: var(--text-light);
    border-radius: 0.75rem;
    font-family: var(--font-title), 'Libre Baskerville', serif;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(102, 0, 0, 0.4);
}

.btn-danger:hover,
.btn-danger:focus {
    background: linear-gradient(135deg, var(--blood-red) 0%, #660000 100%);
    border-color: #990000;
    color: var(--text-light);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 3px 10px rgba(139, 0, 0, 0.5);
    transform: translateY(-2px);
}

.btn-danger:active {
    transform: translateY(0);
}

/* Success: aligns with login success green (#228B22 family) */
.btn-success {
    background: linear-gradient(135deg, #228B22 0%, #146b14 100%);
    border: 2px solid #1e7a1e;
    color: #eaf6ea;
    border-radius: 5px;
    font-family: var(--font-title), 'Libre Baskerville', serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, #2aa52a 0%, #1e7a1e 100%);
    border-color: #1e7a1e;
    color: #ffffff;
    box-shadow: 0 5px 18px rgba(30, 122, 30, 0.35);
}

.btn-success:active {
    transform: translateY(0);
}

/* ========================================
   CARD THEMING (Bootstrap .card)
   Matches gothic panels/action/character/stat cards
   ======================================== */

.card {
    background: linear-gradient(135deg, var(--deep-maroon) 0%, var(--dusk-brown-black) 100%);
    border: 2px solid var(--blood-red);
    border-radius: 0.75rem;
    /* Art Bible spec: 0.75rem - 1rem */
    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
    color: var(--text-mid);
    transition: all 0.3s ease;
}

.card:hover:not(.disabled):not(.opacity-50) {
    transform: translateY(-5px);
    box-shadow: 0 6px 25px rgba(139, 0, 0, 0.5);
    border-color: #b30000;
}

/* Active card - Gold border (Art Bible spec) */
.card.active,
.card.card-active {
    border: 2px solid var(--muted-gold);
    box-shadow: 0 4px 15px rgba(212, 176, 109, 0.3);
}

.card.active:hover,
.card.card-active:hover {
    border-color: #e5c77d;
    box-shadow: 0 6px 25px rgba(212, 176, 109, 0.5);
}

.card-header {
    border-bottom: 1px solid rgba(139, 0, 0, 0.35);
    background: transparent;
    color: var(--text-light);
    font-family: var(--font-title), 'Libre Baskerville', serif;
    font-weight: 600;
}

.card-body {
    color: var(--text-mid);
}

.card-title {
    font-family: var(--font-title), 'Libre Baskerville', serif;
    color: var(--text-light);
}

.card-text {
    font-family: var(--font-body), 'Source Serif Pro', serif;
    color: var(--vbn-text-soft);
}

.card-footer {
    border-top: 1px solid rgba(139, 0, 0, 0.35);
    background: transparent;
    color: var(--vbn-text-soft);
}


/* ======================================== 
   NAV TABS THEMING (Bootstrap .nav-tabs)
   Match gothic theme with blood-red instead of blue
   All tabs have visible borders to look like tabs
   ======================================== */
.nav-tabs {
    border-bottom: 2px solid rgba(139, 0, 0, 0.4);
}

.nav-tabs .nav-link {
    color: var(--vbn-text-soft);
    border: 2px solid rgba(139, 0, 0, 0.3);
    border-bottom: none;
    border-radius: 0.75rem 0.75rem 0 0;
    font-family: var(--font-title), 'Libre Baskerville', serif;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    transition: all 0.3s ease;
    background: rgba(26, 15, 15, 0.4);
    margin-bottom: -2px;
}

.nav-tabs .nav-link:hover {
    color: var(--text-light);
    border-color: rgba(139, 0, 0, 0.5);
    background: rgba(139, 0, 0, 0.15);
}

.nav-tabs .nav-link.active {
    color: var(--text-light);
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.3) 0%, rgba(26, 15, 15, 0.6) 100%);
    border-color: var(--blood-red);
    border-bottom-color: transparent;
}

.nav-tabs .nav-link.active:hover {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.4) 0%, rgba(26, 15, 15, 0.7) 100%);
    border-color: #b30000;
}

.granite-background {
    width: 100%;
    height: 100vh;
    background-color: #1d1d1d;
    /* Base stone color */
    background-image:
        /* Streak 1: Sharp, bright diagonal white vein */
        linear-gradient(65deg, transparent 45%, rgba(255, 255, 255, 0.4) 46%, rgba(255, 255, 255, 0.7) 47%, transparent 48%),
        /* Streak 2: Finer, secondary white vein crossing over */
        linear-gradient(145deg, transparent 30%, rgba(255, 255, 255, 0.3) 31%, rgba(240, 245, 255, 0.5) 31.5%, transparent 32%),
        /* Cloudy dark mineral splotches for depth */
        radial-gradient(at 20% 40%, rgba(40, 45, 50, 0.6) 0px, transparent 60%),
        radial-gradient(at 80% 70%, rgba(10, 12, 15, 0.8) 0px, transparent 50%),
        /* SVG Noise layer for grainy stone texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://w3.org id='graniteNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23graniteNoise)' opacity='0.22' /%3E%3C/svg%3E");

    /* Ensures veins span the container while the noise repeats evenly */
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 120px 120px;

    /* Blends the grain and clouds together, while keeping the white veins crisp */
    background-blend-mode: overlay, overlay, multiply, multiply, normal;
}