/* ==========================================================================
   Padellica görsel yenileme katmanı - style.css ve fonts.css'ten SONRA yüklenir.
   Yapıyı değiştirmeden INSPINIA'yı modernize eder: tasarım token'ları, kartlar,
   butonlar, formlar, tipografi.

   NOT: "Ortak çekirdek" bloğu PadelAdmin ve PadelPublic theme.css dosyalarında
   birebir aynı tutulur; bir değişiklik iki dosyaya birden uygulanmalı.

   KURAL: Yeni renkler daima :root'taki tasarım token'ları üzerinden tanımlanır;
   sayfalara veya bu dosyaya sabit hex yazılmaz (dark mode hazırlığı).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ortak çekirdek (PadelAdmin + PadelPublic)
   -------------------------------------------------------------------------- */

:root {
    --brand: #1e8fd5;
    --brand-hover: #14608f;
    --brand-soft: rgba(30, 143, 213, 0.12);
    --accent-event: #8e44ad;
    --accent-event-soft: #f2e9f8;
    --accent-tournament: #f4c20d;
    --accent-tournament-soft: #fdf6d8;
    --accent-tournament-ink: #7a6108;
    --accent-danger: #e74c3c;
    --accent-warning: #f0ad4e;
    --page-bg: #f4f6f9;
    --surface: #fff;
    --surface-hover: #f7f9fb;
    --surface-muted: #f5f5f5;
    --border-soft: #e9edf1;
    --border-line: #e7eaec;
    --border-faint: #f2f2f2;
    --border-control: #dde3e9;
    --border-control-hover: #c8d1da;
    --info-bg: #eef6fc;
    --info-line: #d3e7f6;
    --text-main: #34404b;
    --text-strong: #2f4050;
    --text-mid: #5b6573;
    --text-soft: #8a94a0;
    --text-faint: #9aa3ab;
    --text-muted: #999;
    --text-disabled: #c3c8ce;
    --disabled-bg: #f3f4f5;
    --radius-card: 12px;
    --radius-control: 8px;
    --shadow-card: 0 1px 3px rgba(31, 45, 61, 0.08), 0 1px 2px rgba(31, 45, 61, 0.05);
    --shadow-pop: 0 8px 28px rgba(31, 45, 61, 0.16);
}

/* --- Zemin ve tipografi --- */
body {
    font-size: 14px;
    color: var(--text-main);
}

.gray-bg,
#page-wrapper.gray-bg {
    background-color: var(--page-bg);
}

/* INSPINIA başlıkları varsayılan olarak font-weight:100 (Thin) kullanıyor; Inter
   ile aşırı ince ve soluk görünüyor. Sayfa başlıkları 700, ara başlıklar 600. */
h1,
h2 {
    font-weight: 700;
}

h3,
h4,
h5 {
    font-weight: 600;
}

