:root {
    --brand: #4f46e5;
    --brand-2: #6366f1;
    --sidebar-w: 248px;
    --sidebar-bg: #0f172a;
    --sidebar-fg: #cbd5e1;
    --sidebar-active: #4f46e5;
    --topbar-h: 58px;
}
[data-bs-theme="dark"] {
    --bs-body-bg: #0b1120;
    --bs-tertiary-bg: #131c31;
}

html, body { font-size: 14px; }
body { min-height: 100vh; }

/* ---------- Layout shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: calc(var(--sidebar-w) + env(safe-area-inset-left, 0px));
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    transition: transform .2s ease;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sidebar-brand {
    flex: 0 0 var(--topbar-h);
    height: var(--topbar-h);
    display: flex; align-items: center; gap: .55rem;
    padding: 0 1.1rem; font-weight: 700; font-size: 1.05rem;
    color: #fff; border-bottom: 1px solid rgba(255,255,255,.08);
    background: var(--sidebar-bg);
}
.sidebar-brand i { color: var(--brand-2); font-size: 1.25rem; }
.sidebar-brand .brand-logo {
    width: 32px; height: 32px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 3px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.sidebar-brand .brand-text {
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Login sayfası logo ---------- */
.login-card { max-width: 420px; margin: 8vh auto; border-radius: 18px; }
.login-logo {
    width: 84px; height: 84px;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .12);
    border: 1px solid var(--bs-border-color);
}
.login-logo-fallback {
    width: 84px; height: 84px;
    border-radius: 18px;
    background: var(--grad);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    box-shadow: 0 6px 22px rgba(79, 70, 229, .35);
}
.sidebar-nav {
    flex: 1 1 auto; min-height: 0; padding: .6rem .55rem 1rem;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18); border-radius: 6px;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.32); }
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .7rem;
    color: var(--sidebar-fg); padding: .6rem .8rem; border-radius: .55rem;
    font-weight: 500; margin-bottom: .15rem; transition: background .15s, color .15s;
}
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; box-shadow: 0 6px 16px -6px var(--brand);
}
.sidebar-section {
    text-transform: uppercase; font-size: .68rem; letter-spacing: .08em;
    color: #64748b; padding: 1rem .8rem .35rem;
}

.app-main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; transition: margin-left .2s ease; }

/* Masaüstü daraltılmış (icon-only) mod */
@media (min-width: 992px) {
    .app-shell.sidebar-collapsed .sidebar { width: 66px; }
    .app-shell.sidebar-collapsed .app-main { margin-left: 66px; }
    .app-shell.sidebar-collapsed .sidebar-nav .nav-link span,
    .app-shell.sidebar-collapsed .sidebar-brand span,
    .app-shell.sidebar-collapsed .sidebar-section { display: none; }
    .app-shell.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: .6rem 0; }
    .app-shell.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
}

.topbar {
    min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    display: flex; align-items: center; gap: .75rem;
    padding: env(safe-area-inset-top, 0px) calc(1.1rem + env(safe-area-inset-right, 0px)) 0 1.1rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky; top: 0; z-index: 1030;
}
.topbar-title { font-weight: 600; font-size: 1.05rem; }
.ts-wrapper { min-width: 120px; }
.ts-dropdown, .ts-control { font-size: .9rem; }
/* Tom Select açık liste her zaman diğer form alanlarının/butonların üstünde
   (modal içinde bile) — alttaki input-group'a binme sorununu çözer */
.ts-dropdown { z-index: 1080 !important; }
.ts-wrapper.focus, .ts-wrapper.dropdown-active { position: relative; z-index: 1081; }
.topbar-search { max-width: 640px; }
.topbar-search .input-group-text { border-right: 0; }
.topbar-search .form-control { border-left: 0; }
.topbar-search .form-control:focus { box-shadow: none; }
.topbar-search .input-group:focus-within { outline: 2px solid var(--bs-primary); outline-offset: 1px; border-radius: .5rem; }
.btn-icon {
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color); border-radius: .5rem; padding: .35rem .55rem;
}
.btn-icon:hover { background: var(--bs-secondary-bg); }

.content {
    flex: 1;
    padding: 1.35rem;
    padding-left: calc(1.35rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1.35rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px));
}

/* ---------- Auth ---------- */
.auth-wrap {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    padding: calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
}
.auth-wrap .card { width: 100%; max-width: 400px; }

/* ---------- Components ---------- */
.card {
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.card-header { background: transparent; font-weight: 600; }
.card-header.d-flex { gap: .5rem; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.btn { border-radius: .5rem; }
.table-actions .btn { padding: .15rem .45rem; }
label.required::after { content: " *"; color: #dc3545; }
.badge { font-weight: 600; }

/* ---------- Responsive ---------- */
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 1035; display: none;
}
.sidebar-backdrop.show { display: block; }

/* ═══════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR  (mobil native hissi)
   ═══════════════════════════════════════════════════════ */
:root { --bn-h: 62px; }

.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bn-h);
    background: var(--app-surface);
    border-top: 1px solid var(--bs-border-color);
    display: flex; align-items: stretch;
    z-index: 1020;
    box-shadow: 0 -4px 20px rgba(0,0,0,.10);
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
}

.bn-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    color: var(--bs-secondary-color);
    font-size: .62rem; font-weight: 600;
    text-decoration: none; letter-spacing: .2px;
    transition: color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.bn-item i { font-size: 1.35rem; line-height: 1; transition: transform .15s ease; }
.bn-item span { line-height: 1; }
.bn-item:active { transform: scale(.92); }
.bn-item.active { color: var(--brand); }
.bn-item.active i { transform: scale(1.1); }
.bn-item.active::after {
    content: ""; position: absolute; top: 0; left: 20%; right: 20%;
    height: 2.5px; border-radius: 0 0 4px 4px;
    background: var(--brand);
}

