/* =========================================================================
   MasterStat — Football Manager temali arayuz
   Koyu slate zemin, keskin koseler, sikisik veri tablolari, condensed
   basliklar ve her yerde tabular rakamlar.
   ========================================================================= */

:root {
    /* zemin katmanlari */
    --bg-0: #070a0e;
    --bg-1: #0c1016;
    --bg-2: #12171f;
    --bg-3: #182029;
    --bg-hover: #1d2733;

    /* cizgiler */
    --line: #212c38;
    --line-soft: #1a232d;
    --line-strong: #33475c;

    /* yazi */
    --ink: #e8edf4;
    --ink-dim: #94a3b5;
    --ink-faint: #5d6c7e;

    /* vurgular */
    --acid: #00e07a;
    --acid-dim: #00a85c;
    --blue: #3d8bfd;
    --amber: #ffb340;
    --red: #ff4d5e;
    --violet: #a78bfa;

    /* sonuc renkleri */
    --win: #00c46a;
    --draw: #8b95a5;
    --loss: #e0364b;

    --pitch: linear-gradient(160deg, #0f1720 0%, #0a0f15 100%);

    --rail-w: 232px;
    --radius: 3px;

    --font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

/* .picker / .searchbox__results gibi display tanimlayan siniflar tarayicinin
   [hidden] kuralini ezer; gizleme her zaman kazansin. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--bg-0);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

::selection { background: var(--acid); color: #04120a; }

/* ince, temaya uygun kaydirma cubugu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #253243; border: 2px solid var(--bg-0); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #35485e; }

.num, table td, .score, .minute {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ============================== iskelet ============================== */

.shell {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr;
    height: 100vh;
}

/* ============================== yan menu ============================== */

.rail {
    background: var(--bg-1);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rail__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--line);
}

.rail__mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--acid);
    color: #04120a;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.5px;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.rail__wordmark { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }

.rail__name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.rail__tag {
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 2px;
}

.rail__nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; }

.navitem {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    color: var(--ink-dim);
    text-decoration: none;
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: background .12s, color .12s;
}

.navitem svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.navitem:hover { background: var(--bg-2); color: var(--ink); }

.navitem.is-active {
    background: var(--bg-3);
    color: var(--ink);
    border-left-color: var(--acid);
}

.navitem.is-active svg { color: var(--acid); }

.navitem__badge {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    padding: 1px 6px;
    border-radius: 8px;
}

.rail__foot { padding: 12px; border-top: 1px solid var(--line); }

.statuslamp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.statuslamp i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-faint);
    flex-shrink: 0;
}

.statuslamp[data-state="live"] i { background: var(--acid); box-shadow: 0 0 0 0 rgba(0, 224, 122, .6); animation: pulse 2s infinite; }
.statuslamp[data-state="live"] { color: var(--acid); }
.statuslamp[data-state="error"] i { background: var(--red); }
.statuslamp[data-state="error"] { color: var(--red); }

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 224, 122, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(0, 224, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 224, 122, 0); }
}

/* ============================== ana alan ============================== */

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 22px 14px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.topbar__title h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
}

.topbar__title p { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-faint); }

.topbar__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.picker { display: flex; flex-direction: column; gap: 3px; }

.picker__label {
    font-size: 9.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-left: 1px;
}

/* Lig secici: filtre kutusu ustte, liste altta. 1242 lig arasindan ada gore
   daraltmak icin -- duz bir acilir liste kullanilabilir degil. */
.picker__combo { display: flex; flex-direction: column; gap: 3px; }
.picker__combo input { min-width: 190px; }
.picker__combo select { min-width: 190px; }

.picker select,
.picker input {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 7px 10px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 13px;
    min-width: 150px;
    outline: none;
}

.picker select:focus,
.picker input:focus { border-color: var(--line-strong); }

.picker input[type="date"] { color-scheme: dark; }

.searchbox { position: relative; display: flex; align-items: center; }

.searchbox svg {
    position: absolute;
    left: 9px;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--ink-faint);
    stroke-width: 1.8;
    stroke-linecap: round;
    pointer-events: none;
}

.searchbox input {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 8px 10px 8px 30px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 13px;
    width: 236px;
    outline: none;
}

.searchbox input:focus { border-color: var(--line-strong); width: 280px; }
.searchbox input { transition: width .16s ease; }

