/* Energy Services — styles (mobile first, RTL + LTR) */
:root {
  --navy:#0f3154; --blue:#1b6fc2; --blue-soft:#e8f1fb; --green:#1f8f4c; --green-soft:#e7f6ec;
  --orange:#d97721; --orange-soft:#fdf1e4; --purple:#6d4bb8; --red:#cf3b3b; --red-soft:#fdecec;
  --amber:#b7791f; --amber-soft:#fff5e0;
  --bg:#f3f7fb; --card:#ffffff; --text:#16324f; --muted:#667a8e; --line:#dce6ef; --shadow:0 6px 20px rgba(15,49,84,.07);
  --r:16px; --r-sm:10px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0c1622; --card:#132232; --text:#e6eef7; --muted:#93a6ba; --line:#223549;
    --blue-soft:#15304b; --green-soft:#12321f; --orange-soft:#3a2714; --red-soft:#3b1a1a; --amber-soft:#3a2d12;
    --shadow:0 6px 20px rgba(0,0,0,.35);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; background:var(--bg); color:var(--text); }
body { font-family: "Segoe UI", Tahoma, Arial, "Noto Sans Arabic", sans-serif; font-size:16px; line-height:1.45; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color: var(--blue); }
[hidden] { display:none !important; }

/* boot */
.boot { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:10px; color:var(--muted); }

/* logo — official Energy EG Co artwork only */
.logo { width:38px; height:38px; object-fit:contain; flex:none; display:inline-block; background:#fff; border-radius:10px; padding:2px; }
.logo-full { width:min(210px,60vw); height:auto; display:block; margin:0 auto; }
.boot .logo-full { width:170px; }
.sticker-logo { width:120px; height:auto; }

/* layout */
.shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; color:var(--text); }
.brand small { display:block; font-weight:500; color:var(--muted); font-size:12px; }
.top-actions { display:flex; gap:6px; }
.iconbtn { border:1px solid var(--line); background:var(--card); border-radius:10px; min-width:40px; height:40px; padding:0 10px; cursor:pointer; }
.body { flex:1; display:flex; }
.side { display:none; }
main { flex:1; width:100%; max-width:980px; margin:0 auto; padding:14px 14px calc(90px + var(--safe-b)); min-width:0; }
.bottomnav { position:fixed; bottom:0; inset-inline:0; z-index:20; display:flex; background:var(--card); border-top:1px solid var(--line);
  padding-bottom:var(--safe-b); }
