: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-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; }
.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; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 30px rgba(0,0,0,.3); }
    .sidebar.open { transform: translateX(0); }
    .app-main { margin-left: 0 !important; }
    .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(.85rem + env(safe-area-inset-bottom, 0px));
    }
    .topbar-title { font-size: .95rem; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .card-body { padding: 1rem .85rem; }
    h4 { font-size: 1.2rem; }
    /* Dokunmatik dostu hedefler */
    .btn, .form-control, .form-select { min-height: 40px; }
    .btn-sm, .table-actions .btn { min-height: 32px; }
    .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }
    /* Tablo aksiyon butonları alta kaymasın diye sarması */
    td .table-actions, td .d-flex.gap-1, td .d-flex.gap-2 { flex-wrap: wrap; row-gap: 4px; }
}
@media (max-width: 767.98px) {
    html, body { font-size: 13.5px; }
    .content { padding: .7rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); }
    .card-body { padding: .85rem; }
    .table { font-size: .82rem; }
    .table th { font-size: .68rem; }
    .table th, .table td { padding: .55rem .5rem; }
    .modal-dialog { margin: .5rem; }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 1rem); }
    .row.g-3 > [class*="col-"] { margin-bottom: .25rem; }
    .form-actions .btn { width: 100%; margin-bottom: .4rem; }
}
@media (max-width: 575.98px) {
    .btn { padding: .4rem .65rem; }
    .topbar-title { display: none; }
    .dropdown-menu { font-size: .9rem; }
    .badge { font-size: .68rem; }
}

/* ---------- 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; }
.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; }

@media (max-width: 767.98px) {
    /* table-responsive ile sarılmamış tablolar da yatay kaydırılabilsin */
    table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* 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ı (sayfa başlıkları, kart başlıkları) sarsın */
    .content > .d-flex.justify-content-between,
    .card-header.d-flex.justify-content-between,
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap; gap: .5rem;
    }
    /* Yan yana form grupları alt alta */
    .row.g-2 > [class*="col-"], .row.g-1 > [class*="col-"] { margin-bottom: .35rem; }
}

@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; }
}

/* ---------- 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; }

/* ---- 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; }

/* ---- 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 { color: #6ee7b7; }
[data-bs-theme="dark"] .alert-danger  { color: #fca5a5; }

/* ---- 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 { color: color-mix(in srgb, var(--bs-body-color) 42%, transparent); }
.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; }
}

/* 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; }
}