:root {
  --bg: #f5f6fa;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #4f46e5;
  --primary-soft: #eef2ff;
  --success: #059669;
  --success-soft: #ecfdf5;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --sidebar: #111827;
  --sidebar-text: #d1d5db;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}
/* بند #35: البرنامج داكن (افتراضياً) بألوان كاشير Discovery، ويا زر فاتح / داكن لكل مستخدم (html[data-theme]) */
:root[data-theme="dark"] {
  --bg: #171a23; --panel: #1f2331; --text: #f5f6fa; --muted: #aeb8d0; --border: #343949;
  --primary: #8b70ff; --primary-soft: #2a2550; --success: #1fb98a; --success-soft: #123a33;
  --danger: #ff4d5e; --danger-soft: #3e232a; --warning: #ffc53d; --warning-soft: #3d3520;
  --sidebar: #12141b; --sidebar-text: #c0c8da; --shadow: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0 0 12px; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; }

/* ===== التخطيط ===== */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; background: var(--sidebar); color: var(--sidebar-text); flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { padding: 18px 16px; font-weight: 700; font-size: 16px; color: #fff; border-bottom: 1px solid #1f2937; }
.brand small { display: block; font-weight: 400; color: #9ca3af; font-size: 12px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--sidebar-text);
  border-inline-start: 3px solid transparent;
}
.nav a:hover { background: #1f2937; }
.nav a.active { background: #1f2937; color: #fff; border-inline-start-color: var(--primary); }
.nav .ico { width: 20px; text-align: center; }
.nav .group { padding: 14px 16px 4px; font-size: 11px; color: #6b7280; }
.sidebar .me { margin-top: auto; padding: 12px 16px; border-top: 1px solid #1f2937; font-size: 12px; }
.main { flex: 1; min-width: 0; padding: 22px; }
.topbar { display: none; }
@media (max-width: 860px) {
  .sidebar { position: fixed; inset-inline-start: 0; z-index: 50; transform: translateX(100%); transition: .2s; }
  .sidebar.open { transform: none; }
  .topbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--sidebar); color: #fff;
    position: sticky; top: 0; z-index: 40;
  }
  .main { padding: 14px; }
}

/* ===== عناصر ===== */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.grid { display: grid; gap: 14px; }
.grid.k { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.kpi .label { color: var(--muted); font-size: 12px; }
.kpi .value { font-size: 21px; font-weight: 700; margin-top: 4px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; white-space: nowrap; }
.mt { margin-top: 14px; }

button, .btn {
  font: inherit; border: 1px solid var(--border); background: var(--panel); color: var(--text);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
button:hover { filter: brightness(.97); }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.success { background: var(--success); border-color: var(--success); color: #fff; }
button.danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
button.ghost { background: transparent; border-color: transparent; }
button.sm { padding: 4px 9px; font-size: 12px; }
button:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  font: inherit; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; flex: none; }
label.f { display: block; margin-bottom: 10px; }
label.f > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.search { max-width: 260px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }
/* اختيار نوع جهة الاتصال: 3 أزرار كبار */
.type-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.type-pick button { justify-content: center; font-size: 16px; padding: 14px 8px; }
/* Family Hub: شارة الطفل */
.kid-chip { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; background: var(--success-soft); white-space: nowrap; }
.type-pick button.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--bg); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--primary-soft); }
.table-wrap { overflow-x: auto; }
tfoot td { font-weight: 700; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; white-space: nowrap; background: var(--bg); border: 1px solid var(--border); }
.badge.green { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge.red { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.amber { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge.blue { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

.empty { text-align: center; color: var(--muted); padding: 30px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; }
.tabs button.active { border-bottom-color: var(--primary); color: var(--primary); font-weight: 600; }

/* ===== نافذة منبثقة ===== */
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-start; justify-content: center; z-index: 100; padding: 40px 12px; overflow-y: auto; }
.modal { background: var(--panel); border-radius: 12px; width: 100%; max-width: 620px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.modal.wide { max-width: 900px; }
.modal header { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; justify-content: space-between; }
.modal .body { padding: 18px; }
.modal footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-start; }

#toasts { position: fixed; bottom: 16px; inset-inline-start: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #111827; color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow); max-width: 360px; }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* ===== الدخول ===== */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth .card { width: 100%; max-width: 400px; padding: 26px; }

/* ===== الكاشير (بنود #17 و #18 و #19): شاشة كاملة + تبويبات ===== */
.cart-line { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.cart-line input { width: 60px; padding: 4px; text-align: center; }
:root { --sec-restaurant: #ea580c; --sec-minishop: #9333ea; --sec-activity: #0284c7; --sec-playground: #059669; --sec-other: #64748b; }
:root[data-theme="dark"] { --sec-restaurant: #ff9f1a; --sec-minishop: #ff6fb1; --sec-activity: #4c9bff; --sec-playground: #1fb98a; --sec-other: #94a3b8; }
.cashier { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
.c-main { min-height: 0; display: flex; flex-direction: column; }
.c-main > * { flex: 1; min-height: 0; }
.c-top { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.c-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; white-space: nowrap; }
.c-title small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.c-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); display: inline-block; }
.c-top .c-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.c-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); }
.c-tab { gap: 8px; padding: 8px 14px; border: none; border-radius: 9px; background: transparent; font-weight: 700; color: var(--muted); }
.c-tab .count { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--border); color: var(--text); }
.c-tab .count:empty { display: none; }
.c-tab .count.hot { background: var(--warning); color: #fff; }
.c-tab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.c-shiftchip { display: flex; align-items: center; gap: 8px; padding: 4px; padding-inline-start: 12px; border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--muted); white-space: nowrap; }
.c-shiftchip b { color: var(--text); }
.kbd { font-size: 11px; border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; color: var(--muted); background: var(--bg); font-family: monospace; }

/* البيع */
.c-body { display: grid; grid-template-columns: 1fr 410px; min-height: 0; }
.c-products { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 0; min-height: 0; }
.c-search { position: relative; }
.c-search input { height: 48px; font-size: 16px; padding-inline-start: 44px; border-radius: 12px; }
.c-search .ico { position: absolute; inset-inline-start: 14px; top: 12px; font-size: 18px; opacity: .6; }
.c-search .kbd { position: absolute; inset-inline-end: 12px; top: 14px; }
.c-sections { display: flex; gap: 8px; flex-wrap: wrap; }
.c-sec { padding: 9px 16px; border-radius: 12px; font-weight: 700; font-size: 15px; }
.c-sec .count { font-size: 12px; font-weight: 600; opacity: .75; background: var(--bg); border-radius: 99px; padding: 0 8px; }
.c-sec.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.c-sec.active .count { background: rgba(255, 255, 255, .22); opacity: 1; }
.c-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.c-cat { padding: 5px 14px; border-radius: 99px; font-size: 13px; background: transparent; }
.c-cat.active { background: var(--primary-soft); color: var(--primary); border-color: transparent; font-weight: 700; }
.c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; overflow-y: auto; align-content: start; padding: 10px 4px 16px; }
.c-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 108px;
  padding: 14px 12px 12px; text-align: start; cursor: pointer; background: var(--panel); border: 1px solid var(--border);
  border-top: 4px solid var(--sec); border-radius: 14px; transition: transform .08s, box-shadow .15s; user-select: none; }
.c-tile:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.c-tile:active { transform: scale(.97); }
.c-tile .n { font-weight: 700; font-size: 15px; line-height: 1.35; }
.c-tile .meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; }
.c-tile .p { font-weight: 800; font-size: 16px; color: var(--sec); }
.c-tile .stock { font-size: 11px; color: var(--muted); }
.c-tile .stock.low { color: var(--danger); font-weight: 700; }
.c-tile .in-cart { position: absolute; top: -9px; inset-inline-start: -9px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 800; font-size: 13px; border: 3px solid var(--bg); }
.sec-restaurant { --sec: var(--sec-restaurant); }
.sec-minishop { --sec: var(--sec-minishop); }
.sec-activity { --sec: var(--sec-activity); }
.sec-playground { --sec: var(--sec-playground); }
.sec-other { --sec: var(--sec-other); }
.c-cart { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-inline-start: 1px solid var(--border); }
.c-cust { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.c-cust-row { display: flex; align-items: center; gap: 10px; }
.c-avatar { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--primary-soft); }
.c-cust-row .who { flex: 1; min-width: 0; }
.c-cust-row .who b { display: block; font-size: 15px; }
.c-cust-row .who span { font-size: 12px; color: var(--muted); }
.c-dues { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: var(--warning-soft); color: var(--warning); }
.c-dues b { color: var(--text); }
.c-dues button { margin-inline-start: auto; }
.c-cart-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.c-spacer { flex: 1; }
.c-parked { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-bottom: 1px dashed var(--border); overflow-x: auto; font-size: 12px; color: var(--muted); white-space: nowrap; background: var(--warning-soft); }
.c-parked button { font-size: 12px; padding: 3px 10px; border-radius: 99px; }
.c-lines { flex: 1; overflow-y: auto; padding: 0 14px; }
.c-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.c-line .n { font-weight: 700; }
.c-line .u { font-size: 12px; color: var(--muted); }
.c-line .t { min-width: 76px; text-align: end; font-weight: 800; }
.c-step { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.c-step button { width: 34px; height: 34px; padding: 0; border: none; border-radius: 0; justify-content: center; font-size: 18px; background: var(--bg); }
.c-step span { min-width: 32px; text-align: center; font-weight: 800; cursor: pointer; }
.c-sum { padding: 10px 14px 12px; border-top: 1px solid var(--border); background: var(--bg); }
.c-sum .r { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.c-sum .r.disc { color: var(--success); }
.c-sum .r input { width: 110px; padding: 3px 8px; }
.c-grand { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 8px; }
.c-grand .v { font-size: 30px; font-weight: 900; letter-spacing: -.5px; }
.c-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.c-methods button { justify-content: center; padding: 9px 6px; font-weight: 700; }
.c-methods button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.c-cash { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.c-box { display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); }
.c-box span { font-size: 11px; color: var(--muted); }
.c-box input { padding: 0; border: none; background: transparent; font-size: 20px; font-weight: 800; outline: none; }
.c-box.change { background: var(--success-soft); border-color: transparent; }
.c-box.change span, .c-box.change b { color: var(--success); }
.c-box.change.short { background: var(--danger-soft); }
.c-box.change.short span, .c-box.change.short b { color: var(--danger); }
.c-box.change b { font-size: 20px; }
.c-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.c-quick button { justify-content: center; padding: 5px 4px; font-size: 13px; }
.c-pay { width: 100%; justify-content: center; gap: 10px; margin-top: 10px; padding: 13px; border: none; border-radius: 12px;
  font-size: 19px; font-weight: 800; background: var(--success); color: #fff; }
.c-pay .kbd { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.c-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 20px; }

/* اختيار العائلة */
.c-picker input { height: 42px; }
.c-pick-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 240px; overflow-y: auto; }
.c-pick { justify-content: flex-start; gap: 8px; text-align: start; white-space: normal; }
.c-kid-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.c-kid-check.dis { opacity: .55; cursor: not-allowed; }

/* صفحات التبويبات */
.c-page { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; min-height: 0; overflow: hidden; }
.c-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.c-toolbar .c-search { flex: 1; min-width: 240px; }
.c-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.c-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.c-kpi { padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.c-kpi span { display: block; font-size: 12px; color: var(--muted); }
.c-kpi b { font-size: 22px; font-weight: 900; }
.c-kpi.good b { color: var(--success); }
.c-kpi.bad b { color: var(--danger); }
.c-table { flex: 1; overflow-y: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.c-table table td { padding: 10px 12px; }
.c-table tr.cancelled td { color: var(--muted); text-decoration: line-through; }
.c-table tr.cancelled td:nth-last-child(-n+2) { text-decoration: none; }

/* الحضور */
.att-row { display: grid; grid-template-columns: 46px 1.4fr 1.2fr .9fr 1.2fr 200px; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.att-row.head { font-size: 12px; color: var(--muted); font-weight: 700; background: var(--bg); position: sticky; top: 0; z-index: 1; }
.att-row.present { background: color-mix(in srgb, var(--success-soft) 55%, transparent); }
.att-av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 18px; background: var(--primary-soft); color: var(--primary); }
.att-row .who b { display: block; font-size: 15px; }
.att-row .who span, .att-row .fam span { font-size: 12px; color: var(--muted); }
.att-in { justify-content: center; width: 100%; padding: 10px; font-size: 15px; font-weight: 800; border-radius: 10px; }
.att-done { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; color: var(--success); }

/* الطلبات الحالية: الملعب بالتايمر */
.pg-cards { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px; overflow-y: auto; align-content: start; }
.pg-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.pg-card.held { border-style: dashed; }
.pg-card > header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pg-card > header b { font-size: 15px; }
.pg-card > header .since { margin-inline-start: auto; font-size: 12px; color: var(--muted); }
.pg-kid { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px dashed var(--border); }
.pg-kid .av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; background: var(--primary-soft); color: var(--primary); }
.pg-kid .nm b { display: block; }
.pg-kid .nm span { font-size: 12px; color: var(--muted); }
.pg-timer { font-family: ui-monospace, Consolas, monospace; font-size: 20px; font-weight: 800; direction: ltr; }
.pg-price { min-width: 70px; text-align: end; }
.pg-price b { display: block; font-size: 16px; }
.pg-price span { font-size: 11px; color: var(--muted); }
.pg-warn { grid-column: 2 / -1; justify-self: start; padding: 2px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--warning-soft); color: var(--warning); }
.pg-warn.free { background: var(--success-soft); color: var(--success); }
/* بند #20: الدخولية بمدة — تايمر تنازلي، أصفر قبل الانتهاء، أحمر لمن يخلص */
.pg-warn.over { background: var(--danger-soft); color: var(--danger); }
.pg-kid.over { background: var(--danger-soft); }
.pg-kid.over .pg-timer { color: var(--danger); }
.pg-timer .lbl { display: block; font-size: 10px; font-weight: 600; color: var(--muted); font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; direction: rtl; text-align: center; }
.c-tile .dur { font-size: 12px; font-weight: 700; color: var(--sec); }
.pg-pay-opt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.pg-pay-opt button { padding: 12px; font-size: 15px; font-weight: 700; }
.pg-pay-opt button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pg-subchoice { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: 26px; }
.pg-subchoice label { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.pg-kid.done { background: var(--bg); }
.pg-kid.done .pg-timer { font-size: 15px; color: var(--muted); }
.pg-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 14px; font-size: 13px; color: var(--muted); border-bottom: 1px dashed var(--border); }
.pg-card > footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 14px; background: var(--bg); border-radius: 0 0 14px 14px; }
.pg-card > footer .tot { margin-inline-end: auto; }
.pg-card > footer .tot span { display: block; font-size: 11px; color: var(--muted); }
.pg-card > footer .tot b { font-size: 20px; font-weight: 900; }
.pg-start { padding: 12px 18px; font-size: 16px; font-weight: 800; }

/* فتح الوردية */
.c-open { display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.c-open-card { width: 100%; max-width: 440px; text-align: center; padding: 28px; }
.c-open-card input { height: 52px; font-size: 22px; font-weight: 800; text-align: center; }

/* زر الرجوع للكاشير (من البرنامج) */
.cashier-fab { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 55; padding: 12px 18px; border: none; border-radius: 99px;
  background: var(--success); color: #fff; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.cashier-fab .count { background: rgba(255, 255, 255, .25); border-radius: 99px; padding: 0 8px; }

@media (max-width: 1150px) {
  .c-body { grid-template-columns: 1fr 350px; }
  .c-top { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .cashier { overflow-y: auto; display: block; }
  .c-body { display: flex; flex-direction: column; }
  .c-cart { border-inline-start: none; border-top: 1px solid var(--border); }
  .c-grid { max-height: 60vh; }
  .pg-cards { grid-template-columns: 1fr; }
  .att-row { grid-template-columns: 42px 1fr 1fr; }
  .att-row > :nth-child(4), .att-row > :nth-child(5) { display: none; }
}

/* ===== CRM ===== */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; min-height: 300px; }
.kcol.drop { outline: 2px dashed var(--primary); }
.kcol h3 { display: flex; justify-content: space-between; font-size: 13px; }
.kcard { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow); }
.kcard .t { font-weight: 600; }

/* ===== المحادثة ===== */
.chat { display: grid; grid-template-columns: 240px 1fr; height: calc(100vh - 120px); gap: 0; padding: 0; overflow: hidden; }
@media (max-width: 760px) { .chat { grid-template-columns: 1fr; height: auto; } }
.chat-side { border-inline-end: 1px solid var(--border); overflow-y: auto; padding: 10px; }
.chat-side .ch { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; }
.chat-side .ch.active, .chat-side .ch:hover { background: var(--primary-soft); }
.chat-main { display: flex; flex-direction: column; min-height: 400px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 75%; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); white-space: pre-wrap; word-wrap: break-word; }
.msg.mine { align-self: flex-start; background: var(--primary); color: #fff; border-color: var(--primary); }
.msg:not(.mine) { align-self: flex-end; }
.msg .who { font-size: 11px; opacity: .75; margin-bottom: 2px; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }

/* ===== الطباعة ===== */
.print-only { display: none; }
@media print {
  .sidebar, .topbar, .no-print, #toasts, .modal-bg footer, .modal header button { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; }
  .main { padding: 0; }
  .modal-bg { position: static; background: none; padding: 0; }
  .modal { box-shadow: none; max-width: none; }
  body.printing-modal .layout { display: none; }
}

/* ===== الوصولات (بند #13): شكل قريب من الوصل الورقي ===== */
.paper { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--panel); }
.paper-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.paper-title { background: #1d2df5; color: #fff; border-radius: 12px; padding: 4px 22px; font-weight: 700; font-size: 16px; }
.paper-no { background: #1d2df5; color: #fff; padding: 3px 12px; }
.paper-row { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dotted var(--muted); align-items: baseline; }
.paper-label { font-weight: 700; white-space: nowrap; min-width: 170px; }
.paper-value { flex: 1; }
.paper-cancel { background: var(--danger-soft); color: var(--danger); padding: 6px 10px; border-radius: 6px; margin-bottom: 8px; font-weight: 600; }
@media (max-width: 600px) { .paper-row { flex-direction: column; gap: 2px; } .paper-label { min-width: 0; } }
.paper-photo { max-width: 100%; max-height: 480px; border: 1px solid var(--border); border-radius: 8px; display: block; margin: 0 auto; }

/* ===================== بند #34: الكاشير الجديد — الشكل الداكن (ألوان كاشير Discovery القديم) ===================== */
/* المتغيرات على body حتى النوافذ (المنبثقة) هم تصير داكنة لمن الكاشير مفتوح */
body.cashier-on {
  --bg: #171a23; --panel: #1f2331; --text: #f5f6fa; --muted: #aeb8d0; --border: #343949;
  --primary: #8b70ff; --primary-soft: #2a2550; --success: #1fb98a; --success-soft: #123a33;
  --danger: #ff4d5e; --danger-soft: #3e232a; --warning: #ffc53d; --warning-soft: #3d3520;
  --c-btn: #303647; --c-btn-border: #444b60; --c-card: #383e50; --c-teal: #16b8ad; --c-teal-soft: #124d50; --c-violet: #653ee1;
  --sec-restaurant: #ff9f1a; --sec-minishop: #ff6fb1; --sec-activity: #4c9bff; --sec-playground: #1fb98a; --sec-other: #94a3b8; --sec-courses: #4c9bff;
  color-scheme: dark;
}
body.cashier-on input, body.cashier-on select, body.cashier-on textarea { background: var(--c-btn); border-color: var(--c-btn-border); color: var(--text); }
body.cashier-on button { background: var(--c-btn); border-color: var(--c-btn-border); color: var(--text); }
body.cashier-on button.primary { background: var(--c-violet); border-color: var(--c-violet); color: #fff; }
body.cashier-on button.success { background: var(--c-teal-soft); border-color: var(--c-teal); color: #fff; }
body.cashier-on button.danger { background: #5a2430; border-color: #d74655; color: #fff; }
body.cashier-on button.ghost { background: transparent; border-color: transparent; }
body.cashier-on .modal { background: var(--panel); border: 1px solid var(--border); color: var(--text); }
body.cashier-on .modal header, body.cashier-on .modal footer { border-color: var(--border); }
body.cashier-on .card { background: var(--panel); border-color: var(--border); }
body.cashier-on table th { background: var(--bg); color: var(--muted); }
body.cashier-on table td { border-color: var(--border); }
body.cashier-on .badge { background: var(--c-btn); color: var(--text); }
body.cashier-on .badge.green { background: #123a33; color: #42e2c4; }
body.cashier-on .badge.red { background: #3e232a; color: #ff8f9a; }
body.cashier-on .badge.amber { background: #3d3520; color: #ffc53d; }
body.cashier-on .badge.blue { background: #1d2b4f; color: #8fb6ff; }
body.cashier-on .toast { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.sec-courses { --sec: var(--sec-courses, #0284c7); }
.sec-all { --sec: #77e1da; }

.cashier { background: var(--bg); color: var(--text); font-size: 15px; }
/* الشريط العلوي */
.cashier .c-top { gap: 10px; min-height: 72px; padding: 8px 12px; min-width: 0; overflow: hidden; background: #252a3a; border-bottom: 1px solid var(--border); }
.c-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.c-brand b { display: block; font-size: 18px; font-weight: 900; }
.c-brand small { color: var(--muted); font-size: 12px; }
.c-logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--c-teal), #7653ff); }
.cashier .c-tabs { flex: 1; min-width: 0; justify-content: center; gap: 6px; padding: 0; background: transparent; }
.cashier .c-tab { height: 54px; padding: 0 14px; border-radius: 16px; min-width: 0; border: 1px solid var(--c-btn-border); background: var(--c-btn); color: var(--text); font-size: 16px; font-weight: 800; white-space: nowrap; }
.cashier .c-tab .ico { font-size: 18px; }
.cashier .c-tab.active { background: var(--c-teal-soft); border-color: var(--c-teal); color: #fff; box-shadow: none; }
.cashier .c-tab .count { background: #41495d; color: #fff; font-size: 12px; padding: 2px 9px; }
.cashier .c-tab .count.hot { background: var(--danger); color: #fff; animation: c-pulse 1.4s infinite; }
@keyframes c-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 77, 94, .25); } }
.cashier .c-shiftchip { padding: 8px 12px; border-radius: 14px; background: #176b67; border: 1px solid #28bdb4; color: #fff; font-size: 14px; }
.cashier .c-shiftchip b { color: #fff; }
.c-ibtn { width: 48px; height: 48px; flex: none; padding: 0; justify-content: center; font-size: 21px; border-radius: 14px; }
.c-ibtn.hot { border-color: var(--c-teal); }
.c-back { height: 48px; flex: none; padding: 0 14px; white-space: nowrap; border-radius: 14px; font-weight: 800; }

/* البيع */
.cashier .c-body { grid-template-columns: minmax(0, 1fr) 450px; gap: 12px; padding: 12px; }
.cashier .c-products { min-width: 0; padding: 12px; border-radius: 22px; background: var(--panel); border: 1px solid var(--border); }
.cashier .c-search input { height: 58px; font-size: 17px; border-radius: 16px; }
.cashier .c-search .ico { top: 16px; }
.cashier .c-search .kbd { top: 18px; }
.cashier .c-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cashier .c-sec { position: relative; height: 78px; flex-direction: column; justify-content: center; gap: 2px; padding: 6px; border-radius: 18px;
  font-size: 16px; font-weight: 800; background: var(--c-btn); border: 1px solid var(--c-btn-border); border-bottom: 6px solid var(--sec); color: #fff; }
.cashier .c-sec .e { font-size: 25px; line-height: 1; }
.cashier .c-sec .count { position: absolute; top: 7px; inset-inline-end: 9px; font-size: 12px; background: #41495d; color: #fff; opacity: 1; }
.cashier .c-sec.active { background: var(--c-teal-soft); border-color: var(--c-teal); border-bottom-color: var(--sec); box-shadow: 0 0 0 2px var(--c-teal); }
.cashier .c-cats { gap: 8px; }
.cashier .c-cat { height: 44px; padding: 0 18px; border-radius: 22px; font-weight: 800; background: var(--c-btn); border-color: var(--c-btn-border); color: #c0c8da; }
.cashier .c-cat.active { background: #328a86; border-color: #27c8be; color: #fff; }
.cashier .c-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cashier .c-tile { min-height: 118px; padding: 12px 14px; border-radius: 18px; background: var(--c-card); border: 1px solid #42495d; border-top: none; border-bottom: 6px solid var(--sec); }
.cashier .c-tile.sel { border-color: var(--primary); border-bottom-color: var(--sec); box-shadow: 0 0 0 2px #7653ff; }
.cashier .c-tile .top { display: flex; align-items: center; gap: 8px; }
.cashier .c-tile .em { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(255, 255, 255, .07); }
.cashier .c-tile .n { font-size: 16px; font-weight: 800; }
.cashier .c-tile .p { font-size: 21px; font-weight: 900; }
.cashier .c-tile .in-cart { min-width: 34px; height: 34px; top: -10px; inset-inline-start: -10px; font-size: 16px; background: #7653ff; border-color: var(--panel); }

/* السلة */
.cashier .c-cart { min-width: 0; border-radius: 22px; border: 1px solid var(--border); overflow-x: hidden; overflow-y: auto; }
.cashier .c-cart > * { flex-shrink: 0; }
.cashier .c-cart .c-lines { flex: 1 0 auto; min-height: 120px; overflow: visible; }
.cashier .c-cart .c-empty { flex: 1 0 auto; min-height: 120px; }
.cashier .c-cust { padding: 10px 12px; }
.c-cust-label { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.cashier .c-avatar { width: 42px; height: 42px; border-radius: 15px; background: linear-gradient(135deg, #7653ff, var(--c-teal)); }
.cashier .c-cust-row .who b { font-size: 18px; font-weight: 900; }
.c-kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.c-kid { flex: 1 1 120px; min-height: 46px; justify-content: flex-start; gap: 8px; padding: 6px 10px; border-radius: 14px; background: #182741 !important; border: 2px solid #3b4863 !important; text-align: start; }
.c-kid .ck { width: 26px; height: 26px; flex: none; border-radius: 8px; border: 2px solid #536078; display: grid; place-items: center; font-weight: 900; color: #fff; }
.c-kid.on { background: #1d2b4f !important; border-color: #7653ff !important; }
.c-kid.on .ck { background: #7653ff; border-color: #7653ff; }
.c-kid .nm { display: flex; flex-direction: column; font-weight: 800; line-height: 1.2; }
.c-kid small { font-size: 11px; font-weight: 700; color: var(--muted); }
.c-kid small.sub { color: #42e2c4; }
.c-kid small.in { color: #8fb6ff; }
.c-kid.inside { opacity: .75; }
.c-pgopen { width: 100%; justify-content: center; margin-top: 6px; height: 42px; border-radius: 14px; font-weight: 800; background: #123a33 !important; border-color: var(--success) !important; }
.c-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.cashier .c-dues { margin: 0; height: 42px; padding: 0 4px 0 8px; font-size: 13px; white-space: nowrap; border-radius: 14px; background: #3a2a2e; border: 1px solid #80536f; color: #ffb3bb; font-weight: 800; }
.cashier .c-dues b { color: #fff; font-size: 15px; }
.cashier .c-dues.over { border-color: var(--danger); }
.c-credit { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 4px 0 8px; font-size: 13px; white-space: nowrap; border-radius: 14px; background: #123a36; border: 1px solid #1f8f84; color: #8ff0de; font-weight: 800; }
.c-credit b { color: #fff; }
.c-credit button { margin-inline-start: auto; }
.cashier .c-cart-head { padding: 8px 14px; }
.cashier .c-cart-head button { height: 38px; border-radius: 12px; font-weight: 800; }
.cashier .c-cart-head button.on { background: var(--c-teal-soft); border-color: var(--c-teal); }
.cashier .c-cart-head button.del { color: #ff8f9a; }
.cashier .c-line { padding: 6px 0; }
.cashier .c-line .n { font-size: 15px; font-weight: 800; }
.cashier .c-step { border: none; border-radius: 14px; background: var(--c-btn); }
.cashier .c-step button { width: 46px; height: 46px; font-size: 24px; font-weight: 900; background: transparent; }
.cashier .c-step span { min-width: 30px; font-size: 18px; }
.cashier .c-line .t { font-size: 17px; font-weight: 900; }
.cashier .c-sum { position: sticky; bottom: 0; z-index: 2; padding: 10px 14px 12px; background: #191d28; border-top: 1px solid var(--border); box-shadow: 0 -10px 24px rgba(0, 0, 0, .35); }
.cashier .c-grand { align-items: center; margin: 0 0 6px; }
.cashier .c-grand .lbl { color: var(--muted); font-weight: 800; }
.cashier .c-grand .disc { color: #42e2c4; font-size: 13px; font-weight: 800; }
.cashier .c-grand .v { font-size: 30px; }
.cashier .c-grand .v small { font-size: 14px; font-weight: 600; }
.cashier .c-pay { height: 58px; margin-top: 8px; border-radius: 18px; font-size: 22px; font-weight: 900; background: var(--c-violet); box-shadow: 0 5px 0 #4a2cb0; }
.cashier .c-pay:disabled { opacity: .5; box-shadow: none; }

/* لوحة الدفع (بالسلة والنوافذ) */
.c-paypanel { display: grid; gap: 8px; }
.c-paytoggles { display: flex; gap: 6px; }
.c-paytoggles button { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.c-paytoggles button { height: 40px; padding: 0 12px; border-radius: 12px; font-weight: 800; font-size: 13px; }
.c-paytoggles button.on { background: #123a33; border-color: var(--success); color: #8ff0de; }
.c-paytoggles button.warn { color: #ffc53d; }
.c-paytoggles button.on.warn { background: #3d3520; border-color: #ffc53d; }
.c-paytoggles button.on.danger { background: #3e232a; border-color: var(--danger); color: #ffb3bb; }
.c-methods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.c-methods.two { grid-template-columns: 1fr 1fr; }
.c-methods button { height: 50px; flex-direction: column; gap: 0; padding: 2px; border-radius: 14px; font-weight: 800; font-size: 13px; line-height: 1.15; justify-content: center; }
.c-methods button .e { font-size: 18px; }
.c-methods button.active { background: var(--c-teal-soft); border-color: var(--c-teal); color: #fff; }
.c-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-split .c-box { position: relative; }
.c-split .fillrest { position: absolute; inset-inline-end: 6px; top: 6px; width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 9px; font-size: 15px; }
.c-box { min-height: 50px; min-width: 0; border-radius: 14px; background: var(--c-btn); border-color: var(--c-btn-border); }
.c-box input { font-size: 20px; }
.c-box.change { background: #123a36; border-color: #1f8f84; }
.c-box.change span, .c-box.change b { color: #42e2c4; }
.c-box.change.short { background: #3e232a; border-color: #80536f; }
.c-box.change.short span, .c-box.change.short b { color: #ff8f9a; }
.c-quick button { height: 40px; border-radius: 12px; font-weight: 800; }
.c-payextra { display: grid; gap: 4px; }
.c-payextra:empty { display: none; }
.c-payextra .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.c-payextra .r.good { color: #42e2c4; }
.c-payextra .r.warn { color: #ffc53d; }
.c-payextra .r.bad { color: #ff8f9a; }
.c-payextra .r.chk { justify-content: flex-start; color: var(--text); cursor: pointer; }
.c-paymodal .c-paylines { display: grid; gap: 4px; }
.c-paymodal .c-paylines .r { display: flex; justify-content: space-between; gap: 8px; }

/* الطلبات الحالية */
.c-legend { display: flex; gap: 6px; }
.c-legend span { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; font-weight: 800; }
.c-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.c-legend i.ok { background: var(--success); } .c-legend i.warn { background: var(--warning); } .c-legend i.over { background: var(--danger); }
.cashier .pg-cards { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); grid-auto-rows: max-content; gap: 14px; }
.cashier .pg-card { border-radius: 22px; border: 1px solid var(--border); border-top: 8px solid var(--success); overflow: hidden; }
.cashier .pg-card.warn { border-top-color: var(--warning); }
.cashier .pg-card.over { border-top-color: var(--danger); }
.cashier .pg-card.held { border-style: solid; border-top-color: var(--sec-restaurant); }
.cashier .pg-card > header { gap: 10px; padding: 12px 14px; }
.cashier .pg-card > header .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cashier .pg-card > header .who b { font-size: 17px; font-weight: 900; }
.cashier .pg-kid { grid-template-columns: 38px 1fr auto auto; margin: 8px 12px 0; padding: 10px; border: none; border-radius: 16px; background: #203a33; }
.cashier .pg-kid.warn { background: #3d3520; }
.cashier .pg-kid.over { background: #3e232a; }
.cashier .pg-kid.done { background: var(--bg); }
.cashier .pg-kid .av { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; }
.cashier .pg-timer { display: flex; flex-direction: column; align-items: center; font-size: 26px; color: #42e2c4; }
.cashier .pg-kid.warn .pg-timer { color: var(--warning); }
.cashier .pg-kid.over .pg-timer { color: var(--danger); }
.cashier .pg-timer .lbl { font-size: 11px; }
.pg-kid-acts { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pg-kid-acts button { height: 42px; border-radius: 12px; font-weight: 800; }
.pg-kid-acts button.danger { min-width: 110px; justify-content: center; background: #653ee1; border-color: #653ee1; }
.cashier .pg-kid.over .pg-kid-acts button.danger { background: #d74655; border-color: #d74655; }
.cashier .pg-item { margin: 6px 12px 0; border: none; border-radius: 12px; background: var(--bg); }
.cashier .pg-card > footer { margin-top: 10px; padding: 12px 14px; background: #191d28; border-radius: 0; }
.cashier .pg-card > footer button { height: 52px; padding: 0 16px; border-radius: 14px; font-weight: 800; font-size: 15px; }
.cashier .pg-card > footer button.success { background: var(--c-violet); border-color: var(--c-violet); }
.cashier .pg-start { height: 54px; border-radius: 16px; }

/* الصفحات والجداول */
.cashier .c-kpi, .cashier .c-table { background: var(--panel); border-color: var(--border); border-radius: 16px; }
.cashier .c-kpi b { font-size: 24px; }
.cashier .att-row.head { background: var(--bg); }
.cashier .att-in { height: 48px; background: var(--c-teal-soft); border-color: var(--c-teal); }

/* التنبيهات (خلص الوقت) */
.c-alerts { position: fixed; bottom: 16px; left: 480px; z-index: 70; display: grid; gap: 8px; max-width: 420px; }
.c-alert { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 8px; padding: 10px 12px; border-radius: 16px; background: #3e232a; border: 2px solid var(--danger); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: c-pulse 1.4s infinite; }
.c-alert b { grid-column: 1; }
.c-alert span { grid-column: 1; grid-row: 2; font-size: 13px; color: #ffb3bb; }
.c-alert button { grid-row: 1 / span 2; }

/* رمز المدير */
.pin-box { display: grid; justify-items: center; gap: 12px; }
.pin-why { margin: 0; text-align: center; font-weight: 700; color: var(--warning); }
.pin-dots { display: flex; gap: 10px; min-height: 22px; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); }
.pin-dots span.on { background: var(--primary); border-color: var(--primary); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.pin-pad button { height: 64px; justify-content: center; font-size: 26px; font-weight: 900; border-radius: 16px; }
.pin-pad button.ok { background: var(--c-violet, #653ee1); border-color: var(--c-violet, #653ee1); color: #fff; }

/* تعديل الطلب، النسخ، ملخص اليوم */
.c-edit-lines .sm-in { width: 110px; padding: 2px 8px; }
.c-refund { display: grid; gap: 6px; margin-top: 8px; }
.c-versions { display: grid; gap: 10px; }
.c-ver { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); }
.c-ver header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.c-ver p { margin: 4px 0; }
.c-sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.c-srow { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.c-srow.bad b { color: var(--danger); }
.c-kid-check.on { border-color: var(--primary); background: var(--primary-soft); }

@media (max-width: 1440px) {
  .c-brand div { display: none; }
  .cashier .c-tab { padding: 0 12px; font-size: 15px; }
}
@media (max-width: 1200px) {
  .cashier .c-body { grid-template-columns: minmax(0, 1fr) 400px; }
  .cashier .c-tab .ico { display: none; }
  .c-alerts { left: 420px; }
}

/* ===== بند #36: أطفال الملعب بالسلة ===== */
.cashier .c-pglines { flex: 0 0 auto !important; min-height: 0 !important; padding-top: 6px; }
.cashier .c-line.pg { grid-template-columns: 1fr auto auto; padding: 8px 10px; margin-bottom: 6px; border: none; border-radius: 14px; background: #1d2b4f; }
.cashier .c-line.pg.sub { background: #123a33; }
.cashier .c-line.pg .u { color: #8fb6ff; font-size: 12px; }
.cashier .c-line.pg.sub .u { color: #42e2c4; }
.cashier .c-line.pg .t { color: var(--muted); font-size: 13px; font-weight: 700; }
.c-mode { display: flex; gap: 4px; }
.c-mode button { height: 40px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.c-mode button.on { background: var(--c-teal-soft, #124d50); border-color: var(--c-teal, #16b8ad); color: #fff; }
.c-mode button.on.sub { background: #123a33; border-color: var(--success); }
.c-hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.cashier .c-pay.register { background: var(--c-teal-soft, #124d50); border: 2px solid var(--c-teal, #16b8ad); box-shadow: 0 5px 0 #0c3436; }

/* ===================== بند #35: البرنامج كله داكن ===================== */
:root[data-theme="dark"] button { background: #262b3b; border-color: #3b4256; }
:root[data-theme="dark"] button.primary { background: #653ee1; border-color: #653ee1; }
:root[data-theme="dark"] button.success { background: #124d50; border-color: #16b8ad; }
:root[data-theme="dark"] button.danger { background: #3e232a; border-color: #80536f; color: #ff8f9a; }
:root[data-theme="dark"] button.ghost { background: transparent; border-color: transparent; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #262b3b; border-color: #3b4256; }
:root[data-theme="dark"] .card { border-radius: 18px; }
:root[data-theme="dark"] .brand { border-bottom-color: #23283a; }
:root[data-theme="dark"] .nav a { border-radius: 12px; margin: 2px 8px; }
:root[data-theme="dark"] .nav a:hover { background: #1f2331; }
:root[data-theme="dark"] .nav a.active { background: #124d50; color: #fff; border-inline-start-color: #16b8ad; }
:root[data-theme="dark"] .tabs button.active { color: #42e2c4; border-bottom-color: #16b8ad; }
:root[data-theme="dark"] .toast { background: #303647; }
:root[data-theme="dark"] .modal-bg { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] tr.click:hover td { background: #262b3b; }
.theme-switch { display: flex; gap: 6px; margin-top: 8px; }
.theme-switch button { flex: 1; justify-content: center; padding: 6px; font-size: 12px; }
.theme-switch button.on { background: #124d50; border-color: #16b8ad; color: #fff; }

/* ===================== بند #35: Family Hub ===================== */
.grid.k.hub-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hub-kpis .kpi.good .value { color: var(--success); }
.hub-kpis .kpi.bad .value { color: var(--danger); }
.hub-kpis .kpi.warn .value { color: var(--warning); }
.hub-kpis .kpi .row button { padding: 3px 10px; font-size: 12px; }
.bday-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 16px; background: linear-gradient(90deg, var(--warning-soft), var(--primary-soft)); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); }
.bday-strip b { color: var(--warning); }
.bday-chip { padding: 4px 10px; border-radius: 12px; background: rgba(0, 0, 0, .18); color: var(--text); font-weight: 700; font-size: 13px; }
.bday-strip button { margin-inline-start: auto; }
.hub-bar { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.hub-bar .search { flex: 1; margin: 0; height: 44px; }
.hub-mode { display: flex; gap: 4px; }
.hub-mode button.on, .hub-tabs button.on { background: var(--c-teal-soft, #124d50); border-color: var(--c-teal, #16b8ad); color: #fff; }
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.hub-tabs button { border-radius: 20px; padding: 7px 14px; font-weight: 700; font-size: 13px; }
:root[data-theme="light"] .hub-mode button.on, :root[data-theme="light"] .hub-tabs button.on { background: var(--primary); border-color: var(--primary); }
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.fam-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 20px; background: var(--panel); border: 1px solid var(--border); border-top: 5px solid var(--success); cursor: pointer; }
.fam-card.due { border-top-color: var(--danger); }
.fam-card.exp { border-top-color: var(--warning); }
.fam-card:hover { border-color: var(--primary); }
.fam-card .fh { display: flex; align-items: center; gap: 10px; }
.fam-card .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fam-card .who b { font-size: 16px; }
.fam-avs { display: flex; }
.fam-avs .kid-av { margin-inline-start: -8px; border: 2px solid var(--panel); }
.fam-avs .kid-av:first-child { margin-inline-start: 0; }
.kid-av { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 900; object-fit: cover; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; font-weight: 800; border-radius: 10px; padding: 3px 8px; background: var(--bg); border: 1px solid var(--border); }
.tag.green { background: var(--success-soft); color: var(--success); border-color: transparent; }
.tag.red { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag.blue { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.tag.amber, .tag.near { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.tag.vip, .tag.regular { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
.fam-money { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.fam-money > div { padding: 6px 8px; border-radius: 12px; background: var(--bg); }
.fam-money span { display: block; font-size: 11px; color: var(--muted); }
.fam-money b { font-size: 15px; }
.fam-money .bad b { color: var(--danger); }
.fam-money .good b { color: var(--success); }
.fam-foot { display: flex; align-items: center; gap: 6px; }
.fam-foot button { padding: 4px 10px; font-size: 12px; }
.fam-head { display: flex; align-items: center; gap: 14px; }
.fam-head .who { flex: 1; min-width: 0; }
.fam-head h1 { margin: 2px 0; }
.fam-avs.big .kid-av { border-width: 3px; }
.health-banner { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 10px 14px; border-radius: 14px; background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); font-weight: 800; }
.fam-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
.kid-card { display: flex; gap: 10px; padding: 10px; margin-top: 8px; border-radius: 16px; background: var(--bg); }
.kid-photo { position: relative; }
.kid-photo .kid-av { border-radius: 16px; }
.photo-btn { position: absolute; bottom: -4px; inset-inline-start: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; cursor: pointer; background: var(--panel); border: 1px solid var(--border); }
.kid-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kid-info button.on { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.note { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin-top: 6px; border-radius: 10px; background: var(--bg); }
.note .ghost { margin-inline-start: auto; }
.timeline .tl { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.timeline .ico { font-size: 16px; text-align: center; }
@media (max-width: 1000px) { .fam-cols { grid-template-columns: 1fr; } .fam-head { flex-wrap: wrap; } }
/* الكاشير: التنبيه الصحي على الطفل */
.c-kid .health { color: #ff8f9a; font-size: 11px; font-weight: 800; }

/* ===== بند #37: التلفون (الشريط اللي تحت، القائمة الجانبية، الجداول كروت، الكاشير، التطبيق) ===== */
.bnav, .drawer-bg { display: none; }
.tb-logo { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #16b8ad, #7653ff); }
.nav-badge, .bn-badge, .ch-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; font-style: normal; }
.nav-badge[hidden], .bn-badge[hidden] { display: none; }
.nav a .nav-badge { margin-inline-start: auto; }
.chat-title { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; }
.chat-back { display: none; }
.install-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(22, 184, 173, .16), rgba(118, 83, 255, .16)); border: 1px solid var(--primary); }
.install-banner .ib-logo { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, #16b8ad, #7653ff); }
.c-sheetbar { display: none; }
/* الكروت داخل شبكة ما تاخذ مسافة فوك (كانت تنزّل كل كارت بعد الأول) */
.grid > .card + .card { margin-top: 0; }

@media (max-width: 860px) {
  body { --bnav-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* الشريط اللي تحت */
  .bnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; height: var(--bnav-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0, 0, 0, .25); }
  .bnav a, .bnav button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 0;
    color: var(--muted); font-size: 11px; font-weight: 700; background: none; border: none; border-radius: 0; }
  .bnav .e { position: relative; font-size: 20px; line-height: 1; padding: 5px 16px; border-radius: 14px; }
  .bnav a.active { color: var(--text); font-weight: 900; }
  .bnav a.active .e { background: var(--c-teal-soft, #124d50); box-shadow: inset 0 0 0 1px var(--c-teal, #16b8ad); }
  .bn-badge { position: absolute; top: -6px; inset-inline-end: 0; }
  .main { padding-bottom: calc(var(--bnav-h) + 18px); }
  /* القائمة الجانبية (☰ المزيد) فوك كلشي */
  .sidebar { z-index: 95; height: 100%; width: min(290px, 84vw); top: 0; bottom: 0; }
  body.drawer-on .drawer-bg { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .55); }
  body.drawer-on { overflow: hidden; }
  .nav a { padding: 12px 18px; font-size: 15px; }
  .topbar { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--border); background: var(--panel); color: var(--text); }
  .topbar > button { width: 40px; height: 40px; justify-content: center; font-size: 18px; border-radius: 12px; }
  .cashier-fab { display: none; } /* الكاشير موجود بالشريط اللي تحت */
  .bnav button.bn-more, body.cashier-on .bnav button.bn-more { background: none; border: none; color: var(--muted); }
  #toasts { bottom: calc(var(--bnav-h) + 12px); inset-inline: 12px; }
  .toast { max-width: none; }
  /* لمس أسهل */
  button, .btn { min-height: 38px; }
  input, select, textarea { font-size: 16px; min-height: 42px; }
  .page-head h1 { font-size: 19px; }
  .grid.k { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid.two { grid-template-columns: minmax(0, 1fr); }
  .kpi .value { font-size: 18px; }
  .search { max-width: none; }
  /* المحادثة: القائمة أول، والمحادثة تنفتح بمكانها */
  .chat { display: block; height: calc(100dvh - var(--bnav-h) - 110px); min-height: 380px; }
  .chat .chat-side { height: 100%; border: none; }
  .chat .chat-main { display: none; height: 100%; min-height: 0; }
  .chat.chat-open .chat-side { display: none; }
  .chat.chat-open .chat-main { display: flex; }
  .chat-back { display: inline-flex; font-size: 20px; }
  .chat-side .ch { padding: 12px; font-size: 15px; align-items: center; gap: 8px; }
  .msg { max-width: 86%; }
  /* Family Hub */
  .fam-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-bar { flex-wrap: wrap; }
  .hub-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .hub-tabs button { flex: none; }

  /* الكاشير بالتلفون: المنتجات عمودين، والسلة تنزل جوّه */
  .cashier { display: flex; flex-direction: column; bottom: var(--bnav-h); overflow: hidden; }
  .cashier .c-top { min-height: 0; padding: 6px 8px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); gap: 6px; }
  .cashier .c-brand > div, .cashier .desk-only { display: none; }
  .cashier .c-logo { width: 38px; height: 38px; }
  .cashier .c-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .cashier .c-tab { height: 42px; padding: 0 10px; border-radius: 12px; font-size: 13px; flex: none; }
  .cashier .c-ibtn { width: 40px; height: 40px; font-size: 17px; border-radius: 12px; }
  .cashier .c-back { height: 40px; padding: 0 10px; font-size: 13px; border-radius: 12px; }
  .cashier .c-main { flex: 1; min-height: 0; overflow-y: auto; }
  .cashier .c-body { display: block; padding: 8px; }
  .cashier .c-products { padding: 10px; border-radius: 18px; padding-bottom: 150px; }
  .cashier .c-search input { height: 48px; }
  .cashier .c-search .ico { top: 12px; }
  .cashier .c-search .kbd, .cashier .kbd { display: none; }
  .cashier .c-sections { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .cashier .c-sec { height: 62px; border-radius: 14px; font-size: 12px; }
  .cashier .c-sec .e { font-size: 20px; }
  .cashier .c-cats { flex-wrap: nowrap; overflow-x: auto; }
  .cashier .c-cat { flex: none; height: 38px; }
  .cashier .c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; gap: 10px; }
  .cashier .c-tile { min-height: 100px; padding: 10px; }
  .cashier .c-tile .em { width: 32px; height: 32px; font-size: 18px; }
  .cashier .c-tile .n { font-size: 14px; }
  .cashier .c-tile .p { font-size: 18px; }
  /* السلة = ورقة من جوّه */
  .cashier .c-cart { position: fixed; left: 0; right: 0; bottom: var(--bnav-h); z-index: 75; max-height: calc(100dvh - var(--bnav-h) - 40px);
    border-radius: 24px 24px 0 0; border: 1px solid var(--border); border-bottom: none; box-shadow: 0 -12px 30px rgba(0, 0, 0, .45); overflow-y: auto; }
  .cashier .c-cart:not(.open) > :not(.c-sheetbar):not(.c-sum) { display: none; }
  .cashier .c-cart:not(.open) .c-sum > :not(.c-pay) { display: none; }
  .cashier .c-cart:not(.open) .c-sum { position: static; box-shadow: none; border-top: none; padding-top: 0; background: transparent; }
  .cashier .c-cart.open { top: 40px; }
  .c-sheetbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; width: 100%; padding: 6px 16px 8px; border: none !important;
    background: transparent !important; border-radius: 0; text-align: start; position: sticky; top: 0; z-index: 3; }
  .cashier .c-cart.open .c-sheetbar { background: var(--panel) !important; border-bottom: 1px solid var(--border) !important; }
  .c-sheetbar .grip { grid-column: 1 / -1; justify-self: center; width: 44px; height: 5px; border-radius: 9px; background: #4a5268; margin-bottom: 4px; }
  .c-sheetbar .sb-t { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-sheetbar .sb-v { grid-row: 2 / 4; grid-column: 2; font-size: 24px; font-weight: 900; }
  .c-sheetbar .sb-hint { color: var(--c-teal, #16b8ad); font-size: 12px; font-weight: 700; }
  .cashier .c-pay { height: 54px; font-size: 19px; }
  .cashier .c-alerts { left: 12px; right: 12px; bottom: calc(var(--bnav-h) + 150px); max-width: none; }
  .cashier .pg-cards { grid-template-columns: minmax(0, 1fr); }
  .cashier .c-page { padding: 8px; }
}

/* الجداول بالتلفون تصير كروت: اسم العمود جنب القيمة */
@media (max-width: 600px) {
  .table-wrap.rt table, .table-wrap.rt tbody, .table-wrap.rt tfoot, .table-wrap.rt tr, .table-wrap.rt td { display: block; width: 100%; }
  .table-wrap.rt thead { display: none; }
  .table-wrap.rt tbody tr { margin-bottom: 10px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
  .table-wrap.rt td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: none; text-align: end; direction: rtl; white-space: normal; }
  .table-wrap.rt td + td { border-top: 1px dashed var(--border); }
  .table-wrap.rt td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--muted); font-size: 12px; text-align: start; }
  .table-wrap.rt td[data-label=""]::before { content: none; }
  .table-wrap.rt td[data-label=""] { justify-content: flex-end; }
  .table-wrap.rt tfoot tr { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-radius: 14px; background: var(--bg); }
  .table-wrap.rt tfoot td, .table-wrap.rt tfoot th { width: auto; border: none; padding: 2px 0; }
  /* النوافذ تملي الشاشة */
  .modal-bg { padding: 0; align-items: stretch; }
  .modal, .modal.wide { max-width: none; min-height: 100%; border-radius: 0; }
  .modal footer { position: sticky; bottom: 0; background: var(--panel); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .modal footer button { flex: 1; justify-content: center; min-height: 46px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .type-pick { grid-template-columns: minmax(0, 1fr); }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
}

/* ===== بند #41: استيراد استبيان Odoo + فلاتر الاستبيان ===== */
.hub-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.hub-filters select { width: auto; max-width: 230px; min-height: 36px; padding: 5px 10px; border-radius: 18px; font-size: 13px; }
.hub-filters select.on { border-color: var(--c-teal, #16b8ad); background: var(--c-teal-soft, #124d50); color: #fff; }
.fam-survey { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px dashed var(--border); }
.survey-list { display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; padding-inline-end: 4px; }
.survey-row { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.survey-row.need { border-color: var(--warning); }
.survey-row input.need { border-color: var(--warning); }
.survey-acts { justify-content: flex-start; }
@media (max-width: 860px) {
  .hub-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .hub-filters select { flex: none; }
  .survey-list { max-height: none; }
}
/* بند #42: فلاتر المعاينة، والاستبعاد، وتعديل الأطفال */
.survey-filters button.tag { cursor: pointer; font-size: 12px; padding: 5px 10px; min-height: 0; }
.survey-filters button.tag.on { outline: 2px solid var(--primary); outline-offset: 1px; }
.survey-row.off { opacity: .5; }
.survey-check input { width: 20px; height: 20px; }
.survey-kid { padding: 10px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
/* بند #44: العوائل المرتبطة */
.link-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px; background: var(--primary-soft); font-size: 13px; }
.link-results { display: grid; gap: 4px; margin: 6px 0; }
.link-pick { justify-content: flex-start; text-align: start; }
.link-pick.on { border-color: var(--primary); background: var(--primary-soft); }
.c-linked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.c-linked button.on { background: var(--c-teal-soft, #124d50); border-color: var(--c-teal, #16b8ad); color: #fff; }
.c-kid small.guest { display: block; color: #8fb6ff; }
.pg-owner { width: auto; min-height: 0; padding: 2px 6px; margin-inline-start: 8px; font-size: 12px; border-radius: 8px; }
.pg-fampay { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.cashier .pg-fampay button { height: 46px; border-radius: 14px; font-weight: 800; background: var(--c-violet); border-color: var(--c-violet); }
/* بند #43: ملف الطفل والأب والأم */
.click { cursor: pointer; }
.kid-chip.click:hover, b.click:hover { text-decoration: underline; }
button.kid-chip { border: none; color: inherit; font: inherit; font-size: 12px; min-height: 0; }
.person .p-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.person .p-head h2 { margin: 0 0 2px; }
.person .p-head .kid-av { flex: none; display: grid; place-items: center; border-radius: 20px; color: #fff; font-weight: 900; }
.person .chips { margin: 8px 0; }
.p-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.p-kpi { padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.p-kpi span { font-size: 12px; color: var(--muted); }
.p-kpi b { font-size: 18px; }
.p-sec { margin-top: 14px; }
.p-sec h3 { margin: 0 0 6px; }
.p-phones { display: grid; gap: 6px; margin: 8px 0; }
.p-phones .row { gap: 8px; }
a.button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); }
.p-parents { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
/* ملف العائلة بالتلفون: العمود ما يتعرّض أكثر من الشاشة (كان يدفع الصفحة لبرا ويطلّع القائمة الجانبية فوك الأزرار) */
.fam-cols > * { min-width: 0; }
@media (max-width: 1000px) { .fam-cols { grid-template-columns: minmax(0, 1fr); } }
.note { flex-wrap: wrap; overflow-wrap: anywhere; }

/* بند #47: منو استلم الطفل */
.pk .c-kid-check { margin: 5px 0; padding: 8px 12px; }
.pk .c-kid-check input { accent-color: var(--primary); width: 18px; height: 18px; }
.pk-other input[type=text], .pk-other input:not([type]) { margin-bottom: 8px; }

/* بند #49: شريط الفترة بالتقارير — سنة / شهر / يوم / من–إلى */
.period-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.period-bar .seg { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.period-bar .seg button { border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 6px 14px; }
.period-bar .seg button.on { background: var(--primary); color: #fff; font-weight: 700; }
.period-bar .pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.period-bar .pick input { width: auto; min-height: 0; padding: 5px 8px; }
.period-bar .pick input[type=number] { width: 90px; }
.period-bar .push { margin-inline-start: auto; }
@media (max-width: 860px) { .period-bar .seg button { padding: 6px 10px; } .period-bar .push { margin-inline-start: 0; } }

/* بند #50: نافذة القيد (مثل Odoo) */
.entry-bar { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.entry-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.entry-head h1 { margin: 0 0 6px; font-size: 26px; }
.entry-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; min-width: 260px; }
.entry-meta > div { display: contents; }
.entry-meta span { color: var(--muted); }
table.entry-lines { width: 100%; }
table.entry-lines td, table.entry-lines th { padding: 8px; border-bottom: 1px solid var(--border); text-align: right; }
table.entry-lines tfoot td { border-top: 2px solid var(--border); border-bottom: 0; }
.entry-log > div { padding: 4px 0; border-bottom: 1px dashed var(--border); }

/* بند #54: صف نسخ القيد */
.ver-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ver-strip .ver { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-weight: 700; }
.ver-strip .ver.ok { border-color: var(--success); color: var(--success); }
.ver-strip .ver.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ver-note { background: var(--warning-soft); border: 1px dashed var(--warning); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; }
table.entry-lines.preview { outline: 2px dashed var(--warning); outline-offset: 4px; border-radius: 6px; }

/* بند #53: المصروف السريع */
.exp-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.exp-cat { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font-weight: 700; }
.exp-cat.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.exp-docs { margin-top: 8px; border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; }
.exp-docs summary { cursor: pointer; font-weight: 700; }
.exp-sums { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.exp-sum { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; min-width: 120px; }
.exp-sum span { color: var(--muted); font-size: 12px; }
.exp-sum.total { border-color: var(--primary); }

/* بند #58: لوحة المحاسبة */
.fd-money { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.fd-total { flex: 0 0 auto; min-width: 220px; padding: 14px 18px; border-radius: 14px; background: var(--primary-soft); border: 1px solid var(--primary); display: flex; flex-direction: column; justify-content: center; }
.fd-total span { color: var(--muted); font-weight: 700; }
.fd-total b { font-size: 32px; line-height: 1.2; }
.fd-accs { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.fd-acc { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.fd-acc span { color: var(--muted); font-size: 12px; }
.fd-acc b { font-size: 18px; }
.fd-acc.zero { opacity: .55; }
.fd-enough { padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; font-weight: 700; }
.fd-enough.ok { background: var(--success-soft); color: var(--success); }
.fd-enough.bad { background: var(--danger-soft); color: var(--danger); }
.fd-bar { width: 90px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.fd-bar i { display: block; height: 100%; background: var(--success); border-radius: 4px; }
.fd-flow { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 6px 0; border-bottom: 1px solid var(--border); margin-top: 8px; }
.fd-day { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 1px; cursor: default; }
.fd-day:hover { background: var(--primary-soft); }
.fd-day i { flex: 1; border-radius: 3px 3px 0 0; display: block; }
.fd-day i.in, .fd-legend i.in { background: var(--success); }
.fd-day i.out, .fd-legend i.out { background: var(--danger); }
.fd-legend { display: flex; gap: 12px; }
.fd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 4px; }
.fd-alert { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border); }
.fd-alert.warn { background: var(--warning-soft); }
.fd-alert.bad { background: var(--danger-soft); }

/* بند #60: شاشة الدوام */
.kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.kiosk-emp { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 18px; border-radius: 14px; border: 2px solid var(--border); background: var(--panel); text-align: right; min-height: 96px; }
.kiosk-emp b { font-size: 18px; }
.kiosk-emp.in { border-color: var(--success); }
.kiosk-emp.done { opacity: .6; }
.kiosk-clock { font-size: 28px; font-weight: 800; }
.kiosk-pad { text-align: center; }
.kiosk-pin { font-size: 30px; letter-spacing: 14px; text-align: center; width: 200px; margin: 0 auto 12px; display: block; }
.kiosk-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; justify-content: center; direction: ltr; }
.kiosk-keys button { height: 60px; font-size: 22px; font-weight: 700; border-radius: 12px; }

/* بند #61: جدول المصاريف التشغيلية يتلم بنص الشاشة — بدون شريط تمرير */
.fd-optable { width: 100%; border-collapse: collapse; table-layout: auto; }
.fd-optable th, .fd-optable td { padding: 6px 6px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: start; white-space: normal; overflow-wrap: anywhere; }
.fd-optable th { font-size: 12px; color: var(--muted); font-weight: 700; }
.fd-optable td.num { white-space: nowrap; }
.fd-optable .fd-bar { width: 100%; max-width: 140px; margin-top: 4px; }
.fd-optable .fd-act { width: 1%; white-space: nowrap; }
.fd-op { min-width: 0; }

/* بند #62: محرر الجدول (يوم بيوم) وتقويم الأوف */
.plan-grid { display: flex; flex-direction: column; gap: 6px; }
.plan-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(90px, 1fr) auto minmax(90px, 1fr); gap: 8px; align-items: center; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; }
.plan-row.off { opacity: .5; }
.plan-row input[type=checkbox] { width: auto; }
.oc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 10px 0; }
.oc-head { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; }
.oc-cell { min-height: 58px; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.oc-cell.empty { border: 0; }
.oc-day { flex: 1; width: 100%; border: 0; background: transparent; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: inherit; }
.oc-day small { font-size: 10px; color: var(--muted); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.oc-cell.off { background: var(--primary-soft); border-color: var(--primary); }
.oc-cell.off small { color: var(--primary); font-weight: 700; }
.oc-cell.pending { background: var(--warning-soft); }
.oc-cell.holiday { background: var(--success-soft); }
.oc-cell.rest { opacity: .55; }
.oc-cell.att small { color: var(--success); }
.oc-cell .row .sm { padding: 0 6px; min-height: 0; }

/* بند #63: الاختيار بالبحث (ولي الأمر، الطفل، الزبون، المورد، الفاتورة...) */
.ss { position: relative; min-width: 0; }
.ss-row { display: flex; gap: 6px; align-items: stretch; }
.ss-row .ss-input { flex: 1; min-width: 0; }
.ss-add { white-space: nowrap; }
.ss-list { margin-top: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ss-list[hidden] { display: none; }
.ss-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: start; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; color: inherit; padding: 7px 10px; cursor: pointer; font-weight: 400; }
.ss-item:last-child { border-bottom: 0; }
.ss-item small { color: var(--muted); font-size: 12px; }
.ss-item.on, .ss-item:hover { background: var(--primary-soft); }
.ss-item.sel span::before { content: '✓ '; color: var(--success); font-weight: 700; }
.ss-empty { padding: 8px 10px; color: var(--muted); font-size: 13px; }

/* بند #65: نافذة تملي الشاشة + تقويم الدوام */
.modal-bg.full { padding: 8px; }
.modal.full { max-width: none; min-height: calc(100vh - 16px); display: flex; flex-direction: column; }
.modal.full .body { flex: 1; }
.ac-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ac-head { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; }
.ac-cell { min-height: 96px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; position: relative; background: var(--panel); text-align: start; color: inherit; font: inherit; }
.ac-cell.empty { border: 0; background: none; cursor: default; }
.ac-cell .ac-top { display: flex; justify-content: space-between; align-items: center; }
.ac-cell .ac-top b { font-size: 16px; }
.ac-cell .ac-st { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.ac-cell .ac-t { font-size: 13px; direction: ltr; text-align: right; }
.ac-cell .ac-x { font-size: 11px; color: var(--muted); }
.ac-cell.present { border-color: var(--success); } .ac-cell.present .ac-st { background: var(--success-soft); color: var(--success); }
.ac-cell.absent { border-color: var(--danger); background: var(--danger-soft); } .ac-cell.absent .ac-st { color: var(--danger); }
.ac-cell.leave .ac-st, .ac-cell.open .ac-st { background: var(--warning-soft); color: var(--warning); }
.ac-cell.off, .ac-cell.holiday, .ac-cell.leave_paid { background: var(--primary-soft); } .ac-cell.off .ac-st, .ac-cell.holiday .ac-st, .ac-cell.leave_paid .ac-st { color: var(--primary); }
.ac-cell.future { opacity: .45; cursor: default; }
.ac-cell.sel { outline: 3px solid var(--primary); outline-offset: -2px; }
.ac-cell.sel::after { content: '✓'; position: absolute; left: 8px; bottom: 6px; color: var(--primary); font-weight: 900; font-size: 18px; }
.ac-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ac-sum { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.ac-sum b { font-size: 16px; }
@media (max-width: 700px) { .ac-cell { min-height: 70px; padding: 4px; } .ac-cell .ac-t { font-size: 11px; } .ac-cell .ac-x { display: none; } }

/* بند #66: ميزانية المصاريف التشغيلية (كروت / جدول) */
.bd-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.bd-sum > div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-sum span { font-size: 12px; color: var(--muted); }
.bd-sum b { font-size: 16px; overflow-wrap: anywhere; }
.bd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.bd-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bd-card.over { border-color: var(--danger); }
.bd-card.done { border-color: var(--success); }
.bd-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.bd-bar i { display: block; height: 100%; border-radius: 4px; }
.bd-bar.ok i { background: var(--success); } .bd-bar.mid i { background: var(--warning); } .bd-bar.over i { background: var(--danger); }
.bd-lock { background: var(--warning-soft); color: var(--warning); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 700; }
.fd-optable tfoot td { border-top: 2px solid var(--border); border-bottom: 0; }
@media (max-width: 560px) { .bd-sum { grid-template-columns: 1fr; } }

/* بند #67: ⭐ الاهتمامات بصفحة CRM */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.int-card { cursor: pointer; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.int-card:hover { border-color: var(--primary); }
.int-card .sm.primary { align-self: flex-start; }

/* بند #68: نسبة حضور المشترك */
.sa-rate { display: flex; align-items: center; gap: 6px; min-width: 110px; }
.sa-rate i { display: block; height: 8px; border-radius: 4px; }
.sa-rate span { font-size: 12px; font-weight: 700; }
.int-card.muted { opacity: .6; }

/* بند #69: تنبيه رسائل واتساب اللي تنتظر الإرسال اليدوي */
.wa-pending { cursor: pointer; border-inline-start: 4px solid var(--warning, #f59e0b); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.wa-pending:hover { filter: brightness(1.05); }

/* بند #71: 📣 رسالة جماعية ذكية · 📊 الحملات · 📅 متابعات اليوم */
.cmp-filters { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cmp-count { font-size: 15px; }
.cmp-vars { gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cmp-body { white-space: pre-line; max-width: 380px; }
.cmp-links { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.cmp-link { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; flex-wrap: nowrap; }
.fu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 8px; }
.fu-card { margin: 0; border-inline-start: 4px solid var(--border); }
.fu-card.today { border-inline-start-color: var(--warning); }
.fu-card.overdue { border-inline-start-color: var(--danger); }
.fu-card .row { gap: 6px; flex-wrap: wrap; }
.fu-note { margin: 6px 0; white-space: pre-line; }

/* بند #70: 💵 الصندوق اليومي — بطاقة لكل صندوق */
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cb-card { margin: 0; cursor: help; }
.cb-big { font-size: 22px; font-weight: 700; margin: 2px 0 6px; }
.cb-usd { color: var(--success); }
.cb-rows { display: flex; flex-direction: column; gap: 2px; }
.cb-in { color: var(--success); }
.cb-out { color: var(--danger); }
.cb-hint { background: var(--warning-soft); padding: 6px 8px; border-radius: 8px; margin: 4px 0; }
.cb-i { padding: 0 6px; }

/* بند #71 (المرحلة 2): 📥 المحادثات */
.wa-inbox .wa-conv { align-items: center; gap: 8px; }
.wa-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-window { padding: 4px 10px 0; }
.wa-window .ok { color: var(--success); }
.wa-window .warn { color: var(--warning); }
.wa-tick { opacity: .8; }
.wa-inbox .chat-input { flex-wrap: wrap; }
.wa-inbox .chat-input textarea { flex: 1 1 220px; }
.wa-unread { border-inline-start-color: var(--primary); }
.wa-hook code { padding: 4px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow-wrap: anywhere; }
.wa-tpl-prev { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }