/* ============================================================
   BRAWLBOX Suite Theme  —  single source of truth
   Served at: _content/Suitebox.Theme/css/brawlbox-theme.css

   Warm kraft-paper identity: coral + periwinkle + salmon on
   recycled-card stock, bold display wordmark, sticker cards,
   playful drip/blob motifs. Light AND dark modes via the
   Bootstrap `data-bs-theme` attribute.

   Token names mirror the apps' existing site.css so markup
   keeps working with a drop-in swap.
   ============================================================ */

/* ---- Brand tokens (mode-independent) ---- */
:root {
    --brand-coral: #E8534E;
    --brand-coral-deep: #C13D38;
    --brand-salmon: #F2A39C;
    --brand-periwinkle: #7E74CE;
    --brand-periwinkle-deep: #5F55B0;
    --brand-periwinkle-soft: #B6ACF0;
    --brand-kraft: #E6D5B8;
    --brand-kraft-deep: #D9BD96;
    --brand-slate: #2E2A38;
    --brand-cream: #F7EFE0;

    --primary-gradient: linear-gradient(135deg, #E8534E 0%, #F2A39C 100%);
    --accent-gradient: linear-gradient(135deg, #7E74CE 0%, #B6ACF0 100%);

    /* Neutralise Bootstrap's stock blue across the suite so nothing renders #0d6efd. */
    --bs-primary: var(--brand-coral);
    --bs-primary-rgb: 232, 83, 78;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Anton', 'Inter', sans-serif;

    --radius: 14px;
    --shadow-sticker: 0 8px 0 rgba(46, 42, 56, 0.10), 0 12px 24px rgba(46, 42, 56, 0.14);

    /* Cardboard fibre grain (inline SVG, no asset file needed). Anisotropic noise
       gives a paper-fibre direction rather than uniform static. */
    --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78 0.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

    /* Corrugated-cardboard flute lines — faint vertical ridges layered over the fibre.
       Line colour is mode-aware (dark brown on light kraft, light cream on dark) so the
       ridges stay visible in both themes. */
    --flute-line: rgba(74, 46, 16, 0.40);
    --cardboard-flutes: repeating-linear-gradient(90deg, var(--flute-line) 0 1px, transparent 1px 11px);

    /* Packing-tape top strip (inline SVG): a translucent parcel-tape band with
       slightly torn top/bottom edges, plus horizontal striations and a sheen line. */
    --packing-tape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='40'%3E%3Cpath d='M0,5 Q32.5,2.5 65,5 Q97.5,7.5 130,5 Q162.5,2.5 195,5 Q227.5,7.5 260,5 Q292.5,2.5 325,5 Q357.5,7.5 390,5 Q422.5,2.5 455,5 Q487.5,7.5 520,5 L520,35 Q487.5,37.5 455,35 Q422.5,32.5 390,35 Q357.5,37.5 325,35 Q292.5,32.5 260,35 Q227.5,37.5 195,35 Q162.5,32.5 130,35 Q97.5,37.5 65,35 Q32.5,32.5 0,35 Z' fill='%23D8B879' fill-opacity='0.92'/%3E%3Crect y='9' width='520' height='1' fill='%23FFFFFF' fill-opacity='0.22'/%3E%3Crect y='13' width='520' height='1.5' fill='%23B8965A' fill-opacity='0.45'/%3E%3Crect y='20' width='520' height='1' fill='%23B8965A' fill-opacity='0.4'/%3E%3Crect y='27' width='520' height='1.5' fill='%23B8965A' fill-opacity='0.45'/%3E%3C/svg%3E");
}

/* ---- Light mode: warm kraft brand ---- */
[data-bs-theme="light"] {
    --bg-main: #E6D5B8;
    --surface: #FBF4E6;
    --surface-2: #F2E6CE;
    --text-main: #2E2A38;
    --text-muted: #6E6678;
    --border-color: rgba(46, 42, 56, 0.16);
    --glass-bg: rgba(251, 244, 230, 0.78);
    --input-bg: rgba(46, 42, 56, 0.04);
    --paper-blend: multiply;
    --paper-opacity: 0.13;
    --tape-bright: 1.04;
    --blob-strength: 1;
    --scrollbar-track: #E6D5B8;
    --scrollbar-thumb: #C9AD83;
    --scrollbar-thumb-hover: #B89A6E;
}

/* ---- Dark mode: warm caramel/coffee brown (richer + warmer than espresso) ---- */
[data-bs-theme="dark"] {
    --bg-main: #3A2C1A;
    --surface: #2B2114;
    --surface-2: #3A2D1C;
    --text-main: #ECE1CC;
    --text-muted: #AE9F88;
    --border-color: rgba(240, 230, 210, 0.10);
    --glass-bg: rgba(48, 37, 23, 0.85);
    --input-bg: rgba(240, 230, 210, 0.05);
    --paper-blend: soft-light;
    --paper-opacity: 0.09;
    --flute-line: rgba(247, 239, 224, 0.55);
    --tape-bright: 0.70;
    --blob-strength: 0.45;
    --scrollbar-track: #271D10;
    --scrollbar-thumb: #5A4326;
    --scrollbar-thumb-hover: #6E5532;
}

/* Warm caramel gradient glow for the dark-mode page (matches the preferred look) */
[data-bs-theme="dark"] body {
    background-image: radial-gradient(circle at 70% 38%, #57411F 0%, #3A2C1A 52%, #271D10 100%);
    background-attachment: fixed;
}

/* ---- Base ---- */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-family);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Paper grain overlay (fixed, non-interactive). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--paper-texture), var(--cardboard-flutes);
    background-repeat: repeat, repeat;
    mix-blend-mode: var(--paper-blend);
    opacity: var(--paper-opacity);
    pointer-events: none;
    z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ---- Typography ---- */
h1, h2, h3, h4, .brand-wordmark {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.06;
}
h5, h6 {
    font-family: var(--font-family);
    font-weight: 700;
    letter-spacing: -0.3px;
}
.text-muted { color: var(--text-muted) !important; }

.text-primary-gradient,
.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Brand wordmark + coral underline bar ---- */
.brand-wordmark {
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    font-size: clamp(2.5rem, 8vw, 6rem);
    color: var(--text-main);
    padding-bottom: 0.18em;
}
.brand-wordmark::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 58%;
    height: 0.12em;
    border-radius: 999px;
    background: var(--primary-gradient);
}

