/* =========================================================================
   responsive.css — Kuzey Panel
   Tablet ve mobil uyumluluk. Masaüstü öncelikli (desktop-first) yaklaşım.
   ========================================================================= */

/* ---------- TABLET (<= 1180px): sidebar daralır, kartlar 2 kolon ---------- */
@media (max-width: 1180px) {
    :root { --sidebar-w: 76px; }
    .brand-text, .branch-select, .nav-item span, .nav-group-label,
    .sidebar-user-info, .brand-plan { display: none; }
    .sidebar-brand { justify-content: center; padding: 20px 0 16px; }
    .nav-item { justify-content: center; padding: 11px; }
    .sidebar-user { justify-content: center; }
    .sidebar-footer .nav-item-muted span { display: none; }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .wizard-layout { grid-template-columns: 1fr 280px; }
    .topbar-search { max-width: 260px; }
    .user-chip-info { display: none; }
}

/* ---------- SMALL TABLET / LARGE MOBILE (<= 960px) ---------- */
@media (max-width: 960px) {
    .wizard-layout { grid-template-columns: 1fr; }
    .wizard-summary { position: static; order: -1; }
    .option-card-group { grid-template-columns: repeat(2, 1fr); }
    .rate-strip .rate-chip:nth-child(3) { display: none; }
}

/* ---------- MOBILE (<= 720px): drawer sidebar, kart listeleri ---------- */
@media (max-width: 720px) {
    :root { --sidebar-w: 0px; --topbar-h: 64px; }

    .sidebar {
        width: 280px; transform: translateX(-100%);
        transition: transform .2s ease; z-index: 100;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: inline-flex; background: none; border: none; color: var(--text-faint); font-size: 16px; }
    .brand-text, .branch-select, .nav-item span, .nav-group-label,
    .sidebar-user-info, .brand-plan { display: block; }
    .sidebar-brand { justify-content: flex-start; }
    .nav-item { justify-content: flex-start; }

    .sidebar-overlay.show { display: block; }

    .app-main { margin-left: 0; }
    .sidebar-toggle { display: inline-flex; }

    .topbar { padding: 0 16px; gap: 12px; }
    .topbar-search { display: none; }
    .rate-strip { display: none; }
    .btn-topbar span { display: none; }
    .btn-topbar { padding: 10px 12px; }
    .topbar-title { font-size: 15.5px; }
    .breadcrumb { display: none; }

    .app-content { padding: 18px 14px 90px; }
    .page-head { flex-direction: column; align-items: stretch; }
    .page-head-actions { width: 100%; }
    .page-head-actions .btn { flex: 1; }

    .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .option-card-group { grid-template-columns: repeat(2, 1fr); }

    /* Tabloları kart listesine çevir */
    .data-table { min-width: 0; }
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tbody tr, .data-table tbody td { display: block; width: 100%; }
    .data-table tbody tr {
        border: 1px solid var(--border); border-radius: var(--radius);
        margin-bottom: 12px; padding: 6px 4px; background: var(--surface);
    }
    .data-table tbody td {
        border-bottom: none; padding: 7px 12px;
        display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: right;
    }
    .data-table tbody td::before {
        content: attr(data-label); font-size: 11px; font-weight: 700;
        color: var(--text-faint); text-transform: uppercase; text-align: left;
    }

    .modal { width: calc(100vw - 24px); max-height: calc(100vh - 40px); }
    .drawer { width: 100vw; max-width: 100vw; }

    .stepper { padding: 14px; }
    .step-label { display: none; }
    .step-connector { width: 20px; }

    .wizard-actions { flex-direction: column-reverse; gap: 10px; }
    .wizard-actions .btn { width: 100%; }

    /* Mobilde alt sabit ana aksiyon */
    .mobile-action-bar {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0;
        padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--border);
        z-index: 45; box-shadow: 0 -4px 14px rgba(23,32,51,.06);
    }
    .mobile-action-bar .btn { width: 100%; padding: 13px; }

    .toast-stack { left: 14px; right: 14px; bottom: 84px; }
    .toast { min-width: 0; width: 100%; }
}

@media (min-width: 721px) {
    .mobile-action-bar { display: none; }
}

/* ---------- ÇOK KÜÇÜK EKRAN (<= 400px) ---------- */
@media (max-width: 400px) {
    .kpi-value { font-size: 21px; }
    .avatar-lg { width: 46px; height: 46px; font-size: 15px; }
    .note-paper-grid { grid-template-columns: 1fr; }
    .note-paper-sign { grid-template-columns: 1fr; gap: 20px; }
}