/* FAB (ortadaki + butonu) */
.bn-fab {
    flex: 0 0 64px; position: relative; top: -18px;
    background: var(--grad);
    width: 56px; height: 56px;
    border-radius: 50%;
    box-shadow: 0 6px 20px -4px rgba(99,102,241,.7);
    color: #fff !important;
    font-size: 0; /* span gizle */
    align-self: flex-end;
    margin-bottom: 6px;
    flex-direction: row;
    transition: transform .15s ease, box-shadow .15s ease;
    flex: 0 0 auto;
    min-width: 56px; max-width: 56px;
}
.bn-fab i { font-size: 1.6rem; }
.bn-fab span { display: none; }
.bn-fab:active { transform: scale(.9); box-shadow: 0 3px 12px -4px rgba(99,102,241,.7); }
.bn-fab::after { display: none; }
.bn-fab.active { color: #fff; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.35); }
    .sidebar.open { transform: translateX(0); }
    .app-main { margin-left: 0 !important; }

    /* Topbar: sadece toggle + başlık + sağ ikonlar */
    .topbar { min-height: 52px; padding: 0 .75rem; }
    .topbar-title {
        font-size: .95rem; font-weight: 700;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        max-width: 42vw;
    }

    /* İçerik altta bottom nav kadar boşluk bırakır */
    .content {
        padding: .85rem;
        padding-left: calc(.85rem + env(safe-area-inset-left, 0px));
        padding-right: calc(.85rem + env(safe-area-inset-right, 0px));
        padding-bottom: calc(var(--bn-h) + 1rem);
    }

    .card-body { padding: 1rem .85rem; }
    h4 { font-size: 1.15rem; }
    .btn, .form-control, .form-select { min-height: 42px; }
    .btn-sm { min-height: 34px; }
    .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }
    td .table-actions, td .d-flex.gap-1, td .d-flex.gap-2 { flex-wrap: wrap; row-gap: 4px; }

    /* Kartlar native app gibi hissettirsin */
    .card { border-radius: 16px; }
    .card + .card, .card.mt-3 { margin-top: .75rem !important; }

    /* Sayfa başlıkları native topbar'a benzesin */
    .page-header-bar {
        position: sticky; top: 52px; z-index: 100;
        background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        padding: .5rem .85rem;
        margin: -.85rem -.85rem .75rem -.85rem;
        border-bottom: 1px solid var(--bs-border-color);
    }
}

@media (max-width: 767.98px) {
    html, body { font-size: 14px; }
    .card-body { padding: .85rem .75rem; }
    .table { font-size: .83rem; }
    .table th { font-size: .68rem; }
    .table th, .table td { padding: .5rem .45rem; }
    .modal-dialog { margin: .35rem; }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - .7rem); }
    .row.g-3 > [class*="col-"] { margin-bottom: .25rem; }
    .form-actions .btn { width: 100%; margin-bottom: .4rem; }

    /* Mobil kart listesi — native app list rows */
    .mobile-list-card {
        border-radius: 14px;
        border: 1px solid var(--bs-border-color);
        background: var(--app-surface);
        padding: .85rem;
        margin-bottom: .55rem;
        display: flex; align-items: center; gap: .75rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
        text-decoration: none; color: inherit;
        -webkit-tap-highlight-color: transparent;
        transition: background .12s ease, transform .1s ease;
    }
    .mobile-list-card:active { transform: scale(.985); background: color-mix(in srgb, var(--brand) 5%, var(--app-surface)); }
    .mobile-list-card .mlc-icon {
        width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        background: color-mix(in srgb, var(--brand) 14%, transparent);
        color: var(--brand); font-size: 1.2rem;
    }
    .mobile-list-card .mlc-body { flex: 1; min-width: 0; }
    .mobile-list-card .mlc-title { font-weight: 600; font-size: .9rem; line-height: 1.3; }
    .mobile-list-card .mlc-sub { font-size: .78rem; color: var(--bs-secondary-color); margin-top: 2px; }
    .mobile-list-card .mlc-meta { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; flex-shrink: 0; text-align: right; }
    .mobile-list-card .mlc-chevron { color: var(--bs-secondary-color); font-size: .85rem; flex-shrink: 0; }
}

@media (max-width: 575.98px) {
    .btn { padding: .42rem .7rem; }
    .topbar-title { max-width: 38vw; }
    .dropdown-menu { font-size: .9rem; }
    .badge { font-size: .68rem; }
    /* Topbar arama çubuğu daha kompakt */
    .topbar-search .input-group-lg > .form-control { font-size: .88rem; }
}

/* ---------- Tarih / saat ve buton kontrolleri (okunaklı & kullanılabilir) ---------- */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    min-height: 38px; line-height: 1.4; appearance: none; -webkit-appearance: none;
}
input[type="date"].form-control-sm, input[type="time"].form-control-sm,
input[type="datetime-local"].form-control-sm { min-height: 34px; }
/* Koyu temada takvim/saat ikonu görünür olsun */
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.8); cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
/* Buton içi ikon+metin ortalı, satır kırılmasın */
.btn { white-space: nowrap; }
.btn i.bi { vertical-align: -1px; }
/* Çok küçük ikon-butonlar dokunulabilir kalsın */
.btn-sm { padding: .3rem .55rem; }
.btn-xs { padding: .15rem .35rem; font-size: .75rem; line-height: 1.4; border-radius: .25rem; }
.table-actions .btn { min-width: 30px; }

/* ---------- Responsive sağlamlaştırma (tüm ekranlar) ---------- */
/* Tom Select taşmasın */
.ts-wrapper { max-width: 100%; }
.ts-control { flex-wrap: wrap; }

/* input-group içinde TomSelect sarmalayıcısı düzgün davransın:
   TomSelect ts-wrapper'a inline width:100% yazıyor — !important ile ezerek
   Bootstrap input-group flex layoutunda buton alt satıra düşmesini önle */
.input-group > .ts-wrapper {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    position: relative;
    z-index: 1;
}
/* Açık/odaklı TomSelect input-group içindeyken alttaki alanların üstüne
   çıksın (dropdown alttaki input-group'a biniyordu) */
.input-group > .ts-wrapper.focus,
.input-group > .ts-wrapper.dropdown-active,
.input-group > .ts-wrapper.input-active {
    z-index: 1081 !important;
}
.input-group > .ts-wrapper:not(:last-child) .ts-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group > .ts-wrapper:not(:first-child) .ts-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px;
}

@media (max-width: 767.98px) {
    /* table-responsive sarmalayıcısı olmayan tablolar yatay kaydırılabilsin —
       display:block KULLANILMAZ çünkü tablo layout'unu kırarak sütunların
       sarılmasına neden olur; overflow-x:auto tek başına tabloda çalışmaz,
       bu yüzden wrapper div ile sarılmayan tablolar için max-width:100% yeterli */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    /* Sabit piksel genişlikli form alanları taşmasın */
    form .form-control[style], form .form-select[style],
    .ts-wrapper[style], select[style*="min-width"], input[style*="width"] {
        min-width: 0 !important;
    }
    /* Başlık + buton satırları (kart başlıkları): tablet aralığında sarsın */
    .card-header.d-flex.justify-content-between {
        flex-wrap: wrap; gap: .5rem;
    }
    /* Yan yana form grupları alt alta */
    .row.g-2 > [class*="col-"], .row.g-1 > [class*="col-"] { margin-bottom: .35rem; }
}

