/* ═══════════════════════════════════════════════════════════
   SOCCER TOURNAMENT MANAGEMENT — LIGHT GLASSMORPHISM THEME
   Bright sky-blue gradient · frosted white glass surfaces
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Accent colours */
    --accent:        #2563eb;   /* blue */
    --accent-light:  #3b82f6;
    --accent-glow:   rgba(37, 99, 235, 0.20);
    --gold:          #d97706;   /* amber — readable on light */
    --gold-glow:     rgba(217, 119, 6, 0.20);
    --green:         #16a34a;
    --green-glow:    rgba(22, 163, 74, 0.18);
    --red:           #dc2626;
    --blue-stat:     #0284c7;

    /* Text */
    --text-main:     #1e293b;
    --text-sub:      #475569;
    --text-muted:    #64748b;
    --text-label:    #334155;
    --white:         #ffffff;

    /* Glass surfaces */
    --glass-bg:      rgba(255, 255, 255, 0.55);
    --glass-bg-hover:rgba(255, 255, 255, 0.70);
    --glass-border:  rgba(255, 255, 255, 0.70);
    --glass-shadow:  rgba(100, 130, 200, 0.15);
    --glass-blur:    blur(18px);

    /* Input surface */
    --input-bg:      rgba(255, 255, 255, 0.65);
    --input-border:  rgba(37, 99, 235, 0.25);
}

/* ── Base / Background ── */
*, *::before, *::after { box-sizing: border-box; }

/* Light mode — override browser dark defaults */
:root { color-scheme: light; }

body,
body.bg-light {
    /* Bright sky-blue + soft violet gradient background */
    background-color: #dbeafe !important;
    background-image:
        radial-gradient(ellipse 75% 55% at 15% 10%,  rgba(147, 197, 253, 0.80) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 85%,  rgba(196, 181, 253, 0.65) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 50%,  rgba(224, 242, 254, 0.50) 0%, transparent 75%),
        radial-gradient(ellipse 40% 35% at 70% 15%,  rgba(167, 243, 208, 0.45) 0%, transparent 55%) !important;
    background-attachment: fixed !important;
    color: var(--text-main) !important;
    font-family: 'Segoe UI', 'Hiragino Sans', 'Meiryo', sans-serif;
    min-height: 100vh;
    animation: none !important;
}

/* ── Navbar ── */
.navbar.bg-dark {
    background: rgba(255, 255, 255, 0.50) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 2px 20px var(--glass-shadow) !important;
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--accent) !important;
    text-shadow: none;
}
.navbar-brand::before { content: "⚽ "; }

.navbar-nav .nav-link {
    color: var(--text-sub) !important;
    font-weight: 600;
    transition: color 0.15s;
}
.navbar-nav .nav-link:hover { color: var(--accent) !important; }
.navbar-nav .nav-link.active {
    color: var(--accent) !important;
    font-weight: 700;
    background: rgba(37, 99, 235, 0.10);
    border-radius: 8px;
}

/* Navbar right-side text */
.navbar .text-white { color: var(--text-sub) !important; }

/* ── Cards ── */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.80) !important;
    color: var(--text-main) !important;
    transition: transform 0.18s, box-shadow 0.18s;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(100,130,200,0.22), inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

.card-header {
    background: rgba(255,255,255,0.40) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    border-radius: 16px 16px 0 0 !important;
}
.card-body { color: var(--text-main) !important; }
.bg-white  { background: var(--glass-bg) !important; }

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.card-title, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--accent) !important;
    font-weight: 700;
    text-shadow: none;
}

/* ── Tables ── */
.table {
    color: var(--text-main) !important;
    border-color: rgba(37,99,235,0.12) !important;
    font-size: 0.93rem;
}
.table-bordered > :not(caption) > * > * {
    border-color: rgba(37,99,235,0.10) !important;
}
.table > thead > tr > th,
.table thead.table-light th {
    background: rgba(37,99,235,0.08) !important;
    color: var(--accent) !important;
    border-bottom: 1px solid rgba(37,99,235,0.20) !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(37,99,235,0.04) !important;
    color: var(--text-main) !important;
}
.table-striped > tbody > tr:nth-of-type(even) > * {
    background: transparent !important;
    color: var(--text-main) !important;
}
.table > tbody > tr:hover > * {
    background: rgba(37,99,235,0.07) !important;
    color: var(--accent) !important;
}
.table-secondary,
.table-secondary > td,
.table-secondary > th {
    background: rgba(0,0,0,0.04) !important;
    color: var(--text-muted) !important;
}