/* ---- Decorative: packing-tape seam sealing the top toolbar to the page (opt-in).
   Add to the navbar/header element; the tape hangs flush under its bottom edge. ---- */
.brawl-tape-edge { position: relative; }
.brawl-tape-edge::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 12px);
    height: 40px;
    background-image: var(--packing-tape);
    background-repeat: repeat-x;
    background-position: top;
    background-size: 520px 40px;
    filter: brightness(var(--tape-bright, 1)) drop-shadow(0 3px 5px rgba(46, 42, 56, 0.28));
    pointer-events: none;
    z-index: 5;
}

/* ---- Decorative: soft brand blobs scattered across the whole page background.
   Fixed layer behind all content; tune/disable via --blob-strength (0 = off). ---- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--blob-strength, 1);
    background-image:
        radial-gradient(circle at 12% 16%, rgba(126, 116, 206, 0.20), transparent 22%),
        radial-gradient(circle at 86% 10%, rgba(232, 83, 78, 0.16), transparent 20%),
        radial-gradient(circle at 80% 68%, rgba(242, 163, 156, 0.16), transparent 24%),
        radial-gradient(circle at 18% 84%, rgba(126, 116, 206, 0.14), transparent 22%);
}

/* ---- Glass surfaces (also covers Radiobox's glass-* classes) ---- */
.glass, .glass-nav, .glass-modal {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}
.glass-modal, .modal-content.glass { border: 1px solid var(--border-color) !important; }
.glass-btn {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---- Cards: sticker style ---- */
.card {
    background-color: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sticker);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

.hvr-grow { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.hvr-grow:hover {
    transform: translateY(-6px) rotate(-1deg) scale(1.02);
    box-shadow: 0 14px 0 rgba(46, 42, 56, 0.12), 0 20px 36px rgba(46, 42, 56, 0.22);
    z-index: 10;
}

/* ---- Gradient utilities ---- */
.bg-primary-gradient { background: var(--primary-gradient) !important; border: none !important; color: #fff !important; }
.bg-accent-gradient  { background: var(--accent-gradient) !important; border: none !important; color: #fff !important; }

/* ---- Buttons (chunky pill, sticker shadow) ---- */
.btn {
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.btn-primary {
    background: var(--primary-gradient);
    border: none;
    color: #fff;
    box-shadow: 0 5px 0 var(--brand-coral-deep);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--brand-coral-deep), 0 10px 22px rgba(232, 83, 78, 0.4);
    color: #fff;
}
.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--brand-coral-deep);
}
.btn-outline-secondary {
    border: 2px solid var(--border-color);
    color: var(--text-muted);
}
.btn-outline-secondary:hover {
    background: rgba(126, 116, 206, 0.12);
    border-color: var(--brand-periwinkle);
    color: var(--text-main);
}
.btn-outline-light {
    border: 2px solid var(--border-color);
    color: var(--text-main);
}
.btn-outline-light:hover {
    background: var(--input-bg);
    border-color: var(--text-muted);
    color: var(--text-main);
}

/* Outline/ghost buttons get an opaque surface fill so the page's cardboard texture
   does not show through them. Solid (filled) buttons already cover the texture.
   Explicit .bg-transparent (e.g. the theme toggle on a glass navbar) still wins. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
    background-color: var(--surface);
}

/* ---- Forms ---- */
.form-control, .form-select {
    background-color: var(--input-bg) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 12px;
    color: var(--text-main) !important;
}
.form-control::placeholder { color: var(--text-muted); opacity: 0.8; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-coral) !important;
    box-shadow: 0 0 0 0.25rem rgba(232, 83, 78, 0.25) !important;
    outline: none;
}

/* ---- Navbar ---- */
.navbar { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.navbar-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* !important so it beats Bootstrap's navbar-dark/navbar-light brand colour
       (e.g. Radiobox/Gamebox use navbar-dark). Gradient wordmarks keep their fill. */
    color: var(--text-main) !important;
}

/* Navbar links + plain anchors use the brand text colour, not Bootstrap's stock blue.
   (.text-reset, .btn, and gradient wordmarks keep their own colours via higher specificity.) */
.navbar .nav-link {
    color: var(--text-main) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--brand-coral) !important;
}
a {
    color: var(--text-main);
}
a:hover {
    color: var(--brand-coral);
}

