/* ==========================================================================
   Тогыз Кумалак — Global Theme
   Design tokens extracted directly from game.php.
   Loaded AFTER Bootstrap 5 via AppAsset $depends.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
    --bg:           #2c1a0e;
    --bg-deep:      #1a0f06;
    --bg-panel:     #3e2010;
    --bg-panel2:    #5c3317;
    --border:       #7a4a22;
    --border-hi:    #a0662e;
    --gold:         #f0d090;
    --gold-mid:     #c8903a;
    --gold-dim:     rgba(200,144,58,0.55);
    --gold-faint:   rgba(200,144,58,0.12);
    --gold-sep:     rgba(200,144,58,0.3);
    --r-sm:         6px;
    --r:            12px;
    --r-lg:         22px;
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }

body {
    min-height: 100vh;
    margin: 0; padding: 0;
    background-color: var(--bg);
    /* Same wood-grain stripes as .board::after in game.php */
    background-image:
            repeating-linear-gradient(91deg, transparent, transparent 38px,
            rgba(0,0,0,0.022) 38px, rgba(0,0,0,0.022) 39px);
    font-family: 'Cinzel', serif;
    color: var(--gold);
    display: flex;
    flex-direction: column;
}

a { color: var(--gold-mid); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold); text-decoration: none; }

/* ── NAVBAR ─────────────────────────────────────────────────────────────── */
.tk-navbar {
    background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
    border-bottom: 2px solid var(--border);
    box-shadow: 0 2px 20px rgba(0,0,0,0.6);
    padding: 0 24px;
    position: sticky; top: 0; z-index: 1000;
    flex-shrink: 0;
}

.tk-navbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.tk-brand {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.tk-brand:hover { color: #fff8e0; text-decoration: none; }

/* Mimics the game stone */
.tk-brand-stone {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffce8, #ead898 50%, #c4aa5a);
    box-shadow: 0 0 8px rgba(200,144,58,0.8), 0 0 16px rgba(200,144,58,0.3),
    inset 0 1px 2px rgba(255,255,255,0.7);
    flex-shrink: 0;
}

.tk-nav-links {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
}
.tk-nav-links li { margin: 0; }

.tk-nav-links a {
    font-family: 'Cinzel', serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-dim);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    transition: all 0.2s;
    display: block;
}
.tk-nav-links a:hover,
.tk-nav-links a.active {
    color: var(--gold);
    border-color: var(--gold-faint);
    background: rgba(200,144,58,0.08);
    text-decoration: none;
}

.tk-nav-divider { width: 1px; height: 18px; background: var(--border); margin: 0 8px; }

.tk-nav-user {
    font-family: 'Cinzel', serif;
    font-size: 9px; letter-spacing: 1.5px;
    color: var(--gold-dim); text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid var(--border); border-radius: 20px;
    background: rgba(0,0,0,0.3);
}

.tk-hamburger {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; background: none; border: none; padding: 6px;
}
.tk-hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--gold-mid); border-radius: 2px; transition: all 0.3s;
}

.tk-mobile-menu {
    display: none;
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    padding: 12px 24px 18px;
}
.tk-mobile-menu.open { display: block; }
.tk-mobile-menu a {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-dim); text-decoration: none;
    padding: 11px 0;
    border-bottom: 1px solid rgba(122,74,34,0.3);
    transition: color 0.2s;
}
.tk-mobile-menu a:last-child { border-bottom: none; }
.tk-mobile-menu a:hover { color: var(--gold); }

@media (max-width: 640px) {
    .tk-nav-links { display: none; }
    .tk-hamburger { display: flex; }
}

