/* SHABAB METRIC PRO 1.5.0 — dashboard styles (Normal / Donut / Speedometer), section icons, section dashboards, POS connection, POS e-invoicing.
   Colours only from the theme tokens (--k1..--k6, --green, --amber, --red, --ink, --mute, --line, --card2), so every theme incl. Glass Light / Night works. */
/* group colour square with the section's own small line icon */
.gsq.gico { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; color: #fff; }
.gsq.gico svg { width: 13px; height: 13px; }
html[data-theme^="glass"] nav.side.pos .sgrp > button .gsq.gico { width: 20px; height: 20px; }
/* every menu entry: the same small icon size */
nav.side.pos .sub a svg { width: 16px; height: 16px; flex: none; opacity: .85; }
/* the 3 style buttons next to the theme dots */
.dsw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.dsw button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--mute); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; min-height: 28px; }
.dsw button svg { width: 15px; height: 15px; }
.dsw button.on { background: var(--accent); color: var(--onAccent, #fff); }
.dsw button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) { .dsw button span { display: none; } .dsw button { padding: 4px 8px; } }
/* Donut + Speedometer tiles */
.kpi2.ds { display: flex; flex-direction: column; gap: 6px; }
.rgw, .ggw { position: relative; display: grid; place-items: center; margin: 2px auto 0; }
.rgw { width: min(120px, 100%); aspect-ratio: 1; }
.ggw { width: min(170px, 100%); display: flex; flex-direction: column; align-items: center; }
.rgw svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ggw svg { display: block; width: 100%; height: auto; aspect-ratio: 120 / 70; overflow: visible; }
.rgw .n, .ggw .n { position: relative; text-align: center; font-weight: 800; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.1; font-variant-numeric: tabular-nums; max-width: 78%; overflow-wrap: anywhere; }
.ggw .n { max-width: 100%; margin-top: 2px; }
.rgw .n small, .ggw .n small { display: block; font-size: 11px; font-weight: 600; color: var(--mute); }
.rg circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.rg .rgt { stroke: var(--line); }
.rg .rga { stroke: var(--k1); }
.rg.ok .rga, .gg.ok .gga { stroke: var(--green); } .rg.mid .rga, .gg.mid .gga { stroke: var(--amber); } .rg.low .rga, .gg.low .gga { stroke: var(--red); }
.rg.t1 .rga, .gg.t1 .gga { stroke: var(--k1); }
.gg path { fill: none; stroke-width: 10; stroke-linecap: round; }
.gg .ggt { stroke: var(--line); }
.gg .ggz { stroke-width: 3; stroke-linecap: butt; opacity: .55; transform: translateY(9px) scale(.86); transform-origin: 60px 62px; }
.gg .z1 { stroke: var(--red); } .gg .z2 { stroke: var(--amber); } .gg .z3 { stroke: var(--green); }
.gg .gnd line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; } .gg .gnd circle { fill: var(--ink); }
.rg.play .rga { animation: rg150 900ms cubic-bezier(.2,.8,.2,1) both; }
.gg.play .gga { animation: rg150 900ms cubic-bezier(.2,.8,.2,1) both; }
.gg.play .gnd { animation: nd150 900ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes rg150 { from { stroke-dasharray: 0 100; } }
@keyframes nd150 { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rg.play .rga, .gg.play .gga, .gg.play .gnd { animation: none; } }
.dsgrid.ds-speed .kpi2.ds .kf, .dsgrid.ds-donut .kpi2.ds .kf { justify-content: center; text-align: center; }
@media (max-width: 420px) { .rgw { width: 96px; } .ggw { width: 132px; } .dtop .kpis2.dsgrid { gap: 8px; } }
/* Settings > Dashboard style */
.dsopts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 8px; }
.dsopt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--card2); }
.dsopt.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.dsopt input { margin-top: 3px; } .dsopt b { display: block; } .dsopt small { display: block; line-height: 1.4; }
.dsi { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--soft); color: var(--accentInk); flex: none; } .dsi svg { width: 20px; height: 20px; }
/* Settings > POS connection */
.pcrow { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; background: var(--card2); }
.pch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pch .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); display: inline-block; } .pch .dot.ok { background: var(--green); }
.pcinfo { display: grid; gap: 4px; font-size: 13px; align-content: start; }
.pcsafe { display: flex; gap: 6px; align-items: center; } .pcsafe svg { width: 16px; height: 16px; flex: none; }
/* section dashboards / report-center card */
.repc150 .replist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.repc150 .replist a { padding: 8px 10px; border-radius: 10px; background: var(--soft); color: var(--ink); text-decoration: none; font-size: 13px; }
.acts150 { gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.help150 { margin: 0 0 10px; }
.notlive { border-inline-start: 4px solid var(--amber); }
.miss150 > div { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.nocust { margin: 8px 0; } .nocust a { font-weight: 700; }
/* 1.5.0: section names (e.g. RESTAURANT POS, or a long POS name) wrap, never cut - in English too */
nav.side.pos .glbl { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; overflow-wrap: anywhere; }