/* ────────────────────────────────────────────────────────────────
   Mobil aksiyon butonları (FiksCep pattern — flex:1 1 auto, wrap natural)
   Grid/overflow hack'leri YOK. Butonlar doğal sarar, genişlerken sığar.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Sayfa başlığı bloğu — başlık üstte, aksiyon satırı altta */
    .d-flex.justify-content-between.align-items-center.mb-3,
    .d-flex.justify-content-between.align-items-start.mb-3 {
        flex-wrap: wrap;
        gap: .65rem;
    }
    /* Sağ taraf aksiyon container'ı — flex wrap, butonlar fill ile genişlesin */
    .d-flex.justify-content-between.align-items-center.mb-3 > div:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
    .d-flex.justify-content-between.align-items-start.mb-3 > div:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
    .action-bar {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        width: 100%;
    }
    .d-flex.justify-content-between.align-items-center.mb-3 > div > .btn,
    .d-flex.justify-content-between.align-items-center.mb-3 > div > form,
    .d-flex.justify-content-between.align-items-center.mb-3 > div > .btn-group,
    .d-flex.justify-content-between.align-items-start.mb-3 > div > .btn,
    .d-flex.justify-content-between.align-items-start.mb-3 > div > form,
    .d-flex.justify-content-between.align-items-start.mb-3 > div > .btn-group,
    .action-bar > .btn,
    .action-bar > form,
    .action-bar > .btn-group {
        flex: 1 1 auto;
        margin: 0;
        min-width: 120px;
    }
    .d-flex.justify-content-between.align-items-center.mb-3 > div > form > .btn,
    .d-flex.justify-content-between.align-items-center.mb-3 > div > .btn-group > .btn,
    .d-flex.justify-content-between.align-items-start.mb-3 > div > form > .btn,
    .d-flex.justify-content-between.align-items-start.mb-3 > div > .btn-group > .btn,
    .action-bar > form > .btn,
    .action-bar > .btn-group > .btn {
        width: 100%;
    }
    /* Genel buton/input touch target */
    .btn, .form-control, .form-select { min-height: 38px; }
    .btn-sm { min-height: 32px; }
    /* Card-header — başlık + buton bloğu, mobilde dikey yığılır */
    .card-header.d-flex {
        flex-wrap: wrap !important;
        gap: .5rem;
    }
    /* card-header içindeki buton container'ı GRID auto-fit — eşit boyutlu butonlar */
    .card-header > .d-flex,
    .card-header .d-flex.flex-wrap,
    .card-header .d-flex.gap-2 {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
        gap: .4rem !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0;
    }
    /* Buton/form/btn-group child'ları — grid hücresi içinde tam doldur */
    .card-header > .d-flex > .btn,
    .card-header > .d-flex > form,
    .card-header > .d-flex > a.btn,
    .card-header > .d-flex > .btn-group,
    .card-header > .d-flex > .dropdown {
        min-width: 0 !important;
        margin: 0 !important;
    }
    .card-header > .d-flex > form > .btn,
    .card-header > .d-flex > .btn-group > .btn,
    .card-header > .d-flex > .dropdown > .btn {
        width: 100%;
    }
    /* Buton içeriği kompakt */
    .card-header > .d-flex .btn {
        padding: .42rem .55rem;
        font-size: .8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Tablo hücresi içi aksiyonlar */
    td .d-flex.gap-1, td .d-flex.gap-2 { flex-wrap: wrap; row-gap: .25rem; }
}

@media (max-width: 575.98px) {
    /* Telefonlarda yalnızca inline (style) sabit genişlikli alanlar tam genişlik.
       input-group içindeki normal alanlara dokunulmaz (buton alt satıra düşmesin). */
    form .form-control[style*="width"], form .form-select[style*="width"] {
        width: 100% !important; min-width: 0 !important;
    }
    .input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; }
    .ts-wrapper { width: 100% !important; }
    /* Durum/aksiyon çubuğundaki formlar dikey yığılsın */
    .card-body > form.d-flex, form.d-flex.flex-wrap { width: 100%; }
    .card-body > form.d-flex .form-select,
    .card-body > form.d-flex .form-control { width: 100% !important; }
    /* Buton grupları taşmasın */
    .btn-group { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 auto; }
}

/* iOS standalone (ana ekrana eklenmiş PWA) */
@media all and (display-mode: standalone) {
    .topbar { -webkit-user-select: none; user-select: none; }
    a, button { -webkit-tap-highlight-color: transparent; }
}

/* iOS: font < 16px tetikleyince input focus'ta otomatik zoom yapar — önle */
@supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* ---------- FullCalendar mobil polish ---------- */
@media (max-width: 767.98px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
        gap: .35rem;
        font-size: .85rem;
    }
    .fc .fc-toolbar-title {
        font-size: 1rem;
        font-weight: 700;
    }
    .fc .fc-button {
        padding: .35rem .6rem;
        font-size: .8rem;
        text-transform: none;
    }
    .fc .fc-list-event-title { font-size: .9rem; font-weight: 600; }
    .fc .fc-list-event-time { font-size: .8rem; }
    .fc-footer-toolbar { margin-top: .65rem; }
}

/* ---------- Dashboard stat-card (FiksCep tarzı — solid renkli + büyük transparent ikon) ---------- */
.stat-card {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    border: none !important;
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    height: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .2s ease;
}
.stat-card:active { transform: scale(.97); }
.stat-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.15); }
.stat-card .stat-icon {
    position: absolute;
    right: 14px;
    top: 14px;
    font-size: 2.6rem;
    opacity: .22;
    line-height: 1;
}
.stat-card .stat-value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .35rem;
    color: #fff;
}
.stat-card .stat-label {
    font-size: .82rem;
    opacity: .92;
    font-weight: 500;
    color: #fff;
}
@media (max-width: 575.98px) {
    .stat-card { padding: 1rem 1.1rem; border-radius: 14px; }
    .stat-card .stat-value { font-size: 1.7rem; }
    .stat-card .stat-icon { font-size: 2rem; top: 12px; right: 12px; }
    .stat-card .stat-label { font-size: .75rem; }
}

/* ---------- Form sayfaları mobil polish ---------- */
.form-label.required::after,
label.required::after {
    content: " *";
    color: #dc2626;
    font-weight: 700;
}
@media (max-width: 575.98px) {
    /* Form etiketleri daha okunaklı */
    .form-label {
        font-weight: 600;
        font-size: .85rem;
        margin-bottom: .3rem;
        color: var(--bs-body-color);
    }
    /* Form input/select daha rahat */
    .form-control, .form-select {
        min-height: 44px;  /* iOS touch target */
        padding: .55rem .75rem;
    }
    .form-control-sm, .form-select-sm {
        min-height: 38px;
        padding: .42rem .6rem;
    }
    /* Form-actions altta sabit (sticky) */
    .form-actions {
        position: sticky;
        bottom: calc(var(--mobile-tabbar-height, 0px));
        background: var(--bs-body-bg);
        padding: .85rem 0 .5rem 0;
        margin: 1rem -.75rem 0;
        padding-left: .75rem;
        padding-right: .75rem;
        border-top: 1px solid var(--bs-border-color);
        z-index: 3;
        display: flex;
        flex-direction: column-reverse;
        gap: .5rem;
    }
    .form-actions .btn {
        width: 100%;
        margin: 0 !important;
        min-height: 44px;
        font-weight: 600;
    }
    /* Form section dividers belirgin */
    form hr.my-1, form hr.my-2 {
        margin: .85rem -.85rem !important;
        border-color: var(--bs-border-color);
        opacity: .6;
    }
    /* Bilgi alert'leri kompakt */
    .alert.py-2 {
        font-size: .85rem;
        padding: .6rem .75rem;
    }
}

