/* ================================================
   MAG 911 BRAND THEME v2
   Gold background, Grey tables, Green QR,
   Black navbar, Teal accents, Checkered flag
   ================================================ */

:root {
    /* Gold background shades */
    --mag-gold-1: #f2d264;
    --mag-gold-2: #d4af37;
    --mag-gold-3: #a97e12;

    --mag-black: #0b0b0d;
    --mag-grey-bg: #dcdcdc;
    --mag-grey-line: #bdbdbd;
    --mag-ink: #161616;
    --mag-teal: #18a7a7;
    --mag-teal-dark: #0d6f6f;
    --mag-green-3: #2c7a17;

    /* Silver gradient for navbar (on black) */
    --grad-silver-light: linear-gradient(180deg, #ffffff 0%, #c9ccd1 40%, #8f959b 55%, #e8eaed 100%);

    /* Dark steel gradient for headings (on light) */
    --grad-steel-dark: linear-gradient(180deg, #4a4a4a 0%, #8a8a8a 40%, #2b2b2b 55%, #6e6e6e 100%);

    /* Teal gradients */
    --grad-teal-light: linear-gradient(180deg, #7fd4d4 0%, #18a7a7 55%, #0d6f6f 100%);
    --grad-teal-strong: linear-gradient(180deg, #0d6f6f 0%, #18a7a7 60%, #0a5a5a 100%);

    /* Green gradient for QR button */
    --grad-green: linear-gradient(180deg, #7ed957 0%, #3fa324 60%, #2c7a17 100%);
}

body {
    background: linear-gradient(180deg, var(--mag-gold-1) 0%, var(--mag-gold-2) 45%, var(--mag-gold-3) 100%);
    background-attachment: fixed;
    color: var(--mag-ink);
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* ---------- NAVBAR (stays black so logo pops) ---------- */
.mag-navbar {
    background: linear-gradient(180deg, #26272a 0%, #0b0b0d 100%);
    border-bottom: 1px solid #3a3d40;
}

.mag-navbar .logo-img {
    height: 48px;
}

.mag-title {
    font-weight: 800;
    font-style: italic;
    letter-spacing: 1px;
}

.t-silver {
    background: var(--grad-silver-light);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.t-teal {
    background: var(--grad-teal-light);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Headings inside the page get dark steel instead of silver */
main .t-silver {
    background: var(--grad-steel-dark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

main .t-teal,
.mag-clock {
    background: var(--grad-teal-strong);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- REAL CHECKERED FLAG STRIPE ---------- */
.mag-checker {
    height: 26px;
    background: repeating-conic-gradient(#101010 0% 25%, #f7f7f7 0% 50%);
    background-size: 26px 26px;
    border-bottom: 2px solid #0b0b0d;
}

/* ---------- CARDS (light panels on gold) ---------- */
.mag-card {
    background: linear-gradient(180deg, #fbfbfb 0%, #ececec 100%);
    border: 1px solid #8a6d1a;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(60, 45, 0, .35);
    color: var(--mag-ink);
}

.mag-card .card-header {
    background: linear-gradient(180deg, #2a2c2f 0%, #17181a 100%);
    color: #d7d9dc;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 2px solid var(--mag-teal);
    border-radius: 14px 14px 0 0 !important;
}

/* ---------- GREY READABLE TABLES ---------- */
.mag-table {
    background: var(--mag-grey-bg);
    --bs-table-bg: var(--mag-grey-bg);
    --bs-table-color: var(--mag-ink);
    --bs-table-hover-bg: #cfcfcf;
    --bs-table-hover-color: #111111;
    color: var(--mag-ink);
}

.mag-table thead th {
    background: #c9c9c9;
    color: #111111;
    border-bottom: 2px solid var(--mag-teal);
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: 1px;
}

.mag-table td,
.mag-table th {
    border-color: var(--mag-grey-line);
}

/* Force dark text anywhere white text was used inside pages */
main .text-white {
    color: #141414 !important;
}

/* ---------- CLOCK & DATES ---------- */
.mag-clock {
    font-size: 4rem;
    font-weight: 800;
}

.mag-date {
    color: #5a5a5a;
}

/* ---------- BUTTONS ---------- */
.btn-mag-in {
    background: var(--grad-teal-light);
    border: 1px solid var(--mag-teal-dark);
    color: #03282a;
    font-weight: 800;
    border-radius: 12px;
}
.btn-mag-in:hover {
    filter: brightness(1.08);
    color: #03282a;
}

.btn-mag-out {
    background: linear-gradient(180deg, #f2f3f4 0%, #b9bdc2 45%, #7d838a 60%, #dfe2e5 100%);
    border: 1px solid #55595e;
    color: #101112;
    font-weight: 800;
    border-radius: 12px;
}
.btn-mag-out:hover {
    filter: brightness(1.1);
    color: #101112;
}

/* Ghost buttons: dark style inside pages... */
.btn-mag-ghost {
    background: transparent;
    border: 1px solid #8a8a8a;
    color: #333333;
    border-radius: 10px;
}
.btn-mag-ghost:hover {
    background: #d5d5d5;
    color: #111111;
}

/* ...but light style in the black navbar */
.mag-navbar .btn-mag-ghost {
    border-color: #4a4e52;
    color: #d7d9dc;
}
.mag-navbar .btn-mag-ghost:hover {
    background: #26282b;
    color: #ffffff;
}

/* GREEN QR BUTTON */
.btn-mag-qr {
    background: var(--grad-green);
    border: 1px solid var(--mag-green-3);
    color: #08260a;
    font-weight: 700;
    border-radius: 10px;
}
.btn-mag-qr:hover {
    filter: brightness(1.08);
    color: #08260a;
}

/* ---------- BADGES ---------- */
.badge-working { background: var(--mag-teal); color: #032a2a; }
.badge-off     { background: #6b6b6b; color: #ffffff; }

/* ---------- ALERT MESSAGES ---------- */
.alert-mag-success {
    background: #e0f4f1;
    border: 1px solid var(--mag-teal);
    color: #0d5f5f;
}
.alert-mag-warning {
    background: #fff6df;
    border: 1px solid #b98f00;
    color: #5c4400;
}
.alert-mag-error {
    background: #fdecea;
    border: 1px solid #dc3545;
    color: #842029;
}

.alert .btn-close.btn-close-white {
    filter: none;
}

/* ---------- QR BOX ---------- */
.qr-box {
    background: #ffffff;
    padding: 10px;
    border: 1px solid #999999;
    border-radius: 10px;
    display: inline-block;
    margin-top: 8px;
}

/* ---------- FOOTER ---------- */
footer {
    color: #4a3800;
}

/* ---------- BIG LOGO INSIDE CLOCK PAGES ---------- */
.mag-page-logo {
    height: 85px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}