/* Telefon ve tablet düzeni: üst çubuk (menü düğmesi), tablolar, formlar. Diğer stil dosyalarından sonra yüklenir. */
.nav-burger {
    display: none;
}

/* Yalnız telefon menüsünde görünür; light-theme.css nav bağlantılarını !important ile inline-flex yaptığı için burada da !important gerekir. */
.topbar nav .nav-mobile-only,
.advanced-topbar nav .nav-mobile-only {
    display: none !important;
}

@media (max-width: 1300px) {
    /* Tek satırlık kompakt çubuk: menü düğmesi + marka solda, bildirim ve hesap sağda. Menü açılınca linkler altta dizilir. */
    .topbar,
    .advanced-topbar {
        position: sticky !important;
        top: 0 !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 9px 12px !important;
    }

    .nav-burger {
        order: 0;
        display: grid;
        flex: 0 0 36px;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 10px;
        background: rgba(255, 255, 255, .06);
        color: #e6f1ee;
        cursor: pointer;
    }

    .nav-burger svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

    .topbar.nav-open .nav-burger {
        border-color: #37d5a1;
        color: #37d5a1;
    }

    .topbar .brand,
    .advanced-topbar .brand {
        order: 1;
        gap: 8px !important;
        font-size: 17px !important;
    }

    .topbar .brand-mark {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }

    .topbar .status,
    .advanced-topbar .status {
        order: 2;
        margin-left: auto;
        gap: 6px;
    }

    .topbar .nav-notify-group {
        gap: 6px !important;
    }

    .topbar .nav-icon-btn {
        width: 34px !important;
        height: 34px !important;
    }

    .topbar .nav-hide-mobile {
        display: none !important;
    }

    /* Kullanıcı adı yerine yalnız avatar. */
    .topbar .nav-user-chip {
        padding: 3px !important;
        gap: 0 !important;
        border-radius: 12px !important;
    }

    .topbar .nav-user-chip > span:last-child {
        display: none !important;
    }

    .topbar .login-shortcut,
    .topbar .register-shortcut {
        display: inline-flex !important;
        margin-left: 0 !important;
        white-space: nowrap;
    }

    /* Menü: kapalıyken gizli, açılınca tam genişlikte alt alta. */
    .topbar nav,
    .advanced-topbar nav {
        display: none !important;
        order: 4;
        flex: 1 1 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        padding: 6px 0 4px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .topbar.nav-open nav,
    .advanced-topbar.nav-open nav {
        display: flex !important;
    }

    .topbar nav a,
    .topbar nav button,
    .topbar nav .nav-mobile-only button,
    .advanced-topbar nav a,
    .advanced-topbar nav button {
        justify-content: flex-start !important;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px !important;
        font-size: 14.5px !important;
    }

    .topbar nav .nav-mobile-only,
    .advanced-topbar nav .nav-mobile-only {
        display: flex !important;
    }

    .topbar nav form.nav-mobile-only {
        margin: 0;
        padding-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .topbar nav form.nav-mobile-only button {
        border: 0;
        background: transparent;
        color: #ffb4a3 !important;
        font-family: inherit;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

    /* "Tahminler & Listeler" alt menüsü nav'ın altında satır içi açılır. */
    .nav-menu-panel {
        position: static !important;
        order: 5;
        flex: 1 1 100%;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .nav-dropdown-menu {
        top: 62px !important;
    }

    .theme-switch-menu {
        top: 62px !important;
    }
}

@media (max-width: 420px) {
    /* Çok dar ekranda "Giriş" bağlantısı menüye taşınır; üst çubukta yalnız "Üye ol" kalır. */
    .topbar .login-shortcut {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .topbar .brand,
    .advanced-topbar .brand {
        font-size: 16px !important;
    }

    .topbar .status,
    .advanced-topbar .status,
    .topbar .nav-notify-group {
        gap: 4px !important;
    }
}

@media (max-width: 1300px) {
    /* Menü ekrandan uzunsa kendi içinde kayar. */
    .topbar.nav-open nav,
    .advanced-topbar.nav-open nav {
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    /* Alt menü, menü listesinin içinde bir kart olarak açılır. */
    .topbar nav .nav-menu-panel {
        order: 0;
        margin: 2px 0 6px !important;
        box-shadow: none !important;
    }

    /* Yönetici yan paneli düğmesi telefonda içeriğin üstünü kapatmasın: sağ altta küçük durur. */
    .ap-wrap {
        top: auto;
        bottom: 84px;
        transform: none;
    }

    .ap-wrap.is-closed {
        transform: translateX(var(--ap-w));
    }
}

/* Telefon: sabit sütunlu ızgaralar tek sütuna iner, çok geniş araç çubukları kaydırılır. */
@media (max-width: 720px) {
    .announcements-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ai-picker form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ai-picker form > *,
    .ai-picker .picker-match-field.wide {
        grid-column: auto !important;
        min-width: 0;
    }

    .odds-toolbar,
    .odds-toolbar .toolbar-left {
        min-width: 0;
        max-width: 100%;
    }

    .odds-toolbar .toolbar-left > * {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .odds-toolbar .match-navigator {
        overflow-x: auto;
    }

    img,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }
}

/* Uzun seçenek metni olan açılır listeler ekranı taşırmasın. */
@media (max-width: 720px) {
    select,
    input:not([type="checkbox"]):not([type="radio"]),
    textarea {
        max-width: 100%;
        min-width: 0;
    }

    .ai-picker select {
        width: 100%;
    }
}

/* Yönetim paneli: üst çubuk telefonda tek satıra sığar (başlık kısalır, adlar ve ikincil düğmeler gizlenir). */
@media (max-width: 992px) {
    .admin-topbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 0 12px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        box-sizing: border-box !important;
    }

    .admin-mobile-toggle {
        display: flex !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }

    .admin-topbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 130px) !important;
    }

    .admin-breadcrumb {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .admin-breadcrumb > span {
        display: none !important;
    }

    .admin-breadcrumb strong {
        display: block !important;
        overflow: hidden !important;
        font-size: 14px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .admin-topbar-right {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        gap: 4px !important;
    }

    .admin-topbar-action,
    .admin-topbar .nav-hide-mobile {
        display: none !important;
    }

    .admin-topbar .nav-notify-group {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .admin-topbar .nav-user-chip {
        padding: 0 !important;
        gap: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .admin-topbar .nav-user-chip-inner {
        padding: 2px !important;
        gap: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .admin-topbar .nav-user-chip > span:last-child {
        display: none !important;
    }

    .admin-topbar .nav-icon-btn,
    .admin-topbar .theme-switch-button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
    }

    .admin-topbar .nav-user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    /* Dar ekranda üst çubukta yalnız tema, bildirim ve mesajlar kalır; kullanıcı avatarı gizlenir (zaten menüde var) */
    .admin-topbar .nav-user-chip {
        display: none !important;
    }
}

/* Yönetim formları ve ızgaralar telefonda tek sütun / iki sütun olur. */
@media (max-width: 720px) {
    .form-pair,
    .form-trio,
    .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-grid:has(> .stat-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .messages-split-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .messages-split-grid > * {
        min-width: 0;
    }

    /* Kullanıcı listesi: tablo yerine her üye bir kart, alanlar etiketiyle alt alta. */
    .um-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .um-table,
    .um-table thead,
    .um-table tbody,
    .um-table tr,
    .um-table td {
        display: block;
        min-width: 0;
    }

    .um-table {
        min-width: 0;
    }

    .um-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .um-table tbody {
        display: grid;
        gap: 12px;
    }

    .um-table tr {
        overflow: hidden;
        border: 1px solid #dbe5ec;
        border-radius: 14px;
        background: #ffffff;
    }

    .um-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 14px;
        border-bottom: 1px solid #eef2f6;
        text-align: right;
    }

    .um-table td:last-child {
        border-bottom: 0;
    }

    .um-table td::before {
        flex: 0 0 auto;
        color: #64748b;
        content: attr(data-label);
        font-size: 12px;
        font-weight: 800;
        text-align: left;
    }

    .um-table td.um-cell-user {
        justify-content: flex-start;
        padding: 14px;
        background: #f8fafc;
        text-align: left;
    }

    .um-table td.um-cell-user::before,
    .um-table td.um-cell-actions::before {
        display: none;
    }

    .um-table td.um-cell-actions {
        justify-content: flex-start;
        background: #f8fafc;
    }

    .um-table td .um-sub {
        display: inline;
        margin: 0 0 0 8px;
    }

    .um-table tr.is-banned td.um-cell-user {
        background: #fff1f1;
    }

    .um-actions {
        flex-wrap: wrap;
    }

    .um-filters {
        grid-template-columns: 1fr 1fr;
    }

    .um-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .um-table td {
        padding: 7px 14px;
    }

    /* Verisi olmayan ("—") alanlar kartta hiç yer kaplamasın. */
    .um-table td:has(> .um-none:only-child) {
        display: none;
    }
}

@media (max-width: 992px) {
    /* Kapalıyken kenardan sızan gölgeyi kaldır. */
    .admin-sidebar:not(.open) {
        box-shadow: none !important;
    }
}

@media (max-width: 720px) {
    .admin-shell-body .form-pair,
    .admin-shell-body .form-pair[style] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .conv-meta-row,
    .conv-head {
        flex-wrap: wrap;
        min-width: 0;
    }
}

@media (max-width: 720px) {
    /* Formlardaki tek sütunlu ızgaralar içeriğin genişliğine değil ekrana uysun. */
    .admin-shell-body .admin-form-panel form,
    .admin-shell-body .admin-panel form {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-shell-body .admin-form-panel,
    .admin-shell-body .admin-panel {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    /* Yönetim ekranlarındaki satır içi sabit sütunlu ızgaralar (kupon satırları vb.) telefonda tek sütun olur. */
    .admin-shell-body .admin-page-content [style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-shell-body .admin-page-content [style*="grid-template-columns"] > * {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    /* Satır içi flex satırları sığmayınca alta iner; seçim kutuları tam genişlik alır. */
    .admin-shell-body .admin-page-content [style*="display:flex"],
    .admin-shell-body .admin-page-content [style*="display: flex"] {
        flex-wrap: wrap;
    }

    .admin-shell-body .admin-page-content input.input-pick,
    .admin-shell-body .admin-page-content .match-card-row select {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 1300px) {
    .ap-wrap {
        align-items: flex-end;
    }

    .ap-handle {
        margin-top: 0;
        height: 44px;
    }
}

@media (max-width: 720px) {
    .builder-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .coupon-type-group {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    }

    .admin-stats,
    .admin-stats-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-stats > *,
    .builder-grid > * {
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .admin-stats,
    .admin-stats-wide {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 720px) {
    .range-selection-field,
    .range-odd-card,
    .range-selection-field select {
        min-width: 0;
        max-width: 100%;
    }

    .range-selection-field select {
        width: 100%;
    }
}

/* Masaüstü: menü tek satırda ve ortalı kalsın. Genişlik daraldıkça önce bağlantılar sıkışır, asla ikinci satıra kaymaz; 1300px ve altında telefon menüsü devreye girer. */
@media (min-width: 1301px) {
    .topbar,
    .advanced-topbar {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .topbar nav,
    .advanced-topbar nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .topbar nav a,
    .topbar nav button,
    .advanced-topbar nav a,
    .advanced-topbar nav button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        font-size: 11.5px !important;
        font-weight: 750 !important;
        padding: 5px 6.5px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.015em !important;
        border-radius: 7px !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        gap: 3px !important;
    }

    .topbar nav .nav-menu-toggle {
        gap: 3px !important;
    }

    .nav-menu-caret {
        width: 11px !important;
        height: 11px !important;
        min-width: 11px !important;
        max-width: 11px !important;
    }
}

@media (min-width: 1301px) and (max-width: 1440px) {
    .topbar .nav-user-chip > span:last-child {
        display: none !important;
    }

    .topbar .nav-user-chip {
        padding: 3px !important;
        gap: 0 !important;
    }

    .topbar .nav-dup {
        display: none !important;
    }
}

@media (min-width: 1600px) {
    .topbar nav a,
    .topbar nav button,
    .advanced-topbar nav a,
    .advanced-topbar nav button {
        font-size: 12px !important;
        padding: 5px 8px !important;
        gap: 4px !important;
    }
    .topbar nav,
    .advanced-topbar nav {
        gap: 3px !important;
    }
}