/* hidden özniteliği HER ZAMAN gizlesin. ⚠️ .form-row gibi display tanımlayan sınıflar tarayıcının
   varsayılan [hidden] kuralını eziyor ve gizlenmesi gereken satırlar görünür kalıyordu.
   / make the hidden attribute win over class rules that set a display value */
[hidden] { display: none !important; }

/* ===== EPOS ADMIN tema — NeYemeli template'i, FoodX markası / EPOS Admin theme ===== */
:root {
    --navy-900: #0e1726;   /* sidebar / login üst band */
    --navy-850: #111c30;
    --navy-800: #16223c;   /* login alt zemin */
    --navy-700: #1d2c49;
    --navy-600: #26395c;
    --accent: #f97316;     /* turuncu vurgu / orange accent */
    --accent-hover: #ea6a0d;
    --content-bg: #f1f3f7;
    --card: #ffffff;
    --text: #1f2a3a;
    --muted: #8a94a6;
    --border: #e6e9ef;
    --sidebar-w: 256px;
    --sidebar-mini-w: 74px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; color: var(--text); background: var(--content-bg); }

/* ===================== LOGIN ===================== */
.login-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--navy-800); }
.login-header { background: var(--navy-900); padding: 48px 16px 40px; text-align: center; position: relative; }
.login-header img { height: 70px; }
.login-header::after { /* aşağı ok / down pointer */
    content: ""; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%);
    border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 11px solid var(--navy-900);
}
.login-body { flex: 1; display: flex; justify-content: center; padding-top: 70px; }
.login-card { width: 100%; max-width: 372px; }
.login-field { position: relative; margin-bottom: 14px; }
.login-field i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9aa3b2; }
.login-field input {
    width: 100%; height: 52px; border: 1px solid #d7dce6; border-radius: 8px; background: #eef1f7;
    padding: 0 16px 0 46px; font-size: 15px; color: #1f2a3a; outline: none; transition: border-color .15s;
}
.login-field input:focus { border-color: var(--accent); background: #fff; }
.login-btn {
    width: 100%; height: 52px; border: 0; border-radius: 8px; background: var(--navy-900); color: #fff;
    font-weight: 600; font-size: 15px; cursor: pointer; transition: background .15s;
}
.login-btn:hover { background: var(--navy-700); }
.login-error { background: #fde8e8; color: #b42318; border: 1px solid #f5c2c0; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* ===================== ADMIN SHELL ===================== */
.admin-sidebar {
    position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--navy-900);
    overflow-y: auto; z-index: 30; transition: transform .2s;
}
.admin-sidebar .brand { padding: 22px 26px 18px; }
.admin-sidebar .brand img { display: block; }
.nav-group-title { color: #5f6b80; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 18px 22px 8px; }
.nav-link-item {
    display: flex; align-items: center; gap: 12px; padding: 11px 22px; color: #b9c2d4; text-decoration: none;
    font-size: 14.5px; border-left: 3px solid transparent; transition: background .12s, color .12s;
}
.nav-link-item i { width: 18px; text-align: center; font-size: 15px; }
.nav-link-item:hover { background: var(--navy-800); color: #fff; }
.nav-link-item.active { background: var(--navy-800); color: #fff; border-left-color: var(--accent); }
/* Secili ana bolumde ikon da turuncu — alt ogelerdeki davranisin aynisi (kullanici 2026-09-23)
   / the active top-level item gets the accent icon, same as the sub-items */
.nav-link-item.active i { color: var(--accent); }
.nav-link-item .chev { margin-left: auto; font-size: 12px; }

/* ===== Açılır-kapanır alt menü / collapsible submenu ===== */
/* ⚠️ > (child) seçici ŞART: iç içe grupta (Foods > Items) dış grup açılınca içteki kendiliğinden açılmasın */
.nav-toggle { cursor: pointer; }
.nav-toggle .chev { transition: transform .2s; }
.nav-parent.open > .nav-toggle .chev { transform: rotate(180deg); }
.nav-sub { display: none; background: rgba(0,0,0,.18); }
.nav-parent.open > .nav-sub { display: block; }
.nav-sub-item { display: flex; align-items: center; gap: 10px; padding: 9px 22px 9px 54px; color: #9aa6bd; text-decoration: none; font-size: 14px; position: relative; }
.nav-sub-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #56627c; position: absolute; left: 34px; }
.nav-sub-item:hover { color: #fff; }
.nav-sub-item.active { color: #fff; }
.nav-sub-item.active::before { background: var(--accent); }
/* İkonlu alt öğe (Foods altı: Menus/Products/Items/Choices — kendi ikonları korunur) / submenu item with icon */
.nav-sub-item.ic { padding-left: 40px; }
.nav-sub-item.ic::before { display: none; }
.nav-sub-item.ic i { width: 18px; text-align: center; font-size: 14px; }
.nav-sub-item.ic.active i { color: var(--accent); }
.nav-sub-item .chev { margin-left: auto; font-size: 11px; transition: transform .2s; }
/* 2. seviye (Foods > Items > All Items/Toppings/Dressings) — daha derin girinti / deeper indent for nested level */
.nav-parent.nested .nav-sub { background: rgba(0,0,0,.14); }
.nav-sub-item.deep { padding-left: 78px; }
.nav-sub-item.deep::before { left: 58px; }
/* 3. seviyede ikon: madde yerine ikon, girinti korunur (kullanici 2026-09-23) / icons on the third level keep the indent */
.nav-sub-item.deep.ic { padding-left: 62px; }
body.sidebar-mini .nav-toggle .chev { display: none; }
body.sidebar-mini .nav-sub { display: none !important; }

.admin-main { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin-left .2s; }
.admin-topbar {
    height: 64px; background: var(--navy-900); display: flex; align-items: center; gap: 16px; padding: 0 20px; position: sticky; top: 0; z-index: 20;
}
.topbar-toggle { background: var(--navy-700); border: 0; color: #cdd5e3; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; }
.topbar-search { flex: 1; max-width: 560px; margin: 0 auto; position: relative; }
.topbar-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #6b7689; }
.topbar-search input { width: 100%; height: 40px; border: 0; border-radius: 8px; background: var(--navy-800); color: #cfd6e4; padding: 0 14px 0 40px; outline: none; }
.topbar-icons { display: flex; gap: 8px; }
.topbar-icons a { color: #aeb8ca; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; }
.topbar-icons a:hover { background: var(--navy-700); color: #fff; }

/* ===== Marka switcher (üst bar) / brand switcher ===== */
.brand-switcher { position: relative; }
.bs-toggle { display: flex; align-items: center; gap: 8px; background: var(--navy-700); border: 0; color: #dfe5f0; height: 40px; padding: 0 14px; border-radius: 8px; cursor: pointer; max-width: 260px; }
.bs-toggle .bs-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-toggle .fa-tag { color: var(--accent); }
.bs-caret { font-size: 11px; opacity: .7; }
.bs-menu { position: absolute; top: 48px; left: 0; width: 290px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.18); padding: 8px; display: none; z-index: 50; }
.brand-switcher.open .bs-menu { display: block; }
.bs-search { position: relative; margin-bottom: 6px; }
.bs-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9aa3b2; }
.bs-search input { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px 0 34px; outline: none; }
.bs-list { max-height: 260px; overflow-y: auto; }
.bs-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; color: var(--text); text-decoration: none; border-radius: 8px; font-size: 14.5px; }
.bs-item:hover { background: #f3f5f9; }
.bs-item.active { color: var(--accent); font-weight: 600; }
.bs-empty { padding: 12px; color: var(--muted); font-size: 14px; }
.bs-clear { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-top: 6px; border-top: 1px solid var(--border); color: #d92d20; text-decoration: none; font-size: 14px; }
.bs-clear:hover { background: #fde8e8; border-radius: 8px; }
.nav-link-item.disabled { opacity: .4; pointer-events: none; }

/* ===== Sidebar içi marka switcher / brand switcher inside sidebar ===== */
.sidebar-switcher { padding: 12px 16px 8px; margin-top: 15px; }
.sidebar-switcher .bs-toggle { width: 100%; max-width: none; justify-content: space-between; }
.sidebar-switcher .bs-menu { width: 224px; left: 0; }
body.sidebar-mini .sidebar-switcher { display: none; }

.admin-content { padding: 26px 28px; }
.page-title { font-size: 22px; font-weight: 700; margin: 0 0 22px; }
.page-title small { color: var(--muted); font-size: 14px; font-weight: 500; }

/* ===== Stat kartları / stat cards ===== */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 26px; }
.stat-card { background: var(--card); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.stat-num { font-size: 24px; font-weight: 700; line-height: 1; }
.stat-label { color: var(--muted); font-size: 13px; margin-top: 4px; }
.section-label { font-size: 15px; font-weight: 600; margin: 6px 0 14px; }
/* pastel ikon arkaplanları / pastel icon backgrounds */
.bg-orange { background:#fdebd9; color:#f97316; } .bg-green { background:#e3f5ea; color:#22a55a; }
.bg-blue { background:#e6effd; color:#3b82f6; } .bg-purple { background:#efe9fb; color:#8b5cf6; }
.bg-red { background:#fde8e8; color:#ef4444; } .bg-amber { background:#fdf3da; color:#eab308; }

/* ===== Buton & tablo / buttons & table ===== */
.btn-accent { background: var(--accent); border: 0; color: #fff; font-weight: 600; border-radius: 8px; padding: 9px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-accent:hover { background: var(--accent-hover); color: #fff; }
.card-box { background: var(--card); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 12px 10px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 14px 10px; border-bottom: 1px solid var(--border); font-size: 14.5px; }

/* ===== Sıralanabilir başlık / sortable header ===== */
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable .sort-ind { color: #c2c8d2; font-size: 12px; margin-left: 6px; vertical-align: middle; }
.data-table th.sortable.asc .sort-ind, .data-table th.sortable.desc .sort-ind { color: var(--accent); }

/* Kanal checkbox satırı (Collection/Delivery/Table tek satır) / channel checkbox row */
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
/* Ortak form girdisi — parola ekranları ve benzeri tek sütunlu formlar (kullanıcı 2026-09-24)
   / the shared single-column form input used by the password screens */
.form-input { width: 100%; height: 42px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px;
    font-size: 14.5px; color: var(--text); background: #fff; }
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #fdebd9; }
/* Başarı kutusu / the success box */
.cr-ok { background: #e3f5ea; color: #1c8f4c; border: 1px solid #b7e3c8; border-radius: 10px;
    padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.check-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.check-pill { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; user-select: none; }
.check-pill input[type=checkbox] { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.check-pill:has(input:checked) { border-color: var(--accent); background: #fff7ed; color: var(--accent); }   /* seçili kanal vurgusu / selected channel highlight */

/* Radio satırı (radio + metin yan yana) / inline radio rows */
.radio-group { margin-bottom: 14px; }
.radio-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; }
.radio-row input[type=radio] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }

/* Modal sekmeleri / modal tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 16px; }
.tabs button { background: none; border: none; padding: 10px 18px; font-size: 13px; font-weight: 600; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: #0e1726; }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Tıklanabilir hücre / clickable cell */
.clickable { cursor: pointer; }
.link-like { cursor: pointer; }
.link-like:hover { color: var(--accent); }

/* Alt-grup pill'leri (Menu Sizes) / sub-group pills */
.pill { display: inline-block; padding: 2px 10px; margin: 2px 5px 2px 0; font-size: 12px; font-weight: 600; line-height: 1.7; color: #0e1726; background: #eef1f7; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
.pill-off { color: #9aa3b2; background: #f6f7fa; text-decoration: line-through; }   /* pasif alt-grup / passive sub-group */
.pill-green { background: #e7f6ed; color: #1a7f44; border-color: #bfe6cd; }    /* normal choice */
.pill-orange { background: #fff1e6; color: #b5530c; border-color: #ffd9b8; }   /* secret choice */

/* Choices accordion paneli / expandable choices panel */
.ch-panel-row td { background: #f7f8fb; padding: 6px 18px 14px; }
.ch-panel { }
.choice-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin: 7px 0; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; }
.choice-normal { border-left-color: #22a55a; }   /* Normal = yeşil / green */
.choice-secret { border-left-color: #f97316; }    /* Secret = turuncu / orange */
.ch-toggle { margin-left: 14px; }
.ch-toggle i { transition: transform .15s; }

/* ===== Inline durum switch / status toggle ===== */
.switch { position: relative; display: inline-block; width: 46px; height: 24px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #cfd6e0; border-radius: 24px; cursor: pointer; transition: .2s; }
.switch .slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: #22a55a; }
.switch input:checked + .slider:before { transform: translateX(22px); }

/* ===== Sıra kolonu (numara + ok) — drag-drop YOK / order column (number + arrows) ===== */
.order-cell { display: flex; align-items: center; gap: 8px; }
.order-num { font-weight: 600; min-width: 16px; text-align: center; color: var(--text); }
.order-arrows { display: flex; flex-direction: column; gap: 2px; }
.order-arrows button { width: 24px; height: 15px; border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer; line-height: 1; font-size: 10px; color: var(--muted); padding: 0; display: flex; align-items: center; justify-content: center; }
.order-arrows button:hover:not(:disabled) { background: #f3f5f9; color: var(--accent); }
.order-arrows button:disabled { opacity: .35; cursor: default; }

/* ===== MenuSize popup grid ===== */
#sizesTable td input[type=text], #ingTable td .ing-name,
#chTable td input[type=text], #chTable td input[type=number], #chTable td select,
#notesTable td input[type=text], #groupsTable td input[type=text],
#ciTable td select { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; font-size: 14px; outline: none; background: #fff; }
#sizesTable td input[type=text]:focus, #ingTable td .ing-name:focus,
#chTable td input[type=text]:focus, #chTable td input[type=number]:focus, #chTable td select:focus,
#notesTable td input[type=text]:focus, #groupsTable td input[type=text]:focus,
#ciTable td select:focus { border-color: var(--accent); }
/* Choices grid satır yüksekliği (ferah) / taller choice grid rows */
#chTable td, #ciTable td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; }

/* Kanal hücresi (C/D/T) / channels cell */
td.ch-channels { white-space: nowrap; }
td.ch-channels label { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
td.ch-channels input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* Fiyat kutusu (type=text inputmode=decimal; 12.50 formatı, virgül→nokta JS'te) / price input */
.price-input { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; font-size: 14px; font-weight: 400; outline: none; box-sizing: border-box; text-align: right; }
.price-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(249,115,22,.12); }

/* Fiyat kutusu + sağa kopyala ikonu / price input + copy-to-right icon */
.price-cell { display: flex; align-items: center; gap: 5px; }
.price-cell .price-input { flex: 1 1 auto; min-width: 0; }
.copy-right { flex: 0 0 auto; width: 30px; height: 36px; border: 1px solid var(--border); border-radius: 6px; background: #f3f4f7; color: #9aa3b2; cursor: pointer; font-size: 11px; transition: .15s; }
.copy-right:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
tr.bulk-row th { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.bulk-label { color: #9aa3b2; font-weight: 500; font-size: 12px; text-transform: none; white-space: nowrap; vertical-align: middle; }
.data-table tr.group-start td { border-top: 2px solid #e3e7ee; }   /* ürün grupları arası ayıraç / group separator */
#sizesTable td, #groupsTable td { vertical-align: middle; }

/* ===== Filtre / form / küçük butonlar ===== */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar input, .filter-bar select { height: 40px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; outline: none; min-width: 220px; }
.btn-sm { font-size: 13px; padding: 7px 11px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--text); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-sm:hover { background: #f5f7fb; }
.btn-danger { color: #d92d20; border-color: #f5c2c0; }
.btn-danger:hover { background: #fde8e8; }
/* min-width:0 — ızgara/esnek sütunda girişin doğal genişliği sütunu (ve pencereyi) taşırmasın (2026-10-05)
   / an input's natural width must not push a grid or flex column (and the modal) wider */
.form-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-row label { font-size: 13px; font-weight: 600; color: var(--text); }
.form-row input, .form-row select, .form-row textarea { height: 42px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font-size: 14.5px; outline: none; min-width: 0; max-width: 100%; }
.form-row input:focus, .form-row select:focus { border-color: var(--accent); }
.muted { color: var(--muted); }

/* ===== Modal (popup) ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,38,.55); display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 56px 16px; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal-card { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
/* Başlıkta kaydın adı: "Edit Product › Beef Burger" (eposModalTitle) / the record name in the modal title */
.modal-head h3 .mt-sep { color: var(--muted); font-weight: 400; margin: 0 8px; }
.modal-head h3 .mt-name { color: var(--accent); }
.modal-close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.detail-row { display: flex; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.detail-row .k { width: 130px; color: var(--muted); }

/* ===== Mini ikon-rayı (daraltılmış) / mini icon-rail (collapsed) ===== */
.admin-sidebar, .admin-main { transition: width .2s, margin-left .2s; }
body.sidebar-mini .admin-sidebar { width: var(--sidebar-mini-w); }
body.sidebar-mini .admin-main { margin-left: var(--sidebar-mini-w); }
body.sidebar-mini .admin-sidebar .brand { text-align: center; padding: 16px 0; }
body.sidebar-mini .nav-link-item { justify-content: center; padding: 13px 0; border-left-color: transparent; }
body.sidebar-mini .nav-link-item.active { border-left-color: transparent; box-shadow: inset 3px 0 0 var(--accent); }
body.sidebar-mini .nav-link-item span,
body.sidebar-mini .nav-group-title { display: none; }
/* logo açık/mini geçişi / logo swap */
.admin-sidebar .brand .logo-full { width: 100%; height: auto; }
.admin-sidebar .brand .logo-icon { height: 40px; display: none; }
body.sidebar-mini .admin-sidebar .brand .logo-full,
body.sidebar-mini .brand .logo-full { display: none; }
body.sidebar-mini .admin-sidebar .brand .logo-icon,
body.sidebar-mini .brand .logo-icon { display: inline-block; }
/* toggle ikonu açık/kapalı SVG geçişi / toggle icon swap */
.topbar-toggle img { width: 20px; height: 20px; display: block; }
.topbar-toggle .ico-open { display: none; }
body.sidebar-mini .topbar-toggle .ico-close { display: none; }
body.sidebar-mini .topbar-toggle .ico-open { display: block; }

@media (max-width: 991px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Ortak resim yükleyici widget / shared image upload widget */
.img-up{ display:inline-block; }
.img-up-thumb{ width:96px; height:96px; border:1px dashed #d0d5dd; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; background:#fafafa; color:#98a2b3; font-size:24px; transition:border-color .15s; }
.img-up-thumb:hover{ border-color:#f97316; color:#f97316; }
.img-up-thumb.has{ border-style:solid; border-color:#e4e7ec; }
.img-up-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-up-x{ position:absolute; top:4px; right:4px; width:20px; height:20px; line-height:19px; text-align:center; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:15px; cursor:pointer; }
.img-up-x:hover{ background:#e11d48; }
.img-up-busy{ opacity:.5; pointer-events:none; }
/* Kütüphaneden seç düğmesi + seçici pencere (kullanıcı 2026-09-23) / the library picker button and modal */
.img-up{ position:relative; }
.img-up-lib{ position:absolute; left:4px; bottom:4px; width:24px; height:24px; border:0; border-radius:7px;
    background:rgba(255,255,255,.92); color:#475467; cursor:pointer; font-size:12px; line-height:1;
    box-shadow:0 1px 3px rgba(16,24,40,.2); display:flex; align-items:center; justify-content:center; }
.img-up-lib:hover{ background:#f97316; color:#fff; }
.img-up.sm .img-up-lib{ width:18px; height:18px; font-size:9px; left:2px; bottom:2px; }
/* Açık bir pencerenin (ürün/menü düzenleme, z 100) ÜSTÜNDE açılmalı; kırpma (1200) yine en üstte (2026-09-29)
   / must open above an open modal (z 100); the crop modal (1200) stays on top */
.imglib-back{ position:fixed; inset:0; background:rgba(16,24,40,.5); display:none; align-items:center; justify-content:center; z-index:1150; }
.imglib-back.on{ display:flex; }
.imglib-modal{ background:#fff; border-radius:14px; width:min(980px,94vw); max-height:88vh; display:flex; flex-direction:column;
    box-shadow:0 18px 50px rgba(16,24,40,.28); overflow:hidden; }
.imglib-hd{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #e6e9ef; }
.imglib-hd strong{ font-size:15px; margin-right:auto; }
.imglib-hd select, .imglib-hd input{ height:34px; border:1px solid #e6e9ef; border-radius:8px; padding:0 10px; font-size:13.5px; }
/* Kütüphaneden bilgisayara yükleme düğmesi / the upload-from-computer button in the library header */
.imglib-hd .imglib-upload{ height:34px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
/* Liste satırı resmi: tıkla → kütüphane / list row image: click to pick from the library */
.list-img{ display:inline-flex; flex:none; }
.list-img .list-thumb{ cursor:pointer; transition:box-shadow .15s; }
.list-img .list-thumb:hover{ box-shadow:0 0 0 2px #f97316; }
.imglib-close{ border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:#98a2b3; }
.imglib-close:hover{ color:#e11d48; }
.imglib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; padding:16px 18px; overflow:auto; }
.imglib-card{ border:1px solid #e6e9ef; border-radius:10px; overflow:hidden; cursor:pointer; background:#fff; }
.imglib-card:hover{ border-color:#f97316; box-shadow:0 4px 14px rgba(16,24,40,.12); }
.imglib-card img{ width:100%; aspect-ratio:16/9; object-fit:contain;
    background:repeating-conic-gradient(#f3f5f8 0% 25%,#fff 0% 50%) 50%/12px 12px; display:block; }
.imglib-card span{ display:block; padding:6px 8px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.imglib-foot{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid #e6e9ef; }
.imglib-more{ border:1px solid #e6e9ef; background:#fff; border-radius:8px; padding:8px 14px; font-weight:600; cursor:pointer; font-size:13.5px; }
.imglib-info{ margin-left:auto; color:#8a94a6; font-size:12.5px; }
/* Liste/grid içinde küçük thumbnail / smaller thumb in grids */
.img-up.sm .img-up-thumb{ width:48px; height:48px; border-radius:8px; font-size:16px; }
.img-up.sm .img-up-x{ width:16px; height:16px; line-height:15px; font-size:12px; top:2px; right:2px; }
/* 16:9 geniş yükleyici (menü/slide) / wide 16:9 picker (menus/slides) */
.img-up.img-up-wide{ width:280px; }
.img-up.img-up-wide .img-up-thumb{ aspect-ratio:16/9; width:100%; height:auto; }
/* 9:16 dik yükleyici (kiosk arka planı) / tall 9:16 picker (kiosk background) */
.img-up.img-up-tall{ width:150px; }
.img-up.img-up-tall .img-up-thumb{ aspect-ratio:9/16; width:100%; height:auto; }
/* Liste küçük resmi: resim yoksa nötr yer tutucu; menüler 16:9.
   Bileşik seçici ŞART: .list-thumb (36×36) dosyada daha sonra tanımlı — tek sınıf onu ezemiyor.
   / compound selectors required: the later .list-thumb (36×36) rule would win over a single class. */
.list-thumb.list-thumb-ph{ display:inline-flex; align-items:center; justify-content:center; color:#c3cad4; font-size:15px; }
.list-thumb.list-thumb-wide{ width:64px; height:36px; border-radius:6px; }

/* Choices: gruba ait choice satırları — ana tabloda hizalı / choice rows aligned in the main table */
tr.ch-row > td{ background:#fcfdfe; border-top:1px solid #eef1f4; }
tr.ch-row > td:first-child{ border-left:3px solid transparent; }
tr.ch-row.ch-normal > td:first-child{ border-left-color:#16a34a; }
tr.ch-row.ch-secret > td:first-child{ border-left-color:#f59e0b; }

/* Resim kırpma modalı (Cropper.js) / image crop modal */
#imgCropModal{ z-index:1200; }            /* açık bir modalın üstünde olabilmeli / above an already-open modal */
.crop-wrap{ max-height:58vh; background:#f3f4f6; border-radius:8px; overflow:hidden; }
.crop-wrap > img{ display:block; max-width:100%; max-height:58vh; }
.crop-tools{ display:flex; align-items:center; gap:8px; margin-top:12px; }

/* Tom Select (aranabilir item dropdown) */
.ts-dropdown{ z-index:1300; }                 /* satır içi: kontrolle hizalı, modal'ı taşar / inline, can overflow modal */
#ciBody .ts-wrapper{ min-width:210px; }
#ciBody .ts-control{ padding:4px 28px 4px 8px; min-height:34px; cursor:pointer; }
/* Dropdown'ların üzerinde el imleci / pointer cursor on dropdowns */
.ts-control, .ts-control *{ cursor:pointer; }
.ts-dropdown .option, .ms-choice, select{ cursor:pointer; }
.ts-dropdown .dropdown-input{ cursor:text; }   /* arama kutusu yazı imleci / search box keeps text cursor */
/* Net aşağı-ok (dropdown olduğu belli olsun) — secret ile aynı stil / clear caret */
#ciBody .ts-wrapper.single .ts-control::after{
    content:''; position:absolute; top:50%; right:11px; margin-top:-2px;
    width:0; height:0; border:5px solid transparent; border-top-color:#98a2b3; opacity:1;
}
#ciBody .ts-wrapper.single.dropdown-active .ts-control::after{
    margin-top:-7px; border-top-color:transparent; border-bottom-color:#98a2b3;
}
/* Grup başlığı sola dayalı, item'lar GİRİNTİLİ / group header flush, options indented */
.ts-dropdown .optgroup-header{ font-weight:600; color:#475467; background:#f8fafc; padding-left:10px; }
.ts-dropdown .optgroup .option{ padding-left:26px; }
/* Dropdown üstündeki arama kutusu (büyüteç ikonlu) / search box on top of dropdown */
.ts-dropdown .dropdown-input-wrap{ position:relative; padding:8px; border-bottom:1px solid #eef1f4; }
.ts-dropdown .dropdown-input-wrap::before{ content:'\f002'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:19px; top:50%; transform:translateY(-50%); color:#98a2b3; font-size:13px; pointer-events:none; }
.ts-dropdown .dropdown-input{ width:100%; padding:8px 10px 8px 32px; border:1px solid #d0d5dd; border-radius:8px; outline:none; font-size:14px; box-sizing:border-box; }
.ts-dropdown .dropdown-input:focus{ border-color:#f97316; }

/* Choices: grup satırında choice pill önizleme + choice satırında item pill önizleme / preview pills */
.choice-preview, .item-preview{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

/* Liste satırı ürün küçük resmi (sadece resmi olanlarda) / list row product thumbnail */
.list-thumb{ width:36px; height:36px; border-radius:7px; object-fit:cover; border:1px solid var(--border); flex:0 0 auto; background:#f3f4f6; }

/* POS buton renk secicileri (Products modal + Items grid) / POS button color pickers */
.clr-box { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:8px; padding:6px 10px; }
.clr-box span { font-size:13px; font-weight:600; color:var(--text); }
.clr-box input[type=color] { width:38px; height:30px; border:1px solid var(--border); border-radius:6px; padding:0; background:none; cursor:pointer; }
.clr-box.clr-unset .clr-x { visibility:hidden; }   /* renk atanmadiysa X gizli / X only when a color is set */
.clr-x { border:none; background:#f0f0f4; border-radius:6px; width:22px; height:22px; cursor:pointer; color:#c0392b; font-size:14px; line-height:1; }
.clr-x:hover { background:#e6e6ee; }
.ing-clrs { display:flex; align-items:center; gap:3px; }
.ing-clr { width:24px; height:24px; border:1px solid var(--border); border-radius:5px; padding:0; background:none; cursor:pointer; }
.ing-clr.clr-unset { }   /* soluklastirma kaldirildi — bos hex kutusu = varsayilan / no dimming, empty hex = default */

/* Hex renk kutulari (elle #rrggbb girisi) / typable hex boxes next to color pickers */
.clr-hex { width:78px; height:30px; border:1px solid var(--border); border-radius:6px; padding:0 8px; font-size:13px; font-family:monospace; }
.ing-clrs { flex-wrap:wrap; column-gap:14px; row-gap:6px; }
.ing-clrs-label { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.ing-clr-pair { display:flex; align-items:center; gap:3px; }
/* Items grid: her item 2 satır (üstte alanlar, altta yan yana renkler); iki satır tek blok görünür
   / each item spans two rows — fields on top, colors side by side below, read as one block */
#ingTable tbody.ing-item > tr:first-child > td:not([rowspan]) { border-bottom:0; padding-bottom:6px; }
#ingTable tbody.ing-item > tr.ing-sub > td { padding-top:6px; padding-bottom:14px; }
#ingTable tbody.ing-item:last-child td { border-bottom:0; }   /* alt çizgiyle çift çizgi olmasın / no double line above the footer */
/* Resim üstü = ad kutusu üstü; sıra okları (32px) 36px'lik kutu satırına ortalı; bold/durum/sil 1. satırda aynı hizada
   / image top meets the name box top, arrows centered on that line; bold/status/delete share the first row */
#ingTable td.ing-img { vertical-align:top; }
/* Resim iki satırı kaplar: ad kutusu üstü → renk satırı altı (36 + 12 + 24 = 72px); blok → satır içi boşluk satırı uzatmaz
   / the image spans both rows, name box top to colors bottom; block display so no inline gap stretches the rows */
#ingTable td.ing-img .img-up { display:block; }
#ingTable td.ing-img .img-up-thumb { width:72px; height:72px; border-radius:10px; font-size:22px; }
#ingTable td.ing-img .img-up-x { width:18px; height:18px; line-height:17px; font-size:13px; top:3px; right:3px; }
#ingTable td.ing-order { vertical-align:top; padding-top:16px; }
/* Başlık + "Fill all" satırı kaydırmada sabit. collapse kenarlıkları yapışmaz → çizgiler gölgeyle
   / header and fill-all rows stay pinned while scrolling; collapsed borders don't stick, so lines are inset shadows */
#ingTable thead { position:sticky; top:0; z-index:5; }
#ingTable thead th { background:#fff; border-bottom:0; box-shadow:inset 0 -1px 0 var(--border); }
#ingModal .modal-body { padding-bottom:0; }   /* kaydırma alanı alttaki çizgiye dayanır / scroll area meets the footer line */

/* ===== Bulk Copy Items (Items sayfası): başka markadan grup/item kopyalama / copy groups or items from another brand ===== */
.btn-gray { background:#eceff4; border:1px solid #dde2ea; color:var(--text); font-weight:600; border-radius:8px; padding:9px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn-gray:hover { background:#e2e7ee; }
.filter-bar .bc-open { margin-left:auto; }
.btn-accent:disabled { opacity:.45; cursor:not-allowed; }
.flash-ok { display:flex; align-items:center; gap:8px; background:#e8f6ee; color:#146c3a; border:1px solid #bfe5cd; border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:14px; }
.bc-from { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:16px; }
.bc-from > label { font-size:13px; font-weight:600; white-space:nowrap; }
.bc-from .ts-wrapper { flex:1 1 220px; min-width:0; }
.bc-from .ts-control { min-height:40px; border-radius:8px; font-size:14px; }
.bc-into { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.bc-list-head { display:flex; justify-content:space-between; gap:12px; padding:0 14px 6px 43px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.bc-groups { border:1px solid var(--border); border-radius:10px; max-height:44vh; overflow:auto; }
.bc-empty { padding:30px 16px; text-align:center; font-size:14px; color:var(--muted); }
.bc-group + .bc-group { border-top:1px solid var(--border); }
.bc-head { display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; user-select:none; }
.bc-head:hover { background:#f7f8fb; }
.bc-title { flex:1; min-width:0; font-size:14px; font-weight:600; }
.bc-count { font-size:12px; color:var(--muted); white-space:nowrap; }
.bc-caret { width:12px; font-size:11px; color:var(--muted); transition:transform .15s; }
.bc-group.open .bc-caret { transform:rotate(180deg); }
.bc-items { display:none; padding:0 14px 6px 43px; }
.bc-group.open .bc-items { display:block; }
.bc-item { display:flex; align-items:center; gap:12px; padding:7px 0; font-size:14px; cursor:pointer; }
.bc-item + .bc-item { border-top:1px dashed #eceff4; }
.bc-item.off .bc-name { color:var(--muted); }   /* pasif item / inactive item */
.bc-name { flex:1; min-width:0; }
.bc-price { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
#bcModal input[type=checkbox] { width:17px; height:17px; margin:0; flex:0 0 auto; accent-color:var(--accent); cursor:pointer; }
.bc-target { margin-top:14px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:#fafbfc; }
.bc-target-title { margin-bottom:6px; font-size:13px; font-weight:600; }
.bc-opt { display:flex; align-items:center; gap:12px; padding:4px 0; }
.bc-opt > label { display:flex; align-items:center; gap:8px; width:132px; flex:0 0 auto; font-size:14px; cursor:pointer; }
.bc-opt input[type=radio] { width:17px; height:17px; margin:0; accent-color:var(--accent); cursor:pointer; }
.bc-opt select, .bc-opt input[type=text] { flex:1; min-width:0; height:36px; border:1px solid var(--border); border-radius:8px; padding:0 10px; font-family:inherit; font-size:14px; color:var(--text); background:#fff; outline:none; }
.bc-opt select:focus, .bc-opt input[type=text]:focus { border-color:var(--accent); }
.bc-note { margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.bc-error { margin-top:8px; font-size:13px; color:#b42318; }
.bc-error:empty { display:none; }
.bc-summary { margin-right:auto; align-self:center; font-size:13px; color:var(--muted); }

/* ===== Users › EPOS App / Driver App: marka seçici + şube akordeonu / brand picker + branch accordion ===== */
.br-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; }
.brand-pick { display:flex; align-items:center; gap:10px; }
.brand-pick > label { font-size:13px; font-weight:600; white-space:nowrap; }
.brand-pick .ts-wrapper { min-width:280px; }
.brand-pick .ts-control { min-height:40px; border-radius:8px; font-size:14px; }
/* Aramalı marka seçicilerde sağda aşağı ok — metin kutusu gibi görünmesin (Users sayfaları + Bulk Copy)
   / a chevron on the right so the searchable brand pickers read as dropdowns */
.brand-pick .ts-wrapper.single .ts-control, .bc-from .ts-wrapper.single .ts-control { padding-right:36px; }
.brand-pick .ts-wrapper.single .ts-control::after, .bc-from .ts-wrapper.single .ts-control::after {
    content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:12px; color:#98a2b3;
    position:absolute; top:50%; right:14px; width:auto; height:auto; margin:0; border:0;
    transform:translateY(-50%); transition:transform .15s; pointer-events:none;
}
.brand-pick .ts-wrapper.single.dropdown-active .ts-control::after, .bc-from .ts-wrapper.single.dropdown-active .ts-control::after { transform:translateY(-50%) rotate(180deg); }
.br-search { height:40px; min-width:220px; margin-left:auto; border:1px solid var(--border); border-radius:8px; padding:0 12px; outline:none; font-size:14px; }
.br-search:focus { border-color:var(--accent); }
.br-empty-page { margin:6px 0 2px; }
.br-table tr[hidden] { display:none !important; }
.br-row.open > td { background:#f7f9fc; }
.br-row.open .br-toggle i { transform:rotate(180deg); }
.br-key { font-family:monospace; letter-spacing:1px; }
.br-passive { color:#8a94a6; background:#f4f5f8; }
.br-pin { font-family:monospace; font-size:13px; letter-spacing:2px; }   /* EPOS App listesinde PIN / pin in the EPOS App list */
.br-count { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:24px; padding:0 8px; border-radius:999px; background:#eef1f7; font-size:12.5px; font-weight:700; }
.br-sub { display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
tr.br-child > td { padding-top:10px; padding-bottom:10px; }
/* Şubenin altındaki kişiler şube adına göre 50px içeride (masaüstü; mobilde satırlar kart olur)
   / people rows indented 50px under the branch name on desktop; mobile turns rows into cards */
@media (min-width: 768px) { tr.br-child > td:first-child { padding-left:58.5px; } }   /* collapse'ta 3px çizginin 1,5px'i hücre içinde: 1,5 + 58,5 − 10 = tam 50px / half of the 3px rail sits inside the cell */
tr.br-child strong + .pill { margin-left:6px; }
/* Menü: henüz yapılmamış bölüm / sidebar: an app section that is not built yet */
.nav-sub-item.soon { cursor:default; opacity:.55; }
.nav-sub-item.soon:hover { color:#9aa6bd; }
.nav-soon { margin-left:auto; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.08); font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.ing-hex { width:64px; height:24px; border:1px solid var(--border); border-radius:5px; padding:0 5px; font-size:12px; font-family:monospace; }
/* Items grid "Bold" kutusu (fişte kalın basım) / print-bold checkbox in the items grid */
#ingTable .ing-bold { display:block; width:18px; height:18px; margin:0 auto; accent-color:var(--accent); cursor:pointer; }   /* blok: taban çizgisi kayması yok / block: no baseline offset */

/* ===================== MOBİL / RESPONSIVE (2026-07-20) =====================
   <992px: sabit sidebar ÇEKMECE olur (hamburger açar, karartma kapatır); tablolar kart içinde
   YATAY kayar (düzen kırılmaz); filtre/başlık satırları alta sarar.
   / under 992px the fixed sidebar becomes an off-canvas drawer, tables scroll horizontally
     inside their cards and filter/header rows wrap. */
@media (max-width: 991px) {
    .admin-sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; z-index: 1100; }
    body.sidebar-open .admin-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
    body.sidebar-mini .admin-sidebar { width: var(--sidebar-w) !important; }   /* mini modu mobilde geçersiz / mini mode ignored on mobile */
    .admin-main { margin-left: 0 !important; }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1090; }
    body.sidebar-open .sidebar-overlay { display: block; }
    .admin-content { padding: 14px; }
    .topbar-search { max-width: none; margin: 0 4px; }
    /* Tablolar: kart içinde yatay kaydırma — sayfa düzeni asla taşmaz / tables scroll inside their card */
    .card-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card-box .data-table { min-width: 640px; }
    .filter-bar input, .filter-bar select { min-width: 0; flex: 1 1 160px; }
    .modal-card { max-width: calc(100vw - 24px); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .toolbar { flex-wrap: wrap; gap: 10px; }
    /* Detay panelleri mobilde ALTTAN AÇILAN katman olur (eposSheet) — masaüstünde yan panel
       / detail panels become a bottom sheet on mobile (opened via eposSheet), side panel on desktop */
    .detail-sheet { display: none; }
    .detail-sheet.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; width: auto !important; max-height: 84vh; overflow-y: auto; z-index: 1300; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 34px rgba(16,24,40,.35); }
    .sheet-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(14,23,38,.45); z-index: 1290; }
    .detail-sheet .sheet-head { display: flex; align-items: center; justify-content: center; margin: -8px -8px 6px; padding: 6px 0 8px; position: relative; }
    body.sheet-open { overflow: hidden; }
}
@media (max-width: 575px) {
    .stat-grid { grid-template-columns: 1fr; }
    .admin-topbar { padding: 0 12px; gap: 10px; }
}

/* Bottom-sheet parçaları (masaüstünde gizli) / sheet chrome, hidden on desktop */
.sheet-head { display: none; }
.sheet-backdrop { display: none; }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: #d5dae3; }
.sheet-x { position: absolute; right: 6px; top: 2px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #eef0f5; color: #4b5563; font-size: 18px; line-height: 1; cursor: pointer; }

/* ===== MOBİL KART GÖRÜNÜMÜ (Faz 2): .tbl-cards tablo <768px'te satır=KART olur =====
   Hücreler data-label="Başlık" ile etiketlenir → "etiket: değer" çifti olarak dizilir.
   Etiketsiz hücre (ör. ana başlık) sola yaslı tam satır olur. Okuma-ağırlıklı listeler için;
   düzenleme ızgaraları (Products fiyatları vb.) yatay kaydırmada kalır.
   / mobile card view: rows become cards, cells render as label/value pairs via data-label */
@media (max-width: 767px) {
    .card-box .data-table.tbl-cards { min-width: 0; }
    .tbl-cards thead { display: none; }
    .tbl-cards, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; width: 100%; }
    .tbl-cards tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 8px 14px; background: #fff; }
    .tbl-cards td { border: 0; padding: 7px 0; font-size: 14px; display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 6px 12px; text-align: right; white-space: normal !important; }
    .tbl-cards td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; text-align: left; margin-right: auto; }
    .tbl-cards td:not([data-label]) { justify-content: flex-start; text-align: left; font-weight: 600; }
    .tbl-cards td:not([data-label])::before { display: none; }
    .tbl-cards td:empty { display: none; }
    /* colspan'lı hücreler (adres açılımı, Loading satırı) düz blok kalır / colspan cells stay plain blocks */
    .tbl-cards td[colspan] { display: block; text-align: left; font-weight: 400; }
    /* Kart modunda gereksiz hücreyi gizle (ör. tekrar eden kısayol oku) / hide redundant cells in card mode */
    .tbl-cards td.hide-sm { display: none; }
}


/* Ürün işaretleri ızgarası (Edit Product → Mark item as) / the product mark grid */
#m_marks.mark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
#m_marks .mark-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 12px; background: #fff; cursor: pointer; user-select: none; }
#m_marks .mark-item:hover { border-color: var(--accent); }
#m_marks .mark-item input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
#m_marks .mark-item img { width: 26px; height: 26px; flex: 0 0 auto; }
#m_marks .mark-item span { font-size: 13.5px; font-weight: 600; color: var(--text); }

/* Edit Product → Prices ve Bulk Price Update: size × şube choice grupları. Gri satır = o size'ın tüm şubeleri / tüm ürünleri;
   hücredeki düğme multiple-select görünümünü kullanır, TEK paylaşımlı liste (#cgDrop) ekrana sabit konumlanır (kaydırma kutusu kırpmaz).
   / per size × branch choice groups in both tables; the grey row fills every branch / product, the one shared list is viewport-fixed */
#prTable tr.size-fill td, #bulkPriceTable tr.size-fill td { background: #f8f9fb; }
/* Choice Items toplu atama satırı (gri) / the grey bulk row of the choice items grid */
#ciTable tr.ci-bulk td { background: #f8f9fb; border-bottom: 2px solid #e3e7ee; }
/* Edit Product › Allergens & additives seçicisi: yanındaki Group select'iyle aynı boy / same height and text as the neighbouring select */
#prodModal .form-row .ms-choice { height: 42px; line-height: 40px; border-color: var(--border); font-size: 14.5px; }
#prodModal .form-row .ms-choice > span { padding-left: 12px; }
#prTable td, #bulkPriceTable td { vertical-align: middle; }
.cg-cell { display: flex; align-items: center; gap: 5px; }
.cg-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.cg-wrap .ms-choice { display: block; }
.cg-wrap .ms-choice > span { font-size: 13.5px; }
.cg-drop { min-width: 280px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.cg-drop ul { max-height: 280px; }
.cg-drop li.muted { padding: 8px; }

/* ===================== DESTEK BİLETLERİ / SUPPORT TICKETS ===================== */
/* Menüdeki kırmızı sayaç (aksiyon bekleyen bilet) / red menu counter for tickets waiting on support */
.nav-badge { margin-left: auto; min-width: 20px; padding: 0 7px; border-radius: 999px; background: #e11e28; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.nav-badge.warn { background: #f59e0b; color: #1f2a3a; }   /* uyarı (alarm değil) / warning, not an alarm */
/* Durum rozetleri (1 Open · 2 In progress · 3 Awaiting reply · 4 Resolved · 5 Closed) / status chips */
.tk-status, .tk-prio { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.7; white-space: nowrap; border: 1px solid transparent; }
.tk-s1 { background: #fde8e8; color: #b42318; border-color: #f7c6c3; }
.tk-s2 { background: #e8f0fe; color: #1d4fb8; border-color: #c6d8fb; }
.tk-s3 { background: #fff4e0; color: #9a5b00; border-color: #ffdca3; }
.tk-s4 { background: #e7f6ed; color: #1a7f44; border-color: #bfe6cd; }
.tk-s5 { background: #f1f2f5; color: #6b7280; border-color: #e1e4ea; }
/* Öncelik / priority */
.tk-p1 { background: #f1f2f5; color: #4b5563; }
.tk-p2 { background: #fff1e6; color: #b5530c; }
.tk-p3 { background: #e11e28; color: #fff; }
/* Liste / list */
.tk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 16px; overflow-x: auto; }
.tk-tabs a { padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tk-tabs a:hover { color: var(--text); }
.tk-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.tk-list tr.tk-needs td { background: #fffaf5; }
.tk-list tr.tk-needs td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.tk-list tr:hover td { background: #f7f9fc; }
.tk-no { font-weight: 700; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.tk-snippet { font-size: 12.5px; margin-top: 2px; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-unread { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #e11e28; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: 1px; }
.tk-pager { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 14px; }
.tk-pager a { min-width: 34px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; text-align: center; text-decoration: none; color: var(--text); font-size: 13px; }
.tk-pager a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tk-flash { background: #e7f6ed; color: #1a7f44; border: 1px solid #bfe6cd; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.tk-back { color: var(--muted); margin-right: 8px; text-decoration: none; }
.tk-back:hover { color: var(--text); }
/* Detay: yazışma + yan panel / detail: conversation and side panel */
.tk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.tk-side { display: flex; flex-direction: column; gap: 14px; }
.tk-h { margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tk-inline { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.tk-inline label { width: 80px; color: var(--muted); font-size: 14px; }
.tk-inline select { flex: 1; height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; }
.tk-thread { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; padding: 4px 4px 12px; }
.tk-msg { max-width: 78%; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: #fff; }
.tk-msg header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.tk-msg header time { margin-left: auto; color: var(--muted); font-size: 12px; }
.tk-msg.from-branch { align-self: flex-start; border-top-left-radius: 4px; }
.tk-msg.from-support { align-self: flex-end; background: #eef4ff; border-color: #d4e2fb; border-top-right-radius: 4px; }
.tk-msg.internal { background: #fffbea; border: 1px dashed #e9c46a; }
.tk-internal-tag { color: #9a5b00; font-size: 12px; font-weight: 600; }
.tk-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.5; }
.tk-sys { align-self: center; color: var(--muted); font-size: 12.5px; background: #f4f5f8; border-radius: 999px; padding: 3px 12px; }
.tk-sys time { margin-left: 6px; }
.tk-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tk-thumb img { display: block; width: 132px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.tk-file { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); text-decoration: none; font-size: 13px; }
.tk-file i { color: #d92d20; }
.tk-reply { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; }
.tk-reply textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14.5px; resize: vertical; outline: none; }
.tk-reply textarea:focus, .tk-inline select:focus { border-color: var(--accent); }
.tk-reply-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tk-reply-bar select { height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; }
.tk-reply-bar .btn-accent { margin-left: auto; }
.tk-internal { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #9a5b00; cursor: pointer; }
@media (max-width: 1000px) {
    .tk-layout { grid-template-columns: 1fr; }
    .tk-msg { max-width: 92%; }
}

/* Mobilde detay paneli (bottom sheet, z 1300) açıkken ondan açılan pencereler (iptal/iade vb.) üstünde kalmalı (2026-09-29)
   / while the mobile detail sheet (z 1300) is open, modals opened from it must sit above it */
body.sheet-open .modal-overlay { z-index: 1350; }
body.sheet-open .imglib-back { z-index: 1360; }
body.sheet-open #imgCropModal { z-index: 1370; }

/* ===================== ŞUBE KANAL AYARLARI (2026-10-05) =====================
   Branch Settings › Online Platforms ve Courier Companies sayfalarının ortak bileşenleri: başlık, ayar satırı, açılır kart
   (avatar + özet çipleri + anahtar), iki sütunlu gövde, segment düğme, sayaç, seçim kutuları, çip seçimi, kaydedilmemiş çubuğu.
   Davranışlar wwwroot/js/channel-settings.js'te. / shared components of the branch channel-settings pages */
.chs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.chs-head h1 { margin: 0; font-size: 22px; font-weight: 700; }
.chs-head h1 small { color: var(--muted); font-size: 14px; font-weight: 500; }
.chs-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; max-width: 720px; line-height: 1.5; }
.chs-actions { display: flex; gap: 10px; align-items: center; }
.chs-branch { padding: 9px 12px; border: 1px solid #2b2b45; background: #141428; color: #e6e6f0; border-radius: 8px; font-family: 'Oswald', sans-serif; min-width: 190px; }
.chs-stack { display: flex; flex-direction: column; gap: 12px; }
.chs-section-title { display: flex; align-items: baseline; gap: 10px; margin: 14px 2px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #5b6577; }
.chs-section-title span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 13px; }

/* Ayar satırı (web otomatik kabul, telefon siparişi) / a single settings row */
.chs-row { background: var(--card); border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chs-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff1e6; color: var(--accent); font-size: 18px; flex: none; }
.chs-row-main { flex: 1; min-width: 220px; }
.chs-row-title { font-weight: 700; font-size: 15px; }
.chs-row-desc { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.chs-row-ctrl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chs-row-ctrl select { height: 40px; min-width: 220px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font-size: 14px; background: #fff; }
.chs-inline { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 600; color: #4a5568; white-space: nowrap; }

/* Açılır kart / the collapsible card */
.chs-card { background: var(--card); border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); border: 1px solid transparent; transition: box-shadow .15s, border-color .15s; }
.chs-card.open { box-shadow: 0 8px 28px rgba(16,24,40,.09); border-color: #e8ebf1; }
.chs-card:not(.on) { background: #fafbfc; box-shadow: none; border: 1px dashed #dbe0e8; }
.chs-card-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; user-select: none; border-radius: 14px; }
.chs-card.on .chs-card-head:hover { background: #fafbfd; }
.chs-card:not(.on) .chs-card-head { cursor: default; }
.chs-avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none; }
.chs-card:not(.on) .chs-avatar { filter: grayscale(1); opacity: .4; }
.chs-title { min-width: 0; }
.chs-name { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chs-card:not(.on) .chs-name { color: #7a8597; }
.chs-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chs-meta code { font-size: 12px; color: #7a8597; background: none; padding: 0; }
.chs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; justify-content: flex-end; }
.chs-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #f1f3f7; color: #4a5568; white-space: nowrap; }
.chs-chip i { font-size: 11px; }
.chs-chip.ok { background: #e7f6ed; color: #17703d; }
.chs-chip.hot { background: #fff1e6; color: #b5530c; }
.chs-chip.off { background: #f1f3f7; color: #98a1b0; }
.chs-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #4a5568; white-space: nowrap; padding-left: 16px; margin-left: 4px; border-left: 1px solid var(--border); cursor: default; }
.chs-chev { color: #9aa3b2; transition: transform .2s; width: 16px; text-align: center; flex: none; }
.chs-card.open .chs-chev { transform: rotate(180deg); }
.chs-card:not(.on) .chs-chev { visibility: hidden; }
.chs-body { display: none; border-top: 1px solid #eef0f4; }
.chs-card.on.open .chs-body { display: block; }
.chs-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chs-col { padding: 18px 22px 6px; min-width: 0; }
.chs-col + .chs-col { border-left: 1px solid #eef0f4; }
.chs-band { padding: 18px 22px 20px; border-top: 1px solid #eef0f4; background: #fbfcfd; border-radius: 0 0 14px 14px; }
.chs-label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8a94a6; }
.chs-label i { color: #b0b8c6; }
.chs-label-actions { margin-left: auto; display: flex; gap: 2px; text-transform: none; letter-spacing: 0; }
.chs-saved { font-weight: 500; color: #17703d; font-size: 12px; }
.chs-clear { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; cursor: pointer; }
.chs-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.chs-setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.chs-setting + .chs-setting { border-top: 1px dashed #e9edf2; }
.chs-setting-title { font-weight: 600; font-size: 14px; }
.chs-setting-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* Segment düğme (gizli radyo + etiket) / segmented control on hidden radios */
.chs-seg { display: inline-flex; background: #eef1f5; border-radius: 10px; padding: 3px; gap: 2px; flex: none; }
.chs-seg label { margin: 0; position: relative; }
.chs-seg input { position: absolute; opacity: 0; pointer-events: none; }
.chs-seg span { display: block; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #5b6577; cursor: pointer; transition: background .15s, color .15s; }
.chs-seg input:checked + span { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(16,24,40,.14); }
.chs-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Sayaç / stepper */
.chs-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; height: 38px; background: #fff; flex: none; }
.chs-stepper button { width: 36px; height: 100%; border: 0; background: #f6f7f9; color: #4a5568; cursor: pointer; font-size: 12px; }
.chs-stepper button:hover { background: #eceff3; }
.chs-stepper input { width: 48px; height: 100%; border: 0; text-align: center; font-weight: 700; font-size: 15px; outline: none; -moz-appearance: textfield; appearance: textfield; }
.chs-stepper input::-webkit-outer-spin-button, .chs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chs-stepper em { font-style: normal; font-size: 12.5px; color: var(--muted); padding: 0 10px 0 0; }

/* Seçim kutuları (teslimat) / choice tiles */
.chs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 720px; }
.chs-tile { position: relative; margin: 0; }
.chs-tile input { position: absolute; opacity: 0; pointer-events: none; }
.chs-tile > div { display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.chs-tile > div > i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f1f3f7; color: #5b6577; flex: none; font-size: 14px; transition: background .15s, color .15s; }
.chs-tile b { display: block; font-size: 14px; }
.chs-tile small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.chs-tile:hover > div { border-color: #cfd6e0; }
.chs-tile input:checked + div { border-color: var(--accent); background: #fffaf5; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.chs-tile input:checked + div > i { background: var(--accent); color: #fff; }
.chs-tile input:focus-visible + div { outline: 2px solid var(--accent); outline-offset: 2px; }
.chs-tile input:disabled + div { opacity: .5; cursor: not-allowed; }
.chs-nest { margin-top: 14px; padding-left: 16px; border-left: 2px solid #f6dcc7; }
.chs-nest .form-row { max-width: 340px; margin-bottom: 4px; }
.chs-nest .chs-setting { max-width: 720px; }

/* Çip seçimi (ödeme tipleri) / chip-style checkboxes */
.chs-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chs-check { margin: 0; position: relative; }
.chs-check input { position: absolute; opacity: 0; pointer-events: none; }
.chs-check span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font-size: 13px; font-weight: 600; color: #5b6577; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.chs-check span::before { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; color: #b0b8c6; }
.chs-check:hover span { border-color: #cfd6e0; }
.chs-check input:checked + span { border-color: #8fd3a8; background: #e7f6ed; color: #17703d; }
.chs-check input:checked + span::before { content: "\f00c"; color: #17703d; }
.chs-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.chs-link { background: none; border: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.chs-link:hover { background: #fff1e6; }

/* Kaydedilmemiş değişiklik çubuğu / the unsaved-changes bar */
.chs-dirty { position: sticky; bottom: 16px; z-index: 25; margin-top: 18px; display: none; align-items: center; gap: 12px; background: var(--navy-900); color: #fff; padding: 12px 14px 12px 20px; border-radius: 12px; box-shadow: 0 12px 32px rgba(14,23,38,.35); }
.chs-dirty.show { display: flex; }
.chs-dirty > span { flex: 1; font-size: 14px; }
.chs-dirty > i { color: var(--accent); }
.chs-dirty .btn-sm { background: transparent; color: #cbd3e1; border-color: #33415c; }
.chs-dirty .btn-sm:hover { background: #1d2c49; }

@media (max-width: 1100px) { .chs-card-head .chs-chips { display: none; } }
@media (max-width: 900px) {
    .chs-cols { grid-template-columns: minmax(0, 1fr); }
    .chs-col + .chs-col { border-left: 0; border-top: 1px solid #eef0f4; }
}
@media (max-width: 640px) {
    .chs-tiles { grid-template-columns: minmax(0, 1fr); }
    .chs-toggle .lbl { display: none; }
    .chs-toggle { padding-left: 10px; }
    .chs-actions { width: 100%; }
    .chs-branch { flex: 1; min-width: 0; }
    .chs-row-ctrl, .chs-row-ctrl select { width: 100%; min-width: 0; }
}