/* --- Kartlar (ibox): ince gri çerçeve yerine yuvarlak köşe + yumuşak gölge --- */
.ibox {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.ibox-title,
.ibox-content,
.ibox-footer {
    border: none;
}

.ibox-title {
    border-bottom: 1px solid var(--border-soft);
    padding: 16px 90px 12px 20px;
}

.ibox-footer {
    border-top: 1px solid var(--border-soft);
}

/* Kart köşeleri: gölge .ibox'ta olduğu için köşe yuvarlaklığını ilk/son çocuğa
   da vererek beyaz zeminin köşelerden taşmasını önlüyoruz. */
.ibox > :first-child {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.ibox > :last-child {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.ibox > :only-child {
    border-radius: var(--radius-card);
}

/* --- Butonlar --- */
.btn {
    border-radius: var(--radius-control);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
}

.btn-white,
.btn-default {
    border-color: var(--border-control);
    color: var(--text-main);
}

.btn-white:hover,
.btn-default:hover {
    border-color: var(--border-control-hover);
    background-color: var(--surface-hover);
}

/* --- Form kontrolleri --- */
.form-control {
    border-radius: var(--radius-control);
    border-color: var(--border-control);
}

.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* --- Zorunlu alan işaretleri ---
   .label-required etiket sonuna kırmızı yıldız ekler. .required-group-warning,
   zorunlu checkbox gruplarının (data-required-group, bkz. script.js) form içi
   uyarı metnidir; gönderim engellenince gösterilir. */
.label-required::after {
    content: " *";
    color: var(--accent-danger);
}

.required-group-warning {
    color: var(--accent-danger);
    font-size: 12px;
    margin-top: 4px;
}

/* --- Uyarılar, rozetler, modallar, menüler --- */
.alert {
    border: none;
    border-radius: 10px;
}

/* Bilgi kutuları rezervasyon/ücret özetlerinde kullanılıyor; yumuşak mavi zemin
   + sol marka şeridiyle özet kartı gibi görünsün. */
.alert-info {
    background: var(--info-bg);
    color: var(--brand-hover);
    box-shadow: inset 3px 0 0 var(--brand);
    line-height: 1.7;
}

.alert-info hr {
    border-top-color: var(--info-line);
}

.label,
.badge {
    border-radius: 6px;
    font-weight: 600;
}

.modal-content {
    border: none;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
}

.dropdown-menu {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
    padding: 6px;
}

.dropdown-menu > li > a {
    border-radius: 6px;
}

#toast-container > div {
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
}

/* --- Tablolar: başlıklar sakin, içerik öne çıksın --- */
.table > thead > tr > th {
    border-top: none;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}

/* Takvim: saat/tarih rakamları alt alta hizalı dursun. */
.calendar-table {
    font-variant-numeric: tabular-nums;
}

/* Takvim başlıkları: yukarıdaki soluk tablo başlığı kuralı takvime uygulanmasın;
   gün/saat etiketleri koyu ve tablo ölçüsünde kalmalı (mobilde küçülme dahil). */
.table.calendar-table > thead > tr > th {
    color: var(--text-main);
    font-size: inherit;
}

/* --- Takvim slot renk dili ---
   Doygun zemin + beyaz metin yerine pastel zemin + koyu metin + sol renk şeridi.
   Semantik: katılınabilir/boş yeri olan slot (slot-open) en canlı; dolu slot nötr;
   geçmiş iyice soluk. Sınıflar hem .slot-badge hem .legend-item ile kullanılır;
   şerit border yerine inset gölgeyle çizilir (yerleşimi kaydırmaz).
   Renkler sınıf başına --slot-* değişkenleriyle tanımlanır; alternatif tema
   (örn. dark mode) yalnızca değişkenleri yeniden tanımlar, kurallara dokunmaz. */
.slot-open,
.slot-full,
.slot-lesson,
.slot-event,
.slot-tournament,
.slot-closure,
.slot-past {
    background: var(--slot-bg);
    color: var(--slot-fg);
    box-shadow: inset 3px 0 0 var(--slot-stripe);
}

.slot-open {
    --slot-bg: #fdeedd;
    --slot-fg: #a3570e;
    --slot-stripe: #e67e22;
}

.slot-full {
    --slot-bg: #e5f4ea;
    --slot-fg: #1f7a44;
    --slot-stripe: #27ae60;
}

.slot-lesson {
    --slot-bg: #e3f0fa;
    --slot-fg: var(--brand-hover);
    --slot-stripe: var(--brand);
}

.slot-event {
    --slot-bg: var(--accent-event-soft);
    --slot-fg: #6f3391;
    --slot-stripe: var(--accent-event);
}

.slot-tournament {
    --slot-bg: var(--accent-tournament-soft);
    --slot-fg: var(--accent-tournament-ink);
    --slot-stripe: var(--accent-tournament);
}

.slot-closure {
    --slot-bg: #e5e8eb;
    --slot-fg: #4b545c;
    --slot-stripe: #5b6573;
}

.slot-past {
    --slot-bg: #f3f4f6;
    --slot-fg: #a9b0b8;
    --slot-stripe: #d6dade;
}

/* Bağlantı olarak çizilen slotlarda hover/focus, Bootstrap link rengine düşmesin. */
a.slot-badge:hover,
a.slot-badge:focus {
    color: var(--slot-fg);
}

/* --- "Saatler" (liste) görünümü: takvim sayfalarının ortak parçaları ---
   Admin Calendar/Index ve Public Club/Index bu bloku birlikte kullanır; sayfaya
   özgü kalan kurallar (slot-grid, time-slot) sayfanın kendi style bloğundadır. */
.list-days {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 14px;
    -webkit-overflow-scrolling: touch;
}

.day-pill {
    flex: 0 0 auto;
    min-width: 62px;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid var(--border-line);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.25;
    color: var(--text-mid);
    transition: all .15s ease;
}

.day-pill .day-name {
    text-transform: uppercase;
    font-size: 10px;
    opacity: .85;
}

.day-pill .day-num {
    font-size: 16px;
    font-weight: 700;
    display: block;
}

.day-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.day-pill.today:not(.active) {
    border-color: var(--brand);
    color: var(--brand);
}

.list-durations {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.dur-pill {
    padding: 8px 20px;
    border: 1px solid var(--border-line);
    border-radius: 20px;
    background: var(--surface);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-mid);
    transition: all .15s ease;
}

.dur-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.list-court {
    margin-bottom: 20px;
}

.list-court-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-faint);
    padding-bottom: 6px;
}

