/* ===== 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); }
.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; }
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; }
.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: 0; 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; }
.form-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.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; }
.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; }
.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; }
/* 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; }

/* 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; max-width:210px; }
.ing-clr-pair { display:flex; align-items:center; gap:3px; }
.ing-hex { width:64px; height:24px; border:1px solid var(--border); border-radius:5px; padding:0 5px; font-size:12px; font-family:monospace; }

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