* { box-sizing: border-box; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f2f4f7;
    color: #1f2430;
    margin: 0;
}
a { color: #2f6fed; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 230px;
    background: #1a1f2b;
    color: #e6e8ee;
    display: flex;
    flex-direction: column;
    padding: 18px 0;
    flex-shrink: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}.sidebar .brand { font-weight: 700; font-size: 16px; padding: 0 20px 18px; border-bottom: 1px solid #2b3242; }
.sidebar nav { display: flex; flex-direction: column; padding: 14px 0; flex: 1; }
.sidebar nav a {
    color: #b7bccb; text-decoration: none; padding: 11px 20px; font-size: 14px; font-weight: 500;
    border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: #232a3a; color: #fff; }
.sidebar nav a.active { background: #232a3a; color: #fff; border-left-color: #2f6fed; }

/* .nav-group stilleri artık includes/header.php içindeki <style> bloğunda (daha kapsamlı,
   accordion + mobil animasyonlu versiyon) — burada tekrar tanımlamıyoruz, çakışmasın diye. */
.sidebar-footer { padding: 14px 20px 0; border-top: 1px solid #2b3242; }
.user-chip { display: flex; flex-direction: column; margin-bottom: 10px; }
.user-chip strong { font-size: 14px; }
.user-chip span { font-size: 12px; color: #8b93a7; }
.logout-link { font-size: 13px; color: #ff8080; text-decoration: none; }

.main { flex: 1; min-width: 0; }
.topbar { background: #fff; padding: 18px 28px; border-bottom: 1px solid #e5e7ee; display:flex; align-items:center; gap:16px; }
.topbar form input { padding: 8px 12px; }
.topbar form { width: 280px; }

/* ---------- Notifications ---------- */
.notif-wrap { position: relative; }
.notif-bell { background: none; border: none; font-size: 20px; cursor: pointer; position: relative; margin-top: 0; padding: 4px 8px; }
.notif-badge { position: absolute; top: -2px; right: 0; background: #b02a37; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; }
.notif-dropdown { display: none; position: absolute; right: 0; top: 36px; width: 320px; max-height: 400px; overflow-y: auto; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); z-index: 100; }
.notif-dropdown.show { display: block; }
.notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid #eee; text-decoration: none; color: #222; font-size: 13px; }
.notif-item:hover { background: #f7f8fa; }
.notif-time { font-size: 11px; color: #999; margin-top: 3px; }
.notif-empty { padding: 20px; text-align: center; color: #999; font-size: 13px; }
.notif-mark-all { width: 100%; border-radius: 0 0 10px 10px; margin-top: 0; background: #f2f4f7; color: #444; font-size: 12px; padding: 10px; }
.notif-mark-all:hover { background: #e5e7ee; }
.topbar h1 { margin: 0; font-size: 20px; }
main { padding: 24px 28px; }

/* ---------- Cards ---------- */
.card {
    background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(20,20,40,0.06);
}
.card h3 { margin-top: 0; }
.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .two-col, .three-col { grid-template-columns: 1fr; } }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(20,20,40,0.06); }
.stat-num { font-size: 24px; font-weight: 700; }
.stat-label { font-size: 12px; color: #777; margin-top: 4px; }
.stat-warn .stat-num { color: #b8860b; }
.stat-info .stat-num { color: #0a58ca; }
.stat-success .stat-num { color: #0f5132; }

/* ---------- Bars ---------- */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-label { width: 170px; font-size: 13px; flex-shrink: 0; }
.bar-track { flex: 1; background: #eef0f4; border-radius: 6px; height: 10px; overflow: hidden; }
.bar-fill { background: #2f6fed; height: 100%; border-radius: 6px; }
.bar-count { width: 30px; text-align: right; font-size: 13px; color: #555; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #eee; font-size: 14px; }
th { color: #777; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover td { background: #fafbfd; }
.muted { color: #999; text-align: center; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #eef0f4; color: #444; }
.priority-yuksek { color: #b02a37; font-weight: 600; }
.priority-normal { color: #555; }
.priority-dusuk { color: #888; }

/* ---------- Forms ---------- */
form label { display: block; margin-top: 12px; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #444; }
input, select, textarea {
    width: 100%; padding: 9px 10px; border: 1px solid #d7dae2; border-radius: 6px; font-size: 14px; font-family: inherit;
}
textarea { resize: vertical; min-height: 70px; }
button, .btn {
    display: inline-block; margin-top: 16px; background: #2f6fed; color: #fff; border: none;
    padding: 10px 18px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { background: #2559c9; }
.btn-secondary { background: #6c757d; }
.btn-secondary:hover { background: #565e64; }
.btn-danger { background: #b02a37; }
.btn-danger:hover { background: #8f222c; }
.btn-sm { padding: 6px 12px; font-size: 12px; margin-top: 0; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; }
.filters select, .filters input { width: auto; }

/* ---------- Flash messages ---------- */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash-success { background: #d1e7dd; color: #0f5132; }
.flash-error { background: #f8d7da; color: #842029; }
.flash-info { background: #cfe2ff; color: #084298; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #e5e7ee; margin-bottom: 16px; }
.tabs a { padding: 10px 16px; text-decoration: none; color: #666; font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; }
.tabs a.active { color: #2f6fed; border-bottom-color: #2f6fed; }

/* ---------- Timeline / log ---------- */
.timeline-item { border-left: 2px solid #e5e7ee; padding: 4px 0 4px 14px; margin-left: 4px; position: relative; margin-bottom: 4px; }
.timeline-item::before { content: ''; width: 8px; height: 8px; background: #2f6fed; border-radius: 50%; position: absolute; left: -5px; top: 10px; }
.timeline-time { font-size: 12px; color: #999; }

/* ---------- Login page ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg,#1a1f2b,#2f6fed20), #f2f4f7; }
.login-card { background: #fff; padding: 36px 32px; border-radius: 14px; width: 340px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
.login-card h2 { margin: 0 0 4px; text-align: center; }
.login-sub { text-align: center; color: #888; font-size: 13px; margin-bottom: 8px; }
.login-card button { width: 100%; }
.login-hint { text-align: center; font-size: 12px; color: #999; margin-top: 14px; }

/* ---------- Photo grid ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.photo-grid img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; }

/* ---------- Mobil Uyumluluk ---------- */
/* NOT: .sidebar, .sidebar-backdrop, .menu-toggle (görünürlük), .topbar mobil davranışları
   artık includes/header.php içindeki <style> bloğunda (768px breakpoint, transform tabanlı
   accordion menü) yönetiliyor. Burada sadece buton GÖRÜNÜMÜNÜ (arka plan/kenarlık sıfırlama)
   tanımlıyoruz, görünürlüğe (display) karışmıyoruz — aksi halde iki farklı mekanizma üst üste
   binip sidebar'ı bozabilir. */
.menu-toggle { background: none; border: none; font-size: 22px; cursor: pointer; margin-top: 0; padding: 4px 8px; color: inherit; }

@media (max-width: 900px) {
    main { padding: 14px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .two-col, .three-col { grid-template-columns: 1fr; }
    /* Tabloları yatay kaydırılabilir yap, taşmasın */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    .card { padding: 14px; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .filters { flex-wrap: wrap; }
    .filters input, .filters select { width: 100%; }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .login-card { width: 100%; margin: 0 16px; }
}

/* ---------- Ek mobil düzeltmeleri (v2) ---------- */
@media (max-width: 900px) {
    /* Şablon editörü: sol blok paleti üstte, canvas altta */
    #canvas,
    div[style*="grid-template-columns:220px 1fr"] {
        display: block !important;
    }

    /* Randevu haftalık görünümü: 7 sütun yerine yan yana kaydırılabilir kalsın ama daralsın */
    div[style*="grid-template-columns:repeat(7,1fr)"] {
        grid-template-columns: repeat(7, minmax(110px, 1fr)) !important;
    }

    /* Modallar (hızlı ürün/müşteri oluşturma) küçük ekranlarda kenarlardan taşmasın */
    #productModalOverlay > div,
    #customerModalOverlay > div {
        width: 92% !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* Dinamik satır tablolarındaki (satış/alış/teklif kalemleri) küçük sabit genişlikli
       input'lar kaydırmalı tabloda daha rahat dokunulabilsin */
    #itemsTable input, #itemsTable select { min-width: 60px; }
    #itemsTable textarea { min-width: 110px; }

    /* İmza pad'i ekran genişliğine sığsın (JS koordinat hesaplaması buna göre ayarlı) */
    #signaturePad { max-width: 100%; height: auto; }

    /* Butonlar dokunma için biraz daha büyük hedef alansın */
    .btn-sm { padding: 8px 12px; }
}

@media (max-width: 480px) {
    .tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .tabs a { flex-shrink: 0; }
    .card h3 { font-size: 15px; }
    .stat-num { font-size: 20px; }
    .notif-dropdown { width: 90vw; right: -10px; }
    .bar-label { width: 90px; font-size: 11px; }
    .bar-count { width: 24px; font-size: 11px; }
}

/* ---------- Karanlık Mod ---------- */
body.dark-mode { background: #14171f; color: #d8dae0; }
body.dark-mode .main { background: #14171f; }
body.dark-mode .topbar { background: #1a1f2b; border-bottom-color: #2b3242; }
body.dark-mode .topbar h1 { color: #e6e8ee; }
body.dark-mode .card, body.dark-mode .stat-card, body.dark-mode .login-card {
    background: #1e2330; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.dark-mode .card h3, body.dark-mode th { color: #c3c6ce; }
body.dark-mode table { color: #d8dae0; }
body.dark-mode td, body.dark-mode th { border-bottom-color: #2b3242; }
body.dark-mode tr:hover td { background: #232a3a; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
    background: #262b38; border-color: #3a4152; color: #e6e8ee;
}
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #6b7280; }
body.dark-mode .muted { color: #7d8290; }
body.dark-mode .badge { background: #2b3242; color: #c3c6ce; }
body.dark-mode .btn-secondary { background: #2b3242; color: #d8dae0; }
body.dark-mode .btn-secondary:hover { background: #3a4152; }
body.dark-mode .tabs { border-bottom-color: #2b3242; }
body.dark-mode .tabs a { color: #8b93a7; }
body.dark-mode .tabs a.active { color: #6d9bff; border-bottom-color: #6d9bff; }
body.dark-mode .bar-track { background: #262b38; }
body.dark-mode .flash-info { background: #1c2f4a; color: #9ec5ff; }
body.dark-mode .flash-success { background: #163a2a; color: #8ee6b0; }
body.dark-mode .flash-error { background: #3a1a1e; color: #ff9fa8; }
body.dark-mode .timeline-item { border-left-color: #2b3242; }
body.dark-mode .notif-dropdown { background: #1e2330; }
body.dark-mode .notif-item { border-bottom-color: #2b3242; color: #d8dae0; }
body.dark-mode .notif-item:hover { background: #262b38; }
body.dark-mode .notif-mark-all { background: #262b38; color: #d8dae0; }
body.dark-mode a { color: #6d9bff; }
body.dark-mode .block-card { background: #262b38 !important; border-color: #3a4152 !important; }

/* ---------- Dashboard v2 (yeni tasarım) ---------- */
.welcome-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.stat-grid-v2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card-v2 {
    background: #fff; border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06); position: relative;
}
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.stat-num-v2 { font-size: 24px; font-weight: 800; line-height: 1.1; }
.stat-label-v2 { font-size: 12.5px; color: #7d8290; margin-top: 2px; }
.stat-trend { position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.trend-up { background: #d1f5e0; color: #0f5132; }
.trend-down { background: #fbd7dc; color: #842029; }

.legend-row { display: flex; gap: 16px; font-size: 12px; color: #666; margin-bottom: 10px; }
.legend-row span { display: flex; align-items: center; gap: 5px; }
.legend-row i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.grouped-chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 10px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-bars { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.chart-bar { width: 8px; border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.2s ease; }
.chart-label { font-size: 11px; color: #7d8290; text-align: center; margin-top: 6px; line-height: 1.3; }

@media (max-width: 900px) {
    .stat-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .welcome-header { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
    /* Çok dar ekranlarda tek sütun daha rahat okunur */
    .stat-grid-v2 { grid-template-columns: 1fr; }
    .stat-card-v2 { padding: 14px; }
    .stat-icon { width: 38px; height: 38px; font-size: 17px; }
    .stat-num-v2 { font-size: 20px; }

    /* Grafik: çubukları ve etiketleri küçültüp sıkıştır, taşırsa yatay kaydır */
    .grouped-chart { height: 140px; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
    .chart-col { min-width: 34px; }
    .chart-bar { width: 5px; }
    .chart-label { font-size: 9.5px; }
    .legend-row { flex-wrap: wrap; gap: 10px; font-size: 11px; }
}

body.dark-mode .stat-card-v2 { background: #1e2330; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
body.dark-mode .stat-label-v2 { color: #8b93a7; }
body.dark-mode .legend-row { color: #8b93a7; }


/* ============================================================
   GELİŞMİŞ RESPONSIVE MOBİL UYUMLULUK
   Teknik Servis CRM
   Bu bölüm mevcut stilleri bozmadan mobil davranışları iyileştirir.
   ============================================================ */

/* ---------- Genel güvenli responsive ayarlar ---------- */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

button,
input,
select,
textarea {
    max-width: 100%;
    min-width: 0;
}

button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    touch-action: manipulation;
}

/* Uzun metin ve teknik değerler ekranı bozmasın */
.card,
.stat-card,
.stat-card-v2,
.topbar,
main,
.toolbar,
form,
table,
td,
th {
    overflow-wrap: anywhere;
}

/* ---------- Masaüstü / tablet ortak yardımcı sınıflar ---------- */
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.table-responsive table {
    min-width: 620px;
}

.form-row,
.form-grid,
.fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-row > *,
.form-grid > *,
.fields-grid > * {
    min-width: 0;
}

.full-width,
.form-full,
.grid-full {
    grid-column: 1 / -1;
}

/* ---------- 900px altı: tablet ve küçük dizüstü ---------- */
@media (max-width: 900px) {
    .app-shell {
        width: 100%;
        min-width: 0;
    }

    .main {
        width: 100%;
        min-width: 0;
    }

    .topbar {
        min-width: 0;
        padding: 14px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .topbar h1 {
        font-size: 18px;
        line-height: 1.3;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .topbar form {
        width: 100%;
        max-width: 100%;
        order: 3;
    }

    .topbar form input {
        width: 100%;
        min-height: 42px;
    }

    main {
        width: 100%;
        max-width: 100%;
        padding: 16px;
    }

    .card,
    .stat-card,
    .stat-card-v2 {
        min-width: 0;
        max-width: 100%;
    }

    .stat-grid,
    .stat-grid-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-col,
    .three-col {
        grid-template-columns: minmax(0, 1fr);
    }

    .welcome-header {
        gap: 12px;
        flex-wrap: wrap;
    }

    .toolbar {
        align-items: stretch;
        gap: 10px;
    }

    .toolbar > * {
        min-width: 0;
    }

    .filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .filters input,
    .filters select,
    .filters button,
    .filters .btn {
        width: 100%;
        min-width: 0;
    }

    .bar-row {
        gap: 8px;
    }

    .bar-label {
        width: 120px;
        max-width: 35%;
        flex-shrink: 1;
    }

    .bar-count {
        flex-shrink: 0;
    }

    .form-row,
    .form-grid,
    .fields-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .full-width,
    .form-full,
    .grid-full {
        grid-column: auto;
    }

    .tabs {
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .tabs a {
        flex: 0 0 auto;
    }

    .notif-dropdown {
        max-width: calc(100vw - 24px);
    }

    .login-card {
        max-width: calc(100vw - 32px);
    }
}

/* ---------- 768px altı: asıl mobil düzen ---------- */
@media (max-width: 768px) {
    .sidebar {
        max-width: 86vw;
        width: 280px;
    }

    .main {
        min-width: 0;
    }

    .topbar {
        padding: 12px;
        min-height: 58px;
    }

    .topbar h1 {
        font-size: 16px;
        flex: 1 1 120px;
    }

    .menu-toggle {
        min-width: 42px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

    main {
        padding: 12px;
    }

    .card {
        padding: 14px;
        border-radius: 10px;
        margin-bottom: 14px;
    }

    .card h3 {
        font-size: 16px;
        line-height: 1.35;
    }

    .stat-grid,
    .stat-grid-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-card-v2 {
        padding: 12px;
        gap: 9px;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .stat-num,
    .stat-num-v2 {
        font-size: 20px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .stat-label,
    .stat-label-v2 {
        font-size: 11px;
        line-height: 1.35;
    }

    .stat-trend {
        position: static;
        display: inline-block;
        margin-top: 6px;
        font-size: 10px;
    }

    .grouped-chart {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .chart-col {
        min-width: 34px;
    }

    .legend-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Mobilde tablolar kontrollü kaydırılır */
    .table-responsive {
        margin-right: 0;
        border-radius: 6px;
    }

    table {
        display: table;
        width: 100%;
        min-width: 640px;
        white-space: normal;
    }

    th,
    td {
        padding: 9px 8px;
        font-size: 12px;
        vertical-align: middle;
    }

    th {
        font-size: 10px;
    }

    td .btn,
    td button,
    td .btn-sm {
        white-space: nowrap;
    }

    /* Form kontrolleri */
    form label {
        font-size: 12px;
    }

    input,
    select,
    textarea {
        min-height: 42px;
        padding: 10px;
        font-size: 16px; /* iOS otomatik yakınlaştırmayı önler */
    }

    textarea {
        min-height: 90px;
    }

    button,
    .btn {
        min-height: 42px;
        padding: 10px 14px;
    }

    .btn-sm {
        min-height: 38px;
        padding: 8px 11px;
    }

    .toolbar > .btn,
    .toolbar > button {
        width: 100%;
    }

    .filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .filters input,
    .filters select {
        width: 100%;
    }

    /* Satış / alış / teklif kalemleri */
    #itemsTable {
        min-width: 760px;
    }

    #itemsTable input,
    #itemsTable select {
        min-width: 90px;
        min-height: 40px;
    }

    #itemsTable textarea {
        min-width: 140px;
    }

    /* Modal pencereler */
    #productModalOverlay,
    #customerModalOverlay {
        padding: 12px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    #productModalOverlay > div,
    #customerModalOverlay > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 24px) !important;
        margin: 0 !important;
        border-radius: 12px;
        overflow-y: auto;
    }

    /* İmza alanı */
    #signaturePad {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        touch-action: none;
    }

    /* Bildirim paneli */
    .notif-dropdown {
        position: fixed;
        top: 62px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: 70vh;
        border-radius: 10px;
    }

    /* Fotoğraf alanı */
    .photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .photo-grid img {
        height: 90px;
    }

    /* Şablon editörü ve haftalık takvim */
    #canvas {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
    }

    div[style*="grid-template-columns:220px 1fr"] {
        display: block !important;
    }

    div[style*="grid-template-columns:repeat(7,1fr)"] {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(105px, 1fr)) !important;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* ---------- 480px altı: küçük telefonlar ---------- */
@media (max-width: 480px) {
    main {
        padding: 8px;
    }

    .topbar {
        padding: 10px 8px;
    }

    .topbar h1 {
        font-size: 15px;
    }

    .card {
        padding: 12px;
        border-radius: 9px;
    }

    .stat-grid,
    .stat-grid-v2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .stat-card,
    .stat-card-v2 {
        padding: 12px;
    }

    .stat-num,
    .stat-num-v2 {
        font-size: 21px;
    }

    .bar-row {
        flex-wrap: wrap;
    }

    .bar-label {
        width: 100%;
        max-width: 100%;
        font-size: 12px;
    }

    .bar-track {
        min-width: 0;
        flex-basis: calc(100% - 38px);
    }

    .bar-count {
        width: 28px;
    }

    .tabs a {
        padding: 10px 12px;
        font-size: 12px;
    }

    .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .photo-grid img {
        height: 110px;
    }

    .login-card {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        margin: 0 12px;
        padding: 24px 18px;
    }

    .login-card h2 {
        font-size: 20px;
    }

    .flash {
        padding: 10px;
        font-size: 12px;
    }

    .timeline-item {
        padding-left: 11px;
        margin-left: 3px;
    }
}

/* ---------- 360px altı: çok küçük ekranlar ---------- */
@media (max-width: 360px) {
    main {
        padding: 6px;
    }

    .card {
        padding: 10px;
    }

    .stat-num,
    .stat-num-v2 {
        font-size: 19px;
    }

    .btn,
    button {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px;
    }

    .photo-grid img {
        height: 90px;
    }
}

/* ---------- Karanlık mod mobil tamamlayıcıları ---------- */
@media (max-width: 768px) {
    body.dark-mode .topbar {
        background: #1a1f2b;
    }

    body.dark-mode .card,
    body.dark-mode .stat-card,
    body.dark-mode .stat-card-v2 {
        border-color: #2b3242;
    }

    body.dark-mode .table-responsive {
        scrollbar-color: #3a4152 #1e2330;
    }
}

/* ---------- Erişilebilirlik ve hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Klavye kullanıcıları için görünür odak */
:focus-visible {
    outline: 2px solid #2f6fed;
    outline-offset: 2px;
}

/* ============================================================
   MOBİL EKRAN KRİTİK DÜZELTME v2
   Sidebar'ın ana içeriği daraltmasını engeller.
   ============================================================ */

@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .app-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
    }

    /*
     * Sidebar normal akıştan çıkarılır.
     * Böylece gizliyken main alanının genişliğini tüketmez.
     */
    .app-shell > .sidebar,
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 86vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        z-index: 1100 !important;
        transform: translateX(-105%) !important;
        transition: transform 0.25s ease !important;
        overflow-y: auto !important;
    }

    /*
     * Header dosyanız farklı bir açık sınıf kullanıyorsa
     * aşağıdaki yaygın durumlar sidebar'ı görünür yapar.
     */
    .sidebar.open,
    .sidebar.active,
    .sidebar.show,
    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
    }

    .app-shell > .main,
    .main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        position: relative !important;
    }

    .topbar {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /*
     * Bazı header şablonlarında içerik için ayrılan
     * sabit margin/padding değerlerini sıfırlar.
     */
    [class*="content"],
    [class*="page-wrapper"],
    [class*="layout-content"] {
        max-width: 100%;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1090 !important;
        background: rgba(0, 0, 0, 0.45) !important;
    }

    body.sidebar-open .sidebar-backdrop,
    .sidebar-backdrop.show,
    .sidebar-backdrop.active {
        display: block !important;
    }
}

/* Daha güçlü güvenlik: masaüstü sidebar genişliği mobilde alan tüketmesin */
@media (max-width: 480px) {
    .app-shell > .main,
    .main,
    main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ============================================================
   SERVİS DETAY SAYFASI - RESPONSIVE TASARIM
   ============================================================ */
.service-detail-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    min-width: 0;
}

.service-detail-page .toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.service-detail-page .toolbar > div {
    min-width: 0;
}

.service-detail-page .toolbar > div:last-child {
    max-width: 100%;
    text-align: right;
}

.service-detail-page .toolbar .btn {
    margin: 3px 0;
}

.service-detail-page .two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: start;
}

.service-detail-page .card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.service-detail-page .card table {
    width: 100%;
    border-collapse: collapse;
}

.service-detail-page .card table th,
.service-detail-page .card table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.service-detail-page .tabs {
    display: flex;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding: 6px 0 12px;
    margin: 12px 0;
    white-space: nowrap;
    scrollbar-width: thin;
}

.service-detail-page .tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
}

.service-detail-page .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.service-detail-page .photo-grid img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
}

.service-detail-page input,
.service-detail-page select,
.service-detail-page textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.service-detail-page canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.service-detail-page .table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.service-detail-page .delivery-section {
    margin-top: 12px;
    padding: 12px;
    background: #f7f8fa;
    border-radius: 8px;
}

.service-detail-page .signature-preview {
    max-width: 250px;
    border: 1px solid #eee;
    border-radius: 6px;
}

@media (max-width: 900px) {
    .service-detail-page .two-col {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-detail-page .toolbar > div:last-child {
        width: 100%;
        text-align: left;
    }

    .service-detail-page .toolbar > div:last-child > div {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .service-detail-page .toolbar > div:last-child form {
        width: 100%;
    }

    .service-detail-page .toolbar > div:last-child form input {
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    .service-detail-page {
        width: 100%;
        padding: 0;
    }

    .service-detail-page .toolbar {
        gap: 12px;
    }

    .service-detail-page .toolbar h2 {
        font-size: 20px;
        overflow-wrap: anywhere;
    }

    .service-detail-page .card {
        padding: 14px !important;
        border-radius: 12px;
    }

    .service-detail-page .card table {
        min-width: 560px;
        font-size: 12px;
    }

    .service-detail-page .card table th,
    .service-detail-page .card table td {
        padding: 9px 8px;
    }

    .service-detail-page .table-scroll {
        margin-bottom: 8px;
    }

    .service-detail-page .tabs a {
        padding: 9px 11px;
        font-size: 12px;
    }

    .service-detail-page .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-detail-page .photo-grid img {
        height: 125px;
    }

    .service-detail-page .toolbar .btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .service-detail-page .toolbar > div:last-child > div {
        display: flex;
        gap: 5px;
    }

    .service-detail-page .toolbar > div:last-child > div .btn {
        flex: 1 1 auto;
    }

    .service-detail-page label {
        margin-top: 10px;
    }

    .service-detail-page .delivery-section {
        padding: 10px;
    }
}