/* Pavilion, the one PestFolio design (round 24; it was option 5 of six in round 23).
   Soft cards on a cool mist background, deep teal, Figtree, every alert its own card. Round 25: on phones and tablets the sections sit in
   a fixed tab bar along the bottom edge (no longer floating), today's technicians are stacked underneath each other, and confirmations
   are the green card again. On desktop the sections stay in a floating centred pill at the top. app.css holds the base layout and all
   motion (so its reduced motion rules cover this file too); this file is loaded after it and sets the Pavilion tokens and overrides.
   Rules start with :root so they keep the weight they had as html[data-theme="5"] rules. Arabic keeps IBM Plex Sans Arabic. */

/* ---------- base adjustments ---------- */
.modeseg button{min-height:44px}
@media (max-width:899px){.fchip{min-height:44px;border-radius:22px}.sortlbl .pick{min-height:44px;height:44px;line-height:30px}.wknav{width:44px;height:44px}.wktoday{min-height:44px!important}.assignbtn,.slist .sact .assignbtn{min-height:44px}}
.topbar{min-height:60px}
:root{--tbh:60px}

/* ---------- tokens and surfaces ---------- */
html:root{
 --bg:#e9edf2;--surface:#fff;--sunk:#f3f5f8;--line:rgba(15,23,42,.07);--line2:rgba(15,23,42,.13);--hair:rgba(15,23,42,.07);--fill:rgba(15,23,42,.04);
 --txt:#0f172a;--txt2:#334155;--mut:#5b6678;--acc:#0f766e;--acc-h:#0b5f58;--acc-soft:#e3f3f1;--acc-line:#b9e0da;--acc-soft-h:#d4ece9;--ring:rgba(15,118,110,.2);
 --on-acc:#fff;--on-txt:#fff;
 --ok:#15803d;--ok-soft:#e5f5ea;--ok-bg:#f5fbf7;--ok-line:#c7e8d2;--red:#be123c;--red-soft:#fdebef;--red-h:#9f1239;--red-line:#f6c2cf;--red-bg2:#fffafb;
 --amb:#a14d05;--amb-soft:#fdf0e1;--warn-bar:#f59e0b;--warn-bg:#fffbf3;--warn-line:#f8deb3;
 --body:'Figtree','IBM Plex Sans Arabic',system-ui,sans-serif;--h-font:var(--body);--brand:var(--body);
 --r:26px;--r2:18px;--btn-r:18px;--input-r:16px;--chip-r:14px;--sh:none;
 --sh-card:0 1px 1px rgba(15,23,42,.03),0 10px 30px -14px rgba(15,23,42,.16),0 28px 56px -32px rgba(15,23,42,.14);--sh-pop:0 30px 60px -18px rgba(15,23,42,.3),0 0 0 1px rgba(15,23,42,.05);--sh2:var(--sh-pop);
 --btn-bg:linear-gradient(180deg,#13897f,#0d6d66);--btn-bg-h:linear-gradient(180deg,#0f7d74,#0a5f59);--on-btn:#fff;--btn-sh:0 12px 24px -12px rgba(13,109,102,.6),inset 0 1px 0 rgba(255,255,255,.18);
 --ghost-bg:#fff;--ghost-ink:#0f172a;--ghost-sh:0 8px 20px -12px rgba(15,23,42,.2),0 0 0 1px rgba(15,23,42,.05);
 --input:#f1f4f8;--input-focus:#fff;--input-sh:none;--seg-bg:rgba(15,23,42,.06);--seg-sh:0 4px 12px -4px rgba(15,23,42,.18),0 1px 2px rgba(15,23,42,.06);--tag-bg:#eef1f6;--ph:#8390a2;--ph2:#7a8799;
 --top-bg:rgba(233,237,242,.86);--bar-bg:rgba(255,255,255,.78);--tab-ink:#5b6678;--glow:#f1f5f8;--paper:#fff;
 --cf-bg:#1a7f37;--cf-win:linear-gradient(135deg,#22a04c,#157030);--cf-ink:#fff;--cf-sub:rgba(255,255,255,.9);--cf-disc:#fff;--cf-tick:#1a7f37;
 --cf-shadow:0 24px 48px -22px rgba(21,112,48,.55),0 2px 6px rgba(15,23,42,.08);--cf-rm-shadow:0 22px 44px -22px rgba(21,112,48,.5),0 2px 6px rgba(15,23,42,.08);--cf-rm-glow:0 0 18px 0 rgba(52,199,89,.35),0 12px 30px -12px rgba(21,112,48,.5);--cf-border:transparent}
:root body{background:radial-gradient(90% 40% at 0% 0%,rgba(15,118,110,.08),transparent 70%) no-repeat,radial-gradient(80% 40% at 100% 10%,rgba(99,102,241,.06),transparent 70%) no-repeat,var(--bg)}
:root h1{font-size:2.15rem;font-weight:700;letter-spacing:-.03em}
:root #home .pagehead h1{font-size:2.5rem}
:root h2,:root h3{font-weight:700;letter-spacing:-.015em}
:root .eyebrow{text-transform:none;letter-spacing:0;color:var(--acc);font-weight:600}
:root .grouplabel{text-transform:none;letter-spacing:-.015em;font-size:1.18rem;font-weight:700;color:var(--txt);margin:30px 6px 14px}
:root .gcount{background:var(--surface);color:var(--txt);box-shadow:var(--sh-card)}
:root .card{border-radius:26px}
:root .btn{font-weight:700}
:root .btn.big{min-height:60px;border-radius:20px}
:root .btn.tonal{background:var(--acc-soft);color:var(--acc-h)}
:root .btn.minor{border:0;background:var(--sunk);color:var(--txt2);border-radius:14px}
:root .btn.minor:hover{background:#e8ecf2}
:root .chip span{background:var(--surface);box-shadow:0 0 0 1px var(--line2)}
:root .chip input:checked+span,:root button.chip[aria-pressed=true] span,:root .actseg input:checked+span,:root .daychip.on,:root .fchip.on{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 8px 18px -10px rgba(13,109,102,.6)}
:root .chip input:checked+span::before{border-color:#fff}
:root .fchip{border:0;background:var(--surface);box-shadow:0 4px 14px -8px rgba(15,23,42,.2)}
:root .lsearch{background:transparent}
:root .sbox input{background:var(--surface);box-shadow:var(--sh-card)}
:root .weekstrip{border-radius:22px;box-shadow:var(--sh-card)}
:root .wkday{border-radius:14px}
:root .stats div,:root .stats .stat{border-radius:22px;box-shadow:var(--sh-card)}
:root .avatar{background:linear-gradient(135deg,#d7efec,#e6e9fb);color:var(--acc-h)}
:root .secno{background:var(--acc-soft);color:var(--acc-h)}
:root .sheet{border-radius:30px 30px 0 0}:root .sheet-wrap.dlg .sheet{border-radius:28px}
:root .moremenu .menu{border-radius:22px}:root .mitem{border-radius:14px}
:root .toast{border-radius:24px}
/* every alert its own floating card */
:root #attn{background:none;box-shadow:none;border:0;overflow:visible;padding:0}
:root #attn .dtbody{display:flex;flex-direction:column;gap:12px}
:root #attn .arow{background:var(--surface);border:0;border-radius:24px;box-shadow:var(--sh-card);padding:18px 18px 16px 24px}
:root .arow::before{top:20px;bottom:20px;width:5px;border-radius:0 6px 6px 0}
:root .attn .attnall{border:0;padding:12px 6px 0}
:root .more{color:var(--acc-h)}
/* the technicians: one card per technician, stacked underneath each other on phones (round 25) */
:root #teamtoday{display:flex;flex-direction:column;gap:14px;margin:0;padding:0 0 8px}
:root #teamtoday>.card{margin:0}
:root .techsec.unassigned{box-shadow:inset 0 4px 0 var(--warn-bar),var(--sh-card)}
:root .techhead{border-bottom-color:var(--line)}

/* status badges (To do, Done, Overdue, Could not service, Unassigned, contract and stock states): a soft pill with room around the text */
:root .tag{padding:4px 12px;border-radius:999px;line-height:1.3;letter-spacing:.01em}
:root .list li .tag{line-height:1.3}
:root .pill,:root .net{padding:4px 12px}
:root .gcount{padding:2px 9px}
/* destructive triggers (Cancel visit, End contract, Remove ...): soft red, never a neutral grey */
:root .btn.minor.danger{background:var(--red-soft);color:var(--red);border:0}
:root .btn.minor.danger:hover{background:#fbdde4;color:var(--red-h)}
:root .mitem.danger{color:var(--red)}
/* secondary actions under the main button: one white card, evenly divided, icon over label on phones, one row on desktop */
:root .actbar{gap:0;padding:0;background:var(--surface);border-radius:22px;box-shadow:var(--sh-card);overflow:hidden}
:root .actbtn{position:relative;background:none;color:var(--txt2);border-radius:0;box-shadow:none;min-height:76px;padding:12px 6px;gap:8px;font-weight:600;font-size:.84rem;letter-spacing:-.005em}
:root .actbtn+.actbtn::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:var(--line2);pointer-events:none}
:root .actbtn .ic{width:22px;height:22px;color:var(--acc)}
:root .actbtn:hover{background:var(--sunk);transform:none}
:root .actbtn:active{background:var(--sunk);transform:none;filter:none}
:root .actbtn.on{background:var(--acc-soft);color:var(--acc-h)}
:root .actbtn:focus-visible{outline:2px solid var(--acc);outline-offset:-4px;border-radius:18px}
:root[dir=rtl] .actbtn+.actbtn::before{left:auto;right:0}
@media (min-width:768px){
 :root .actbar{padding:5px;border-radius:20px;overflow:visible}
 :root .actbtn{flex-direction:row;min-height:50px;padding:0 18px;gap:9px;font-size:.93rem;border-radius:15px}
 :root .actbtn+.actbtn::before{top:15px;bottom:15px;left:-.5px}
 :root[dir=rtl] .actbtn+.actbtn::before{left:auto;right:-.5px}
 :root .actbtn .ic{width:18px;height:18px}
 :root .actbtn+.actbtn:hover::before,:root .actbtn:hover+.actbtn::before,:root .actbtn.on::before,:root .actbtn.on+.actbtn::before{opacity:0}
}
/* the top bar */
:root .topbar{border-bottom-color:transparent;background:var(--top-bg)}
:root .modeseg{width:144px;border-radius:14px}:root .modeseg button{border-radius:12px}
:root #trial{background:var(--surface);border:0;box-shadow:0 2px 8px -2px rgba(15,23,42,.15);color:var(--acc-h)}
:root .toast{top:calc(var(--tbh) + 8px)}
/* the sections on phones and tablets (round 25): a fixed tab bar across the full width of the bottom edge, as in the earlier versions.
   Frosted white, a fine top line, icon over label, the current section in teal. Its padding covers the iPhone home indicator. */
@media (max-width:1023px){
 :root .tabs{top:auto;bottom:0;left:0;right:0;max-width:none;margin:0;padding:4px max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px));gap:2px;border:0;border-top:1px solid var(--line2);border-radius:0;background:rgba(255,255,255,.9);box-shadow:none;backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);z-index:6}
 :root .tabs a{flex:1;flex-direction:column;gap:3px;min-height:54px;padding:4px 2px 2px;border-radius:12px;font-size:.72rem;font-weight:600;color:var(--tab-ink);background:none;box-shadow:none}
 :root .tabs a .ti{width:23px;height:23px}
 :root .tabs a.on{color:var(--acc);background:none;box-shadow:none;font-weight:700}
 :root .tabs a.on .ti{stroke-width:2.2}
 :root .tabs a:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
 :root body.navside:not(.formmode){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
/* job sheet: its sticky Save bar takes the place of the section bar */
:root .savebar{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);border-top:0;box-shadow:0 -10px 30px -18px rgba(15,23,42,.3)}
/* desktop: a floating centred pill at the top */
@media (min-width:1024px){
 :root body.navside:not(.formmode){padding-left:0}
 :root body.navside:not(.formmode) .topbar{justify-content:flex-end;background:var(--top-bg);height:76px;padding:0 28px}
 :root body.navside:not(.formmode) .topbar .brand{position:absolute;left:28px;top:auto;width:auto;height:auto;padding:0;background:none;border:0}
 :root .tabs{top:12px;bottom:auto;left:50%;right:auto;width:auto;max-width:none;transform:translateX(-50%);flex-direction:row;align-items:center;gap:4px;padding:6px;border:0;border-radius:20px;background:rgba(255,255,255,.72);box-shadow:0 12px 30px -16px rgba(15,23,42,.3),0 0 0 1px rgba(15,23,42,.05);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);z-index:7}
 :root .tabs a{flex:none;flex-direction:row;gap:8px;min-height:42px;padding:0 18px;font-size:.92rem;font-weight:600;color:var(--tab-ink);border-radius:14px;justify-content:center}
 :root .tabs a .ti{width:20px;height:20px}
 :root .tabs a:hover{background:rgba(15,23,42,.05)}
 :root .tabs a.on{background:var(--acc);color:#fff;box-shadow:0 8px 18px -12px rgba(13,109,102,.6)}
 :root body.navside:not(.formmode) #view{padding-top:20px}
 :root .wrap,:root body.wide .wrap,:root body.record .wrap{max-width:1200px}
 :root #teamtoday{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));overflow:visible;margin:0;padding:0 0 8px;gap:18px}
 :root #teamtoday>.card{margin:0}
 :root #attn .dtbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 :root .dtable.attn .drow.arow{padding:18px 20px 18px 26px}
 /* right to left */
 :root[dir=rtl] body.navside:not(.formmode){padding-left:0;padding-right:0}
 :root[dir=rtl] .tabs{left:50%;right:auto}
 :root[dir=rtl] body.navside:not(.formmode) .topbar .brand{left:auto;right:28px}
}

/* Insights (round 25): calm number cards, one action each, thin bars only */
:root .insseg{grid-template-columns:repeat(3,1fr);margin:4px 0 6px}
:root .insrange{margin:0 2px 14px}
:root .insgrid{display:grid;gap:14px}
:root .inscard{margin:0;display:flex;flex-direction:column;gap:6px;padding:20px 22px}
:root .insh{margin:0;font-size:.95rem;font-weight:600;color:var(--mut)}
:root .insbig{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;line-height:1.1}
:root .insbig b{font-size:2rem;font-weight:700;color:var(--txt);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
:root .insbig span{color:var(--mut);font-size:.95rem}
:root .insline{margin:0;color:var(--txt2);font-size:.92rem}
:root .insup{color:#157030;font-weight:600}:root .insdown{color:#b42318;font-weight:600}
:root .insbar{display:flex;height:6px;border-radius:3px;background:#eef1f5;overflow:hidden;margin:6px 0 2px}
:root .insbar i{display:block;height:100%}:root .insbar i.ok{background:var(--acc)}:root .insbar i.bad{background:#c2413a}
:root .instwo,:root .insthree{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}:root .insthree{grid-template-columns:repeat(3,1fr)}
:root .inslab{display:block;color:var(--mut);font-size:.85rem;margin-top:2px}
:root .insrh{margin:10px 0 -2px;font-weight:600;font-size:.8rem}
:root .insreasons{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line2)}
:root .insreasons li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:.92rem}
:root .insreasons li>a{display:flex;justify-content:space-between;gap:12px;flex:1;min-height:26px;color:inherit;text-decoration:none}
:root .insreasons li b{font-weight:600;color:var(--txt2);text-align:right;white-space:nowrap}
:root .insload{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
:root .insload li{display:grid;grid-template-columns:minmax(90px,38%) 1fr 2.2em;align-items:center;gap:10px;font-size:.92rem}
:root .insload .insbar{margin:0}:root .insload li b{text-align:right;font-variant-numeric:tabular-nums}
:root .insact{margin-top:auto;width:100%;min-height:48px}
:root .inscard>:nth-last-child(2){margin-bottom:4px}
@media (min-width:1024px){:root .insgrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}:root .insseg{max-width:460px}}