/* ── FLASH ──────────────────────────────────────────────────────────────── */
.tk-flash { max-width: 1100px; margin: 14px auto 0; padding: 0 24px; }
.tk-flash .alert {
    font-family: 'Cinzel', serif;
    font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
    border-radius: var(--r-sm); border: 1px solid; border-left-width: 3px;
    padding: 11px 18px; margin-bottom: 8px; background: none;
}
.tk-flash .alert-success { border-color: #27ae60; color: #7dcea0; background: rgba(39,174,96,0.07) !important; }
.tk-flash .alert-danger  { border-color: #c0392b; color: #e87060; background: rgba(192,57,43,0.07) !important; }
.tk-flash .alert-warning { border-color: #e67e22; color: #f0a060; background: rgba(230,126,34,0.07) !important; }
.tk-flash .alert-info    { border-color: var(--gold-mid); color: var(--gold); background: rgba(200,144,58,0.05) !important; }

/* ── PAGE WRAPPER ───────────────────────────────────────────────────────── */
.tk-page { flex: 1; display: flex; flex-direction: column; }
.tk-container { max-width: 1100px; margin: 0 auto; padding: 40px 24px; width: 100%; flex: 1; }

/* ── PAGE HEADER ─────────────────────────────────────────────────────────── */
.tk-page-header {
    margin-bottom: 36px; padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
    animation: tkFadeUp 0.4s ease both;
}
.tk-page-header::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 60px; height: 2px;
    background: linear-gradient(90deg, var(--gold-mid), transparent);
}
.tk-page-title {
    font-family: 'Cinzel', serif;
    font-size: 22px; font-weight: 700;
    color: var(--gold); letter-spacing: 4px; text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5); margin: 0;
}
.tk-page-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-dim); margin-top: 8px;
}

/* ── CARD — mirrors .board from game.php ────────────────────────────────── */
.tk-card {
    background: linear-gradient(135deg, var(--bg-panel2) 0%, var(--bg-panel) 50%, #3a2010 100%);
    border: 2px solid var(--border);
    border-radius: var(--r);
    padding: 32px;
    box-shadow:
            inset 0 2px 10px rgba(0,0,0,0.4),
            inset 0 -2px 10px rgba(0,0,0,0.3),
            0 10px 40px rgba(0,0,0,0.7);
    position: relative; overflow: hidden;
    animation: tkFadeUp 0.4s ease 0.06s both;
}
/* Wood grain — same as .board::after */
.tk-card::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(91deg, transparent, transparent 38px,
    rgba(0,0,0,0.025) 38px, rgba(0,0,0,0.025) 39px);
    border-radius: var(--r); pointer-events: none; z-index: 0;
}
/* Inner frame glow — same as .side-panel::before */
.tk-card::after {
    content: ''; position: absolute; inset: 8px;
    border: 1px solid rgba(255,220,150,0.08);
    border-radius: calc(var(--r) - 4px);
    pointer-events: none; z-index: 0;
}
.tk-card > * { position: relative; z-index: 1; }

/* ── FORMS ──────────────────────────────────────────────────────────────── */
/* Labels */
.form-label,
.col-form-label,
label { font-family: 'Cinzel', serif !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--gold-dim) !important; margin-bottom: 8px !important; display: block !important; }