/* Breathing room so page content/titles clear the tape seam below the toolbar */
main[role="main"] {
    padding-top: 1.75rem;
}

/* ---- Dropdown ---- */
.dropdown-menu {
    background-color: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sticker);
}
.dropdown-item {
    color: var(--text-main);
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    margin: 0.2rem 0.5rem;
    width: auto;
    transition: all 0.15s ease;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--primary-gradient);
    color: #fff;
}
@media (min-width: 992px) {
    /* Open nav dropdowns on hover — but not those opted out (e.g. notification
       bells, marked .brawl-no-hover), which stay click-only. */
    .dropdown:hover:not(.brawl-no-hover) .dropdown-menu { display: block; margin-top: 0; }
}

/* ---- Badge / progress ---- */
.badge { padding: 0.45em 0.85em; font-weight: 700; border-radius: 999px; }
.badge.bg-primary { background: var(--primary-gradient) !important; }
.badge.bg-accent  { background: var(--accent-gradient) !important; color: #fff; }
.progress {
    background-color: var(--border-color);
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar { background: var(--primary-gradient); }

/* ---- Modal ---- */
.modal-content {
    background-color: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-main);
}

/* ---- Footer ---- */
footer { padding: 2rem 0; border-top: 2px solid var(--border-color); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .card, .hvr-grow, .btn { transition: none; }
    .hvr-grow:hover { transform: none; }
}