.bottomnav a { flex:1; text-align:center; padding:8px 2px 9px; text-decoration:none; color:var(--muted); font-size:11.5px; display:flex; flex-direction:column; gap:2px; align-items:center; position:relative; }
.bottomnav a .ico { font-size:21px; line-height:1.1; }
.bottomnav a.active { color:var(--blue); font-weight:700; }
.navdot { position:absolute; top:4px; inset-inline-start:calc(50% + 8px); background:var(--red); color:#fff; border-radius:999px; font-size:10px; min-width:17px; height:17px; display:grid; place-items:center; padding:0 4px; font-weight:800; }
@media (min-width: 900px) {
  .bottomnav { display:none; }
  .side { display:block; width:230px; flex:none; padding:14px; }
  .side nav { position:sticky; top:74px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:8px; }
  .side a { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; text-decoration:none; color:var(--text); margin:2px 0; position:relative; }
  .side a.active, .side a:hover { background:var(--blue-soft); color:var(--blue); }
  .side .navdot { position:static; margin-inline-start:auto; }
  main { padding-bottom:40px; }
}

/* type */
h1 { font-size:24px; margin:0 0 4px; }
h2 { font-size:19px; margin:0; }
h3 { font-size:16px; margin:0; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.tiny { font-size:12px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 2px 10px; }
.stack { display:grid; gap:12px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.spacer { flex:1; }

/* hero */
.hero { background:linear-gradient(135deg,#10345c,#1b6fb5); color:#fff; border-radius:20px; padding:20px; box-shadow:0 12px 30px rgba(15,49,84,.2); }
.hero p { margin:4px 0 0; opacity:.9; }

/* cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width: 420px) { .grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width: 700px) { .grid-lines { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.line-card { cursor:pointer; text-align:start; border:1px solid var(--line); background:var(--card); border-radius:18px; padding:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:6px; min-height:132px; border-top:5px solid var(--blue); transition:transform .15s; }
.line-card:active { transform:scale(.98); }
.line-card .emoji { font-size:36px; }
.line-card b { font-size:18px; }
.line-PANTRY { border-top-color:var(--orange); }
.line-CLEANING { border-top-color:var(--green); }
.line-IT { border-top-color:var(--blue); }
.line-DRIVER { border-top-color:var(--purple); }
.line-ERRANDS { border-top-color:var(--amber); }

.usual { display:flex; align-items:center; gap:12px; width:100%; border:1px dashed var(--orange); background:var(--orange-soft); border-radius:14px; padding:12px 14px; cursor:pointer; text-align:start; }
.usual .emoji { font-size:28px; }

.item-tile { border:1px solid var(--line); background:var(--card); border-radius:14px; padding:14px 8px; text-align:center; cursor:pointer; display:grid; gap:4px; justify-items:center; min-height:104px; align-content:center; }
.item-tile .emoji { font-size:34px; }
.item-tile.off { opacity:.45; cursor:default; }
.issue-btn { display:flex; align-items:center; gap:12px; width:100%; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:14px; cursor:pointer; text-align:start; font-weight:600; }
.issue-btn .emoji { font-size:26px; }
.issue-btn.urgent { border-color:#f2b8b8; background:var(--red-soft); color:var(--red); }

/* buttons */
.btn { border:0; border-radius:12px; padding:12px 16px; cursor:pointer; font-weight:700; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn:disabled { opacity:.55; cursor:default; }
.btn.block { width:100%; }
.btn.big { min-height:56px; font-size:18px; }
.btn.primary { background:var(--blue); color:#fff; }
.btn.green { background:var(--green); color:#fff; }
.btn.orange { background:var(--orange); color:#fff; }
.btn.ghost { background:var(--blue-soft); color:var(--text); }
.btn.line { background:transparent; border:1px solid var(--line); }
.btn.danger { background:var(--red-soft); color:var(--red); border:1px solid #f2c4c4; }
.btn.sm { min-height:36px; padding:7px 12px; font-size:14px; border-radius:10px; }

/* chips & badges */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:var(--card); padding:9px 13px; border-radius:11px; cursor:pointer; min-height:42px; }
.chip.on { border-color:var(--blue); background:var(--blue-soft); color:var(--blue); font-weight:700; }
.badge { font-size:12px; font-weight:700; border-radius:999px; padding:4px 9px; background:var(--blue-soft); color:var(--blue); white-space:nowrap; }
.badge.green { background:var(--green-soft); color:var(--green); }
.badge.orange { background:var(--orange-soft); color:var(--orange); }
.badge.red { background:var(--red-soft); color:var(--red); }
.badge.amber { background:var(--amber-soft); color:var(--amber); }
.badge.grey { background:var(--line); color:var(--muted); }

/* forms */
label.f { display:block; font-size:13px; color:var(--muted); margin:12px 0 6px; font-weight:600; }
input.i, select.i, textarea.i { width:100%; border:1px solid var(--line); border-radius:11px; padding:12px; background:var(--card); min-height:46px; }
input.i:focus, select.i:focus, textarea.i:focus { outline:2px solid color-mix(in srgb, var(--blue) 45%, transparent); border-color:var(--blue); }
.check { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; cursor:pointer; background:var(--card); }
.check input { width:20px; height:20px; accent-color:var(--blue); }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.stepper button { width:46px; height:46px; border:0; background:var(--blue-soft); font-size:22px; cursor:pointer; }
.stepper span { min-width:52px; text-align:center; font-weight:800; font-size:18px; }
.err { color:var(--red); font-size:14px; margin-top:8px; min-height:1em; }

/* login */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login .card { width:min(400px,100%); padding:26px 22px; }
.login-head { text-align:center; margin-bottom:12px; display:grid; justify-items:center; gap:8px; }

/* tickets */
.ticket { background:var(--card); border:1px solid var(--line); border-inline-start:5px solid var(--blue); border-radius:14px; padding:14px; box-shadow:var(--shadow); display:grid; gap:8px; }
.ticket.st-submitted, .ticket.st-reopened { border-inline-start-color:var(--orange); }
.ticket.st-accepted { border-inline-start-color:var(--blue); }
.ticket.st-done { border-inline-start-color:var(--green); }
.ticket.st-closed, .ticket.st-cancelled, .ticket.st-rejected { border-inline-start-color:var(--line); }
.ticket.urgent { border-inline-start-color:var(--red); background:linear-gradient(0deg, var(--card), var(--card)) padding-box; }
.ticket.overdue .age { color:var(--red); font-weight:800; }
.t-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.t-title { font-weight:800; font-size:17px; }
.t-meta { color:var(--muted); font-size:13.5px; display:grid; gap:2px; }
.t-actions { display:flex; gap:8px; }
.t-actions .btn { flex:1; }
.timeline { display:flex; gap:4px; align-items:center; margin:2px 0; }
.timeline i { flex:1; height:6px; border-radius:99px; background:var(--line); }
.timeline i.on { background:var(--green); }
.timeline i.now { background:var(--blue); animation:pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity:.45; } }

.tabs { display:flex; gap:6px; background:var(--card); border:1px solid var(--line); padding:5px; border-radius:13px; margin-bottom:12px; overflow:auto; }
.tabs button { flex:1; border:0; background:transparent; padding:9px 8px; font-size:15px; border-radius:9px; cursor:pointer; white-space:nowrap; font-weight:600; color:var(--muted); }
.tabs button.on { background:var(--blue); color:#fff; }
.empty { text-align:center; color:var(--muted); padding:30px 10px; }
.empty .emoji { font-size:40px; display:block; margin-bottom:6px; }

/* switch */
.switch { position:relative; width:52px; height:30px; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:var(--line); border-radius:99px; transition:.2s; cursor:pointer; }
.switch span:before { content:""; position:absolute; width:24px; height:24px; top:3px; inset-inline-start:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + span { background:var(--green); }
.switch input:checked + span:before { transform:translateX(22px); }
[dir="rtl"] .switch input:checked + span:before { transform:translateX(-22px); }
.list-row { display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); }
.list-row:last-child { border-bottom:0; }
.list-row .emoji { font-size:24px; width:32px; text-align:center; }

/* dashboard */
.kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width: 700px) { .kpis { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px; }
.kpi .v { font-size:26px; font-weight:800; margin-top:2px; }
.kpi .v.red { color:var(--red); }
.bar { height:9px; background:var(--line); border-radius:99px; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--blue); border-radius:99px; }
.hbar { display:grid; grid-template-columns:minmax(90px,38%) 1fr auto; gap:8px; align-items:center; font-size:13.5px; margin:7px 0; }
.hours { display:flex; align-items:flex-end; gap:3px; height:110px; padding-top:6px; }
.hours div { flex:1; background:var(--blue); border-radius:4px 4px 0 0; min-height:2px; position:relative; }
.hours-l { display:flex; gap:3px; font-size:10px; color:var(--muted); }
.hours-l span { flex:1; text-align:center; }
table.t { width:100%; border-collapse:collapse; font-size:14px; }
table.t th, table.t td { padding:9px 6px; border-bottom:1px solid var(--line); text-align:start; }
table.t th { color:var(--muted); font-size:12.5px; font-weight:700; }
.scroll-x { overflow-x:auto; }

/* sheet (bottom modal) */
.sheet-bg { position:fixed; inset:0; background:rgba(8,20,35,.5); z-index:50; display:flex; align-items:flex-end; justify-content:center; animation:fade .15s; }
.sheet { background:var(--card); width:min(560px,100%); max-height:92vh; overflow:auto; border-radius:20px 20px 0 0; padding:18px 16px calc(18px + var(--safe-b)); animation:up .2s ease-out; }
@media (min-width: 700px) { .sheet-bg { align-items:center; } .sheet { border-radius:20px; } }
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
@keyframes up { from { transform:translateY(30px); opacity:0; } }
@keyframes fade { from { opacity:0; } }

/* toast */
.toast { position:fixed; bottom:calc(84px + var(--safe-b)); left:50%; transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:#12385e; color:#fff; padding:12px 16px; border-radius:12px; z-index:60; transition:.25s; max-width:92vw; text-align:center; font-weight:600; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast.bad { background:var(--red); }

/* QR stickers (print) */
.qr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.sticker { background:#fff; color:#0f3154; border:2px solid #0f3154; border-radius:16px; padding:16px; text-align:center; display:grid; gap:6px; justify-items:center; break-inside:avoid; }
.sticker .qr svg, .sticker .qr img { width:170px; height:170px; }
.sticker b { font-size:17px; }
.sticker .brand-s { display:flex; gap:8px; align-items:center; font-weight:800; }
@media print {
  .topbar, .bottomnav, .side, .no-print { display:none !important; }
  main { padding:0; max-width:none; }
  body { background:#fff; }
  .sticker { border-width:2px; }
}

/* anonymous QR page */
.qr-page { max-width:520px; margin:0 auto; padding:18px 14px 40px; }
.done-big { text-align:center; padding:30px 10px; }
.done-big .emoji { font-size:64px; }

/* equipment */
.eq-chart { width:100%; height:auto; display:block; }
.eq-chart text { fill:var(--muted); font-size:11px; font-family:inherit; }
.eq-chart .g { stroke:var(--line); }
.eq-chart .b { fill:var(--blue); }
.eq-chart .b.today { fill:var(--orange); }
.eq-part { display:grid; grid-template-columns:minmax(0,1fr) 64px 100px 40px; gap:6px; align-items:center; }
@media (max-width: 420px) { .eq-part { grid-template-columns:minmax(0,1fr) 54px 78px 40px; } }
.eq-part .iconbtn { color:var(--red); }
.sheet .scroll-x table.t th, .sheet .scroll-x table.t td { white-space:nowrap; }