/* ── Forms ── */
.form-control,
.form-select {
    background-color: var(--input-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-main) !important;
    -webkit-text-fill-color: var(--text-main) !important;
    border-radius: 10px !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    color-scheme: light;
}
.form-control:focus,
.form-select:focus {
    background-color: rgba(255,255,255,0.85) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    color: var(--text-main) !important;
    -webkit-text-fill-color: var(--text-main) !important;
    outline: none;
}
.form-control:-webkit-autofill,
.form-select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #eff6ff inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main);
}
.form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }
.form-select option {
    background-color: #ffffff;
    color: var(--text-main);
}
.form-label  { color: var(--text-label) !important; font-weight: 600; }
.form-text   { color: var(--text-muted) !important; }
small.text-muted, .text-muted { color: var(--text-muted) !important; }

/* ── Buttons ── */
.btn {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: filter 0.15s, transform 0.12s, box-shadow 0.15s !important;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
    border: 1px solid rgba(59,130,246,0.50) !important;
    color: var(--white) !important;
    font-weight: 600;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35) !important;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(37,99,235,0.45) !important; }

.btn-success {
    background: linear-gradient(135deg, #15803d, #22c55e) !important;
    border: 1px solid rgba(34,197,94,0.45) !important;
    color: var(--white) !important;
    font-weight: 600;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(22,163,74,0.30) !important;
}
.btn-success:hover { filter: brightness(1.08); }

.btn-warning {
    background: linear-gradient(135deg, #b45309, #f59e0b) !important;
    border: 1px solid rgba(245,158,11,0.45) !important;
    color: var(--white) !important;
    font-weight: 600;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(217,119,6,0.28) !important;
}
.btn-warning:hover { filter: brightness(1.08); }

.btn-danger {
    background: linear-gradient(135deg, #991b1b, #ef4444) !important;
    border: 1px solid rgba(239,68,68,0.45) !important;
    color: var(--white) !important;
    font-weight: 600;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(220,38,38,0.25) !important;
}
.btn-danger:hover { filter: brightness(1.08); }

.btn-secondary {
    background: rgba(255,255,255,0.60) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    color: var(--text-sub) !important;
    font-weight: 600;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.85) !important;
    color: var(--text-main) !important;
}

.btn-info {
    background: linear-gradient(135deg, #0369a1, #0ea5e9) !important;
    border: 1px solid rgba(14,165,233,0.45) !important;
    color: var(--white) !important;
    font-weight: 600;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(2,132,199,0.28) !important;
}
.btn-info:hover { filter: brightness(1.08); }
.btn-info.text-white { color: var(--white) !important; }

.btn-outline-light {
    background: rgba(255,255,255,0.50) !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    color: var(--text-sub) !important;
    border-radius: 10px !important;
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.80) !important;
    color: var(--text-main) !important;
}

.btn-outline-danger {
    background: rgba(220,38,38,0.06) !important;
    border: 1px solid rgba(220,38,38,0.40) !important;
    color: var(--red) !important;
    border-radius: 10px !important;
}
.btn-outline-danger:hover {
    background: rgba(220,38,38,0.14) !important;
    color: #991b1b !important;
}

.btn-outline-secondary {
    background: rgba(255,255,255,0.45) !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    color: var(--text-sub) !important;
    border-radius: 10px !important;
}
.btn-outline-secondary:hover {
    background: rgba(255,255,255,0.75) !important;
    color: var(--text-main) !important;
}

/* ── Extra-small button ── */
.btn-xs {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
}

/* ── Badges ── */
.badge.bg-primary   { background: rgba(37,99,235,0.15) !important;  color: #1d4ed8 !important; border: 1px solid rgba(37,99,235,0.25) !important; }
.badge.bg-success   { background: rgba(22,163,74,0.15) !important;  color: #15803d !important; border: 1px solid rgba(22,163,74,0.25) !important; }
.badge.bg-secondary { background: rgba(0,0,0,0.08) !important;      color: var(--text-sub) !important; border: 1px solid rgba(0,0,0,0.12) !important; }
.badge.bg-warning   { background: rgba(217,119,6,0.15) !important;  color: #92400e !important; border: 1px solid rgba(217,119,6,0.25) !important; }
.badge.bg-info      { background: rgba(2,132,199,0.13) !important;  color: #0369a1 !important; border: 1px solid rgba(2,132,199,0.22) !important; }

/* ── Alerts ── */
.alert-danger {
    background: rgba(220,38,38,0.10) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(220,38,38,0.30) !important;
    color: #991b1b !important;
    border-radius: 12px !important;
}
.alert-success {
    background: rgba(22,163,74,0.10) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(22,163,74,0.30) !important;
    color: #15803d !important;
    border-radius: 12px !important;
}

/* ── Dashboard stat cards ── */
.border-primary { border-color: rgba(37,99,235,0.40) !important; }
.border-success { border-color: rgba(22,163,74,0.40) !important; }
.border-info    { border-color: rgba(2,132,199,0.40) !important; }
.border-warning { border-color: rgba(217,119,6,0.40) !important; }
.border-start   { border-left-width: 4px !important; }

.text-primary   { color: var(--accent)    !important; }
.text-success   { color: var(--green)     !important; }
.text-info      { color: var(--blue-stat) !important; }
.text-warning   { color: var(--gold)      !important; }
.text-secondary { color: var(--text-muted)!important; }
.text-dark      { color: var(--text-main) !important; }

/* ── HR / dividers ── */
hr { border-color: rgba(37,99,235,0.12) !important; }

/* ── Links ── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: #1d4ed8; text-decoration: underline; }

/* ── Image helpers ── */
.logo-thumbnail     { max-width: 150px; height: auto; border-radius: 10px; }
.table-logo         { max-height: 40px; width: auto; }
.favicon-preview    { width: 32px; height: 32px; }
.favicon-preview-lg { width: 64px; height: 64px; }
.img-thumbnail {
    background: rgba(255,255,255,0.60) !important;
    border-color: var(--glass-border) !important;
    border-radius: 10px !important;
}

/* ── Column width helpers ── */
.action-col            { width: 250px; min-width: 150px; }
.action-col-tournament { width: 220px; min-width: 220px; white-space: nowrap; }
.action-col-sm         { width: 165px; min-width: 100px; }
.action-col-xs         { width: 100px; min-width: 80px; }
.status-col            { width: 150px; min-width: 100px; }
.logo-col              { width: 100px; text-align: center; }

/* ── Date-group headings (matches.php) ── */
.date-heading { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.date-label   { font-size: 0.88rem; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; white-space: nowrap; }
.date-line    { flex: 1; height: 1px; background: linear-gradient(to right, rgba(37,99,235,0.35), transparent); }

/* ── Scoreboard URL / code ── */
.border-success { border-color: rgba(22,163,74,0.35) !important; }
code {
    background: rgba(37,99,235,0.08);
    color: var(--accent);
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
    font-size: 0.82rem;
    border: 1px solid rgba(37,99,235,0.18);
}

/* ── Site footer ── */
.site-footer {
    text-align: center;
    padding: 1.25rem 1rem;
    margin-top: 2.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(37,99,235,0.12);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 991px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(255,255,255,0.75);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-top: 1px solid var(--glass-border);
        padding: 0.75rem 0.5rem;
        border-radius: 0 0 12px 12px;
        margin-top: 0.25rem;
    }
    .navbar-nav .nav-link { padding: 0.55rem 0.75rem !important; border-radius: 8px; }
    .navbar-nav .nav-link:hover { background: rgba(37,99,235,0.07); }
    .navbar .d-flex.align-items-center { flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.25rem 0.25rem; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 767px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .container  { padding-left: 0.75rem; padding-right: 0.75rem; }
    .card-body  { padding: 0.9rem; }
    .card       { border-radius: 12px !important; }

    .navbar-brand { font-size: 0.95rem; }
    .navbar-toggler {
        border-color: rgba(37,99,235,0.50) !important;
        padding: 0.3rem 0.55rem;
    }
    .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%2837%2C99%2C235%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.6rem;
    }
    .d-flex.gap-2.flex-wrap { width: 100%; }

    .table { font-size: 0.8rem; }
    .table th, .table td { padding: 0.4rem 0.45rem; }
    .table td .btn,
    .table td a.btn {
        padding: 0.22rem 0.45rem !important;
        font-size: 0.72rem !important;
        border-radius: 6px !important;
        margin-bottom: 0.2rem;
        display: inline-block;
        width: auto;
    }
    .table td .btn-xs { padding: 0.18rem 0.38rem !important; font-size: 0.7rem !important; }
    .table .col-hide-mobile { display: none; }

    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] { margin-bottom: 1rem; }

    .fs-1 { font-size: 1.9rem !important; }
    .form-control, .form-select { font-size: 1rem; }

    h2, .h2 { font-size: 1.2rem !important; }
    h3, .h3 { font-size: 1.1rem !important; }
    h4, .h4 { font-size: 1rem !important; }
    h5, .h5 { font-size: 0.95rem !important; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .match-inner  { padding: 0.65rem 0.5rem; gap: 0.25rem; }
    .score-center { min-width: 64px; }
    .team-logo, .team-logo-placeholder { width: 28px; height: 28px; }

    .score-input-box    { width: 72px; height: 60px; font-size: 1.6rem; }
    .score-input-box-sm { width: 58px; height: 48px; font-size: 1.2rem; }
    .score-input-sep    { font-size: 1.8rem; }
    .score-input-sep-sm { font-size: 1.3rem; }

    .matchup-row { gap: 0.4rem; }
    .matchup-vs  { font-size: 0.85rem; padding-bottom: 0.3rem; }

    .container.mt-5 { margin-top: 1.5rem !important; }
}