/* admin.css — admin panel styles. RTL Arabic.
   2026-10 redesign: sidebar grouped by job, quick search (Ctrl+K), phone tab bar.
   Colours: the panel's original navy family (sidebar #0f1c2e, buttons #1e3a5f) — the owner asked
   to keep them rather than an all-white panel (2026-10-09).
   Every class the pages already use (.card .btn .kpi .badge .form-group .tabs …) is kept — only
   their look changed — so all 30+ admin pages move to the new design through this one file. */

:root {
    --primary: #1e3a5f;
    --primary-dark: #152d4a;
    --primary-soft: #eef3f9;
    --primary-border: #c8d8e8;
    --accent: #2f6fd6;          /* lively blue: charts, highlights, logo tiles */
    --accent-soft: #d6e4f7;
    --dark: #0f1c2e;
    --sb-bg: #0f1c2e;
    --bg: #eef2f7;
    --card: #fff;
    --text: #1a2d3d;
    --muted: #536879;
    --line: #dde5ee;
    --line-soft: #edf1f6;
    --error: #c0362c;
    --warn: #b54708;
    --success: #12855f;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15, 28, 46, .05);
    --shadow-lg: 0 16px 40px rgba(15, 28, 46, .14);
    --font: "IBM Plex Sans Arabic", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sb-w: 268px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font); }