.searchbox__results {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 300px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    z-index: 40;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.searchbox__group {
    padding: 6px 11px;
    font-size: 9.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--bg-1);
    border-bottom: 1px solid var(--line-soft);
}

.searchbox__row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    cursor: pointer;
    border-bottom: 1px solid var(--line-soft);
}

.searchbox__row:hover { background: var(--bg-hover); }
.searchbox__row small { margin-left: auto; color: var(--ink-faint); font-size: 11px; }

/* ============================== sahne ============================== */

.stage { flex: 1; overflow-y: auto; padding: 20px 22px 28px; min-height: 0; }

.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.grid--wide { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }

@media (max-width: 1100px) {
    .grid--wide { grid-template-columns: 1fr; }
}

/* ============================== panel ============================== */

.panel {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}

.panel__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink);
}

.panel__head .spring { margin-left: auto; }

.panel__sub { font-size: 11.5px; color: var(--ink-faint); }

.panel__body { padding: 13px; }
.panel__body--flush { padding: 0; }

/* ============================== tablo ============================== */

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
    text-align: left;
    padding: 8px 10px;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

tbody td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
tbody tr:hover { background: var(--bg-2); }
tbody tr:last-child td { border-bottom: none; }

.t-right { text-align: right; }
.t-center { text-align: center; }
.t-num { font-family: var(--font-mono); font-size: 12.5px; }
.t-dim { color: var(--ink-dim); }
.t-strong { font-weight: 600; }
.t-clip { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

.table-wrap { max-height: 620px; overflow-y: auto; }

/* siralama sutunu: Avrupa / kume hatti */
.rankcell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.rankcell::before {
    content: "";
    width: 3px;
    height: 17px;
    background: transparent;
    border-radius: 1px;
}

tr[data-zone="ucl"] .rankcell::before { background: var(--blue); }
tr[data-zone="uel"] .rankcell::before { background: var(--violet); }
tr[data-zone="rel"] .rankcell::before { background: var(--loss); }

/* ============================== rozetler ============================== */

.crest {
    width: 21px;
    height: 21px;
    border-radius: 2px;
    object-fit: contain;
    background: var(--bg-3);
    flex-shrink: 0;
}

.crest--lg { width: 44px; height: 44px; }

.crest-fallback {
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--ink-dim);
    background: var(--bg-3);
    border: 1px solid var(--line);
}

.crest-fallback.crest--lg { font-size: 15px; }

.teamcell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.teamcell span { overflow: hidden; text-overflow: ellipsis; }

/* form serisi: G B M kareleri */
.form { display: inline-flex; gap: 3px; }

.form i {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    border-radius: 2px;
    color: #06110a;
}

.form i[data-r="W"] { background: var(--win); }
.form i[data-r="D"] { background: var(--draw); color: #0b0f14; }
.form i[data-r="L"] { background: var(--loss); color: #fff; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    border: 1px solid var(--line);
    color: var(--ink-dim);
    background: var(--bg-2);
}

.pill--live { color: var(--acid); border-color: rgba(0, 224, 122, .35); background: rgba(0, 224, 122, .09); }
.pill--ht   { color: var(--amber); border-color: rgba(255, 179, 64, .35); background: rgba(255, 179, 64, .09); }
.pill--ft   { color: var(--ink-faint); }
.pill--soon { color: var(--blue); border-color: rgba(61, 139, 253, .3); background: rgba(61, 139, 253, .08); }
.pill--warn { color: var(--red); border-color: rgba(255, 77, 94, .35); background: rgba(255, 77, 94, .09); }

/* ============================== mac karti ============================== */

.match {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s;
}

.match:hover { border-color: var(--line-strong); }
.match.is-live { border-left: 2px solid var(--acid); }
.match.just-scored { animation: flashgoal 1.5s ease-out; }

@keyframes flashgoal {
    0%   { background: rgba(0, 224, 122, .18); border-color: var(--acid); }
    100% { background: var(--bg-1); }
}

.match__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-soft);
    font-size: 11px;
    color: var(--ink-faint);
}

.match__league { letter-spacing: 0.5px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match__head .spring { margin-left: auto; }

.match__body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px 12px; cursor: pointer; }

