/* ══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Merkezi Mobil & Tablet Uyumluluk
   Tüm sayfalarda <head> içinde include edilir.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   TABLET — max-width: 1024px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* KPI gridleri 2 sütuna düşür */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Content split tek sütun */
    .content-split {
        grid-template-columns: 1fr !important;
    }

    /* Charts row tek sütun */
    .charts-row {
        grid-template-columns: 1fr !important;
    }

    /* Bottom grid tek sütun */
    .bottom-grid {
        grid-template-columns: 1fr !important;
    }

    /* Padding azalt */
    .page-main {
        padding: 24px 20px 48px !important;
    }

    /* Başlık boyutu küçült */
    .page-header h1 {
        font-size: 22px !important;
    }

    /* Navbar responsive */
    .navbar {
        left: 3%;
        right: 3%;
        padding: 0 20px;
        height: 64px;
    }

    .nav-brand {
        font-size: 18px;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-link {
        font-size: 13px;
        padding: 6px 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   MOBİL — max-width: 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── KRİTİK: Sidebar gizlendiğinde page-shell margin sıfırla ── */
    .page-shell {
        margin-left: 0 !important;
    }

    /* ── Page Main padding ── */
    .page-main {
        padding: 16px 14px 48px !important;
    }

    /* ── Sidebar: Mobilde gizle, overlay ile aç ── */
    .sidebar {
        position: fixed !important;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 40px rgba(0, 0, 0, 0.5);
        z-index: 999 !important;
        width: 280px !important;
        max-width: 85vw;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    #sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 998;
        backdrop-filter: blur(4px);
    }
    #sidebar-overlay.open {
        display: block;
    }

    /* ── Topbar sol sıfır ── */
    .topbar {
        left: 0 !important;
        padding: 0 16px !important;
    }

    /* ── Hamburger menü butonu göster ── */
    .topbar-menu-btn {
        display: flex !important;
    }

    /* ── Avatar isim ve ok gizle ── */
    .topbar-avatar-name,
    .topbar-avatar-caret {
        display: none !important;
    }
    .topbar-avatar-link {
        padding: 4px !important;
    }

    /* ── Navbar (Landing page) ── */
    .navbar {
        top: 12px;
        left: 8px;
        right: 8px;
        height: 60px;
        padding: 0 16px;
        border-radius: 16px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .nav-brand {
        font-size: 16px;
        gap: 10px;
    }

    .nav-brand-icon {
        width: 36px;
        height: 36px;
    }

    .nav-brand-icon .material-symbols-outlined {
        font-size: 20px;
    }

    /* Nav links mobilde hamburger menü içinde gösterilmeli veya gizlenmeli */
    .nav-links {
        display: none !important;
    }

    .nav-cta {
        gap: 8px;
        margin-left: auto;
    }

    .btn-ghost-sm {
        display: none; /* Mobilde sadece primary buton */
    }

    .btn-primary-sm {
        padding: 8px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* ── KPI Grid 1 sütun ── */
    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .kpi-strip {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ── KPI Değer boyutları küçült ── */
    .kpi-value {
        font-size: 26px !important;
    }
    .kpi-card {
        padding: 16px 18px !important;
    }

    /* ── Başlıklar ── */
    .page-header h1 {
        font-size: 20px !important;
    }
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* ── Content Split tek sütun ── */
    .content-split {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ── Charts row / bottom grid ── */
    .charts-row {
        grid-template-columns: 1fr !important;
    }
    .bottom-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Form Grid tek sütun ── */
    .form-grid,
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* ── Settings Layout ── */
    .settings-layout {
        grid-template-columns: 1fr !important;
    }

    /* ── Scanner Grid ── */
    .scanner-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Notes Grid ── */
    .notes-grid,
    .pinned-notes-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Tablo Scroll Wrapper ── */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }
    .table-responsive table {
        min-width: 600px;
    }

    /* ── Tablo hücre padding azalt ── */
    .data-table th,
    .data-table td,
    .critical-table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* ── Toolbar ── */
    .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .toolbar .search-wrap {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .toolbar-spacer {
        display: none !important;
    }

    /* ── Butonlar ── */
    .btn {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
    .btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* ── Card head ── */
    .card-head {
        padding: 14px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .card-head-title {
        font-size: 14px !important;
    }
    .card-body {
        padding: 16px !important;
    }

    /* ── Pagination ── */
    .pagination-bar {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }

    /* ── Hero section (product detail & landing) ── */
    .hero {
        grid-template-columns: 1fr !important;
        padding: 120px 5% 80px !important;
    }

    .hero h1 {
        font-size: clamp(32px, 8vw, 48px) !important;
        letter-spacing: -1.5px !important;
    }

    .hero-desc {
        font-size: 16px !important;
    }

    .hero-stats {
        padding: 24px 20px !important;
        gap: 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .stat-item {
        width: 100%;
    }

    .stat-value {
        font-size: 32px !important;
    }

    .hero-badge {
        font-size: 12px !important;
        padding: 6px 16px !important;
    }

    /* ── Avatar section (settings) ── */
    .avatar-section {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }

    /* ── Toggle row ── */
    .toggle-row {
        gap: 12px !important;
    }

    /* ── Chart Container boyutu ── */
    .chart-container {
        height: 180px !important;
    }

    /* ── Chart SVG ── */
    .chart-wrap {
        padding: 16px 12px 24px !important;
    }

    /* ── Chart Legend ── */
    .chart-legend {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* ── Toast bildirimleri — mobilde orta ── */
    #toast-container {
        left: 14px !important;
        right: 14px !important;
        bottom: 16px !important;
    }
    .toast {
        min-width: unset !important;
        max-width: 100% !important;
    }

    /* ── Restock buton ── */
    .restock-btn {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    /* ── Filter tabs / chips — yatay scroll ── */
    .filter-tabs,
    .filter-chips {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    .filter-tabs::-webkit-scrollbar,
    .filter-chips::-webkit-scrollbar {
        display: none;
    }

    /* ── Breadcrumb ── */
    .breadcrumb {
        font-size: 11px !important;
        flex-wrap: wrap !important;
    }

    /* ── Danger zone ── */
    .danger-zone {
        padding: 16px !important;
    }

    /* ── KPI Chip ── */
    .kpi-chip {
        padding: 12px 14px !important;
    }
    .kpi-chip-val {
        font-size: 18px !important;
    }

    /* ── Depletion items ── */
    .depletion-days {
        font-size: 16px !important;
    }

    /* ── Ring value ── */
    .ring-value {
        font-size: 28px !important;
    }

    /* ── Source list ── */
    .source-list {
        padding: 0 16px 16px !important;
    }

    /* ── Filter Bar (stock_movements) ── */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .filter-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .filter-select,
    .filter-input {
        width: 100% !important;
        min-width: 0 !important;
    }
    .filter-divider {
        display: none !important;
    }
    .filter-spacer {
        display: none !important;
    }

    /* ── Table card + table scroll ── */
    .table-card {
        border-radius: 10px !important;
    }
    .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Card içindeki tabloların taşmasını engelle ── */
    .card {
        overflow: hidden !important;
    }
    .card > div:has(.data-table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Notes grid tek sütun ── */
    .notes-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Page header içindeki butonları alt satıra al ── */
    .page-header .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── Bento Grid (Landing page features) ── */
    .bento-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .bento-card {
        padding: 28px 24px !important;
        grid-column: span 1 !important;
    }

    .bento-large,
    .bento-medium,
    .bento-tall {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }

    .bento-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 20px !important;
    }

    .bento-card h3 {
        font-size: 20px !important;
    }

    .bento-card p {
        font-size: 14px !important;
    }

    /* ── Timeline Grid ── */
    .timeline-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .timeline-item {
        padding: 24px 20px !important;
    }

    /* ── CTA Section ── */
    .cta-box {
        padding: 48px 24px !important;
        border-radius: 20px !important;
    }

    .cta-box h2 {
        font-size: clamp(28px, 5vw, 36px) !important;
    }

    .cta-box p {
        font-size: 16px !important;
    }

    /* ── Footer ── */
    .footer-inner {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center;
    }

    .footer-links {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   KÜÇÜK MOBİL — max-width: 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .page-main {
        padding: 12px 10px 40px !important;
    }

    .page-header h1 {
        font-size: 18px !important;
    }

    .kpi-value {
        font-size: 22px !important;
    }
    .kpi-card {
        padding: 14px 14px !important;
    }
    .kpi-label {
        font-size: 10px !important;
    }

    .topbar {
        padding: 0 12px !important;
        height: 56px !important;
    }

    .topbar-title {
        font-size: 14px !important;
    }

    .card-head {
        padding: 12px 14px !important;
    }
    .card-body {
        padding: 12px 14px !important;
    }

    /* Tablo min genişlik daha da dar */
    .table-responsive table {
        min-width: 500px;
    }

    .chart-container {
        height: 150px !important;
    }

    .btn {
        font-size: 11px !important;
        padding: 7px 12px !important;
    }

    /* Not kartları */
    .note-card {
        padding: 14px !important;
    }

    .pinned-note-body {
        padding: 10px 12px !important;
    }
    .pinned-note-title {
        font-size: 13px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   YATAY MOD KORUMASI (Landscape orientation küçük cihazlar)
   ══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .page-main {
        padding-top: 8px !important;
        padding-bottom: 24px !important;
    }
    .topbar {
        height: 48px !important;
    }
    .page-main {
        margin-top: 48px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   iPHONE / DOKUNMATİK — en sonda, önceki kuralları ezer
   (safe-area, alt sekme çubuğu, 44px dokunma alanı, iOS zoom önleme)
   ══════════════════════════════════════════════════════════════ */

/* Flex çocuk geniş tablolar yüzünden sayfayı yana taşırmasın */
.page-shell { min-width: 0; }

.bottom-nav { display: none; }

@media (max-width: 768px) {
    :root { --bn-h: 64px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }

    html, body { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
    body { height: 100dvh !important; -webkit-tap-highlight-color: transparent; }
    .page-shell { height: 100dvh !important; }

    /* Çentik / Dynamic Island */
    .topbar {
        height: calc(56px + var(--safe-t)) !important;
        padding-top: var(--safe-t) !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }
    .page-main {
        margin-top: calc(56px + var(--safe-t)) !important;
        padding-bottom: calc(var(--bn-h) + var(--safe-b) + 24px) !important;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar { padding-top: var(--safe-t); padding-bottom: var(--safe-b); }

    /* Topbar sadeleştir: menü + tema + avatar yeter, ekle/bildirim alt çubukta */
    .topbar-actions > a[href*="add_product"],
    #notifications-btn,
    .topbar-sep { display: none !important; }
    .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

    /* iOS: 16px altı inputa odaklanınca sayfa zoom yapar */
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }

    /* Dokunma alanları */
    .btn { min-height: 44px; font-size: 14px !important; padding: 10px 16px !important; }
    .qty-btn { width: 44px !important; height: 44px !important; }
    .qty-input { width: 56px !important; height: 44px; }
    .apply-btn { height: 44px !important; padding: 0 16px !important; }
    .mode-btn { padding: 10px 12px !important; font-size: 13px !important; }
    .topbar-icon-btn, .topbar-menu-btn, .theme-toggle { width: 42px !important; height: 42px !important; }

    /* KPI: tek sütun yerine kompakt 2 sütun */
    .kpi-grid, .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .kpi-card { padding: 14px !important; }
    .kpi-bars { display: none !important; }
    .kpi-icon { width: 36px !important; height: 36px !important; }
    .kpi-value { font-size: 24px !important; }
    .kpi-card .btn { min-height: 36px; padding: 6px 10px !important; font-size: 12px !important; }

    /* Toast alt çubuğun üstünde */
    #toast-container { bottom: calc(var(--bn-h) + var(--safe-b) + 12px) !important; }

    /* ── Alt sekme çubuğu ── */
    .bottom-nav {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        height: calc(var(--bn-h) + var(--safe-b));
        padding-bottom: var(--safe-b);
        background: rgba(13,17,23,0.92);
        backdrop-filter: blur(20px) saturate(1.6);
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    [data-theme="light"] .bottom-nav { background: rgba(255,255,255,0.92); border-top-color: rgba(15,23,42,0.1); }
    .bn-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: #64748b; text-decoration: none; font: 600 10.5px 'Inter', sans-serif;
        background: none; border: none; cursor: pointer; min-height: 44px;
    }
    .bn-item .material-symbols-outlined { font-size: 24px; }
    .bn-item.active { color: #818cf8; }
    .bn-item.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
    .bn-scan .bn-scan-ico {
        width: 48px; height: 48px; border-radius: 16px; margin-top: -18px;
        display: flex; align-items: center; justify-content: center; color: #fff;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        box-shadow: 0 6px 20px rgba(99,102,241,0.45);
    }

    /* ── Ürün detay: varyasyon tablosu → kartlar ── */
    .variant-table { min-width: 0 !important; }
    .variant-table thead { display: none; }
    .variant-table tbody tr {
        display: grid; grid-template-columns: 1fr auto; gap: 10px 12px;
        padding: 14px; border-bottom: 1px solid var(--border);
    }
    .variant-table td { padding: 0 !important; }
    .variant-table td:nth-child(2) { justify-self: end; }
    .variant-table td:nth-child(4) { justify-self: end; align-self: center; }
    .variant-table td:nth-child(5) { grid-column: 1 / -1; }
    .variant-table td:nth-child(6) { display: none; }
    .variant-table td:nth-child(4)::before { content: 'min '; font-size: 11px; color: var(--text-3); }
    .variant-table .stock-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .variant-table .mode-toggle { grid-column: 1 / -1; }
    .variant-table .mode-btn { flex: 1; }
    .variant-table .qty-ctrl { grid-column: 1 / -1; justify-content: space-between; }
    .variant-table .qty-input { flex: 1; }
    .variant-table .apply-btn { justify-content: center; }
}

/* Aydınlık modda üst çubuk da açık renk olsun */
[data-theme="light"] .topbar { background: rgba(255,255,255,0.88); border-bottom-color: rgba(15,23,42,0.08); }
[data-theme="light"] .topbar-title { color: #0f172a; }
[data-theme="light"] .topbar-icon-btn, [data-theme="light"] .topbar-menu-btn { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.08); color: #475569; }
[data-theme="light"] .topbar-avatar-link { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.08); }

@media (max-width: 768px) {
    /* Kapalı menünün gölgesi sol kenara taşmasın */
    .sidebar:not(.open) { box-shadow: none !important; }
}