/* ═══════════════════════════════════════════════════════════
   PEK MEKANİK — responsive.css
   Mobil & küçük tablet uyumluluğu (masaüstü görünümü korunur)
═══════════════════════════════════════════════════════════ */

/* ── Genel taşma & dokunmatik kaydırma ───────────────────── */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

#panelSection,
#loginSection {
    max-width: 100vw;
    overflow-x: hidden;
}

.table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ── Tablet (≤1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .pm-content {
        max-width: none;
        padding: 24px 20px;
    }

    .page-title {
        font-size: 22px;
    }

    .doc-layout {
        min-height: auto;
        gap: 16px;
    }

    .doc-tree-body {
        max-height: 480px;
        min-height: 280px;
    }

    /* 3+ sütunlu formlar → 2 sütun */
    .form-row[style*="1fr 1fr 1fr"],
    .form-row[style*="2fr"],
    .form-row[style*="repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
    }

    .detail-grid[style*="repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
    }

    .card-body > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    #shapeFieldsContainer {
        grid-template-columns: 1fr 1fr !important;
    }

    .file-preview-frame {
        height: 60vh;
    }
}

/* ── Küçük tablet / büyük telefon (≤900px) ────────────────── */
@media (max-width: 900px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .page-header > .flex {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-header .btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    .card-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }

    .card-body {
        padding: 16px;
    }

    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .table-toolbar-actions {
        width: 100%;
    }

    .table-toolbar-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    .prod-subview-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .prod-subview-header > div[style*="display:flex"],
    .prod-subview-header > .btn {
        width: 100%;
    }

    .prod-subview-header > div[style*="display:flex"]:last-child,
    .prod-subview-header > div[style*="flex-wrap"] {
        justify-content: stretch;
    }

    .prod-subview-header .btn {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-width: 0;
    }

    .prod-subview-header .prod-back-btn {
        flex: 0 0 auto;
        width: auto;
    }

    .prod-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .prod-toolbar .btn {
        width: 100%;
        justify-content: center;
    }

    .modal-overlay {
        padding: 16px;
        align-items: flex-start;
    }

    .modal-panel {
        max-height: calc(100vh - 32px);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pm-sidebar {
        width: min(calc(100vw - 56px), 300px);
    }
}

/* ── Telefon / dar tablet (≤768px) ────────────────────────── */
@media (max-width: 768px) {
    .pm-header {
        padding: 0 12px;
    }

    .pm-content {
        padding: 14px 12px;
    }

    .page-title {
        font-size: 20px;
        gap: 10px;
    }

    .page-title-icon {
        width: 36px;
        height: 36px;
    }

    .stat-value {
        font-size: 24px;
    }

    /* Tüm formlar tek sütun */
    .form-row,
    .form-row[style],
    #shapeFieldsContainer,
    .card-body [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .detail-grid,
    .detail-grid[style] {
        grid-template-columns: 1fr !important;
    }

    /* Operasyon stepper — yatay kaydırma */
    .op-stepper {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .op-step {
        flex: 0 0 auto;
        min-width: 96px;
    }

    .op-note-actions {
        flex-direction: column;
    }

    .op-note-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Excel / klasör bölümü */
    .doc-layout {
        grid-template-columns: 1fr !important;
    }

    .doc-tree-body {
        max-height: 360px;
        min-height: 200px;
    }

    .doc-tree-panel .panel-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Sabit modallar (inline stilli) */
    [id$="Modal"],
    #stockFormCard {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    [id$="Modal"] > div:first-child,
    #stockFormCard > div:first-child {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        max-height: none !important;
    }

    .file-preview-frame {
        height: 50vh;
        min-height: 240px;
    }

    /* GKK tablosu yatay kaydırma */
    table.gkk-table {
        min-width: 480px;
    }

    .card-body:has(.gkk-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Dokunmatik hedef boyutları */
    .btn,
    .btn-login,
    .nav-item,
    #hamburger,
    .theme-btn {
        min-height: 44px;
    }

    #hamburger {
        min-width: 44px;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .nav-item {
        padding: 12px 14px;
    }

    /* Tablo hücreleri — mobilde biraz sıkı */
    .table-wrap thead th {
        font-size: 10px;
        padding: 10px 8px;
        white-space: nowrap;
    }

    .table-wrap tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .table-wrap table,
    .card .table-wrap table {
        min-width: 480px;
    }

    /* GKK tablosu yatay kaydırma */
    #kimlik_title {
        font-size: 20px !important;
    }

    .login-card {
        padding: 32px 24px;
        margin: 12px;
        width: calc(100% - 24px);
    }

    .pw-edit-wrap {
        flex-direction: column;
        align-items: stretch !important;
    }

    .pw-edit-wrap input {
        width: 100% !important;
    }

    /* Sabit genişlikli filtre alanları */
    input[style*="width:"],
    select[style*="width:"] {
        width: 100% !important;
        max-width: none !important;
    }

    .prod-subview-header span[style*="width:1px"] {
        display: none;
    }
}

/* ── Küçük telefon (≤480px) ───────────────────────────────── */
@media (max-width: 480px) {
    .pm-header-title {
        display: none;
    }

    .page-title {
        font-size: 18px;
        flex-wrap: wrap;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .card-header .btn,
    .card-header .flex {
        width: 100%;
    }

    .card-header .btn {
        justify-content: center;
    }

    .prod-subview-header .btn {
        flex: 1 1 100%;
    }

    .prod-subview-title {
        font-size: 17px;
    }

    .table-toolbar-actions {
        flex-direction: column;
    }

    .table-toolbar-actions .btn {
        width: 100%;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    [id$="Modal"] [style*="justify-content:flex-end"],
    [id$="Modal"] [style*="justify-content: flex-end"] {
        flex-direction: column !important;
    }

    [id$="Modal"] [style*="justify-content:flex-end"] .btn,
    [id$="Modal"] [style*="justify-content: flex-end"] .btn {
        width: 100%;
        justify-content: center;
    }

    .login-card {
        padding: 28px 20px;
    }

    .login-brand h1 {
        font-size: 22px;
    }

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

/* ── Safe area (çentikli telefonlar) ──────────────────────── */
@supports (padding: max(0px)) {
    .pm-header {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .pm-content {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    #loginSection {
        padding-bottom: env(safe-area-inset-bottom);
    }
}