@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/plex-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/plex-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plex-arabic-600.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plex-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plex-arabic-700.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plex-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --aqua: #62cbc9;
  --aqua-soft: #dff4f3;
  --teal: #19363B;
  --teal-2: #234b52;
  --charcoal: #141516;
  --mustard: #C9A227;
  --mustard-soft: #f6ecc8;
  --bg: #f1f5f5;
  --card: #ffffff;
  --text: #16292c;
  --muted: #5f7579;
  --line: #dfe8e8;
  --danger: #c0392b;
  --danger-soft: #f9e0dc;
  --ok: #2e8b57;
  --ok-soft: #dff3e7;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 21, 22, .06), 0 4px 14px rgba(20, 21, 22, .05);
  --font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5;
  min-height: 100vh; padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
body.no-nav { padding-bottom: 0; }
a { color: var(--teal-2); }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.3; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.1rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; }

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--teal); color: #fff;
  display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; padding-top: calc(.6rem + env(safe-area-inset-top));
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.topbar .logo { height: 30px; width: auto; display: block; }
.topbar .title { font-weight: 600; flex: 1; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .icon-btn { background: transparent; border: 0; color: #fff; position: relative; padding: .3rem .4rem; border-radius: 8px; line-height: 0; display: inline-flex; }
.topbar .logo-link { display: inline-flex; line-height: 0; }
.logo-link:active { opacity: .7; }
[dir="rtl"] .ic.flip { transform: scaleX(-1); }
.menu-ic { color: var(--teal); display: inline-flex; }
.flagged { color: #8a6d0b; display: inline-flex; gap: 2px; }
.btn .ic { vertical-align: -3px; }
.topbar .icon-btn:active { background: rgba(255,255,255,.12); }
.badge { position: absolute; top: -2px; inset-inline-end: -2px; background: var(--mustard); color: var(--charcoal); font-size: .65rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.lang-btn { background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 8px; padding: .3rem .55rem; font-weight: 600; font-size: .8rem; }

/* bottom nav */
.bottomnav {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}
.bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: .68rem; padding: .2rem 0; position: relative; }
.bottomnav a .ic { display: block; }
.bottomnav a.active { color: var(--teal); font-weight: 600; }
.bottomnav a.active .ic { stroke-width: 2.3; }
.bottomnav a .dot { position: absolute; top: 2px; inset-inline-end: 22%; width: 9px; height: 9px; border-radius: 50%; background: var(--mustard); }

/* layout */
.page { max-width: 720px; margin: 0 auto; padding: .9rem .9rem 1.5rem; }
.page-wide { max-width: 1100px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1rem; margin-bottom: .9rem; }
.card.flat { box-shadow: none; border: 1px solid var(--line); }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.list { display: flex; flex-direction: column; gap: .5rem; }
.item { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.item .grow { min-width: 0; }
.item .t { font-weight: 600; }
.item .s { font-size: .82rem; color: var(--muted); }
.item.unread { border-color: var(--aqua); background: #f3fbfb; }

/* buttons */
.btn { border: 1px solid transparent; border-radius: 10px; padding: .55rem .95rem; font-weight: 600; background: var(--teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.aqua { background: var(--aqua); color: var(--charcoal); }
.btn.ghost { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn.light { background: var(--aqua-soft); color: var(--teal); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.warn { background: var(--mustard-soft); color: #6b5410; }
.btn.sm { padding: .32rem .65rem; font-size: .82rem; border-radius: 8px; }
.btn.xs { padding: .18rem .5rem; font-size: .75rem; border-radius: 7px; }
.btn.block { width: 100%; }
.btn.link { background: none; color: var(--teal-2); text-decoration: underline; padding: .2rem .3rem; font-weight: 500; }

/* forms */
.field { margin-bottom: .8rem; }
.field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .25rem; }
.input, select.input, textarea.input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; background: #fff; color: var(--text); }
.input:focus { outline: 2px solid var(--aqua); border-color: var(--aqua); }
textarea.input { min-height: 80px; resize: vertical; }
.check { display: flex; align-items: center; gap: .5rem; }
.check input { width: 18px; height: 18px; }
.err { color: var(--danger); font-size: .85rem; margin: .3rem 0; }
.ok-msg { color: var(--ok); font-size: .85rem; }

/* chips / tags */
.chip { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; font-weight: 600; background: var(--aqua-soft); color: var(--teal); }
.chip.warn { background: var(--mustard-soft); color: #6b5410; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.bad { background: var(--danger-soft); color: var(--danger); }
.chip.gray { background: #eceff0; color: var(--muted); }
.tabs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: .6rem; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; white-space: nowrap; color: var(--text); }
.tab.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: .4rem .7rem; font-size: .85rem; color: var(--text); }
.seg button.active { background: var(--teal); color: #fff; }

/* schedule grid */
.sched { display: flex; flex-direction: column; gap: .4rem; }
.day { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .6rem; }
.day.today { border-color: var(--aqua); box-shadow: 0 0 0 2px var(--aqua-soft); }
.day.past { opacity: .72; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.day-head .dn { font-weight: 700; }
.day-head .dd { font-size: .8rem; color: var(--muted); }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.slots.one { grid-template-columns: 1fr; }
.slot { border: 1px solid var(--line); border-radius: 10px; padding: .4rem .55rem; min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: .1rem; background: #fafcfc; position: relative; text-align: start; width: 100%; }
.slot .st { font-size: .72rem; color: var(--muted); display: flex; justify-content: space-between; gap: .3rem; }
.slot .st span:last-child { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slot .who { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.free { border-style: dashed; border-color: var(--mustard); background: #fffdf4; }
.slot.free .who { color: #8a6d0b; }
.slot.mine { border-color: var(--aqua); background: var(--aqua-soft); }
.slot.mine .who { color: var(--teal); }
.slot.taken { background: #f3f5f5; }
.slot.extra { border-color: #b8c7c9; }
.slot .fl { position: absolute; top: 4px; inset-inline-end: 6px; font-size: .75rem; }
.slot .cl { font-size: .7rem; color: var(--muted); }
.branch-label { font-size: .72rem; color: var(--muted); font-weight: 600; margin: .3rem 0 .15rem; }
.day .branch-block + .branch-block { margin-top: .4rem; }

/* sheet (bottom modal) */
.sheet-bg { position: fixed; inset: 0; background: rgba(20,21,22,.45); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: #fff; width: 100%; max-width: 640px; border-radius: 18px 18px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; animation: up .18s ease-out; }
@keyframes up { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet h2 { margin-bottom: .6rem; }
.sheet .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.toast { cursor: pointer; position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--charcoal); color: #fff; padding: .6rem 1rem; border-radius: 10px; z-index: 60; font-size: .9rem; box-shadow: var(--shadow); max-width: 92vw; }
.toast.bad { background: var(--danger); }

/* login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--teal); padding: 1.5rem 1rem; }
.login-card { background: #fff; border-radius: 18px; padding: 1.5rem 1.3rem; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.login-card .logo { display: block; height: 54px; margin: 0 auto 1rem; }
.login-card h1 { text-align: center; font-size: 1.1rem; color: var(--teal); margin-bottom: 1rem; }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.table th { color: var(--muted); font-weight: 600; font-size: .78rem; }
.table-wrap { overflow-x: auto; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .8rem; }
.stat { background: var(--aqua-soft); border-radius: 10px; padding: .55rem .4rem; text-align: center; }
.stat .v { font-size: 1.25rem; font-weight: 700; color: var(--teal); }
.stat .l { font-size: .72rem; color: var(--muted); }

/* hours grid */
.hours-grid { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.hours-row { display: grid; grid-template-columns: 72px 1fr 1fr; gap: .4rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .4rem .5rem; }
.hours-row .dn { font-weight: 600; font-size: .85rem; }
.hours-cell { display: flex; flex-direction: column; gap: .2rem; }
.hours-cell .tt { display: flex; gap: .2rem; align-items: center; }
.hours-cell input[type=time] { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: .25rem .3rem; font-size: .8rem; }
.hours-cell label { font-size: .7rem; color: var(--muted); display: flex; gap: .25rem; align-items: center; }
.hours-row.closed .hours-cell input { opacity: .35; }

@media print {
  .topbar, .bottomnav, .no-print { display: none !important; }
  body { background: #fff; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}
@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .bottomnav { position: sticky; top: 56px; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); justify-content: center; gap: 2rem; }
  .bottomnav a { flex: 0 0 auto; padding: .3rem .6rem; font-size: .85rem; flex-direction: row; gap: .35rem; }
  .sheet-bg { align-items: center; }
  .sheet { border-radius: 18px; max-height: 85vh; }
  .slots { grid-template-columns: 1fr 1fr; }
}

/* view-as banner */
.impbar { position: sticky; top: 50px; z-index: 19; background: var(--mustard); color: var(--charcoal); font-size: .85rem; padding: .4rem .9rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.impbar .btn { margin-inline-start: auto; background: var(--charcoal); color: #fff; }

/* messages */
.thread { display: flex; flex-direction: column; gap: .4rem; max-height: 60vh; overflow: auto; padding: .3rem 0; }
.bubble { max-width: 82%; background: #eef2f2; border-radius: 14px; padding: .45rem .7rem; align-self: flex-start; white-space: pre-wrap; word-break: break-word; }
.bubble.me { background: var(--aqua-soft); align-self: flex-end; }
.bubble .bt { font-size: .68rem; color: var(--muted); margin-top: .15rem; text-align: end; }
.slot.ghost-slot { border-style: dashed; border-color: #c7d2d4; background: transparent; }
.slot.ghost-slot .who { color: var(--muted); font-weight: 500; font-size: .82rem; }

/* ---------- employee colors (12) ---------- */
:root {
  --p0: #62cbc9; --p1: #f28c5f; --p2: #8fb86b; --p3: #c98fd6; --p4: #f2c14e; --p5: #6fa8dc;
  --p6: #e57f9d; --p7: #5fbfa6; --p8: #d9a066; --p9: #9aa5f2; --p10: #b8c957; --p11: #e0a3c4;
}
.slot.taken.c0, .pc0 { border-inline-start: 4px solid var(--p0); } .slot.taken.c1, .pc1 { border-inline-start: 4px solid var(--p1); }
.slot.taken.c2, .pc2 { border-inline-start: 4px solid var(--p2); } .slot.taken.c3, .pc3 { border-inline-start: 4px solid var(--p3); }
.slot.taken.c4, .pc4 { border-inline-start: 4px solid var(--p4); } .slot.taken.c5, .pc5 { border-inline-start: 4px solid var(--p5); }
.slot.taken.c6, .pc6 { border-inline-start: 4px solid var(--p6); } .slot.taken.c7, .pc7 { border-inline-start: 4px solid var(--p7); }
.slot.taken.c8, .pc8 { border-inline-start: 4px solid var(--p8); } .slot.taken.c9, .pc9 { border-inline-start: 4px solid var(--p9); }
.slot.taken.c10, .pc10 { border-inline-start: 4px solid var(--p10); } .slot.taken.c11, .pc11 { border-inline-start: 4px solid var(--p11); }
.dot-c { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-inline-end: 4px; }
.bg-c0 { background: var(--p0); } .bg-c1 { background: var(--p1); } .bg-c2 { background: var(--p2); } .bg-c3 { background: var(--p3); }
.bg-c4 { background: var(--p4); } .bg-c5 { background: var(--p5); } .bg-c6 { background: var(--p6); } .bg-c7 { background: var(--p7); }
.bg-c8 { background: var(--p8); } .bg-c9 { background: var(--p9); } .bg-c10 { background: var(--p10); } .bg-c11 { background: var(--p11); }
.color-pick { display: flex; gap: .4rem; flex-wrap: wrap; }
.color-pick button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.color-pick button.sel { border-color: var(--text); }

/* ---------- weekly grid (desktop) ---------- */
.grid-wrap { overflow-x: auto; }
.wgrid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: .82rem; }
.wgrid th, .wgrid td { border-bottom: 1px solid var(--line); padding: .35rem .4rem; vertical-align: top; text-align: center; }
.wgrid th { font-weight: 600; color: var(--muted); font-size: .75rem; background: var(--card); position: sticky; top: 0; z-index: 2; }
.wgrid th.today, .wgrid td.today { background: var(--aqua-soft); }
.wgrid td.name { text-align: start; font-weight: 600; white-space: nowrap; position: sticky; inset-inline-start: 0; background: var(--card); z-index: 1; }
.wgrid td.name .s { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; }
.gcell { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.gpill { border-radius: 6px; padding: .15rem .35rem; font-size: .72rem; background: #eef2f2; color: var(--text); white-space: nowrap; cursor: pointer; border: 0; text-align: center; }
.gpill.m { background: var(--mustard-soft); } .gpill.e { background: var(--teal); color: #fff; }
.gpill.off { background: transparent; color: #c7d2d4; cursor: default; }
.wgrid tr.gaps td { background: #fffdf4; }
.wgrid tr.gaps td.name { color: #8a6d0b; }
.gpill.free { background: transparent; border: 1px dashed var(--mustard); color: #8a6d0b; }
.lim { font-size: .7rem; color: var(--muted); }
.lim.bad { color: var(--danger); font-weight: 600; }
.lim.ok { color: var(--ok); }

/* ---------- today summary (staff home) ---------- */
.now-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.now-card { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; background: var(--card); }
.now-card h3 { font-size: .95rem; margin-bottom: .35rem; display: flex; justify-content: space-between; align-items: center; }
.now-row { display: flex; flex-direction: column; gap: .2rem; padding: .4rem 0; border-top: 1px dashed var(--line); font-size: .85rem; }
.now-row:first-of-type { border-top: 0; }
.nr-top { display: flex; align-items: center; gap: .5rem; }
.nr-top .chip { margin-inline-start: auto; }
.nr-type { color: var(--muted); }
.tm { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nr-who { display: flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .95rem; }
.nr-who.free { color: #8a6d0b; font-weight: 500; }
.now-row.live { background: var(--aqua-soft); margin: 0 -.7rem; padding: .45rem .7rem; border-radius: 8px; border-top: 0; }
.now-card h3 .chip { font-size: .7rem; }

/* ---------- dark mode ---------- */
:root[data-theme="dark"] {
  --bg: #0f1a1c; --card: #16262a; --text: #e6eeef; --muted: #93a7ab; --line: #24383c;
  --aqua-soft: #173c3f; --mustard-soft: #3a3014; --danger-soft: #45201c; --ok-soft: #173a28; --teal-2: #7fd6d3;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .item, :root[data-theme="dark"] .day, :root[data-theme="dark"] .slot, :root[data-theme="dark"] .tab,
:root[data-theme="dark"] .seg button, :root[data-theme="dark"] .input, :root[data-theme="dark"] .hours-row, :root[data-theme="dark"] .bottomnav,
:root[data-theme="dark"] .now-card, :root[data-theme="dark"] .wgrid th, :root[data-theme="dark"] .wgrid td.name { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .slot.taken, :root[data-theme="dark"] .gpill { background: #1f3236; color: var(--text); }
:root[data-theme="dark"] .slot.free, :root[data-theme="dark"] .wgrid tr.gaps td { background: #2a2512; }
:root[data-theme="dark"] .slot.free .who, :root[data-theme="dark"] .gpill.free, :root[data-theme="dark"] .now-row .who.free { color: #e5c25a; }
:root[data-theme="dark"] .slot.mine { background: var(--aqua-soft); }
:root[data-theme="dark"] .slot.ghost-slot { border-color: #3a5055; }
:root[data-theme="dark"] .item.unread { background: #173c3f; }
:root[data-theme="dark"] .stat { background: var(--aqua-soft); } :root[data-theme="dark"] .stat .v { color: var(--teal-2); }
:root[data-theme="dark"] .chip { background: var(--aqua-soft); color: var(--teal-2); }
:root[data-theme="dark"] .btn.ghost { color: var(--teal-2); border-color: var(--teal-2); }
:root[data-theme="dark"] .btn.light { background: var(--aqua-soft); color: var(--teal-2); }
:root[data-theme="dark"] .btn.link { color: var(--teal-2); }
:root[data-theme="dark"] .menu-ic { color: var(--teal-2); }
:root[data-theme="dark"] .bottomnav a.active { color: var(--teal-2); }
:root[data-theme="dark"] .bubble { background: #1f3236; } :root[data-theme="dark"] .bubble.me { background: var(--aqua-soft); }
:root[data-theme="dark"] .sheet, :root[data-theme="dark"] .login-card { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .login-card h1 { color: var(--teal-2); }
:root[data-theme="dark"] .login-card .logo { filter: invert(1) hue-rotate(180deg) brightness(1.3); }
:root[data-theme="dark"] .gpill.m { background: #3a3014; color: #e5c25a; }
:root[data-theme="dark"] .impbar { color: var(--charcoal); }
:root[data-theme="dark"] .card.flat { border-color: var(--line); }
:root[data-theme="dark"] .tab.active, :root[data-theme="dark"] .seg button.active { background: var(--aqua); color: var(--charcoal); border-color: var(--aqua); }
:root[data-theme="dark"] .btn:not(.ghost):not(.light):not(.danger):not(.warn):not(.link):not(.aqua) { background: var(--aqua); color: var(--charcoal); }
:root[data-theme="dark"] .table th, :root[data-theme="dark"] .table td { border-color: var(--line); }
:root[data-theme="dark"] .toast { background: #e6eeef; color: #0f1a1c; }
:root[data-theme="dark"] .toast.bad { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .now-row.live { background: var(--aqua-soft); }

/* time stepper */
.tstep { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.tstep .tin { border: 0; border-radius: 0; width: 6.2em; min-width: 0; text-align: center; padding: .45rem .2rem; background: transparent; }
.tstep .tin:focus { outline: none; box-shadow: inset 0 0 0 2px var(--aqua); }
.tstep .tbtn { border: 0; background: var(--aqua-soft); color: var(--teal); font-weight: 700; width: 34px; font-size: 1.1rem; cursor: pointer; }
.tstep .tbtn:active { background: var(--aqua); }
.hours-cell .tt { flex-wrap: wrap; }
.hours-cell .tstep .tin { width: 5.4em; font-size: .8rem; padding: .25rem .1rem; }
.hours-cell .tstep .tbtn { width: 26px; font-size: .95rem; }
:root[data-theme="dark"] .tstep .tbtn { color: var(--teal-2); }

/* proportional slots + gap marker */
.slots.prop { display: grid; gap: .4rem; }
.gapmark { margin-top: .3rem; font-size: .75rem; font-weight: 600; color: var(--danger); background: var(--danger-soft); border-radius: 8px; padding: .2rem .5rem; text-align: center; }
.gapmark.overlap { color: #fff; background: var(--danger); }

/* attendance */
.att-card { border: 2px solid var(--aqua); }
.att-card.off { border-color: var(--line); }
.att-big { width: 100%; padding: .9rem; font-size: 1.1rem; border-radius: 14px; }
.att-state { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.att-state .ok { color: var(--ok); } .att-state .bad { color: var(--danger); }
.att-mark { font-size: .68rem; color: var(--muted); }
.att-mark.in { color: var(--ok); font-weight: 600; }
.att-mark.late { color: var(--danger); }
.ip-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.ip-list .chip { direction: ltr; font-family: ui-monospace, monospace; }
.ip-list .chip button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 .1rem; }

/* cash report */
.cash-prev { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 10px; background: #000; display: block; }
.cash-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: #eee; cursor: pointer; }
.cash-full { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; border-radius: 10px; }
.file-btn input { display: none; }

/* greeting toast */
.toast.greet { background: var(--teal); color: #fff; font-size: 1.05rem; font-weight: 600; padding: .8rem 1.2rem; border-radius: 14px; bottom: calc(100px + env(safe-area-inset-bottom)); text-align: center; line-height: 1.4; animation: pop .25s ease-out; }
.toast.greet .sub { font-size: .85rem; font-weight: 400; opacity: .85; margin-top: .2rem; }
@keyframes pop { from { transform: translateX(-50%) translateY(10px) scale(.96); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
:root[data-theme="dark"] .toast.greet { background: var(--aqua); color: var(--charcoal); }

.motto { text-align: center; color: var(--teal); font-weight: 600; font-size: .95rem; padding: .2rem .5rem .8rem; }
:root[data-theme="dark"] .motto { color: var(--aqua); }

/* points */
.pts-row { display: flex; align-items: center; gap: .6rem; }
.pts-big { font-size: 2rem; font-weight: 800; color: var(--teal); line-height: 1; }
.pts-sub { font-size: .78rem; color: var(--muted); }
.lb-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.lb-row:first-child { border-top: 0; }
.lb-rank { width: 26px; text-align: center; font-weight: 700; color: var(--muted); }
.lb-rank.top { color: var(--mustard); font-size: 1.1rem; }
.lb-name { flex: 1; font-weight: 600; min-width: 0; }
.lb-name .s { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; }
.lb-pts { font-weight: 800; color: var(--teal); }
.badge-chip { display: inline-block; font-size: .68rem; background: var(--mustard-soft); color: #6b5410; border-radius: 999px; padding: .05rem .45rem; margin-inline-end: .2rem; }
:root[data-theme="dark"] .pts-big, :root[data-theme="dark"] .lb-pts { color: var(--aqua); }
:root[data-theme="dark"] .badge-chip { background: #3a3014; color: #e5c25a; }
.rules { font-size: .8rem; color: var(--muted); display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; }

/* X-O */
.xo-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 300px; margin: .6rem auto; }
.xo-cell { aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--line); background: var(--card); font-size: 2.2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }
.xo-cell.X { color: var(--teal); } .xo-cell.O { color: var(--mustard); }
.xo-cell:disabled { cursor: default; }
.xo-cell.can { border-color: var(--aqua); border-style: dashed; }
:root[data-theme="dark"] .xo-cell.X { color: var(--aqua); }
.xo-status { text-align: center; font-weight: 600; margin: .3rem 0; }
.xo-mini { display: inline-grid; grid-template-columns: repeat(3, 10px); gap: 1px; vertical-align: middle; margin-inline-end: .4rem; }
.xo-mini span { width: 10px; height: 10px; background: var(--line); border-radius: 2px; }
.xo-mini span.X { background: var(--teal); } .xo-mini span.O { background: var(--mustard); }

/* global loader: Fovero mark (variant B: the dot pulses), shown when a request takes longer than 150ms.
   Fades in and out, and the page underneath fades back softly so there is no jump. */
.loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 90;
  background: rgba(241,245,245,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.loader.on { opacity: 1; pointer-events: auto; }
.loader .mark { width: 64px; height: 110px; overflow: visible; transform: scale(.92); transition: transform .35s ease; }
.loader.on .mark { transform: scale(1); }
.loader .drop { fill: var(--teal); }
.loader .dot { fill: var(--aqua); transform-origin: 404px 476px; animation: fv-pulse 1s ease-in-out infinite; }
@keyframes fv-pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.5); opacity: .5 } }
:root[data-theme="dark"] .loader { background: rgba(15,26,28,.7); }
:root[data-theme="dark"] .loader .drop { fill: var(--aqua); }
:root[data-theme="dark"] .loader .dot { fill: #fff; }
/* first paint: the app fades in under the loader instead of popping */
#app { opacity: 0; transition: opacity .4s ease; }
#app.ready { opacity: 1; }
/* page changes: content eases in */
main.page { animation: fv-in .28s ease-out; }
@keyframes fv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main.page { animation: none; } .loader .dot { animation: none; } }

/* ---- simplified navigation (2026-10-09) ---- */
.tabs.sub { margin-top: -.2rem; }
.tabs.sub .tab { font-size: .85rem; }
.slot.free.can { border-color: var(--aqua); background: var(--aqua-soft); }
.slot.free.can .who { color: var(--teal); }
:root[data-theme="dark"] .slot.free.can { background: #10302f; }
:root[data-theme="dark"] .slot.free.can .who { color: var(--teal-2); }
.bookline, .bookbar { background: var(--aqua-soft); display: block; text-decoration: none; color: inherit; }
.bookline .row, .bookbar .row { flex-wrap: wrap; gap: .5rem; }
.pts-chip { text-decoration: none; background: var(--mustard-soft); color: #6b5410; font-weight: 700; }
:root[data-theme="dark"] .pts-chip { color: #e5c25a; }
.feat-row { padding: .45rem 0; border-top: 1px solid var(--line); }
.feat-row:first-of-type { border-top: 0; }
details.card > summary { cursor: pointer; list-style: none; font-weight: 600; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "›"; float: inline-end; transition: transform .2s; color: var(--muted); }
details.card[open] > summary::after { transform: rotate(90deg); }
.offline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: -.2rem 0 .5rem; }
.gpill.dayoff { background: var(--mustard-soft); color: #6b5410; border-style: dashed; }
:root[data-theme="dark"] .gpill.dayoff { color: #e5c25a; }

/* ---- كلمة اليوم ---- */
.wd-grid { display: grid; gap: .35rem; margin: 0 auto .8rem; max-width: 330px; }
.wd-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.wd-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px solid var(--line); border-radius: 8px; font-size: 1.5rem; font-weight: 700; background: var(--card); }
.wd-cell.fill { border-color: var(--muted); }
.wd-cell.ok { background: #2e9e6b; border-color: #2e9e6b; color: #fff; }
.wd-cell.near { background: #d6a71e; border-color: #d6a71e; color: #fff; }
.wd-cell.no { background: #9aa6a8; border-color: #9aa6a8; color: #fff; }
.wd-kb { display: grid; gap: .3rem; margin-top: .4rem; }
.wd-krow { display: flex; justify-content: center; gap: .25rem; }
.wd-key { min-width: 26px; height: 44px; padding: 0 .3rem; border: 0; border-radius: 6px; background: var(--line); color: var(--text); font-size: 1.05rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.wd-key.wide { min-width: 64px; }
.wd-key.ok { background: #2e9e6b; color: #fff; }
.wd-key.near { background: #d6a71e; color: #fff; }
.wd-key.no { background: #6b7a7c; color: #fff; }
.wd-result { text-align: center; margin: .4rem 0 .2rem; }
@media (max-width: 400px) { .wd-key { min-width: 22px; font-size: .95rem; height: 40px; } }

/* dark mode: text that used the dark teal must use the light teal */
:root[data-theme="dark"] .slot .who, :root[data-theme="dark"] .slot.taken .who { color: var(--text); }
:root[data-theme="dark"] .slot.mine .who, :root[data-theme="dark"] .slot.free.can .who, :root[data-theme="dark"] .xo-cell.X { color: var(--teal-2); }
:root[data-theme="dark"] .slot.free .who { color: #e5c25a; }
:root[data-theme="dark"] .slot .st, :root[data-theme="dark"] .slot .cl { color: var(--muted); }