/* ---------- Mobilde tüm modallar fullscreen + sticky header/footer ---------- */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-sm) {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }
    .modal-dialog:not(.modal-sm) .modal-content {
        height: 100%;
        border-radius: 0;
        border: 0;
    }
    .modal-header {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--bs-modal-bg, var(--app-surface));
        border-bottom: 1px solid var(--bs-border-color);
    }
    .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: var(--bs-modal-bg, var(--app-surface));
        border-top: 1px solid var(--bs-border-color);
        padding: .65rem .85rem;
        gap: .5rem;
    }
    /* Modal footer'daki butonlar tam genişlik, alt alta */
    .modal-footer > .btn {
        flex: 1 1 0;
        margin: 0;
    }
    /* Modal başlığı kompakt */
    .modal-header { padding: .65rem .85rem; }
    .modal-header .modal-title { font-size: 1rem; }
    .modal-body { padding: .85rem; }
    /* Form aralıkları daha rahat */
    .modal-body .row.g-3 { --bs-gutter-y: .75rem; }
    .modal-body .form-label { margin-bottom: .25rem; font-size: .82rem; font-weight: 600; }
}

/* ---------- Hızlı durum buton grid'i (iş emri durum kartı) ---------- */
.quick-status-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}
@media (min-width: 576px) {
    .quick-status-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .quick-status-grid { grid-template-columns: repeat(3, 1fr); }
}
.quick-status-grid .btn {
    padding: .55rem .75rem;
    font-weight: 600;
}