body { background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -60px; right: 12px; z-index: 1000; background: var(--dark); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip-link:focus { top: 12px; color: #fff; }
:focus-visible { outline: 3px solid rgba(47, 111, 214, .45); outline-offset: 2px; }
.ic { flex: none; }
kbd { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--muted); background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

/* ─── Login page ─── */
.login-body { display: flex; justify-content: center; align-items: center; padding: 40px 16px; min-height: 100vh;
    background: radial-gradient(circle at 15% 0%, #24497a 0%, var(--sb-bg) 62%); }
.login-card { background: var(--card); max-width: 420px; width: 100%; border-radius: 20px; padding: 32px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.login-card h1 { color: var(--primary); margin-bottom: 6px; font-size: 1.6rem; }
.login-card .lead { color: var(--muted); margin-bottom: 24px; font-size: 14px; }
.login-card label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: 14px; }
.login-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; font-family: inherit; }
.login-card input:focus { outline: 3px solid rgba(30, 58, 95, .2); border-color: var(--primary); }
.login-card button { width: 100%; margin-top: 20px; padding: 14px; background: var(--primary); color: #fff; border: none; border-radius: 12px; font-weight: 700; font-size: 16px; cursor: pointer; font-family: inherit; }
.login-card button:hover { background: var(--primary-dark); }

.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.alert.error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.alert.success { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.alert.info { background: #eff4ff; color: #2338a8; border: 1px solid #c7d7fe; }
.alert.warn { background: #fffaeb; color: #93370d; border: 1px solid #fedf89; }

/* ═══ Shell ═══ */
.admin-body { background: var(--bg); }
.admin-shell { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-height: 100vh; }

/* Sidebar — dark navy (the panel's original colour) */
.sidebar { background: linear-gradient(180deg, #14284a 0%, var(--sb-bg) 48%); color: #dbe4ef; display: flex; flex-direction: column; gap: 6px;
    padding: 14px 12px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sidebar :focus-visible { outline-color: rgba(147, 197, 253, .8); }
.sb-top { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.sb-store { position: relative; }
.sb-store > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px; background: rgba(255,255,255,.06); cursor: pointer; color: #fff; }
.sb-store > summary::-webkit-details-marker { display: none; }
.sb-store > summary:hover { background: rgba(255,255,255,.1); }
.sb-store-logo { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; overflow: hidden; }
.sb-store-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sb-store-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.sb-store-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-store-sub { font-size: 12px; color: #8fa3bd; }
.sb-store > summary .ic { color: #8fa3bd; }
/* the store switcher opens as a white card over the page */
.sb-store-menu { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.sb-store-row { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 8px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 600; }
.sb-store-row:hover { background: var(--bg); color: var(--text); }
.sb-store-row.on { background: var(--primary-soft); color: var(--primary-dark); }
.sb-store-row small { margin-inline-start: auto; font-size: 11px; color: var(--muted); font-weight: 600; }
.sb-store-row.muted-row { color: var(--muted); font-weight: 500; }
.sb-store-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: none; }
.sb-search { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.06); cursor: pointer; font: inherit; color: #8fa3bd; font-size: 14px; }
.sb-search span { flex: 1; text-align: right; }
.sb-search:hover { background: rgba(255,255,255,.1); color: #fff; }
.sb-search kbd { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #b8c5d6; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; padding-top: 4px; }
.sidebar .nav-item { display: flex; align-items: center; gap: 10px; color: #b8c5d6; font-weight: 500; font-size: 14.5px; border-radius: 12px; transition: background .12s, color .12s; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-item .ic { color: #8fa3bd; }
.sidebar .nav-item:hover .ic { color: #dbe4ef; }
.sb-link { min-height: 44px; padding: 0 12px; }
.sidebar .sb-link.active, .sidebar .sb-item.active { background: rgba(96, 165, 250, .16); color: #fff; font-weight: 600; box-shadow: inset -3px 0 0 #60a5fa; }
.sidebar .sb-link.active .ic, .sidebar .sb-item.active .ic { color: #93c5fd; }
.sidebar .nav-label { flex: 1; min-width: 0; }
.sb-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-size: 14.5px; font-weight: 500; color: #b8c5d6; user-select: none; }
.sb-group > summary::-webkit-details-marker { display: none; }
.sb-group > summary:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-group > summary .ic { color: #8fa3bd; }
.sb-group.has-active > summary { color: #fff; font-weight: 600; }
.sb-group.has-active > summary .ic { color: #93c5fd; }
.sb-chev { display: flex; color: #6f86a3; transition: transform .15s; }
.sb-group[open] .sb-chev { transform: rotate(180deg); }
.sb-group[open] > summary .sb-badge:not(.soft) { display: none; }
.sb-group-items { display: flex; flex-direction: column; gap: 1px; margin: 2px 22px 6px 0; padding-right: 10px; border-right: 1px solid rgba(255,255,255,.1); }
.sb-item { min-height: 38px; padding: 0 10px; font-size: 14px; }
.sb-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sb-badge.soft { background: rgba(229, 72, 77, .2); color: #ffb4b4; min-width: 20px; height: 20px; padding: 0 6px; }

.sb-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; }
.sb-foot button.nav-item { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: right; }
.sb-user { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.06); }
.sb-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.sb-user-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.sb-user-name { font-weight: 600; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-role { font-size: 12px; color: #8fa3bd; }
.sb-logout { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #8fa3bd; }
.sb-logout:hover { background: rgba(229, 72, 77, .18); color: #ffb4b4; }

/* Main column + page header */
.main-content { min-width: 0; display: flex; flex-direction: column; }
.page-header { background: transparent; padding: 24px 32px 6px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; max-width: 1320px; width: 100%; margin: 0 auto; }
.ph-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-header h1 { font-size: 1.6rem; font-weight: 700; color: var(--dark); margin: 0; line-height: 1.35; }
.page-subtitle { color: var(--muted); font-size: 14px; margin: 0; }
.ph-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: #1e293b; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; list-style: none; }
.ph-btn::-webkit-details-marker { display: none; }
.ph-btn:hover { border-color: var(--primary-border); color: var(--dark); }
.ph-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ph-btn.primary:hover { background: var(--primary-dark); color: #fff; }
.ph-search { color: var(--muted); font-weight: 500; }
.ph-create { position: relative; }
.ph-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.ph-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px; color: #1e293b; font-size: 14px; font-weight: 500; }
.ph-menu a .ic { color: var(--primary); }
.ph-menu a:hover { background: #f4f6fa; }
.page-body { padding: 18px 32px 40px; max-width: 1320px; width: 100%; margin: 0 auto; }

/* ═══ Components ═══ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card h2 { font-size: 1.08rem; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.card h3 { font-size: 1rem; font-weight: 600; color: var(--dark); margin-bottom: 10px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* KPI cards */
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.kpi-label { color: var(--muted); font-size: 13.5px; font-weight: 500; margin-bottom: 8px; }
.kpi-value { font-size: 1.85rem; font-weight: 700; color: var(--dark); line-height: 1.2; }
.kpi-sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
th { background: var(--primary-soft); font-weight: 600; font-size: 12.5px; color: var(--primary-dark); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f6f9fc; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s, color .12s; text-decoration: none; line-height: 1.3; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-secondary { background: #fff; color: #1e293b; border-color: var(--line); }
.btn-secondary:hover { background: #f4f6fa; border-color: var(--primary-border); color: var(--dark); }
.btn-danger { background: #c0362c; color: #fff; }
.btn-danger:hover { background: #a3271e; color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #0e6b4c; color: #fff; }
.btn-warn { background: #dc6803; color: #fff; }
.btn-sm { min-height: 34px; padding: 5px 11px; font-size: 13px; border-radius: 10px; }
.btn-icon { padding: 6px 10px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: var(--text); }
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group select,
.form-group textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text); transition: border-color .12s, box-shadow .12s; }
.form-group textarea { min-height: 100px; resize: vertical; }
/* Controls never push their column wider than the screen (a date box would, by ~17px, on a phone). */
.form-group input, .form-group select, .form-group textarea { min-width: 0; max-width: 100%; }
input[type="file"] { max-width: 100%; }
/* Page search boxes (products, customers …) shrink instead of pushing «بحث» off the screen. */
.toolbar > form.flex { flex: 1 1 280px; min-width: 0; }
.toolbar > form.flex input[type="text"], .toolbar > form.flex input[type="search"] { flex: 1 1 auto; width: 100%; min-width: 0 !important; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 58, 95, .15); }
.form-group .help { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .spacer { flex: 1; }

/* Status badges */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.badge-abandoned       { background: #fde68a; color: #78350f; }
.badge-pending_call    { background: #fffaeb; color: #93370d; }
.badge-no_answer_1     { background: #fff4ed; color: #9c2a10; }
.badge-no_answer_2     { background: #ffe6d5; color: #9c2a10; }
.badge-no_answer_3     { background: #ffd6ae; color: #7e2410; }
.badge-no_answer_4     { background: #fdb022; color: #4e1d09; }
.badge-no_answer_5     { background: #f79009; color: #fff; }
.badge-no_answer_6     { background: #dc6803; color: #fff; }
.badge-postponed       { background: #f4f3ff; color: #5925dc; }
.badge-closed          { background: #f2f4f7; color: #344054; }
.badge-confirmed       { background: #eef2ff; color: #2338a8; }
.badge-shipped         { background: #f4f3ff; color: #5925dc; }
.badge-sent_ecomanager { background: #ccfbf1; color: #115e59; }
.badge-delivered       { background: #ecfdf3; color: #067647; }
.badge-returned        { background: #fef3f2; color: #b42318; }
.badge-cancelled       { background: #f2f4f7; color: #475467; }
.badge-duplicate       { background: #fff4ed; color: #9c2a10; }

/* Misc */
.empty-state { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty-state .emoji { font-size: 44px; margin-bottom: 12px; }
.muted { color: var(--muted); font-size: 13px; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex-wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

/* Image upload */
.dropzone { border: 2px dashed var(--primary-border); border-radius: 14px; padding: 30px; text-align: center; background: var(--primary-soft); cursor: pointer; transition: .15s; }
.dropzone:hover, .dropzone.dragover { background: #e1eaf5; border-color: var(--primary); }
.dropzone .icon { font-size: 32px; margin-bottom: 8px; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.image-tile { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.image-tile img { width: 100%; height: 100%; object-fit: cover; }
.image-tile .actions { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }
.image-tile .main-flag { position: absolute; top: 6px; right: 6px; background: var(--primary); color: #fff; padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.image-tile .icon-btn { width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(15,23,42,.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.image-tile .icon-btn:hover { background: var(--primary); }

/* Landing sections grid */
.landing-grid { display: flex; flex-direction: column; gap: 12px; }
.landing-tile { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.landing-preview { width: 100px; height: 100px; flex-shrink: 0; background: var(--primary-soft); border-radius: 10px; overflow: hidden; }
.landing-preview img { width: 100%; height: 100%; object-fit: contain; }
.landing-info { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Tabs → pills */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; padding: 4px; background: #e2e9f2; border-radius: 14px; width: fit-content; max-width: 100%; }
.tab { padding: 8px 14px; min-height: 38px; cursor: pointer; font-weight: 600; color: var(--muted); border: 0; border-radius: 10px; white-space: nowrap; background: none; font-family: inherit; font-size: 14px; }
.tab:hover { color: var(--dark); }
.tab.active { color: #fff; background: var(--primary); box-shadow: 0 2px 6px rgba(30,58,95,.25); }

/* Tag input (for sizes, etc.) */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-height: 44px; transition: .15s; }
.tag-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 58, 95, .15); }
.tag-input .tag { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-soft); color: var(--primary-dark); padding: 4px 4px 4px 10px; border-radius: 8px; font-weight: 600; font-size: 14px; border: 1px solid var(--primary-border); transition: .15s; }
.tag-input .tag:hover { background: var(--primary); color: #fff; }
.tag-input .tag .tag-x { width: 18px; height: 18px; border: none; background: transparent; color: inherit; cursor: pointer; font-size: 14px; font-weight: 900; border-radius: 50%; opacity: 0; transition: .15s; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tag-input .tag:hover .tag-x { opacity: 1; }
.tag-input .tag .tag-x:hover { background: rgba(255,255,255,0.25); }
.tag-input .tag-typer { flex: 1; min-width: 100px; border: none; outline: none; padding: 4px 6px; font-size: 14px; font-family: inherit; background: transparent; }
.tag-input-help { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Size checkboxes (chip-style toggle) */
.size-chk { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 10px 16px; background: #fff; border: 2px solid var(--line); border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; transition: .15s; text-align: center; }
.size-chk:hover { border-color: var(--primary-border); background: var(--primary-soft); color: var(--primary-dark); }
.size-chk-active { border-color: var(--primary) !important; background: var(--primary) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(30,58,95,0.25); transform: translateY(-1px); }
.size-chk-active::before { content: '✓ '; font-weight: 900; }

/* Color picker row */
.color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.color-row input[type="color"] { width: 50px; height: 36px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 0; }
.color-row label { font-weight: 600; min-width: 130px; font-size: 13px; }
.color-row input[type="text"] { flex: 1; max-width: 120px; }

/* "Send number to my phone" button */
.js-send-phone { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-inline-start: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--primary-soft); color: var(--primary-dark); cursor: pointer; font-size: 15px; vertical-align: middle; line-height: 1; transition: background .12s, transform .12s; }
.js-send-phone:hover { background: #e1eaf5; transform: translateY(-1px); }
.js-send-phone:active { transform: translateY(0); }

/* enhanceTable: sort + per-page + search */
.tbl-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tbl-search { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 14px; min-width: 200px; }
.tbl-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 58, 95, .15); }
.tbl-perpage { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tbl-perpage select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; margin: 0 4px; }
.tbl-sortable { cursor: pointer; user-select: none; }
.tbl-sortable:hover { background: var(--primary-border) !important; }
.tbl-sort-ind { color: var(--primary); font-size: 11px; }
.tbl-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tbl-info { font-size: 13px; color: var(--muted); }
.tbl-pager { display: flex; gap: 4px; flex-wrap: wrap; }
.tbl-pg-btn { min-width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13px; color: var(--text); }
.tbl-pg-btn:hover:not(:disabled) { background: #f4f6fa; }
.tbl-pg-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tbl-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.tbl-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tbl-cols-wrap { position: relative; }
.tbl-cols-btn { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); }
.tbl-cols-btn:hover { background: #f4f6fa; }
.tbl-cols-menu { display: none; position: absolute; top: calc(100% + 4px); inset-inline-start: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 190px; max-height: 340px; overflow: auto; z-index: 300; }
.tbl-cols-menu.show { display: block; }
.tbl-cols-menu label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 14px; cursor: pointer; border-radius: 8px; white-space: nowrap; }
.tbl-cols-menu label:hover { background: var(--primary-soft); }
.tbl-cols-menu input[type="checkbox"] { width: 16px; height: 16px; }

/* ═══ Quick search (Ctrl+K) ═══ */
.cmdk { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.cmdk-panel { position: relative; width: 100%; max-width: 640px; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px rgba(15, 23, 42, .28); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-head input { flex: 1; border: 0; outline: none; font: inherit; font-size: 16px; color: var(--text); background: transparent; min-height: 40px; }
.cmdk-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #475569; }
.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-sec { font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 10px; border-radius: 12px; color: var(--text); }
.cmdk-item:hover, .cmdk-item.on { background: var(--primary-soft); color: var(--text); }
.cmdk-ic { width: 32px; height: 32px; border-radius: 9px; background: #f1f4fa; display: flex; align-items: center; justify-content: center; color: var(--primary); flex: none; }
.cmdk-item.on .cmdk-ic { background: #fff; }
.cmdk-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.cmdk-t { font-size: 14.5px; font-weight: 600; }
.cmdk-g { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 14px; }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: #f8fafc; }
body.cmdk-open { overflow: hidden; }

/* Phone tab bar: hidden on wide screens */
.tabbar { display: none; }

/* ═══ Phone & tablet ═══ */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }
.mobile-only { display: none !important; }

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; top: 0; right: -320px; width: 292px; height: 100vh; z-index: 10001; transition: right .22s ease; box-shadow: -12px 0 32px rgba(15, 23, 42, .2); }
    .sidebar.open { right: 0; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 10000; }
    .sidebar-backdrop.show { display: block; }

    .mobile-topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 300; background: var(--sb-bg); color: #fff; padding: 10px 12px; box-shadow: 0 2px 10px rgba(15, 28, 46, .18); }
    .mt-burger, .mt-icon { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
    .mt-title { font-weight: 700; font-size: 16px; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .page-header { padding: 16px 16px 4px; align-items: flex-start; }
    .page-header h1 { font-size: 1.3rem; }
    .ph-search { display: none; }
    /* «إنشاء» opens as a sheet above the tab bar: anchored to the button it ran off the screen
       whenever a long title pushed the button to the other side. */
    .ph-menu { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(var(--tabbar-h, 0px) + 12px); width: auto; z-index: 10002;
        padding: 8px; box-shadow: 0 -12px 40px rgba(15, 28, 46, .28); }
    .ph-menu a { min-height: 50px; font-size: 15px; }
    /* room for the tab bar + the «فعّل الاتصال» banner so the last card is never hidden under them */
    .page-body { padding: 12px 14px calc(var(--tabbar-h, 68px) + 84px); }
    .card { padding: 15px; border-radius: 14px; margin-bottom: 14px; }

    .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 320; height: 68px; padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(15, 23, 42, .06); }
    .tab-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; background: none; border: 0; font-family: inherit; cursor: pointer; }
    .tab-item.on { color: var(--primary); }
    .tab-badge { position: absolute; top: 2px; left: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #b42318; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 768px) {
    /* Touch-friendly controls */
    .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
    .btn-sm { min-height: 38px; padding: 8px 12px; font-size: 13px; }
    .btn-icon { min-height: 40px; }
    /* 16px inputs stop mobile browsers auto-zooming on focus */
    input, select, textarea,
    .form-group input, .form-group select, .form-group textarea { font-size: 16px !important; }
    .form-group input, .form-group select, .form-group textarea { padding: 12px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

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

    /* Tables that opt into a card layout (class="cards-on-mobile") */
    .cards-wrap { border: none; background: transparent; box-shadow: none; overflow: visible; }
    table.cards-on-mobile, table.cards-on-mobile tbody { display: block; width: 100%; }
    table.cards-on-mobile thead { display: none; }
    table.cards-on-mobile tr { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; padding: 4px 14px; box-shadow: var(--shadow); }
    table.cards-on-mobile tr[hidden] { display: none; }
    table.cards-on-mobile td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); text-align: left; font-size: 14px; }
    table.cards-on-mobile tr td:last-child { border-bottom: none; }
    table.cards-on-mobile td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: right; white-space: nowrap; flex: none; }
    table.cards-on-mobile td.cell-check { display: none; }
    table.cards-on-mobile td.cell-actions { padding-top: 12px; }
    table.cards-on-mobile td.cell-actions::before { content: none; }
    table.cards-on-mobile td.cell-actions .btn { width: 100%; }
    table.cards-on-mobile td[data-label="الزبون"] { font-size: 16px; font-weight: 700; }
    .js-send-phone { width: 38px; height: 38px; font-size: 17px; }

    /* Call-center cards */
    .cc-actions { gap: 6px; }
    .cc-actions > .btn { flex: 1 1 auto; min-width: 44%; }
    .cc-noanswer { flex: 1 1 100%; justify-content: center; border: none; padding: 6px 0; }

    /* Bulk-action bar */
    .bulk-bar { flex-direction: column; align-items: stretch; }
    .bulk-actions { justify-content: stretch; flex-direction: column; }
    .bulk-actions > * { width: 100%; }

    .toolbar > .btn { flex: 1 1 auto; }
    .dropdown-menu { right: 0; left: auto; }
    .mobile-only { display: inline-flex !important; }
}

/* Sticky dispatch-blocker alert — stays visible while scrolling during the call */
.sticky-alert { position: sticky; top: 8px; z-index: 40; box-shadow: 0 6px 16px rgba(192,54,44,.18); }
@media (max-width: 900px) { .sticky-alert { top: 74px; } }

/* ═══ Dashboard (admin/index.php) ═══ */
.dash { display: flex; flex-direction: column; gap: 18px; }
.dash-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dq { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 108px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--text); transition: border-color .12s, transform .12s; }
.dq:hover { border-color: var(--primary-border); transform: translateY(-1px); color: var(--text); }
.dq-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.dq-t { font-weight: 700; font-size: 15px; }
.dq-s { font-size: 13px; color: var(--muted); }
.dq.dark { background: linear-gradient(135deg, #24497a 0%, #14284a 100%); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(20, 40, 74, .25); }
.dq.dark .dq-ic { background: rgba(255,255,255,.12); color: #fff; }
.dq.dark .dq-s { color: #cbd5e1; }
.dq.dark:hover { color: #fff; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.dk { background: linear-gradient(180deg, var(--k-soft, #fff) 0%, #fff 72%); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.dk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dk-label { font-size: 14px; color: var(--muted); font-weight: 500; }
.dk-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--k, var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; }
.dk-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dk-value { font-size: 30px; font-weight: 700; line-height: 1; }
.dk-delta { align-self: flex-start; margin-top: 8px; display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.dk-delta.up { background: #ecfdf3; color: #067647; }
.dk-delta.down { background: #fef3f2; color: #b42318; }
.dk-delta.flat { background: #f2f4f7; color: #475467; }
.dk-spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.dk-spark span { width: 7px; border-radius: 3px; background: var(--k-bar, var(--accent-soft)); }
.dk-spark span:last-child { background: var(--k, var(--accent)); }
.dk.k-blue   { --k: #2f6fd6; --k-soft: #e6eefb; --k-bar: #c3d6f4; }
.dk.k-violet { --k: #7048e8; --k-soft: #efeafd; --k-bar: #d6cbf8; }
.dk.k-amber  { --k: #d97706; --k-soft: #fdf2e0; --k-bar: #f6d7a6; }
.dk.k-green  { --k: #12855f; --k-soft: #e4f5ee; --k-bar: #b5e2cf; }
.dq.c-green  .dq-ic { background: #e4f5ee; color: #12855f; }
.dq.c-violet .dq-ic { background: #efeafd; color: #7048e8; }
.dq.c-amber  .dq-ic { background: #fdf2e0; color: #b45309; }
.dq.c-teal   .dq-ic { background: #def3f5; color: #0e7c86; }
.dash-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.dash-row > .dbox { margin: 0; }
.dbox { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dbox.wide { flex: 999 1 520px; }
.dbox.side { flex: 1 1 340px; }
.dbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dbox-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.seg { display: flex; gap: 4px; background: #f1f4fa; padding: 4px; border-radius: 10px; }
.seg a { min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; }
.seg a.on { background: #fff; color: var(--dark); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.pipe-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; gap: 3px; background: #f1f4fa; }
.pipe-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.pipe-split { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: #f8fafc; border: 1px dashed var(--line); color: var(--text); font-size: 13.5px; text-decoration: none; }
.pipe-split b { font-size: 16px; }
.pipe-split b.ab { color: #b45309; }
.pipe-split b.ok { color: #12855f; }
.pipe-split small { color: var(--muted); font-size: 12px; }
.pipe-split .go { margin-inline-start: auto; color: var(--primary); font-weight: 700; font-size: 12.5px; }
.pipe-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #f8fafc; color: var(--text); }
.pipe-cell:hover { background: var(--primary-soft); color: var(--text); }
.pipe-cell .lbl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; }
.pipe-cell .lbl i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.pipe-cell .n { font-size: 22px; font-weight: 700; }
.daily { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.daily .d { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.daily .d b { font-size: 11px; color: #475569; font-weight: 600; }
.daily .d span { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: var(--accent-soft); min-height: 3px; }
.daily .d.today span { background: var(--accent); }
.daily-days { display: flex; gap: 6px; }
.daily-days span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
.att { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid; }
.att.high { background: #fef3f2; border-color: #fecdca; --att: #b42318; }
.att.mid { background: #fffaeb; border-color: #fedf89; --att: #b54708; }
.att.low { background: #eff4ff; border-color: #c7d7fe; --att: #2338a8; }
.att-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: #fff; color: var(--att); display: flex; align-items: center; justify-content: center; }
.att-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.att-t { font-size: 14px; font-weight: 600; color: var(--dark); }
.att-s { font-size: 12.5px; color: #475569; line-height: 1.6; }
.att-cta { flex: none; align-self: center; min-height: 36px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: #fff; border: 1px solid; border-color: inherit; color: var(--att); font-size: 13px; font-weight: 700; }
.att-cta:hover { color: var(--att); filter: brightness(.95); }
.all-good { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 10px; text-align: center; color: var(--muted); }
.all-good .ic { color: var(--success); }
.wbar { display: flex; flex-direction: column; gap: 6px; }
.wbar-top { display: flex; justify-content: space-between; font-size: 14px; gap: 8px; }
.wbar-track { height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.wbar-fill { height: 100%; border-radius: 999px; background: linear-gradient(270deg, var(--accent), #5b93e6); }
.dash-table td { padding: 11px 10px; }
.dash-table th { padding: 9px 10px; }
.dash-sub { display: block; font-size: 12px; color: var(--muted); }
.dash-live { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; background: linear-gradient(135deg, #16a34a, #12855f); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 6px 16px rgba(18, 133, 95, .22); }
.dash-live i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.28); }
.dash-links summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.dash-links summary::-webkit-details-marker { display: none; }

/* Dashboard on a phone: two-up tiles and compact numbers instead of one tall card per row. */
@media (max-width: 900px) { :root { --tabbar-h: 68px; } }
@media (max-width: 600px) {
    .dash { gap: 14px; }
    .dash-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dq { min-height: 0; padding: 12px; gap: 8px; border-radius: 14px; }
    .dq:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .dq-ic { width: 34px; height: 34px; border-radius: 10px; }
    .dq-t { font-size: 14px; }
    .dq-s { font-size: 12px; }
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dk { padding: 14px; gap: 6px; border-radius: 14px; }
    .dk-ic, .dk-spark { display: none; }
    .dk-label { font-size: 12.5px; }
    .dk-value { font-size: 22px; }
    .dk-delta { font-size: 11px; margin-top: 6px; }
    .dbox { padding: 16px; border-radius: 14px; }
    .pipe-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pipe-cell { padding: 8px 10px; }
    .pipe-cell .n { font-size: 18px; }
    .daily { height: 120px; gap: 3px; }
    .daily .d b { font-size: 10px; }
    .daily-days { gap: 3px; }
}

/* ═══ Settings hub (admin/settings.php) ═══ */
.set-hub { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.set-search { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--muted); max-width: 720px; }
.set-search input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--text); min-height: 44px; }
.set-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.set-cat { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: #1e293b; display: inline-flex; align-items: center; gap: 6px; }
.set-cat:hover { border-color: var(--primary-border); }
.set-cat.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.set-cat .n { font-size: 11.5px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: #f1f4fa; color: #334155; }
.set-cat.on .n { background: rgba(255,255,255,.16); color: #fff; }
.set-none { padding: 28px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: 16px; }
.set-hidden { display: none !important; }
.set-flash { animation: setflash 1.6s ease; }
@keyframes setflash { 0%, 40% { box-shadow: 0 0 0 4px rgba(30, 58, 95, .25); } 100% { box-shadow: var(--shadow); } }