/* Inputs — dark pit feel */
.form-control {
    background-color: rgba(0,0,0,0.45) !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--gold) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5) !important;
}
.form-control::placeholder { color: rgba(200,144,58,0.25) !important; opacity: 1 !important; }
.form-control:focus {
    background-color: rgba(0,0,0,0.55) !important;
    border-color: var(--gold-mid) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5), 0 0 0 3px rgba(200,144,58,0.18) !important;
    color: var(--gold) !important;
    outline: none !important;
}
.form-control.is-invalid { border-color: #c0392b !important; background-image: none !important; padding-right: 14px !important; }
.form-control.is-valid   { border-color: #27ae60 !important; background-image: none !important; padding-right: 14px !important; }
.invalid-feedback { font-family: 'Cinzel', serif !important; font-size: 8px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #e74c3c !important; margin-top: 6px !important; }
.mb-3 { margin-bottom: 22px; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important; letter-spacing: 2.5px !important;
    text-transform: uppercase !important; border-radius: var(--r-sm) !important;
    font-size: 9px !important; cursor: pointer !important;
    transition: all 0.2s ease !important; text-decoration: none !important;
    border-width: 2px !important; border-style: solid !important;
    padding: 10px 28px !important;
}
.btn:focus { box-shadow: none !important; outline: none !important; }

/* Gold gradient — same feel as the kazan-count border */
.btn-primary {
    color: var(--bg-deep) !important;
    background: linear-gradient(135deg, #e8c060 0%, #c8903a 55%, #a06820 100%) !important;
    border-color: #a06820 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: var(--bg-deep) !important;
    background: linear-gradient(135deg, #f5d070 0%, #d8a040 55%, #b07828 100%) !important;
    border-color: #906018 !important;
    box-shadow: 0 4px 18px rgba(200,144,58,0.5) !important;
    transform: translateY(-1px) !important;
}

.btn-secondary {
    color: var(--gold) !important; background: transparent !important;
    border-color: var(--border) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
    color: var(--gold) !important; border-color: var(--gold-mid) !important;
    background: rgba(200,144,58,0.08) !important;
}

.btn-danger {
    color: #fff !important;
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    border-color: #a93226 !important;
}
.btn-danger:hover { background: linear-gradient(135deg, #f05a4a, #d0392b) !important; transform: translateY(-1px) !important; }

/* ── TABLE ──────────────────────────────────────────────────────────────── */
.tk-table, .table { width: 100%; border-collapse: collapse; }
.tk-table th, .table th {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--gold-dim);
    padding: 10px 16px; border-bottom: 2px solid var(--border);
    text-align: left; font-weight: 700; background: transparent;
}
.tk-table td, .table td {
    padding: 12px 16px; border-bottom: 1px solid rgba(122,74,34,0.25);
    color: var(--gold); font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1px;
}
.tk-table tr:hover td, .table-hover tbody tr:hover td { background: rgba(200,144,58,0.05); }

/* ── STATUS BADGE ───────────────────────────────────────────────────────── */
.tk-badge {
    display: inline-block; font-family: 'Cinzel', serif;
    font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; border: 1px solid;
}
.tk-badge-waiting  { color: #f0a060; border-color: rgba(230,126,34,0.4); background: rgba(230,126,34,0.08); }
.tk-badge-active   { color: #7dcea0; border-color: rgba(39,174,96,0.4);  background: rgba(39,174,96,0.08); }
.tk-badge-finished { color: var(--gold-dim); border-color: var(--gold-sep); background: rgba(200,144,58,0.05); }

/* ── ALERTS ─────────────────────────────────────────────────────────────── */
.alert { font-family: 'Cinzel', serif !important; font-size: 9px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; border-radius: var(--r-sm) !important; border-left-width: 3px !important; padding: 12px 18px !important; }
.alert-success { background: rgba(39,174,96,0.08) !important;  border-color: #27ae60 !important; color: #7dcea0 !important; }
.alert-danger  { background: rgba(192,57,43,0.08) !important;  border-color: #c0392b !important; color: #e87060 !important; }
.alert-warning { background: rgba(230,126,34,0.08) !important; border-color: #e67e22 !important; color: #f0a060 !important; }
.alert-info    { background: rgba(200,144,58,0.06) !important; border-color: var(--gold-mid) !important; color: var(--gold) !important; }

/* ── SEPARATOR ──────────────────────────────────────────────────────────── */
.tk-sep { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 28px 0; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.tk-footer {
    border-top: 1px solid rgba(122,74,34,0.35);
    padding: 18px 24px; text-align: center;
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 3px; text-transform: uppercase;
    color: rgba(200,144,58,0.28); flex-shrink: 0;
}

/* ── ANIMATION ──────────────────────────────────────────────────────────── */
@keyframes tkFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .tk-container { padding: 24px 16px; }
    .tk-card { padding: 22px 18px; }
    .tk-page-title { font-size: 16px; letter-spacing: 3px; }
}