.match__side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.match__side--away { flex-direction: row-reverse; text-align: right; }
.match__team { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match__team.is-loser { color: var(--ink-dim); font-weight: 500; }

.match__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 74px;
}

.score {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
}

.score--live { color: var(--acid); }
.score--pending { color: var(--ink-faint); font-size: 15px; letter-spacing: 0; }

.minute { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.minute--live { color: var(--acid); }
.minute--live::after { content: "'"; }

.match__events {
    border-top: 1px solid var(--line-soft);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-0);
}

.evline { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); }
.evline__min { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); min-width: 34px; }
.evline__icon { width: 13px; height: 13px; flex-shrink: 0; }
.evline__player { color: var(--ink); }
.evline__assist { color: var(--ink-faint); font-size: 11px; }

/* ============================== oyuncu karti ============================== */

.profile { display: flex; gap: 16px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); background: var(--pitch); }

.profile__photo {
    width: 74px;
    height: 74px;
    border-radius: var(--radius);
    object-fit: cover;
    background: var(--bg-3);
    border: 1px solid var(--line);
}

.profile__name { font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: 0.7px; line-height: 1.1; }
.profile__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px; background: var(--line-soft); }

.stat { background: var(--bg-1); padding: 11px 12px; }
.stat__k { font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-faint); }
.stat__v { font-family: var(--font-mono); font-size: 21px; font-weight: 700; margin-top: 3px; line-height: 1; }
.stat__v--acid { color: var(--acid); }
.stat__v--blue { color: var(--blue); }

/* ============================== durum cubugu ============================== */

.statusbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 22px;
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-faint);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
}

.statusbar__sep { width: 1px; height: 11px; background: var(--line); }
.statusbar__spring { margin-left: auto; }

/* ============================== yardimcilar ============================== */

.loader { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 60px 0; color: var(--ink-faint); font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; }

.loader i {
    width: 13px;
    height: 13px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--acid);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty { padding: 46px 20px; text-align: center; color: var(--ink-faint); }
.empty strong { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.empty p { margin: 0; font-size: 12.5px; }

.notice {
    display: flex;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 77, 94, .3);
    background: rgba(255, 77, 94, .07);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: #ffb3ba;
    margin-bottom: 14px;
}

.notice--info { border-color: rgba(61, 139, 253, .3); background: rgba(61, 139, 253, .07); color: #b8d4ff; }

.sectionlabel {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 14px 2px 8px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.sectionlabel::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.linkish { color: var(--blue); cursor: pointer; text-decoration: none; }
.linkish:hover { text-decoration: underline; }

.rowlink { cursor: pointer; }

/* Football Manager'daki gibi: her takim ve futbolcu adi kendi ekranina goturur. */
.clickable { cursor: pointer; border-radius: 2px; transition: color .12s; }
.match__side.clickable:hover .match__team { color: var(--acid); }
.evline__player.clickable:hover { color: var(--acid); text-decoration: underline; }
.profile__team { cursor: pointer; }
.profile__team:hover { color: var(--acid); }

/* ============================== bildirim ============================== */

.toasts { position: fixed; right: 18px; bottom: 40px; display: flex; flex-direction: column; gap: 8px; z-index: 90; }

.toast {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 260px;
    padding: 11px 14px;
    background: var(--bg-3);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--acid);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
    animation: slidein .22s ease-out;
}

.toast__title { font-family: var(--font-display); font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--acid); }
.toast__body { font-size: 12.5px; color: var(--ink-dim); margin-top: 1px; }
.toast--info { border-left-color: var(--blue); }
.toast--info .toast__title { color: var(--blue); }

@keyframes slidein {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================== dar ekran ============================== */

@media (max-width: 860px) {
    .shell { grid-template-columns: 62px 1fr; }
    .rail__wordmark, .navitem span, .statuslamp span { display: none; }
    .navitem { justify-content: center; padding: 11px 0; }
    .rail__brand { justify-content: center; padding: 14px 0; }
    .rail__foot { display: flex; justify-content: center; }
    .topbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .searchbox input, .searchbox input:focus { width: 100%; }
    .searchbox { flex: 1; }
    .stage { padding: 14px; }
}

/* Lisans atfi: bilgi verir ama durum gostergeleriyle yarismaz. */
.statusbar__credit {
    opacity: 0.65;
    letter-spacing: 0.02em;
}