/* ---------- Form sayfası başlık stili — kart-header gibi görünür ---------- */
.content > h2.mb-3:first-child,
.content > h3.mb-3:first-child,
.content > h4.mb-3:first-child,
.content > h5.mb-3:first-child {
    background: var(--app-surface, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: .85rem 1.15rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: .55rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.content > h2.mb-3:first-child > i,
.content > h3.mb-3:first-child > i,
.content > h4.mb-3:first-child > i,
.content > h5.mb-3:first-child > i {
    color: var(--brand, #4f46e5);
    font-size: 1.15rem;
}

/* ---------- Tıklanabilir tablo satırları ---------- */
.table-hover tbody tr,
.clickable-rows tbody tr,
tr.clickable-row {
    cursor: pointer;
}
.table-hover tbody tr.no-click,
tr.no-click { cursor: default; }
/* Satır içinde aksiyon butonları cursor: default */
.table-hover tbody tr .btn,
.table-hover tbody tr a.btn,
.clickable-rows tbody tr .btn { cursor: pointer; }

/* ---------- Sesle yazdırma — input-group içi inline mic ---------- */
.voice-mic-ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 0 .6rem;
}
.voice-mic-ig i { font-size: .9rem; }
.voice-mic-ig.recording {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    animation: voice-pulse 1.3s infinite;
}

/* ---------- Sesle yazdırma — input'a sabitli mic (sarmalayıcı) ---------- */
.voice-fld-wrap { position: relative; display: block; }
/* Mic'in altında metin kalmasın diye sağ boşluk */
.voice-fld-wrap > input,
.voice-fld-wrap > textarea { padding-right: 42px !important; }
.voice-mic-fld {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--app-surface, #fff);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    z-index: 4;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
/* Textarea'da mic üst sağda dursun */
.voice-mic-fld.for-textarea { top: 8px; transform: none; }
.voice-mic-fld:hover {
    color: var(--brand, #4f46e5);
    border-color: var(--brand, #4f46e5);
}
.voice-mic-fld.recording {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    animation: voice-pulse 1.3s infinite;
}
.voice-mic-fld i { font-size: .85rem; line-height: 1; }
@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(239,68,68,.45), 0 0 0 0 rgba(239,68,68,.45); }
    50%      { box-shadow: 0 2px 8px rgba(239,68,68,.45), 0 0 0 8px rgba(239,68,68,0); }
}

/* ---------- Page-level horizontal overflow koruması ---------- */
html, body { overflow-x: clip; max-width: 100%; }
.app-main, .content { min-width: 0; max-width: 100%; }
/* Flex çocukları daralabilsin */
.card-body, .card-header { min-width: 0; }
.card-body > .row { --bs-gutter-x: 1rem; }

/* ---------- Standart tablo/grid aksiyon butonları (eşit kare) ---------- */
/* Tablo içi ikon butonları, action sütunları, kart aksiyon butonları */
.table-actions .btn,
td.text-end .btn-sm,
td .btn-xs,
.btn-action-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
}
.table-actions .btn i,
td.text-end .btn-sm i,
td .btn-xs i,
.btn-action-icon i {
    font-size: .9rem;
    line-height: 1;
}
/* Standart kare buton — explicit class */
.btn-square {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* ---------- Detay sayfa info kartları — compact dl grid ---------- */
.card-body dl:not(.row) {
    display: grid;
    grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
    gap: .35rem .85rem;
    margin: 0;
    font-size: .9rem;
    align-items: baseline;
}
.card-body dl:not(.row) > dt {
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin: 0;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .3px;
    padding-top: 2px;
}
.card-body dl:not(.row) > dd {
    margin: 0;
    color: var(--bs-body-color);
    font-weight: 500;
    word-break: break-word;
}
@media (max-width: 575.98px) {
    .card-body dl:not(.row) { gap: .25rem .65rem; font-size: .85rem; }
    .card-body dl:not(.row) > dt { font-size: .68rem; }
}

/* QR kodu kompakt (detay sayfası içinde) */
.card-body img[alt="QR"], .card-body img[alt^="QR"] {
    max-width: 120px !important;
    height: auto;
}

/* Müşteri imza linki — yan yana input + QR */
.signature-link-card .form-control[readonly] {
    background: var(--bs-tertiary-bg);
    cursor: pointer;
    font-size: .8rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ---------- Marka / Modeller — temiz liste tasarımı ---------- */
.brand-card {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 12px !important;
    margin-bottom: .75rem;
    overflow: hidden;
    background: var(--app-surface, #fff);
}
.brand-card .accordion-header { margin: 0; }
.brand-card .brand-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .85rem .25rem;
}
.brand-card .brand-toggle {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    color: var(--bs-body-color);
    min-width: 0;
}
.brand-card .brand-info {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    flex: 1 1 auto;
}
.brand-card .brand-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-card .brand-count {
    font-size: .72rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--brand, #4f46e5) 18%, transparent);
    color: var(--bs-body-color);
    padding: 2px 8px;
    border-radius: 99px;
    flex-shrink: 0;
}
.brand-card .brand-chevron {
    transition: transform .2s ease;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}
.brand-card .brand-toggle[aria-expanded="true"] .brand-chevron,
.brand-card .accordion-collapse.show ~ * .brand-chevron { transform: rotate(180deg); }
.brand-card .accordion-collapse.show {
    border-top: 1px solid var(--bs-border-color);
}
.brand-card:has(.accordion-collapse.show) .brand-chevron { transform: rotate(180deg); }
.brand-card .brand-actions {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}
.brand-card .brand-cats {
    padding: 0 .85rem .65rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* Marka içi toolbar (arama + ekleme) */
.brand-card .brand-toolbar {
    padding: .75rem .85rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Model listesi — table değil, temiz liste */
.brand-card .model-list-wrap {
    max-height: 340px;
    overflow-y: auto;
}
.brand-card .model-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.brand-card .model-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background .12s ease;
}
.brand-card .model-row:last-child { border-bottom: none; }
.brand-card .model-row:hover { background: var(--bs-tertiary-bg, #f8f9fa); }
.brand-card .model-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.brand-card .model-name {
    font-weight: 500;
    font-size: .92rem;
    color: var(--bs-body-color);
    word-break: break-word;
}
.brand-card .model-cats {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}
.brand-card .model-actions {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}

/* ---------- Nav-tabs — desktop klasik, mobilde iOS tabbar (icon üst + kısa text alt) ---------- */
.nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    position: relative;
}
.nav-tabs .nav-link { white-space: nowrap; }
.tab-content { position: relative; }

@media (max-width: 767.98px) {
    /* Tab bar tam genişlik — 5 tab eşit dağılır */
    .nav-tabs {
        flex-wrap: nowrap !important;
        justify-content: space-around;
        overflow: visible;
        gap: 0;
        padding: 0;
    }
    /* Tüm tab'lar AYNI: icon ortada üstte + küçük text altta */
    .nav-tabs .nav-link {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: .55rem .25rem;
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        text-align: center;
        border-radius: 0;
        position: relative;
        color: var(--bs-secondary-color);
        border: none;
        border-bottom: 2px solid transparent;
        font-size: .68rem;
        font-weight: 500;
        line-height: 1.2;
    }
    .nav-tabs .nav-link i {
        font-size: 1.15rem;
        line-height: 1;
        margin: 0;
        display: block;
    }
    /* Aktif: accent renk + alt çizgi (boyut aynı kalır — kayma olmaz) */
    .nav-tabs .nav-link.active {
        color: var(--brand, #4f46e5);
        font-weight: 600;
        background: transparent;
        border-bottom-color: var(--brand, #4f46e5);
    }
    .nav-tabs .nav-link:hover,
    .nav-tabs .nav-link:focus { border-color: transparent transparent var(--bs-border-color); }
    .nav-tabs .nav-link.active:hover,
    .nav-tabs .nav-link.active:focus { border-bottom-color: var(--brand, #4f46e5); }
}

/* ---------- Standart aksiyon butonları (tüm detay sayfaları) ---------- */
.action-bar .btn,
.card-header .btn { font-weight: 500; }

/* ---------- Native miktar/aksiyon mini-butonları (kart içi) ---------- */
.qty-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border-radius: 50%; border: 1px solid var(--bs-border-color);
    background: var(--app-surface); color: var(--bs-body-color);
    font-size: .95rem; font-weight: 600; line-height: 1;
    text-decoration: none;
    transition: transform .08s ease, background .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.qty-btn:active { transform: scale(.9); }
.qty-btn.qty-plus  { color: #16a34a; border-color: #86efac; background: color-mix(in srgb, #16a34a 6%, var(--app-surface)); }
.qty-btn.qty-minus { color: #dc2626; border-color: #fca5a5; background: color-mix(in srgb, #dc2626 6%, var(--app-surface)); }
.qty-btn.qty-edit  { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); font-size: .78rem; }
.qty-btn i.bi { vertical-align: 0; }

/* ---------- Tablo hücre taşma — satır yüksekliği kontrolü ---------- */
/* td içine sarılan .cell-clamp div'i satırı tek satıra zorlar */
.cell-clamp {
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Sipariş numarası / tarih gibi kısa alanlar kesinlikle kırılmasın */
.table td.text-nowrap, .table th.text-nowrap { white-space: nowrap !important; }

/* ---------- Print ---------- */
.print-area { background: #fff; color: #000; }
.thermal { max-width: 320px; margin: 0 auto; font-family: 'Courier New', monospace; }
.thermal hr { border-top: 1px dashed #000; }
.qr-box img { image-rendering: pixelated; }

@media print {
    .sidebar, .topbar, .no-print, .form-actions { display: none !important; }
    .app-main { margin-left: 0 !important; }
    .content { padding: 0 !important; }
    body { background: #fff !important; }
    .print-area { box-shadow: none !important; border: none !important; }
    .thermal { width: 78mm; font-size: 11px; }
    /* Yazdırmada tablolar normal tablo düzeninde kalsın */
    table, table.table { display: table !important; overflow: visible !important; }
    @page { margin: 10mm; }
}

/* ============================================================
   MODERN TEMA KATMANI (2025)
   ============================================================ */
:root {
    --brand: #6366f1;
    --brand-2: #8b5cf6;
    --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
    --shadow-md: 0 4px 12px -2px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);
    --shadow-lg: 0 18px 40px -12px rgba(79,70,229,.28);
    --ring: 0 0 0 .2rem rgba(99,102,241,.28);
}
[data-bs-theme="light"], :root {
    --bs-body-bg: #f4f5fb;
    --bs-secondary-bg: #eef0f8;
    --app-surface: #ffffff;
    --bs-border-color: #e6e8f0;
    --bs-body-color: #1f2433;
}
[data-bs-theme="dark"] {
    --bs-body-bg: #0a0f1e;
    --bs-tertiary-bg: #121a2e;
    --app-surface: #111a2e;
    --bs-border-color: #243049;
    --sidebar-bg: #0b1222;
}

html, body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .1px;
}
body { background: var(--bs-body-bg); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6,.fw-semibold,.fw-bold { letter-spacing: -.2px; }

/* ---- Sidebar ---- */
.sidebar {
    background:
        radial-gradient(900px 380px at -10% -10%, rgba(139,92,246,.18), transparent 60%),
        linear-gradient(180deg, #131c33 0%, var(--sidebar-bg) 70%);
    border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar-brand {
    border-bottom: 1px solid rgba(255,255,255,.06);
    letter-spacing: .2px;
}
.sidebar-brand i {
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.sidebar-nav .nav-link {
    position: relative; border-radius: 10px; font-weight: 500;
    transition: background .18s ease, color .18s ease, transform .12s ease;
}
.sidebar-nav .nav-link:hover { transform: translateX(2px); }
.sidebar-nav .nav-link.active {
    background: var(--grad);
    box-shadow: 0 10px 22px -10px rgba(139,92,246,.75);
}
.sidebar-nav .nav-link.active::before {
    content: ""; position: absolute; left: -.55rem; top: 18%; bottom: 18%;
    width: 3px; border-radius: 3px; background: #c4b5fd;
}
.sidebar-section { color: #5b6b8c; font-weight: 700; }

/* ---- Topbar (cam efekti) ---- */
.topbar {
    background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--bs-border-color);
}
.topbar-title { font-weight: 700; }
.btn-icon { border-radius: 10px; transition: background .15s, transform .12s; }
.btn-icon:active { transform: scale(.94); }

/* ---- Kartlar ---- */
.card {
    background: var(--app-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
    background: transparent; font-weight: 700;
    border-bottom: 1px solid var(--bs-border-color);
    padding-top: .85rem; padding-bottom: .85rem;
}
/* Özet/istatistik kartları */
.card.text-bg-primary, .card.text-bg-info, .card.text-bg-warning,
.card.text-bg-danger, .card.text-bg-success {
    border: 0; color: #fff; box-shadow: var(--shadow-md);
}
.card.text-bg-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6) !important; }
.card.text-bg-info    { background: linear-gradient(135deg,#0ea5e9,#22d3ee) !important; }
.card.text-bg-warning { background: linear-gradient(135deg,#f59e0b,#fbbf24) !important; }
.card.text-bg-danger  { background: linear-gradient(135deg,#ef4444,#f97316) !important; }
.card.text-bg-success { background: linear-gradient(135deg,#10b981,#34d399) !important; }
.card.text-bg-primary:hover, .card.text-bg-info:hover, .card.text-bg-warning:hover,
.card.text-bg-danger:hover, .card.text-bg-success:hover { transform: translateY(-3px); }

/* ---- Butonlar ---- */
.btn { border-radius: var(--radius-sm); font-weight: 600; transition: transform .12s ease, box-shadow .18s ease, filter .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background-image: var(--grad); border: 0;
    box-shadow: 0 8px 18px -8px rgba(99,102,241,.7);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); background-image: var(--grad); }
.btn-success { background-image: linear-gradient(135deg,#10b981,#059669); border: 0; }
.btn-outline-primary { border-color: var(--brand); color: var(--brand); }
.btn-outline-primary:hover { background: var(--grad); border-color: transparent; color: #fff; }

/* Dark mode: outline butonlar net okunur */
[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: #4a5568; color: #c9d1e4;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background: #2d3a50; color: #fff; border-color: #6b7a96;
}
[data-bs-theme="dark"] .btn-outline-danger {
    border-color: #f87171; color: #f87171;
}
[data-bs-theme="dark"] .btn-outline-danger:hover {
    background: #7f1d1d; color: #fff; border-color: #ef4444;
}
[data-bs-theme="dark"] .btn-outline-success {
    border-color: #34d399; color: #34d399;
}
[data-bs-theme="dark"] .btn-outline-success:hover {
    background: #064e3b; color: #fff; border-color: #10b981;
}
[data-bs-theme="dark"] .btn-outline-warning {
    border-color: #fbbf24; color: #fbbf24;
}
[data-bs-theme="dark"] .btn-outline-warning:hover {
    background: #78350f; color: #fff; border-color: #f59e0b;
}
[data-bs-theme="dark"] .btn-outline-info {
    border-color: #38bdf8; color: #38bdf8;
}
[data-bs-theme="dark"] .btn-outline-info:hover {
    background: #0c4a6e; color: #fff; border-color: #0ea5e9;
}

/* ---- Rozetler ---- */
.badge { border-radius: 999px; font-weight: 600; padding: .38em .7em; letter-spacing: .2px; }
.text-bg-secondary { background: color-mix(in srgb, var(--brand) 16%, transparent) !important; color: var(--brand) !important; }
[data-bs-theme="dark"] .text-bg-secondary { background: color-mix(in srgb, var(--brand) 28%, transparent) !important; color: #c4b5fd !important; }

/* ---- Form alanları ---- */
.form-control, .form-select, .ts-control {
    border-radius: var(--radius-sm);
    border-color: var(--bs-border-color);
    background: var(--app-surface);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus, .ts-control.focus, .ts-wrapper.focus .ts-control {
    border-color: var(--brand); box-shadow: var(--ring);
}
.form-control::placeholder { color: #9aa3b7; }

/* ---- Tablolar ---- */
.table { --bs-table-bg: transparent; }
.table thead th {
    text-transform: uppercase; font-size: .72rem; letter-spacing: .04em;
    color: #7a85a0; border-bottom: 1px solid var(--bs-border-color);
}
.table tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.table td, .table th { border-color: var(--bs-border-color); }

/* ---- Liste & dropdown ---- */
.list-group-item { background: transparent; border-color: var(--bs-border-color); }
.dropdown-menu {
    border: 1px solid var(--bs-border-color); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.alert { border: 0; border-radius: var(--radius-sm); }
.alert-success { background: color-mix(in srgb,#10b981 14%,transparent); color: #047857; }
.alert-danger  { background: color-mix(in srgb,#ef4444 14%,transparent); color: #b91c1c; }
[data-bs-theme="dark"] .alert-success { background: color-mix(in srgb,#10b981 18%,transparent); color: #6ee7b7; }
[data-bs-theme="dark"] .alert-danger  { background: color-mix(in srgb,#ef4444 18%,transparent); color: #fca5a5; }
[data-bs-theme="dark"] .alert-warning { background: color-mix(in srgb,#f59e0b 18%,transparent); color: #fde68a; }
[data-bs-theme="dark"] .alert-info    { background: color-mix(in srgb,#0ea5e9 18%,transparent); color: #7dd3fc; }
[data-bs-theme="dark"] .alert-secondary { background: color-mix(in srgb,#64748b 18%,transparent); color: #cbd5e1; }
[data-bs-theme="dark"] .alert-primary { background: color-mix(in srgb,#6366f1 18%,transparent); color: #a5b4fc; }

/* ---- Auth ekranı ---- */
.auth-wrap { background: radial-gradient(1100px 600px at 20% 10%, #8b5cf6 0%, #6366f1 40%, #4338ca 100%); }
.auth-wrap .card { border: 0; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(31,23,84,.55); }

/* İnce gövde scrollbar */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 50%, transparent); }

@media (max-width: 575.98px) {
    :root { --radius: 12px; }
    .card { border-radius: var(--radius); }
}

/* ============================================================
   OKUNABİLİRLİK + BÜYÜK EKRAN KONTROL DÜZELTMELERİ
   ============================================================ */
/* :root içindeki açık-tema metin rengi koyu temaya sızıyordu — düzelt */
[data-bs-theme="dark"] {
    --bs-body-color: #e7eaf3;
    --bs-secondary-color: #aeb7cb;
    --bs-tertiary-color: #8b95ad;
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: #f2f4fa;
    --app-surface: #121b30;
    --bs-border-color: #28324c;
}
[data-bs-theme="light"] {
    --bs-body-color: #1f2433;
    --bs-secondary-color: #5b6577;
}

body, .card, .table, .list-group-item, .dropdown-menu, .modal-content {
    color: var(--bs-body-color);
}
h1,h2,h3,h4,h5,h6 { color: var(--bs-heading-color, var(--bs-body-color)); }
.text-muted, small.text-muted, .form-text {
    color: var(--bs-secondary-color) !important;
}
.card-header { color: var(--bs-heading-color, var(--bs-body-color)); }

/* Form alanları her temada okunaklı */
.form-control, .form-select, .ts-control, textarea {
    color: var(--bs-body-color) !important;
    background-color: var(--app-surface);
}
.form-control::placeholder,
.ts-wrapper .ts-control > input::placeholder,
.ts-wrapper .ts-control > input::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);
    opacity: 1;
}
/* Tom Select boş iken control_input dropdown'u çağırmak için min genişlik gerek */
.ts-wrapper.single .ts-control > input { min-width: 6rem !important; }
.ts-dropdown { background: var(--app-surface); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.ts-dropdown .active { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--bs-body-color); }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    color: var(--bs-body-color) !important;
}

/* Renkli özet kartlarındaki yazı her zaman beyaz ve net */
.card.text-bg-primary *, .card.text-bg-info *, .card.text-bg-warning *,
.card.text-bg-danger *, .card.text-bg-success * { color: #fff !important; }

/* Grafik kartı başlıkları okunur */
.card-header.fw-semibold { color: var(--bs-heading-color, var(--bs-body-color)); opacity: 1; }

/* ---- Büyük ekranlarda kontroller daha büyük/okunur ---- */
@media (min-width: 992px) {
    html, body { font-size: 15px; }
    .btn { padding: .55rem 1.05rem; font-size: .95rem; }
    .btn-sm { padding: .42rem .8rem; font-size: .86rem; }
    .btn-lg { padding: .8rem 1.4rem; font-size: 1.05rem; }
    .btn-icon { padding: .55rem .7rem; font-size: 1.1rem; border-radius: 12px; }
    .form-control, .form-select { min-height: 44px; font-size: .95rem; }
    .form-control-sm, .form-select-sm { min-height: 38px; font-size: .9rem; }
    .input-group-lg > .form-control,
    .input-group-lg > .btn,
    .input-group-lg > .input-group-text { min-height: 50px; font-size: 1.02rem; }
    .topbar { min-height: 64px; }
    .topbar-search .btn { padding-left: 1.4rem; padding-right: 1.4rem; }
    .table td, .table th { padding: .7rem .85rem; }
    .badge { font-size: .78rem; }
    .nav-link, .dropdown-item { font-size: .95rem; }
}
@media (min-width: 1600px) {
    html, body { font-size: 16px; }
    .content { padding: 1.75rem 2rem; }
}

/* ---- İş emri durum zaman çizelgesi ---- */
.wo-timeline {
    display: flex; flex-wrap: wrap; gap: 6px;
    border: 1px solid var(--bs-border-color); border-radius: var(--radius-sm, 10px);
    padding: 8px; background: var(--app-surface, var(--bs-body-bg));
}
.wo-step {
    flex: 1 1 0; min-width: 110px; text-align: center;
    font-size: .82rem; font-weight: 600; color: var(--bs-secondary-color);
    padding: .5rem .4rem; border-radius: 8px; position: relative;
    background: color-mix(in srgb, var(--bs-secondary-color) 10%, transparent);
}
.wo-step .wo-step-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: currentColor; margin-right: 6px; vertical-align: 1px; opacity: .55;
}
.wo-step.done {
    color: #fff; background: linear-gradient(135deg,#10b981,#059669);
}
.wo-step.done .wo-step-dot { opacity: 1; background: #fff; }
.wo-step.current {
    color: #fff; background: linear-gradient(135deg,#f59e0b,#f97316);
    box-shadow: 0 6px 16px -8px rgba(245,158,11,.7);
}
.wo-step.current .wo-step-dot { opacity: 1; background: #fff; }
@media (max-width: 575.98px) {
    .wo-step { min-width: 0; flex-basis: 45%; font-size: .74rem; }
}

/* ═══════════════════════════════════════════════════════
   FAB SPEED DIAL
   ═══════════════════════════════════════════════════════ */
.fab-menu {
    position: fixed; inset: 0; z-index: 1025;
    pointer-events: none;
    visibility: hidden;
}
.fab-menu.open {
    pointer-events: all;
    visibility: visible;
}

.fab-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .2s ease;
}
.fab-menu.open .fab-backdrop { opacity: 1; }

.fab-actions {
    position: absolute;
    bottom: calc(var(--bn-h) + 14px);
    left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column-reverse; align-items: flex-end;
    gap: 12px; min-width: 200px;
}

.fab-action {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
    opacity: 0; transform: translateY(20px) scale(.85);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.fab-menu.open .fab-action {
    opacity: 1; transform: translateY(0) scale(1);
    pointer-events: all;
}
.fab-menu.open .fab-action:nth-child(1) { transition-delay: .00s; }
.fab-menu.open .fab-action:nth-child(2) { transition-delay: .04s; }
.fab-menu.open .fab-action:nth-child(3) { transition-delay: .08s; }
.fab-menu.open .fab-action:nth-child(4) { transition-delay: .12s; }

.fab-action-label {
    background: var(--app-surface);
    color: var(--bs-body-color);
    font-size: .82rem; font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    white-space: nowrap;
}
.fab-action-btn {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .12s ease;
}
.fab-action:active .fab-action-btn { transform: scale(.9); }

/* FAB + ikonu döner (× olur) */
#fabIcon {
    transition: transform .22s ease;
    display: inline-block;
}
.fab-open #fabIcon { transform: rotate(45deg); }

/* Dark mode: bottom nav */
[data-bs-theme="dark"] .bottom-nav {
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    border-top-color: var(--bs-border-color);
    box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .bn-fab {
    box-shadow: 0 6px 20px -4px rgba(99,102,241,.5);
}

/* Dark mode: disabled/readonly alanlar */
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled {
    background-color: color-mix(in srgb, var(--app-surface) 70%, #000);
    color: var(--bs-secondary-color) !important;
    border-color: var(--bs-border-color);
}
/* Dark mode: input-group-text, form-check, tablo ek düzeltmeler */
[data-bs-theme="dark"] .input-group-text {
    background: color-mix(in srgb, var(--bs-border-color) 40%, var(--app-surface));
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .form-check-input {
    background-color: var(--app-surface);
    border-color: #4a5568;
}
[data-bs-theme="dark"] .table thead th { color: #8b95ad; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: color-mix(in srgb,#fff 6%,transparent); }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: color-mix(in srgb,#f59e0b 14%,transparent); color: #fde68a; }
[data-bs-theme="dark"] .table-success { --bs-table-bg: color-mix(in srgb,#10b981 14%,transparent); color: #6ee7b7; }
[data-bs-theme="dark"] .table-danger  { --bs-table-bg: color-mix(in srgb,#ef4444 14%,transparent); color: #fca5a5; }
[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer {
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .list-group-item { color: var(--bs-body-color); }
[data-bs-theme="dark"] hr { border-color: var(--bs-border-color); opacity: 1; }

/* Açılır menü öğeleri her temada net görünsün (Profilim, Çıkış vb.) */
.dropdown-menu { background: var(--app-surface, var(--bs-body-bg)); color: var(--bs-body-color); }
.dropdown-item { color: var(--bs-body-color); }
.dropdown-item i { color: inherit; }
.dropdown-item:hover, .dropdown-item:focus {
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    color: var(--bs-body-color);
}
.dropdown-item.active, .dropdown-item:active {
    background: var(--brand); color: #fff;
}
.dropdown-item-text { color: var(--bs-body-color); }
.dropdown-divider { border-top-color: var(--bs-border-color); }

/* ============================================================
   MOBİL DÜZELTMELER (topbar arama + sekmeler)
   ============================================================ */
@media (max-width: 991.98px) {
    /* Topbar taşmasın: ikonlar üstte, arama tam genişlik ikinci satırda */
    .topbar {
        flex-wrap: wrap;
        height: auto;
        min-height: 0;
        row-gap: .5rem;
        padding-top: calc(.5rem + env(safe-area-inset-top, 0px));
        padding-bottom: .5rem;
    }
    .topbar-search {
        order: 10;
        flex: 1 0 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .topbar-search .input-group-lg > .form-control,
    .topbar-search .input-group-lg > .btn,
    .topbar-search .input-group-lg > .input-group-text {
        min-height: 42px;
        font-size: .95rem;
    }
    .topbar .ms-auto { margin-left: auto; }
}

@media (max-width: 767.98px) {
    /* Sekmeler tek satır, yatay kaydırılabilir */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item { flex: 0 0 auto; }
    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: .82rem;
        padding: .5rem .7rem;
    }
    .card-header.p-0 .nav-tabs { padding: 0 .25rem; }
    /* Bilgi kartları arası boşluk */
    .row.g-3 > [class*="col-"] { margin-bottom: .5rem; }
    /* İmza/araç alanları tam genişlik */
    #sigForm, #notesModal .modal-dialog { max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBİL KAPSAMLI DÜZENLEMELERi  (≤767px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── Sayfa başlığı (h4 + butonlar) dikey sıralanır ── */
    .d-flex.justify-content-between.align-items-start.mb-3,
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem;
    }
    /* İç buton container (hem d-flex hem plain div) wrap olur */
    .d-flex.justify-content-between.align-items-start.mb-3 > div,
    .d-flex.justify-content-between.align-items-center.mb-3 > div {
        display: flex !important;
        flex-wrap: wrap;
        gap: .35rem;
        width: 100%;
    }

    /* ── Buton grupları mobile wrap ── */
    .btn-group { flex-wrap: wrap; }

    /* ── İş emri durum formu genişlikleri ── */
    .wo-status-sel { min-width: 0 !important; width: 100%; }
    .wo-note-inp   { width: 100% !important; }

    /* ── Tablo: tüm tablolar kaydırılabilir ── */
    .table-responsive-force { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Mobilde gizlenecek tablo sütunları ── */
    .d-mob-none { display: none !important; }

    /* ── Filtre formları tam genişlik ── */
    .filter-form .input-group,
    .filter-form .form-select,
    .filter-form .form-control { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

    /* ── Kart içi dl-dt-dd ── */
    dl.mb-0 dt { margin-top: .4rem; }

    /* ── Modal tam genişlik ── */
    .modal-dialog:not(.modal-dialog-centered) { margin: .5rem; }

    /* ── Büyük butonlar parmak dostu ── */
    .btn-sm { min-height: 36px; }

    /* ── İnline form stack ── */
    form.d-inline { display: block !important; }
    form.d-inline + form.d-inline { margin-top: .25rem; }

    /* ── Teklif/Sipariş başlık butonu alanı ── */
    .d-flex.flex-wrap.gap-1 > *,
    .d-flex.flex-wrap.gap-2 > * { flex-shrink: 0; }
}

/* iOS PWA / Safari zoom fix (input focus zoom önleme) */
@supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* ═══════════════════════════════════════════════════════
   Sayfa geçişi loader — ortada PWA ikonu + dönen halka
   ═══════════════════════════════════════════════════════ */
#mts-page-loader {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center; justify-content: center;
    opacity: 0;
    pointer-events: none;
}
#mts-page-loader.show { display: flex; opacity: 1; pointer-events: auto; }
.mts-pl-card {
    position: relative;
    width: 110px; height: 110px;
    display: flex; align-items: center; justify-content: center;
}
.mts-pl-card img {
    width: 78px; height: 78px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    animation: mts-pl-pulse 1.2s ease-in-out infinite;
}
.mts-pl-ring {
    position: absolute; inset: 0;
    border: 3px solid transparent;
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: mts-pl-spin .9s linear infinite;
}
@keyframes mts-pl-spin { to { transform: rotate(360deg); } }
@keyframes mts-pl-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(.92); }
}

/* PWA standalone: modal-header iOS status bar altına girmesin
   (özellikle yazdırma önizleme modali — Yazdır ve X butonlarına basılamıyordu) */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    .modal .modal-header {
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
    }
    .modal-fullscreen .modal-body,
    .modal-fullscreen-sm-down .modal-body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* Mobil: dar ekranda fullscreen olabilen modallar için de safe-area */
@media (max-width: 575.98px) {
    .modal .modal-header {
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    }
}