.list-court-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
}

.list-court-cap {
    font-size: 12px;
    color: var(--text-faint);
}

.list-empty {
    color: var(--text-faint);
    font-size: 13px;
    padding: 6px 0;
}

/* --- Etkinlik / turnuva vurgu sınıfları ---
   Renk inline style yerine sınıftan gelir; hover'da renk sabit kalır (eski davranış). */
.btn-event,
.btn-event:hover,
.btn-event:focus {
    background-color: var(--accent-event);
    color: #fff;
}

.btn-tournament,
.btn-tournament:hover,
.btn-tournament:focus {
    background-color: var(--accent-tournament);
    color: var(--accent-tournament-ink);
}

.text-event {
    color: var(--accent-event);
}

.text-tournament {
    color: var(--accent-tournament-ink);
}

/* Etkinlik/turnuva bilgi kutuları (Event/Tournament sayfaları): pastel accent zemin. */
.alert-event {
    background: var(--accent-event-soft);
}

.alert-event hr {
    border-top-color: var(--accent-event);
}

.alert-tournament {
    background: var(--accent-tournament-soft);
}

.alert-tournament hr {
    border-top-color: var(--accent-tournament);
}

/* --------------------------------------------------------------------------
   PadelAdmin'e özel
   -------------------------------------------------------------------------- */

/* Kenar çubuğu INSPINIA'nın koyu palet renklerini kullanır. */
:root {
    --sidebar-bg: #2f4050;
    --sidebar-line: #293846;
}

/* Üst menü sağa yaslı kalsın: hamburger kaldırılınca navbar'ın tek çocuğu
   bu liste kaldı ve flex space-between onu sola itiyordu. */
.navbar-static-top .navbar-top-links {
    margin-left: auto;
}

/* Üst barda kullanıcı adı mobilde/tablette de görünsün (tema 1000px altında gizliyor). */
@media (max-width: 1000px) {
    .navbar-top-links .welcome-message {
        display: inline-block !important;
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
}

/* --- Dar ekran (<=768px): kenar çubuğu kalıcı ikon rayına döner ---
   Hamburger/overlay/perde yok; iki net durum var: geniş ekranda tam panel,
   dar ekranda her zaman görünür 60px ikon rayı. İkonlar buton işlevi görür;
   logo, kulüp adı, etiketler ve bölüm başlıkları gizlenir. */
@media (max-width: 768px) {
    .navbar-static-side {
        /* style.css bu genişlikte sidebar'ı display:none yapar; ray görünür kalsın. */
        display: block !important;
        width: 60px !important;
        /* Koyu panel rengi normalde body'den gelir ama tema dar ekranda body'yi
           açık griye çevirir; rayın rengini kendisi taşısın. */
        background-color: var(--sidebar-bg) !important;
    }

    #page-wrapper {
        margin-left: 0 !important;
        width: calc(100% - 60px) !important;
    }

    .navbar-static-side .nav-header {
        display: none !important;
    }

    .navbar-static-side .nav-label,
    .navbar-static-side .nav-divider span {
        display: none !important;
    }

    .navbar-static-side .nav-divider {
        padding: 4px 0;
        margin: 0 14px;
        border-bottom: 1px solid var(--sidebar-line);
    }

    .navbar-static-side #side-menu > li > a {
        text-align: center;
        padding: 15px 0;
        font-size: 17px;
    }
}

/* --- Oyuncu seçici (player picker) ---
   Calendar, Reservations ve Lessons sayfalarının ortak bileşeni; etiket (tag)
   kuralları yalnızca Calendar'da kullanıldığı için o sayfanın style bloğundadır. */
.player-picker {
    position: relative;
    margin-top: 8px;
}

.player-picker-search {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-control);
    border-radius: 4px;
    font-size: 13px;
}

.player-picker-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--border-control);
    border-top: none;
    border-radius: 0 0 4px 4px;
    display: none;
}

.player-picker-list.open {
    display: block;
}

.player-picker-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}

.player-picker-item:hover {
    background: var(--surface-hover);
}

/* --------------------------------------------------------------------------
   Mobil veri tabloları -> kart görünümü (<=991.98px)
   -------------------------------------------------------------------------- */

/* İşlem hücreleri masaüstünde tek satırda kalsın; kart modunda aşağıdaki
   media bloğu white-space: normal ile sarmaya izin verir. */
.table-cards td.cell-actions {
    white-space: nowrap;
}

/* Geniş veri tabloları dar ekranda okunmaz hale geliyordu (satırlar sıkışıp iç
   içe giriyor, sütunlar taşıyordu). `.table-cards` işaretli tablolar bu genişliğin
   altında her satırı bir karta dönüştürür: başlık gizlenir, her hücre "Etiket:
   Değer" olarak alt alta dizilir. Etiket metni her <td>'nin data-label'ından gelir.
   Masaüstü (>=992px) görünüm hiç değişmez. footable'lı tablolarda pagination
   çalışmaya devam eder; footable görünen satırları inline display:'' ile
   gösterdiğinden bu kural yalnız o satırlara uygulanır, gizli satırlar
   (display:none) kartlaşmaz. */
@media (max-width: 991.98px) {
    .table-cards {
        display: block;
        width: 100%;
    }

    .table-cards thead {
        display: none;
    }

    .table-cards tbody {
        display: block;
        width: 100%;
    }

    .table-cards tbody > tr {
        display: block;
        margin: 0 0 12px;
        padding: 4px 14px;
        border: 1px solid var(--border-line);
        border-radius: var(--radius-control);
        background: var(--surface);
        box-shadow: var(--shadow-card);
    }

    /* Boş (veri olmayan) satırlar -> kart kutusu çizme (örn. "kayıt yok"). */
    .table-cards tbody > tr.no-card {
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .table-cards tbody > tr.no-card > td {
        text-align: left;
        border-bottom: none;
    }

    .table-cards tbody > tr > td {
        display: block;
        width: 100%;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid var(--border-faint);
        text-align: right;
        overflow: hidden; /* float eden etiketi hücre içinde tut */
        white-space: normal;
    }

    .table-cards tbody > tr > td:last-child {
        border-bottom: none;
    }

    .table-cards tbody > tr > td::before {
        content: attr(data-label);
        float: left;
        max-width: 45%;
        padding-right: 12px;
        font-weight: 600;
        font-size: 12px;
        color: var(--text-soft);
        text-align: left;
        white-space: nowrap;
    }

    /* Etiketsiz hücreler (İşlemler butonları vb.): etiket yok, içerik sağda. */
    .table-cards tbody > tr > td:not([data-label])::before,
    .table-cards tbody > tr > td[data-label=""]::before {
        content: none;
    }

    .table-cards tbody > tr > td.cell-actions {
        text-align: right;
        padding-top: 10px;
        white-space: normal;
    }

    /* Kart içindeki aksiyon butonları rahat dokunulacak boyutta ve sarabilir.
       btn-xs (~22px) dokunma için çok küçük; karta özel min boyut verilir. */
    .table-cards tbody > tr > td.cell-actions .btn {
        margin: 2px 0 2px 6px;
        min-width: 42px;
        min-height: 36px;
        padding: 7px 10px;
        font-size: 13px;
    }

    /* Pagination (footable veya statik) mobilde ortalanır. */
    .table-cards tfoot {
        display: block;
    }

    .table-cards tfoot > tr,
    .table-cards tfoot > tr > td {
        display: block;
        border: none;
        padding: 0;
    }

    .table-cards tfoot .pagination,
    .table-cards + nav .pagination {
        float: none !important;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------------------
   Genel mobil iyileştirmeler (<=768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Sayfa başlığı bandı: daha derli toplu. */
    .page-heading {
        padding-left: 15px;
        padding-right: 15px;
    }

    .page-heading h2 {
        font-size: 20px;
    }

    /* Kart iç boşlukları biraz daralsın; dar ekranda içerik nefes alsın. */
    .ibox-content {
        padding: 15px;
    }

    /* Kart başlığındaki sağ araç metni (ör. "3 aktif rezervasyon") başlığın altına
       insin; mutlak konumlu araçlar başlıkla üst üste biniyordu. */
    .ibox-title {
        padding: 14px 15px 12px;
    }

    .ibox-title h5 {
        float: none;
        display: block;
    }

    .ibox-title .ibox-tools {
        position: static;
        display: block;
        margin-top: 4px;
        float: none;
    }

    /* Filtre formları (form-inline): alanlar alt alta ve tam genişlik. */
    .ibox-content > form.form-inline .form-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }

    .ibox-content > form.form-inline .form-group > .form-control,
    .ibox-content > form.form-inline .form-group > .filter-player {
        flex: 1 1 auto;
        width: auto;
    }

    .ibox-content > form.form-inline .filter-player,
    .ibox-content > form.form-inline .filter-player .form-control {
        width: 100%;
    }
}