/* =====================================================================================================
   Brevili portal — design system (redesign 26/9/2026, branch portal-redesign).

   Loaded as the FIRST element of <body>, not in <head>: the portal's scripts append ~20 <style> blocks to
   <head> at run time, and a sheet in <body> comes after all of them in tree order, so equal-specificity
   rules here win without !important. A parser-inserted sheet in <body> still blocks the content after it,
   so there is no flash of the old look.

   Two themes: light and dark. <html data-theme="light|dark"> is set before paint by the boot script in
   index.html (the viewer's own choice); with no choice, the device setting decides. Every colour below
   comes from a token, so no component has a colour that only one theme defines.
   ===================================================================================================== */

/* ---- Inter, variable, with Greek (the old files were Latin-only: Greek fell back to each device's font) ---- */
@font-face { font-family: 'Inter var'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/portal/static/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter var'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/portal/static/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter var'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/portal/static/fonts/inter-var-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter var'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/portal/static/fonts/inter-var-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF; }

/* =====================================================================================================
   1. TOKENS
   ===================================================================================================== */
:root {
  --font: 'Inter var', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --r-xs: 6px; --r-s: 8px; --r-m: 10px; --r-l: 14px; --r-xl: 18px;
  --brand: #4da3ff; --brand-dot: #f59e0b;
  --side-w: 248px; --rail-w: 72px; --top-h: 60px;
  --page-max: 1320px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* light palette = the default (a viewer with no stored choice and a light device) */
  color-scheme: light;
  --bg: #e8ecf1;              --bg-rgb: 232 236 241;   /* [LIGHT 27/9] was #f4f6f9: white cards 1.08:1 → 1.19:1 */
  --surface: #ffffff;         --surface-rgb: 255 255 255;
  --surface-2: #f8fafc;       --surface-3: #eef2f6;
  --line: rgba(15, 23, 42, 0.13);  --line-strong: rgba(15, 23, 42, 0.2);   /* [LIGHT 27/9] was .08 / .15 */
  --fg-rgb: 15 23 42;         /* ink for overlays: rgb(var(--fg-rgb) / .08) */
  --text: #0f172a;            --text-2: #283548;   --muted: #4f5d70;   --faint: #647085;   /* [LIGHT 27/9] AA with margin (was 4.4 / 2.6) */
  --accent: #1f6fe5;          --accent-rgb: 31 111 229;  --accent-ink: #ffffff;  --accent-hover: #1a5fc8;
  --accent-soft: rgba(31, 111, 229, 0.09);  --accent-soft-2: rgba(31, 111, 229, 0.16);
  --ok: #116533;   --ok-rgb: 17 101 51;    --ok-soft: rgba(22, 163, 74, 0.13);    /* [LIGHT 27/9] pills 4.4 → 6.2 */
  --warn: #8f4506; --warn-rgb: 143 69 6;   --warn-soft: rgba(217, 119, 6, 0.14);  /* 4.4 → 6.0 */
  --bad: #b0221a;  --bad-rgb: 176 34 26;   --bad-soft: rgba(220, 38, 38, 0.11);   /* 5.0 → 5.7 */
  /* [JUST 2/11] the dashboard cards' own orange (no readings) and yellow (a problem someone justified, Minas 2/11): a true
     orange, so it is never taken for the yellow (the cards' old amber was near it); -ink = text (7.3:1, 8.6:1 on white),
     -num = the yellow card's number (4.9:1), on-yellow = text on a yellow fill (9.6:1); ok-halo = the firmer green frame */
  --c-orange: #ea580c; --c-orange-rgb: 234 88 12; --c-orange-soft: rgba(234, 88, 12, 0.12); --c-orange-ink: #9a3412;
  --c-yellow: #eab308; --c-yellow-rgb: 234 179 8; --c-yellow-soft: rgba(234, 179, 8, 0.20); --c-yellow-ink: #713f12;
  --c-yellow-num: #a16207; --c-on-yellow: #1c1400; --c-ok-halo: rgba(22, 163, 74, 0.22);
  --on-bad: #ffffff;   /* [MESSAGES 27/9] text ON a red fill: white here, near-black on the dark theme's light red (white was 2.8:1 there) */
  --info: #1d4ed8; --info-soft: rgba(37, 99, 235, 0.09);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.05);   /* [LIGHT 27/9] cards have an edge */
  --shadow-2: 0 1px 2px rgba(15, 23, 42, 0.07), 0 8px 24px rgba(15, 23, 42, 0.09);
  --shadow-3: 0 16px 48px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
  --glass: rgba(232, 236, 241, 0.85);
  --scrim: rgba(15, 23, 42, 0.32);
  --m-temp: #ea580c; --m-temp-soft: rgba(234, 88, 12, 0.10);
  --m-hum: #0284c7;  --m-hum-soft: rgba(2, 132, 199, 0.10);
  --card: var(--surface);     /* legacy names used by styles.css */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0f15;            --bg-rgb: 11 15 21;
    --surface: #121821;       --surface-rgb: 18 24 33;
    --surface-2: #161d28;     --surface-3: #1c2431;
    --line: rgba(148, 163, 184, 0.12);  --line-strong: rgba(148, 163, 184, 0.22);
    --fg-rgb: 255 255 255;
    --text: #e6ecf3;          --text-2: #b8c3d1;   --muted: #8a97a8;   --faint: #7a889b;   /* [LIGHT 27/9] was #5d6b7d: small labels 3.3 → 4.9 */
    --accent: #4da3ff;        --accent-rgb: 77 163 255;  --accent-ink: #04121f;  --accent-hover: #6cb4ff;
    --accent-soft: rgba(77, 163, 255, 0.12);  --accent-soft-2: rgba(77, 163, 255, 0.2);
    --ok: #34d399;   --ok-rgb: 52 211 153;   --ok-soft: rgba(52, 211, 153, 0.12);
    --warn: #fbbf24; --warn-rgb: 251 191 36; --warn-soft: rgba(251, 191, 36, 0.12);
    --bad: #f87171;  --bad-rgb: 248 113 113; --bad-soft: rgba(248, 113, 113, 0.12);
    --c-orange: #fb923c; --c-orange-rgb: 251 146 60; --c-orange-soft: rgba(251, 146, 60, 0.14); --c-orange-ink: #fb923c;   /* [JUST 2/11] */
    --c-yellow: #facc15; --c-yellow-rgb: 250 204 21; --c-yellow-soft: rgba(250, 204, 21, 0.14); --c-yellow-ink: #facc15;
    --c-yellow-num: #facc15; --c-on-yellow: #1c1400; --c-ok-halo: rgba(52, 211, 153, 0.22);
    --on-bad: #1d0808;
    --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.12);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.25);
    --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
    --glass: rgba(11, 15, 21, 0.78);
    --scrim: rgba(0, 0, 0, 0.55);
    --m-temp: #fb923c; --m-temp-soft: rgba(251, 146, 60, 0.14);
    --m-hum: #38bdf8;  --m-hum-soft: rgba(56, 189, 248, 0.14);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f15;            --bg-rgb: 11 15 21;
  --surface: #121821;       --surface-rgb: 18 24 33;
  --surface-2: #161d28;     --surface-3: #1c2431;
  --line: rgba(148, 163, 184, 0.12);  --line-strong: rgba(148, 163, 184, 0.22);
  --fg-rgb: 255 255 255;
  --text: #e6ecf3;          --text-2: #b8c3d1;   --muted: #8a97a8;   --faint: #7a889b;   /* [LIGHT 27/9] was #5d6b7d: small labels 3.3 → 4.9 */
  --accent: #4da3ff;        --accent-rgb: 77 163 255;  --accent-ink: #04121f;  --accent-hover: #6cb4ff;
  --accent-soft: rgba(77, 163, 255, 0.12);  --accent-soft-2: rgba(77, 163, 255, 0.2);
  --ok: #34d399;   --ok-rgb: 52 211 153;   --ok-soft: rgba(52, 211, 153, 0.12);
  --warn: #fbbf24; --warn-rgb: 251 191 36; --warn-soft: rgba(251, 191, 36, 0.12);
  --bad: #f87171;  --bad-rgb: 248 113 113; --bad-soft: rgba(248, 113, 113, 0.12);
  --c-orange: #fb923c; --c-orange-rgb: 251 146 60; --c-orange-soft: rgba(251, 146, 60, 0.14); --c-orange-ink: #fb923c;   /* [JUST 2/11] */
  --c-yellow: #facc15; --c-yellow-rgb: 250 204 21; --c-yellow-soft: rgba(250, 204, 21, 0.14); --c-yellow-ink: #facc15;
  --c-yellow-num: #facc15; --c-on-yellow: #1c1400; --c-ok-halo: rgba(52, 211, 153, 0.22);
  --on-bad: #1d0808;
  --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.12);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.25);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
  --glass: rgba(11, 15, 21, 0.78);
  --scrim: rgba(0, 0, 0, 0.55);
  --m-temp: #fb923c; --m-temp-soft: rgba(251, 146, 60, 0.14);
  --m-hum: #38bdf8;  --m-hum-soft: rgba(56, 189, 248, 0.14);
}

/* =====================================================================================================
   2. BASE
   ===================================================================================================== */
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: var(--font);
  font-size: 14px; line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01';   /* Inter: single-storey a, open digits: calmer text */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--accent-soft-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.012em; text-wrap: balance; }
h3 { font-size: 16px; font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }
.muted { color: var(--muted) !important; }
.hint { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.hint.err, .err { color: var(--bad); }
.tiny { font-size: 12px; }
code, .mono, pre { font-family: var(--mono); font-size: 12.5px; }
code { background: var(--surface-3); border-radius: 5px; padding: 1px 5px; color: var(--text-2); }
hr { border: 0; border-top: 1px solid var(--line); }
:focus-visible { outline: 2px solid rgb(var(--accent-rgb) / 0.55); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--fg-rgb) / 0.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--fg-rgb) / 0.16); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
/* numbers line up: temperatures, counts, times */
td, .num, .dashMeta, .dashValueNum, [class*="Value"], [class*="value"], [class*="stat"], .tag, .badge, .pill { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* =====================================================================================================
   3. SHELL — sidebar, header, content
   Desktop ≥1101px: fixed sidebar (248). 641–1100px: an icon rail (72). ≤640px: phone (header + bottom bar).
   ===================================================================================================== */

/* the brand block, built by redesign.js (inline SVG mark + real text, so it follows the theme) */
.rdBrand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.rdBrand svg { width: 30px; height: 30px; flex: 0 0 30px; }
.rdBrandText { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.rdBrandName { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.rdBrandSub { font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--brand); margin-top: 3px; white-space: nowrap; }

/* the legacy brand block (a light-text SVG + the old subtitle) is replaced by .rdBrand everywhere */
.topbar > .brand { display: none !important; }

/* ---- sidebar ---- */
.layout { display: block; gap: 0; }
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
  width: var(--side-w); flex: none;
  display: flex; flex-direction: column;
  padding: 18px 14px 14px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
}
.sidebar > .rdBrand { padding: 2px 8px 22px; }
.sidebar .nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.sidebar .navbtn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; height: 38px; margin: 0; padding: 0 12px;
  border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text-2);
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em; text-align: left;
  box-shadow: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar .navbtn:hover { background: var(--surface-3); color: var(--text); filter: none; }
.sidebar .navbtn.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
  border: 0; box-shadow: none;
}
.sidebar .navbtn::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 0; margin: 0;
  background-color: currentColor; opacity: 0.9;
  -webkit-mask: var(--nav-ico) no-repeat center / contain; mask: var(--nav-ico) no-repeat center / contain;
}
/* one consistent outline icon set (1.8 stroke) */
#btn_dashboard { order: 1; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1.6'/><rect x='14' y='3' width='7' height='5' rx='1.6'/><rect x='14' y='12' width='7' height='9' rx='1.6'/><rect x='3' y='16' width='7' height='5' rx='1.6'/></svg>"); }
#btn_latest { order: 2; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='m7 15 4-4 3 3 5-6'/></svg>"); }
#btn_alerts { order: 3; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>"); }
#btn_devices { order: 4; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='5' width='14' height='14' rx='2.5'/><rect x='9.5' y='9.5' width='5' height='5' rx='1'/><path d='M9 2v3M15 2v3M9 19v3M15 19v3M19 9h3M19 15h3M2 9h3M2 15h3'/></svg>"); }
.rdNavGroup { order: 10; }
#btn_users_access { order: 11; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
#btn_telemetry_tools { order: 12; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/></svg>"); }
#btn_account_drawer { order: 13; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.5'/><circle cx='12' cy='10' r='3'/><path d='M6.8 18.6a6 6 0 0 1 10.4 0'/></svg>"); }
#btn_company_drawer { order: 14; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2.5' width='16' height='19' rx='2'/><path d='M9 21.5v-4h6v4M8.5 7h.01M12 7h.01M15.5 7h.01M8.5 11h.01M12 11h.01M15.5 11h.01M8.5 15h.01M12 15h.01M15.5 15h.01'/></svg>"); }
#btn_auth { order: 20; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><path d='m10 17 5-5-5-5'/><path d='M15 12H3'/></svg>"); }
.rdNavGroup {
  padding: 18px 12px 6px; margin: 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--faint);
  white-space: nowrap; overflow: hidden;
}
/* desktop: the sidebar is the navigation, so the Account entry (a mobile drawer item) is not duplicated */
@media (min-width: 641px) { #btn_account_drawer, #btn_company_drawer { display: none !important; } }

/* sidebar foot: the viewer (avatar, name, role) — opens the same menu as the header avatar */
.rdSideFoot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.rdSideUser {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left;
}
.rdSideUser:hover { background: var(--surface-3); }
.rdSideUserText { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rdSideUserName { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdSideUserRole { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdCollapse {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.rdCollapse:hover { background: var(--surface-3); color: var(--text); }
.rdCollapse svg { width: 18px; height: 18px; flex: 0 0 18px; transition: transform .2s var(--ease); }
.navCollapsed .rdCollapse svg { transform: rotate(180deg); }

/* avatar (initials) */
.rdAvatar {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.9), rgb(var(--accent-rgb) / 0.62));
  color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
}

/* ---- header (the old .topbar, restyled) ---- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: nowrap;
  height: var(--top-h); margin-left: var(--side-w); padding: 0 32px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .topnav { display: none; min-width: 0; }     /* icon tabs duplicated the sidebar */
.topbar .topright { display: none !important; }      /* its buttons live in the user menu now (redesign.js) */
.rdTopLeft { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.rdTopLeft > .rdBrand { display: none; }
.rdCrumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--muted); }
.rdCrumb b { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdCrumbSep { color: var(--faint); }
.rdTopRight { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.rdIconBtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); cursor: pointer;
}
.rdIconBtn:hover { background: var(--surface-3); color: var(--text); }
.rdIconBtn svg { width: 19px; height: 19px; }
.rdIconBtn .rdCount {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--bad); color: var(--on-bad); border: 2px solid var(--bg);
  font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; font-variant-numeric: tabular-nums;
}
.rdAvatarBtn { display: inline-flex; align-items: center; gap: 8px; padding: 2px; margin-left: 4px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.rdAvatarBtn:hover .rdAvatar { box-shadow: 0 0 0 3px var(--accent-soft-2); }
.rdLive { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rdLive i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.rdLive.is-on i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

/* ---- content ---- */
.main { flex: none; min-width: 0; margin-left: var(--side-w); padding: 28px 40px 88px; }
.main > .tab, .main > #banner, .main > #wizard { max-width: var(--page-max); margin-left: auto; margin-right: auto; }
.tab { max-width: none; }

/* page title: every tab opens with an <h2> and a muted lead line */
.tab > h2:first-child, .tab h2.rdPageTitle, .gate127-alerts-header h2, .telemetry-latest-head h2 {
  margin: 0 0 6px; font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: -0.024em; color: var(--text);
}
.tab > h2:first-child + .muted, .tab > h2:first-child + div.muted, .gate127-alerts-header h2 + .muted, .telemetry-latest-head h2 + .muted {
  font-size: 14.5px; color: var(--muted) !important; max-width: 72ch; margin: 0 0 22px;
}

/* rail: 641–1100px, or a desktop viewer who collapsed the sidebar */
@media (min-width: 641px) and (max-width: 1100px) {
  :root { --side-w: var(--rail-w); }
}
/* [NAV-PHONE 27/9] The collapsed rail is a DESKTOP preference. It is kept in localStorage and set in
   app_core.js by width-blind code, so a phone that once saw it (rotated to landscape, the menu button
   there collapses) opened its drawer as bare icons — with no arrow, because the phone hides it (Minas's
   screenshot). Below 641px it no longer applies: the drawer always shows the names. */
@media (min-width: 641px) {
  .navCollapsed { --side-w: var(--rail-w); }
  .navCollapsed .sidebar, .sidebar { transition: width .2s var(--ease); }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .sidebar { padding: 18px 10px 12px; align-items: center; }
  .sidebar > .rdBrand .rdBrandText, .rdNavGroup, .rdSideUserText, .rdCollapse span { display: none; }
  .sidebar > .rdBrand { padding: 2px 0 22px; }
  .sidebar .nav { align-items: center; }
  .sidebar .navbtn { width: 44px; height: 42px; padding: 0; justify-content: center; font-size: 0; }
  .sidebar .navbtn::before { width: 20px; height: 20px; flex-basis: 20px; }
  .rdSideUser { width: 44px; padding: 5px; justify-content: center; border: 0; background: transparent; }
  /* [NAV-TABLET 27/9] was display:none — a tablet or a phone on its side had bare icons and no way to the names */
  .rdCollapse { width: 44px; padding: 0; justify-content: center; }
  .rdCollapse svg { transform: rotate(180deg); }
}
@media (min-width: 641px) {
  body.navCollapsed .sidebar { padding: 18px 10px 12px; align-items: center; width: var(--rail-w); }
  body.navCollapsed .sidebar > .rdBrand .rdBrandText, body.navCollapsed .rdNavGroup, body.navCollapsed .rdSideUserText, body.navCollapsed .rdCollapse span { display: none; }
  body.navCollapsed .sidebar > .rdBrand { padding: 2px 0 22px; }
  body.navCollapsed .sidebar .nav { align-items: center; }
  body.navCollapsed .sidebar .navbtn { width: 44px; height: 42px; padding: 0; justify-content: center; font-size: 0; }
  body.navCollapsed .sidebar .navbtn::before { width: 20px; height: 20px; flex-basis: 20px; }
  body.navCollapsed .rdSideUser { width: 44px; padding: 5px; justify-content: center; border: 0; background: transparent; }
  body.navCollapsed .rdCollapse { width: 44px; padding: 0; justify-content: center; }
}

@media (max-width: 1100px) and (min-width: 641px) { .main { padding: 24px 28px 80px; } }

/* =====================================================================================================
   4. COMPONENTS
   ===================================================================================================== */

/* ---- cards ---- */
.card {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 20px 22px; box-shadow: var(--shadow-1);
}
.card .card { box-shadow: none; background: var(--surface-2); border-radius: var(--r-m); padding: 14px 16px; }
details.card > summary, .card details > summary { cursor: pointer; }
.card > .muted:first-child, .card > div > .muted:first-child { font-size: 13px; }

/* ---- buttons: .btn = tonal action, .primary = the one main action, .btn-secondary = neutral ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--r-m);
  border: 1px solid transparent; background: var(--accent-soft); color: var(--accent);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  cursor: pointer; box-shadow: none; text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { background: var(--accent-soft-2); filter: none; }
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.primary, .btn.btn-primary, button.primary {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 1px 2px rgb(var(--accent-rgb) / 0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn.primary:hover, .btn.btn-primary:hover { background: var(--accent-hover); }
.btn.btn-secondary, .btn-secondary {
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1);
}
.btn.btn-secondary:hover, .btn-secondary:hover { background: var(--surface-2); border-color: rgb(var(--fg-rgb) / 0.22); }
.btn.btn-secondary.is-active, .btn-secondary[aria-pressed="true"] { background: var(--surface-3); border-color: rgb(var(--fg-rgb) / 0.22); }
.btn.tiny, .btn.small { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-s); }
.btn-danger-outline, .btn.btn-danger-outline, .btn.danger, .btn.is-danger {
  background: transparent; color: var(--bad); border: 1px solid rgb(var(--bad-rgb) / 0.35); box-shadow: none;
}
.btn-danger-outline:hover, .btn.danger:hover { background: var(--bad-soft); border-color: rgb(var(--bad-rgb) / 0.5); }
.iconbtn { border-radius: var(--r-m); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); }
.iconbtn:hover { background: var(--surface-3); filter: none; }

/* ---- forms ---- */
.input, .select, textarea.input,
.tab input[type="text"], .tab input[type="email"], .tab input[type="password"], .tab input[type="number"],
.tab input[type="search"], .tab input[type="tel"], .tab input[type="url"], .tab input[type="date"], .tab input[type="time"],
.tab input[type="datetime-local"], .tab select, .tab textarea {
  min-height: 38px; padding: 8px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
  font-size: 14px; line-height: 1.35; outline: none; box-shadow: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tab textarea, textarea.input { min-height: 96px; }
.input::placeholder, .tab input::placeholder, .tab textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .tab select:hover, .tab input:hover:not(:focus) { border-color: rgb(var(--fg-rgb) / 0.24); }
.input:focus, .select:focus, .tab input:focus, .tab select:focus, .tab textarea:focus {
  border-color: rgb(var(--accent-rgb) / 0.7); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.14);
}
.select, .tab select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px;
}
.tab select[multiple] { background-image: none; padding-right: 12px; }
.tab input[type="checkbox"], .tab input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }
label.muted, .form > label, .dashCtlLabel { font-size: 12.5px; font-weight: 500; color: var(--text-2) !important; }
.form { display: flex; flex-direction: column; gap: 6px; }

/* ---- tags, pills, badges ---- */
.tag, .badge, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: 0;
}
.tag.ok, .badge.ok, .pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tag.warn, .badge.warn, .pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.err, .badge.err, .pill.err, .tag.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.tag.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.tag.muted { opacity: 1; color: var(--muted) !important; }

/* ---- banner (the page's status line) ---- */
#banner:empty, .banner:empty { display: none; }
.banner { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; box-shadow: var(--shadow-1); }
.banner.ok { border-color: rgb(var(--ok-rgb) / 0.3); background: var(--ok-soft); color: var(--ok); }
.banner.err { border-color: rgb(var(--bad-rgb) / 0.3); background: var(--bad-soft); color: var(--bad); }

/* ---- tables ---- */
.table, .tbl, .tab table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; margin-top: 0;
}
.table th, .tbl th, .tab table th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 14px; text-align: left; vertical-align: middle;
  background: var(--surface-2); color: var(--muted);
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td, .tbl td, .tab table td {
  padding: 12px 14px; vertical-align: middle; color: var(--text);
  border-bottom: 1px solid var(--line); background: transparent;
}
.table tbody tr:last-child td, .tbl tbody tr:last-child td, .tab table tbody tr:last-child td { border-bottom: 0; }
.table tr:hover td, .tbl tr:hover td { background: rgb(var(--fg-rgb) / 0.02); cursor: default; }
/* a table inside a card runs edge to edge */
.rdTableCard { padding: 0 !important; overflow: hidden; }
.rdTableScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- details / summary ---- */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details > summary { display: flex; align-items: center; gap: 8px; }
details > summary::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px; background-color: currentColor; opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>") no-repeat center / contain;
  transition: transform .15s var(--ease);
}
details[open] > summary::before { transform: rotate(90deg); }

/* ---- menus / popovers (redesign.js) ---- */
.rdMenu {
  position: fixed; z-index: 3000; min-width: 260px; max-width: calc(100vw - 24px);
  padding: 6px; border-radius: var(--r-l);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(-4px) scale(0.985); transform-origin: top right; pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;   /* [MENU-FIT 25/10] a menu taller than its room scrolls (redesign.js menuPlace) */
}
.rdMenu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.rdMenuHead { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.rdMenuHead .rdAvatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 14px; }
.rdMenuHeadText { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rdMenuHeadText b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdMenuHeadText span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [MENU-CLOSE 3/11] a menu's ✕ (redesign.js menuAddX): on a phone, a menu taller than half the window covers its own
   button, so it gets a ✕ in its first line (the account's name, a label, or a line of its own), and that line stays at
   the top while the menu scrolls: the ✕ is always in reach. */
.rdMenuX { display: none; }
@media (max-width: 640px) {
  .rdMenu.has-x .rdMenuX { display: inline-flex; flex: 0 0 auto; margin-left: auto; }
  .rdMenu.has-x > :first-child { position: sticky; top: -6px; z-index: 1; background: var(--surface); }
  .rdMenu.has-x > .rdMenuHead .rdMenuX { margin: -6px -6px 0 auto; align-self: flex-start; }
  .rdMenu.has-x > .rdMenuLabel { display: flex; align-items: center; gap: 8px; padding-top: 2px; padding-bottom: 2px; padding-right: 0; }
  .rdMenu.has-x > .rdMenuXRow { display: flex; }
}
.rdMenuItem {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 10px;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--text); font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.rdMenuItem:hover, .rdMenuItem:focus-visible { background: var(--surface-3); outline: none; }
.rdMenuItem svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--muted); }
.rdMenuItem.is-danger, .rdMenuItem.is-danger svg { color: var(--bad); }
.rdMenuSep { height: 1px; background: var(--line); margin: 6px 4px; }
.rdMenuLabel { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rdSeg { display: flex; gap: 2px; padding: 3px; margin: 0 6px 6px; border-radius: var(--r-m); background: var(--surface-3); }
.rdSeg button {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.rdSeg button svg { width: 15px; height: 15px; }
.rdSeg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

/* ---- the prefs popover (timezone, unit, clock, sound, push, language), opened from the user menu ----
   Its controls sit in one row of loose inline wrappers; a two-column grid (label | control) with the wrappers
   set to display:contents turns it into a settings list without touching the script that owns it. */
#portalPrefsPopover {
  top: calc(var(--top-h) + 6px) !important; right: 24px !important; left: auto !important;
  width: min(520px, calc(100vw - 24px)) !important; min-width: 0 !important; max-width: none !important;
  padding: 18px 20px 20px !important; border-radius: var(--r-l) !important;
  background: var(--surface) !important; border: 1px solid var(--line-strong) !important; box-shadow: var(--shadow-3) !important;
}
#portalPrefsPopover .prefsTitle { display: flex !important; align-items: center; justify-content: space-between; font-size: 15px !important; font-weight: 600; opacity: 1 !important; margin: 0 0 16px !important; color: var(--text); }
#portalPrefsPopover .prefsTitle .x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px !important; background: var(--surface-3) !important; border: 0 !important; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 !important; }
#portalPrefsPopover #portalPrefsRow {
  display: grid !important; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 12px 14px !important; align-items: center;
  margin: 0 !important; font-size: 13px; color: var(--text-2);
}
#portalPrefsPopover #portalPrefsRow > span[style], #portalPrefsPopover #portalClockWrap, #portalPrefsPopover #gate284AudioCtl, #portalPrefsPopover #gate285PushCtl { display: contents !important; }
#portalPrefsPopover #portalPrefsRow .muted, #portalPrefsPopover #portalPrefsRow > span[style] > span:first-child,
#portalPrefsPopover #gate284AudioCtl > span:first-child, #portalPrefsPopover #gate285PushCtl > span:first-child {
  grid-column: 1; font-size: 13px !important; color: var(--text-2) !important; opacity: 1 !important; font-weight: 500; margin: 0 !important;
}
#portalPrefsPopover #portalPrefsRow #portalPrefsAdminNote { grid-column: 1 / -1; font-size: 12px !important; color: var(--muted) !important; margin: -4px 0 0 !important; }   /* [B6] the whole row */
#portalPrefsPopover #portalPrefsRow select { -webkit-appearance: none; appearance: none; background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center / 16px 16px !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-m) !important; color: var(--text) !important; grid-column: 2; width: 100% !important; max-width: none !important; font-size: 13px !important; min-height: 36px; padding: 6px 34px 6px 10px !important; margin: 0 !important; }
#portalPrefsPopover #portalPrefsRow button { grid-column: 2; justify-self: start; }
#portalPrefsPopover #portalPrefsRow .tz-status, #portalPrefsPopover #portalTempUnitStatus, #portalPrefsPopover #gate285PushStatus { grid-column: 2; justify-self: start; margin: -6px 0 0 !important; }
#portalPrefsPopover #portalPrefsRow .tz-status:empty, #portalPrefsPopover #portalTempUnitStatus:empty, #portalPrefsPopover #gate285PushStatus:empty { display: none !important; }
#portalPrefsPopover #portalPrefsRow > span#portalRoleTag { display: none !important; }
/* [PREFS-SPLIT 17/10] Minas: «Ώρα & γλώσσα» opened «Προτιμήσεις» with the alarm sound and push in it too. The popover now
   opens in one of two modes (redesign.js openPrefs): «time» — zone, unit, clock, language, the note last; «sound» — the
   alarm sound and push of this phone or computer, and the line that says so. With no mode (an older path) all rows show. */
/* through #portalPrefsRow: the row's «> span[style] { display: contents !important }» is more specific than #id alone */
#portalPrefsPopover[data-rd-prefs="time"] #portalPrefsRow > #gate284AudioCtl, #portalPrefsPopover[data-rd-prefs="time"] #portalPrefsRow > #gate285PushCtl,
#portalPrefsPopover[data-rd-prefs="time"] #portalPrefsRow > #rdPrefsDeviceHint { display: none !important; }
#portalPrefsPopover[data-rd-prefs="sound"] #portalPrefsRow > :not(#gate284AudioCtl):not(#gate285PushCtl):not(#rdPrefsDeviceHint) { display: none !important; }
#portalPrefsPopover #portalLocaleLabel, #portalPrefsPopover #portalLocale, #portalPrefsPopover #portalLocaleDefault, #portalPrefsPopover #portalLocaleStatus { order: 1; }
/* the note was «display: contents» (it carries a style, so the row's span[style] rule took it): squeezed into the label column */
#portalPrefsPopover #portalPrefsRow #portalPrefsAdminNote { display: block !important; order: 2; }
#portalPrefsPopover #gate284AudioCtl > *, #portalPrefsPopover #gate285PushCtl > * { order: 3; }
#portalPrefsPopover #rdPrefsDeviceHint { order: 4; grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin: 2px 0 0; }
#portalPrefsPopover #gate284AudioToggle, #portalPrefsPopover #gate285PushToggle {
  height: 30px; padding: 0 12px !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 600;
  background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important;
}
#portalPrefsPopover #gate284AudioMode { grid-column: 2; }
#portalPrefsPopover #portalHourFormatDefault, #portalPrefsPopover #portalLocaleDefault {
  grid-column: 2; justify-self: start; height: 28px; margin-top: -6px !important;
  background: transparent !important; color: var(--accent) !important; border: 0 !important; padding: 0 !important; font-size: 12.5px !important; font-weight: 500 !important;
}
@media (max-width: 640px) {
  #portalPrefsPopover #portalPrefsRow { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  #portalPrefsPopover #portalPrefsRow * { grid-column: 1 / -1 !important; }
  #portalPrefsPopover #portalPrefsRow .muted, #portalPrefsPopover #portalPrefsRow > span[style] > span:first-child, #portalPrefsPopover #gate284AudioCtl > span:first-child, #portalPrefsPopover #gate285PushCtl > span:first-child { margin-top: 10px !important; }
  #portalPrefsPopover #portalHourFormatDefault, #portalPrefsPopover #portalLocaleDefault { margin-top: 0 !important; height: 36px; }
}
#btnPortalPrefsGear { display: none !important; }

/* ---- modal / drawer surfaces the scripts build ---- */
[class*="modal"][class*="backdrop"], [class*="Backdrop"], .modalBackdrop, .gate2cNavDrawerBackdrop { background: var(--scrim) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* =====================================================================================================
   5. PHONE ≤640px — slim header, bottom tab bar, drawer
   ===================================================================================================== */
@media (max-width: 640px) {
  :root { --top-h: 56px; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 320px);
    display: flex !important; transform: translateX(-102%); transition: transform .22s var(--ease);
    box-shadow: var(--shadow-3); z-index: 5000; padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  body.navDrawerOpen .sidebar { transform: none; }
  .sidebar .navbtn { height: 44px; font-size: 15px; }
  #btn_account_drawer, #btn_company_drawer { display: flex; }
  .rdCollapse { display: none; }
  .topbar {
    margin-left: 0; height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0 16px;
    gap: 8px; flex-wrap: nowrap !important;
  }
  .rdTopLeft > .rdBrand { display: flex; }
  .rdTopLeft > .rdBrand .rdBrandSub { display: none; }
  .rdTopLeft > .rdBrand svg { width: 26px; height: 26px; flex-basis: 26px; }
  .rdTopLeft > .rdBrand .rdBrandName { font-size: 17px; }
  .rdCrumb { display: none; }
  /* [NEWBIZ] two or more businesses: the business open now replaces the word «Brevili» next to the logo */
  body.rd-multi-biz .rdCrumb { display: flex; }
  body.rd-multi-biz .rdCrumb > span { display: none; }
  body.rd-multi-biz .rdCrumb b { font-size: 15.5px; }
  body.rd-multi-biz .rdTopLeft > .rdBrand .rdBrandText { display: none; }
  .rdLive { display: none; }
  .main { margin-left: 0; padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .tab > h2:first-child, .tab h2.rdPageTitle, .gate127-alerts-header h2, .telemetry-latest-head h2 { font-size: 23px; }
  .tab > h2:first-child + .muted, .tab > h2:first-child + div.muted { font-size: 14px; margin-bottom: 16px; }
  .card { padding: 16px; border-radius: var(--r-l); }
  .rdMenu { left: 12px !important; right: 12px !important; min-width: 0; }
  #portalPrefsPopover { left: 12px !important; right: 12px !important; min-width: 0 !important; }

  /* bottom tab bar (built by app_core.js as #gate2cBottomNav; items re-labelled by redesign.js) */
  #gate2cBottomNav.gate2cBottomNav {
    display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4000;
    height: auto; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--glass); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
    border-top: 1px solid var(--line); box-shadow: none; gap: 0; justify-content: space-around;
  }
  #gate2cBottomNav.gate2cBottomNav button {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 52px; min-width: 0; padding: 0 2px; border: 0; border-radius: 12px; background: transparent;
    color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.1;
  }
  #gate2cBottomNav.gate2cBottomNav button svg { width: 22px; height: 22px; flex: 0 0 22px; }
  #gate2cBottomNav.gate2cBottomNav button.active { color: var(--accent); font-weight: 600; }
  #gate2cBottomNav.gate2cBottomNav button:active { background: var(--surface-3); }
  #gate2cBottomNav.gate2cBottomNav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 641px) { #gate2cBottomNav { display: none !important; } }

/* the drawer's own header/footer (scripts move #me, the badge and the prefs row into them on open) */
#gate2cDrawerHeader, #gate2cDrawerFooter { border-color: var(--line) !important; background: transparent !important; }
#gate2cDrawerFooter { margin-top: auto; padding-top: 12px; }
#gate2cDrawerFooter .btn { width: 100%; }
@media (min-width: 641px) { #gate2cDrawerHeader, #gate2cDrawerFooter { display: none !important; } }

/* =====================================================================================================
   6. PAGES
   ===================================================================================================== */

/* ---------- 6.1 Overview (dashboard) ---------- */
#tab_dashboard .dashLead { display: none !important; }                          /* replaced by .rdLead */
.rdPageHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.rdPageHead h2 { margin: 0 0 6px !important; font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: -0.024em; }
@media (max-width: 640px) { .rdPageHead h2 { font-size: 23px; } }
.rdLead { font-size: 14.5px; color: var(--muted); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* [UX 27/9] what needs attention (chips), then the facts; a separator belongs to the fact after it, so a wrapped
   line never ends with one */
.rdLeadStatus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.rdLeadFacts { display: flex; flex-wrap: wrap; align-items: center; }
.rdLeadFacts > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--faint); vertical-align: middle; margin: 0 9px 2px; }
/* [MAINS] a 220 V device running on its battery: its 220 V is gone */
#dashSBPower[data-kind="nomains"] { color: var(--bad); }
/* [MAINS] right after a device is added: how is it powered? */
.rdAskPower { margin: 0 0 16px; padding: 16px 18px; }
.rdAskPower h3 { margin: 0 0 6px; font-size: 16px; }
.rdAskPower p { margin: 0 0 12px; }
.rdAskPowerBtns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .rdAskPowerBtns .btn { flex: 1 1 100%; } }
.rdAskPowerBtns .rdHelpInline { align-self: center; }
/* [UX 27/9] the node's strip: a pill that does not fit goes under the value instead of running off a phone */
#dashStatusBar .dsItem { flex-wrap: wrap; row-gap: 6px; }
.rdLead .rdDot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.rdLead .rdOk { color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.rdLead .rdOk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.rdLead .rdBad { color: var(--bad); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.rdLead .rdBad::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.rdLead .rdBad.rdJust { color: var(--c-yellow-ink); }   /* [JUST 2/11] «N με αιτιολόγηση»: the yellow of the justified cards */
.rdLead .rdBad.rdJust::before { background: var(--c-yellow); box-shadow: 0 0 0 3px var(--c-yellow-soft); }

/* the filter card becomes a toolbar */
#tab_dashboard #dashFilterPanel.card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 18px !important; }
#tab_dashboard .dashToolbarGrid { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; flex-wrap: wrap; }
#tab_dashboard .dashGroup { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; }
#tab_dashboard .dashGroupFilters { flex: 0 1 auto !important; width: auto !important; max-width: 100%; display: flex !important; grid-template-columns: none !important; gap: 8px; }
#tab_dashboard .dashField { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
#tab_dashboard .dashField { display: flex; flex-direction: column; margin: 0; }
#tab_dashboard .dashCtlLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#tab_dashboard .dashSelect { min-width: 200px; width: auto; max-width: 280px !important; min-height: 36px; font-size: 13.5px; }
#tab_dashboard .dashGroupRefresh, #tab_dashboard #dashAutoHint, #tab_dashboard .dashHintLine { display: none !important; }
#tab_dashboard .dashGroupActions { gap: 8px; margin-left: auto !important; flex: 0 0 auto !important; width: auto !important; }
#tab_dashboard .dashCustomizeBtn { margin-left: 0 !important; }
/* [RAW 27/9] «Ακατέργαστα» is back (Minas: «σημείο διακριτικό»): small and muted, before «Προσαρμογή…»; ticked, it shows
   the node's newest frame exactly as it arrived (how 27/9's «1=-…6=-» was seen) */
#tab_dashboard .dashToggleRaw { display: inline-flex !important; align-items: center; gap: 5px; margin: 0 4px 0 0 !important; font-size: 12.5px; color: var(--muted) !important; cursor: pointer; user-select: none; white-space: nowrap; }
#tab_dashboard .dashToggleRaw input { width: 13px; height: 13px; margin: 0; accent-color: var(--muted); }
#tab_dashboard .dashRefreshBtn, #tab_dashboard .dashCustomizeBtn { height: 36px !important; min-height: 0 !important; padding: 0 14px !important; font-size: 13.5px !important; border-radius: var(--r-m) !important; }
/* the red "No recent data" judged the whole tenant by a 60 s rule and flickered on healthy sites; the header
   shows the live link, each card shows its own age, the health panel shows offline devices */
#tab_dashboard #dashStatus, #tab_dashboard .dashLivePill { display: none !important; }

/* health + alerts: two calm panels side by side */
.rdDashStatus { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; }
.rdDashStatus > .card { margin: 0 !important; padding: 16px 18px; }
@media (max-width: 1100px) { .rdDashStatus { grid-template-columns: 1fr; } }
.dashOperationalTitle, .dashAlertsTitle {
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important;
}
.dashOperationalSub, .dashAlertsSub { font-size: 13px !important; color: var(--muted) !important; margin-top: 2px; }
.dashOperationalTop, .dashAlertsTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dashOperationalPills, .dashAlertsPills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; width: 100%; }
.dashOperationalChip.is-empty, .dashAlertsPill:not(.is-active) { display: none !important; }
.dashOperationalChip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
}
.dashOperationalChipLabel { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: inherit !important; opacity: 0.85; }
.dashOperationalChipValue { font-weight: 650 !important; color: inherit !important; }
.dashOperationalChip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.dashOperationalChip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.dashOperationalChip.err { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.dashAlertsPill { font-size: 11px; letter-spacing: 0.03em; font-weight: 650; height: 24px; }
.dashOperationalMeta, .dashAlertsMeta { display: none !important; }
.dashOperationalLead, .dashAlertsLead { flex: 1 1 260px; min-width: 0; }
.dashAlertsActions { margin-left: auto; order: 2; }
.dashOperationalPills, .dashAlertsPills { order: 3; }
.dashOperationalTitle + .dashOperationalSub, .dashAlertsTitle + .dashAlertsSub { display: block; }
#dashAlertsOpen { height: 30px; }

/* cards */
#dashCards.dashGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; margin-top: 0 !important; }
.rdGroupHead {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 14px 2px -2px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.rdGroupHead:first-child { margin-top: 0; }
.rdGroupHead span { font-weight: 500; color: var(--faint); font-size: 12.5px; }
#dashCards .dashCard {
  position: relative; display: grid !important; gap: 0; column-gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-areas: "media title" "media subtitle" "value value" "spark spark" "band band" "ts ts" "foot foot" "comp comp" !important;   /* [LIGHT 27/9] spark: the mini chart's own row */
  align-content: start;
  min-height: 0; padding: 16px 16px 14px; border-radius: var(--r-l);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  color: var(--text); overflow: hidden; animation: none;
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
#dashCards .dashCard:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); transform: none; }
#dashCards .dashCard::before { display: none; }
#dashCards .dashCard.alert-state-alarm { border-color: rgb(var(--bad-rgb) / 0.45); box-shadow: 0 0 0 3px var(--bad-soft), var(--shadow-1); }
/* [GWPWR 6/10] a gateway's own bar over its node's (app_gwbar.js): «ΠΥΛΗ», then the node's «ΚΟΜΒΟΣ» */
#dashGwBar.dashStatusBar { margin-bottom: 8px; }
.rdBarChip { align-self: center; flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2); margin-right: 4px; white-space: nowrap; }
#dashGwBar .rdGwHead { display: none; }
#dashGwBar .rdGwItem.is-bad .dsV { color: var(--bad); font-weight: 700; }
#dashGwBar .rdGwItem.is-warn .dsV { color: var(--warn); }
#dashGwBar .rdGwItem.is-bad .dsPill { color: var(--bad); border-color: rgb(var(--bad-rgb) / 0.45); }
#dashGwBar .rdGwItem.is-go { cursor: pointer; border-radius: var(--r-s); }
#dashGwBar .rdGwItem.is-go:hover .dsV, #dashGwBar .rdGwItem.is-go:focus-visible .dsV { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  /* one line, «Πύλη · Ρεύμα · Wi-Fi Καλό · 1/1 κόμβοι ▾»; pressed, the facts one a row as in the node's bar */
  #dashGwBar.dashStatusBar { flex-direction: column; align-items: stretch; gap: 10px; }
  #dashGwBar .rdGwHead { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: var(--text); font: inherit;
    font-size: 13.5px; font-weight: 600; text-align: left; padding: 2px 0; min-height: 36px; cursor: pointer; }
  #dashGwBar.sev-bad .rdGwHead { color: var(--bad); }
  #dashGwBar.sev-warn .rdGwHead { color: var(--warn); }
  #dashGwBar .rdGwHeadTxt { flex: 1 1 auto; min-width: 0; }
  #dashGwBar:not(.is-open) > :not(.rdGwHead) { display: none !important; }
  #dashGwBar > .rdBarChip, #dashGwBar > .dsSep { display: none !important; }
  #dashGwBar .dsItem { width: 100%; align-items: center; }
  #dashGwBar .dsK { flex: 0 0 118px; white-space: normal; }
  #dashGwBar .dsV { white-space: normal; min-width: 0; }
  #dashGwBar .dsPill { margin-left: 0 !important; }
  #dashStatusBar > .rdBarChip { align-self: flex-start; }
}
/* [CARDS 6/10] a sensor whose alarm is set and well («Υγιές») is told apart from one with no alarm («Χωρίς συναγερμό»):
   a green frame as thick as an alarm's red one, the same all around (Minas 6/10) — not while the sensor is silent */
#dashCards .dashCard.alert-state-ok:not([data-g169-state="missing"]):not([data-g169-state="stale"]) {
  border-color: rgb(var(--ok-rgb) / 0.45); box-shadow: 0 0 0 3px var(--ok-soft), var(--shadow-1);
}
#dashCards .dashCard > * { margin: 0; }
#dashCards .dashCard .dashTitleRow { display: contents; }
#dashCards .dashCard .dashTitleRow .dashTitleLead { display: contents; }
#dashCards .dashCard .dashTitleRow .dashCardThumb { grid-area: media; align-self: center; }
#dashCards .dashCard .dashTitleRow .dashTitle { grid-area: title; align-self: end; padding-right: 16px; }
#dashCards .dashCard .dashTitleRow .dashStatusDot { grid-area: title; justify-self: end; align-self: center; }
#dashCards .dashCard .dashTitleRow .dashPinBtn { grid-area: title; justify-self: end; }
#dashCards .dashCard .dashCardThumb {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); border: 0; box-shadow: none; overflow: hidden;
}
#dashCards .dashCard.metric-temp .dashCardThumb { background: var(--m-temp-soft); color: var(--m-temp); }
#dashCards .dashCard.metric-humidity .dashCardThumb { background: var(--m-hum-soft); color: var(--m-hum); }
/* The tile, as the card-V2 design decided it (app_core.js gate281): no photo -> the tile shows the metric's
   own glyph (thermometer / drop / sensor); a photo -> the picture, and a small tinted glyph before the
   card's name says what it measures. The old corner chip (.dashValueIcon) stays retired. */
#dashCards .dashCard .dashCardThumb { position: relative; }
#dashCards .dashCard .dashCardThumb .dashCardThumbGlyph { display: inline-flex !important; align-items: center; justify-content: center; color: currentColor !important; }
#dashCards .dashCard .dashCardThumb .dashCardThumbGlyph svg { width: 19px; height: 19px; }
#dashCards .dashCard .dashValueIcon { display: none !important; }
#dashCards .dashCard .dashCardThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#dashCards .dashCard .dashCardThumb:not(.dashCardThumb--placeholder) { background: var(--surface-3); }
body #dashCards .dashCard.has-card-photo .dashTitle::before {
  content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
  background: var(--muted); background-image: none !important;
  -webkit-mask: var(--rd-kind-ico) no-repeat center / contain; mask: var(--rd-kind-ico) no-repeat center / contain;
}
body #dashCards .dashCard.has-card-photo.metric-temp .dashTitle::before { background: var(--m-temp);
  --rd-kind-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 14.76V5a2 2 0 0 0-4 0v9.76a4 4 0 1 0 4 0Z'/><path d='M12 9v5'/></svg>"); }
body #dashCards .dashCard.has-card-photo.metric-humidity .dashTitle::before { background: var(--m-hum);
  --rd-kind-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5s-6 6.6-6 11a6 6 0 0 0 12 0c0-4.4-6-11-6-11Z'/></svg>"); }
body #dashCards .dashCard.has-card-photo:not(.metric-temp):not(.metric-humidity) .dashTitle::before { display: none; }
#dashCards .dashCard .dashTitleRow .dashTitle { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashCards .dashCard .dashTitleRow .dashStatusDot { order: 3; width: 7px; height: 7px; flex: 0 0 7px; margin: 0 0 0 2px; border-radius: 50%; background: var(--ok); box-shadow: none; }
#dashCards .dashCard.alert-state-alarm .dashStatusDot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
#dashCards .dashCard[data-g169-state="stale"] .dashStatusDot, #dashCards .dashCard[data-g169-state="missing"] .dashStatusDot { background: var(--warn); }
#dashCards .dashCard.alert-state-disabled .dashStatusDot { background: var(--faint); }
#dashCards .dashCard .dashSubtitle { grid-area: subtitle; align-self: start; margin: 1px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashCards.rd-grouped .dashCard .dashSubtitle { display: none; }
#dashCards.rd-grouped .dashCard .dashTitleRow .dashTitle { align-self: center; }
#dashCards .dashCard .dashValue { grid-area: value; display: flex; align-items: baseline; margin: 16px 0 2px; }
#dashCards .dashCard .dashValueMain { display: inline-flex; align-items: baseline; gap: 5px; }
#dashCards .dashCard .dashValueNum { font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--text); }
#dashCards .dashCard .dashUnit { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; opacity: 1; }
#dashCards .dashCard .dashMeta { grid-area: ts; margin: 6px 0 0; padding: 0; border: 0; font-size: 12px; color: var(--muted); }
#dashCards .dashCard .dashMeta::before, #dashCards .dashCard .dashMeta::after { display: none !important; }
/* the age says it; the exact time is in the card's detail and the report */
#dashCards .dashCard .dashMeta .dashTs, #dashCards .dashCard .dashMeta .dashSep { display: none; }
#dashCards .dashCard.alert-state-alarm .dashValueNum { color: var(--bad); }
/* [LAST 28/9] a disconnected card keeps its LAST real value, muted: it is history, not a reading of now */
#dashCards .dashCard .dashValueNum.is-last { color: var(--muted); opacity: .7; }
/* status pills: the calm states become a quiet footer line; problems stay loud */
#dashCards .dashCard .dashCardStatusPill {
  grid-area: foot; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 24px; margin: 12px 0 0; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1;
  border: 1px solid transparent; background: var(--surface-3); color: var(--text-2);
  box-shadow: none; animation: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dashCards .dashCard .dashCardStatusPill::before { display: none; }
#dashCards .dashCard .dashCardStatusPill:hover { transform: none; filter: none; border-color: var(--line-strong); }
#dashCards .dashCard .dashCardStatusPill.is-healthy { background: var(--ok-soft); color: var(--ok); }
#dashCards .dashCard .dashCardStatusPill.is-alarm { background: var(--bad); color: var(--on-bad); font-weight: 600; }
#dashCards .dashCard .dashCardStatusPill.is-no-data, #dashCards .dashCard .dashCardStatusPill.is-unknown { background: var(--warn-soft); color: var(--warn); }
#dashCards .dashCard .dashCardStatusPill.is-disabled { background: var(--surface-3); color: var(--muted); }
#dashCards .dashCard .dashCardStatusPill.is-unconfigured { background: transparent; color: var(--faint); padding: 0; margin-top: 12px; border: 0; opacity: 0; transition: opacity .15s var(--ease); }
#dashCards .dashCard:hover .dashCardStatusPill.is-unconfigured, #dashCards .dashCard .dashCardStatusPill.is-unconfigured:focus-visible { opacity: 1; }
@media (hover: none) { #dashCards .dashCard .dashCardStatusPill.is-unconfigured { display: none; } }
#dashCards .dashCard .dashCardStatusPill.is-healthy::before, #dashCards .dashCard .dashCardStatusPill.is-alarm::before {
  display: block; content: ''; width: 12px; height: 12px; flex: 0 0 12px; background: currentColor; border: 0; box-shadow: none; animation: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>") no-repeat center / contain;
}
#dashCards .dashCard .dashCardStatusPill.is-unconfigured:hover { color: var(--accent); }
/* compliance: "normal operation" on every card was noise; the other states are what the inspector asks about */
#dashCards .dashCard .dashCardCompliancePill { grid-area: comp; margin: 8px 0 0; }
#dashCards .dashCard .dashCardCompliancePill.is-normal { display: none; }
#dashCards .dashCard .dashCardCompliancePill.is-needs { background: var(--warn-soft); color: var(--warn); }
#dashCards .dashCard .dashCardCompliancePill.is-justified { background: var(--info-soft); color: var(--info); }
#dashCards .dashCard .dashCardCompliancePill.is-justified.is-pending { background: var(--warn-soft); color: var(--warn); }
/* the healthy pill and the compliance pill share one row */
#dashCards .dashCard .dashCardStatusPill + .dashCardCompliancePill:not(.is-normal) { margin-top: 6px; }
#dashCards .dashCard .dashSparkRow, #dashCards .dashCard .dashThresholdBand { margin-top: 10px; }
#dashCards .dashCard .dashPinBtn { color: var(--faint); }

@media (max-width: 640px) {
  .rdPageHead { margin-bottom: 14px; }
  /* [UX 27/9] the node's strip on a phone: one fact a row, its name in a column, pills under the value if needed */
  #dashStatusBar.dashStatusBar { flex-direction: column; align-items: stretch; gap: 10px; }
  #dashStatusBar .dsItem { width: 100%; align-items: center; }
  #dashStatusBar .dsK { flex: 0 0 118px; white-space: normal; }
  #dashStatusBar .dsV { white-space: normal; min-width: 0; }
  #dashStatusBar .dsPill { margin-left: 0 !important; }
  #tab_dashboard .dashToolbarGrid { gap: 8px; }
  #tab_dashboard .dashGroupFilters { width: 100%; }
  #tab_dashboard .dashField { flex: 1 1 0; min-width: 0; }
  #tab_dashboard .dashSelect { max-width: none !important; width: 100%; }
  #tab_dashboard .dashGroupActions { margin-left: 0; width: 100%; }
  .rdDashStatus { gap: 10px; margin-bottom: 16px; }
  #dashCards.dashGrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  #dashCards .dashCard { padding: 13px 13px 12px; }
  #dashCards .dashCard .dashCardThumb { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
  #dashCards .dashCard .dashCardThumb .dashCardThumbGlyph svg { width: 16px; height: 16px; }
  #dashCards .dashCard { grid-template-columns: 28px minmax(0, 1fr) !important; column-gap: 8px; }
  #dashCards .dashCard .dashValue { margin-top: 10px; }
  #dashCards .dashCard .dashValueNum { font-size: 28px; }
  #dashCards .dashCard .dashUnit { font-size: 13px; }
  #dashCards .dashCard .dashMeta .dashTs, #dashCards .dashCard .dashMeta .dashSep { display: none; }
}

/* ---------- row actions folded into ⋯ (redesign.js compactActions) ---------- */
.rdFolded { display: none !important; }
.rdActs { flex-wrap: nowrap !important; justify-content: flex-end; align-items: center; }
.rdMore { width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
.rdMore:hover { color: var(--text); }
.rdMore svg { width: 18px; height: 18px; }
.rdMenuItem:disabled { cursor: not-allowed; }

/* ---------- 6.2 Devices ---------- */
#tab_devices > .row { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
#tab_devices > .row #deviceSelect { order: -1; width: auto; min-width: 220px; max-width: 320px; }
#tab_devices > .row #refresh { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); }
#tab_devices > .row #refresh:hover { background: var(--surface-2); }
#devicesTable { margin-top: 0 !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow-x: auto; overflow-y: hidden; }   /* [LANDSCAPE 27/9] was overflow:hidden — 962px of table in a 747px card cut the version and last-seen columns off on a tablet or a phone on its side, with no way to reach them */
#devicesTable:empty { display: none; }
#devicesTable > table, #devicesTable .tbl { display: table; width: 100%; min-width: 0; margin: 0; }
#devicesTable th { background: var(--surface-2); }
#devicesTable td { padding: 14px; }
#devicesTable tbody tr > td:first-child { font-weight: 600; white-space: nowrap; }
#devicesTable tbody tr:not(.node-row) > td:nth-child(2) { font-family: var(--mono); font-size: 12px; color: var(--muted); }
#devicesTable tbody tr:not(.node-row) > td:nth-child(6) { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
#devicesTable tbody tr:not(.node-row) > td:nth-child(7) { color: var(--muted); font-size: 13px; white-space: nowrap; }
#devicesTable tbody tr:not(.node-row) > td:last-child { width: 1%; text-align: right; }
#devicesTable .g293HealthPill { white-space: nowrap; font-size: 13px !important; }
#devicesTable tr.node-row > td { background: var(--surface-2); color: var(--muted); font-size: 12.5px !important; opacity: 1 !important; padding: 9px 14px 9px 30px !important; border-bottom: 1px solid var(--line); line-height: 1.7; }
#devicesTable tr.node-row > td, #devicesTable tr.node-row > td span { white-space: normal !important; }
#devicesTable tr.node-row:hover > td { background: var(--surface-2); }
#gate227ClaimCard { margin-top: 16px !important; padding: 0; }
#gate227ClaimCard > details > summary { padding: 16px 20px; font-weight: 600; color: var(--text); }
#gate227ClaimCard > details[open] > summary { border-bottom: 1px solid var(--line); }
#gate227ClaimCard > details > :not(summary) { margin-left: 20px; margin-right: 20px; }
#gate227ClaimCard > details > .form { padding-bottom: 20px; max-width: 520px; }
#devicesEmpty { text-align: left; }
@media (max-width: 900px) {
  #devicesTable { overflow-x: auto; }
  #devicesTable > table, #devicesTable .tbl { min-width: 760px; }
}

/* ---------- 6.3 Readings (latest) ---------- */
#tab_latest .telemetry-latest-shell { display: flex; flex-direction: column; gap: 16px; }
#tab_latest .telemetry-latest-hero.card { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 0; display: block; }
#tab_latest .telemetry-latest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
#tab_latest .telemetry-latest-head h2 { margin: 0 0 6px !important; }
#tab_latest .telemetry-latest-head .muted { margin: 0 !important; }
#tab_latest .telemetry-latest-head-actions { display: flex; align-items: center; gap: 8px; }
/* segmented control (list / chart) */
.telemetry-view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-m); background: var(--surface-3); border: 0; }
.telemetry-view-toggle .btn { height: 30px; padding: 0 14px; border: 0 !important; background: transparent !important; color: var(--muted) !important; box-shadow: none !important; font-weight: 500; border-radius: 8px; }
.telemetry-view-toggle .btn.is-active, .telemetry-view-toggle .btn[aria-pressed="true"] { background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow-1) !important; font-weight: 600; }
#tab_latest .telemetry-latest-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
#tab_latest .telemetry-latest-control { padding: 0; border: 0; background: transparent; box-shadow: none; display: block; }
#tab_latest .telemetry-latest-control label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#tab_latest .telemetry-latest-control .hint { display: none; }
#tab_latest .telemetry-latest-control select { min-width: 220px; max-width: 320px; }
#tab_latest .telemetry-latest-meta { display: none !important; }           /* naming → Settings; export → the Export menu */
#tab_latest .telemetry-latest-health { margin-top: 12px; padding: 0; border: 0; }
#tab_latest .telemetry-latest-health .telemetry-latest-section-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
#tab_latest:not(.rd-node-picked) .telemetry-latest-health { display: none; }
#latestTable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden; }
#latestTable:empty { display: none; }
#latestTable .tbl { display: table; width: 100%; min-width: 0; margin: 0; }
#latestTable .tbl td { font-size: 13.5px !important; font-weight: 400 !important; padding: 10px 14px !important; color: var(--text-2); }
#latestTable .tbl td:first-child { color: var(--text); }
#latestTable .tbl th { padding: 10px 14px !important; }
#latestTable .tbl tbody tr:nth-child(even) td { background: transparent; }
#latestTable .tbl .rdNum { font-weight: 600 !important; color: var(--text) !important; text-align: right; }
#latestTable .tbl .rdUnit { color: var(--muted) !important; padding-left: 4px !important; }
#latestTable .tbl .rdTime { color: var(--muted) !important; white-space: nowrap; }
#latestTable .rdColEmpty { display: none; }
.rdExportBtn svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  #tab_latest .telemetry-latest-control { flex: 1 1 0; min-width: 0; }
  #tab_latest .telemetry-latest-control select { min-width: 0; max-width: none; width: 100%; }
  #latestTable { overflow-x: auto; }
  #latestTable .tbl { min-width: 560px; }
}

/* ---------- 6.4 Alerts ---------- */
#tab_alerts .gate127-alerts-shell { max-width: none !important; padding: 0 !important; margin: 0 !important; }
#tab_alerts .gate127-alerts-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
#tab_alerts .gate127-alerts-header h2 { margin: 0 0 6px !important; }
#tab_alerts .gate127-alerts-header .muted { margin: 0 !important; }
#tab_alerts .gate127-alerts-actions { display: flex; gap: 8px; }
/* section tabs */
.rdSecTabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rdSecTabs::-webkit-scrollbar { display: none; }
.rdSecTabs button {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.rdSecTabs button:hover { color: var(--text); }
.rdSecTabs button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.rdSecCount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); color: var(--muted); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.rdSecCount:empty { display: none; }
.rdSecCount.is-bad { background: var(--bad); color: var(--on-bad); }
.rdSecCount.rdSecJust { margin-left: 4px; background: var(--c-yellow); color: var(--c-on-yellow); }   /* [JUST 2/11] the justified ones, beside the red */
/* one section at a time */
#tab_alerts .gate127-alerts-layout { display: block !important; }
#tab_alerts .gate127-alerts-left, #tab_alerts .gate127-alerts-right { width: auto !important; max-width: none !important; position: static !important; }
#tab_alerts[data-rd-view] .gate127-alerts-left > .card[data-rd-sec] { display: none; }
#tab_alerts[data-rd-view="state"] .gate127-alerts-left > .card[data-rd-sec="state"],
#tab_alerts[data-rd-view="rules"] .gate127-alerts-left > .card[data-rd-sec="rules"],
#tab_alerts[data-rd-view="history"] .gate127-alerts-left > .card[data-rd-sec="history"] { display: block; }
#tab_alerts[data-rd-view]:not([data-rd-view="create"]) .gate127-alerts-right { display: none !important; }
#tab_alerts[data-rd-view="create"] .gate127-alerts-left > .card[data-rd-sec] { display: none !important; }
#tab_alerts[data-rd-view="create"] #gate186_alerts_create_card { max-width: 760px; position: static !important; }
/* cards: a quiet head */
#tab_alerts .card { margin: 0 0 16px !important; padding: 0 !important; overflow: hidden; }
#tab_alerts .gate127-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; margin: 0 !important; border-bottom: 1px solid var(--line); }
#tab_alerts .gate127-card-head .gate127-title { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--text) !important; }
#tab_alerts .gate127-card-head .gate127-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
#tab_alerts .gate127-card-head .gate127-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#tab_alerts .gate127-card-head .gate127-right .tag:not(.err):not(.warn):not(.ok):not(.just) { display: none; }   /* zero / neutral counts; [JUST 2/11] «ΜΕ ΑΙΤΙΟΛΟΓΗΣΗ» (drawn only when > 0) stays */
#tab_alerts .gate127-card-head .gate127-right .badge { display: none; }                               /* the counts moved into the tabs */
#tab_alerts .gate127-card-head .gate127-right input.input, #tab_alerts .gate127-card-head .gate127-right select { width: 220px !important; min-width: 0; }
#tab_alerts #gate186_alerts_create_card > .form { padding: 18px 20px 22px; gap: 6px; }
/* tables (desktop): plain rows, state as a pill, no stripes of colour */
@media (min-width: 701px) {
#tab_alerts .gate127-alerts-tblwrap { border: 0 !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; max-height: none !important; overflow-x: auto; }
#tab_alerts .gate127-alerts-tbl { border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; }
#tab_alerts .gate127-alerts-tbl thead th { padding: 10px 14px !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0.01em !important; color: var(--muted) !important; background: var(--surface-2) !important; border-bottom: 1px solid var(--line) !important; }
#tab_alerts .gate127-alerts-tbl tbody tr { background: transparent !important; box-shadow: none !important; }
#tab_alerts .gate127-alerts-tbl tbody td {
  padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; background: transparent !important; vertical-align: middle !important;
  font-size: 13.5px; color: var(--text-2);
}
#tab_alerts .gate127-alerts-tbl tbody tr:last-child td { border-bottom: 0 !important; }
#tab_alerts .gate127-alerts-tbl tbody tr:hover td { background: rgb(var(--fg-rgb) / 0.02) !important; }
#tab_alerts table.gate127-alerts-state tbody tr:has(.tag.err) td { background: var(--bad-soft) !important; }
#tab_alerts table.gate127-alerts-state tbody tr > td:first-child, #tab_alerts table.gate127-alerts-rules tbody tr > td:nth-child(2) { color: var(--text); font-weight: 600; }
#tab_alerts .gate127-alerts-tbl .tag { height: 22px; font-size: 11.5px; text-transform: none; }
#tab_alerts .gate127-alerts-tbl .btn, #tab_alerts .gate127-alerts-tbl .btn.small {
  height: 30px !important; padding: 0 12px !important; font-size: 12.5px !important; border-radius: var(--r-s) !important;
  background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; box-shadow: var(--shadow-1) !important; font-weight: 600 !important;
}
#tab_alerts .gate127-alerts-tbl .btn:hover { background: var(--surface-2) !important; }
#tab_alerts .gate127-alerts-tbl td:last-child { width: 1%; white-space: nowrap; text-align: right; }
#tab_alerts .gate127-alerts-tbl td:last-child > .row { justify-content: flex-end; flex-wrap: nowrap !important; margin: 0 !important; gap: 6px !important; }
#tab_alerts .gate127-alerts-tbl .rdMore { box-shadow: none !important; border: 0 !important; background: transparent !important; width: 30px !important; padding: 0 !important; }
}
.rdRowHidden { display: none !important; }
.rdMoreRows { margin: 12px 20px 16px; }
/* the rule form */
#gate186_alerts_create_card .form:not(.rd-adv-open) .rdAdv { display: none !important; }
.rdAdvToggle { align-self: flex-start; margin: 4px 0 8px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; }
.rdAdvToggle:hover { text-decoration: underline; text-underline-offset: 2px; }
#gate186_alerts_create_card .gate127-rule-cond { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
#gate186_alerts_create_card .gate140-preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
#gate186_alerts_create_card .gate140-preset-row .btn { height: 30px; font-size: 12.5px; padding: 0 11px; background: var(--surface); color: var(--text-2); border: 1px solid var(--line-strong); }
#gate105_rule_create { align-self: flex-start; margin-top: 10px; min-width: 160px; width: auto !important; }
#tab_alerts table.gate127-alerts-rules tbody td:first-child { overflow: visible !important; text-overflow: clip !important; white-space: nowrap; }
#gate168_alerts_contextbar { margin: 0 0 16px !important; padding: 12px 16px !important; border-radius: var(--r-m) !important; background: var(--accent-soft) !important; border: 1px solid rgb(var(--accent-rgb) / 0.2) !important; }
@media (max-width: 700px) {
  #gate186_alerts_create_card .gate127-rule-cond { grid-template-columns: 1fr; }
  #tab_alerts .card { overflow: visible; }
}
#tab_alerts .gate127-card-head > div:first-child { display: none; }     /* the tab names the section */
#tab_alerts .gate127-card-head { justify-content: flex-end; padding: 12px 16px; }
#tab_alerts .gate127-card-head:not(:has(.gate127-right > :not(.badge):not(.tag))) :is(.gate127-right) { justify-content: flex-start; }
#tab_alerts #gate186_alerts_create_card .gate127-card-head > div:first-child { display: block; }
#tab_alerts #gate186_alerts_create_card .gate127-card-head { justify-content: space-between; padding: 16px 20px; }
@media (min-width: 701px) { #tab_alerts table.gate127-alerts-state tbody td:nth-child(4) { text-align: left !important; } }
@media (min-width: 701px) { #tab_alerts table.gate127-alerts-state thead th:nth-child(4) { text-align: left !important; } }
.rdStateMeta { white-space: nowrap; }

/* ---------- 6.5 Users & Access ---------- */
#usersAccessSummaryCards { gap: 14px !important; margin: 0 0 16px !important; }
#usersAccessSummaryCards > .card { padding: 18px 20px; }
#usersAccessSummaryCards > .card > .muted:first-child { font-size: 13px; font-weight: 500; color: var(--muted) !important; }
#usersAccessSummaryCards > .card > div:nth-child(2) { font-size: 26px !important; font-weight: 650 !important; letter-spacing: -0.02em; margin-top: 4px !important; line-height: 1.2; }
#usersAccessSummaryCards > .card > .hint { margin-top: 4px !important; }
#tab_users_access > .card { margin-top: 16px !important; padding: 0; overflow: hidden; }
#tab_users_access .usersAccessPanelHeader { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
#tab_users_access .usersAccessPanelHeaderTop > div:first-child > div:first-child { font-size: 15px !important; font-weight: 600 !important; }
#tab_users_access .usersAccessControls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
#tab_users_access .usersAccessControlField { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; max-width: 360px; }
#tab_users_access .usersAccessControlLabel { font-size: 12px; font-weight: 500; color: var(--text-2); }
#tab_users_access > .card > .hint { padding: 10px 20px 0; }
#tab_users_access > .card table.tbl, #tab_users_access > .card table { margin: 10px 0 0 !important; min-width: 0; }
#tab_users_access > .card > div[style] { overflow-x: auto; }
#tab_users_access table td { font-size: 13.5px; }
#tab_users_access table td:first-child { font-weight: 600; color: var(--text); }
#tab_users_access .rdUserActs { display: flex !important; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
#tab_users_access .rdUserActs > div { display: flex !important; align-items: center; gap: 6px !important; flex-wrap: nowrap !important; margin: 0 !important; }
#tab_users_access .usersAccessActionSelect { min-height: 30px !important; height: 30px; padding: 0 30px 0 10px !important; font-size: 12.5px !important; width: auto !important; min-width: 120px; }
#tab_users_access .usersAccessActionBtn { height: 30px; }
#tab_users_access .rdMoreRows { margin: 12px 20px 16px; }
#usersAccessActivity > .row:first-child { display: block !important; padding: 18px 20px 14px; margin: 0 !important; border-bottom: 1px solid var(--line); }
#usersAccessActivity > .row:first-child > div:first-child > div:first-child { font-size: 15px !important; font-weight: 600 !important; }
#usersAccessActivity .usersAccessControls { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 10px !important; flex-wrap: wrap; margin-top: 14px !important; width: auto !important; }
#usersAccessActivity #usersAccessActivityRefresh { order: 10; }
#tab_users_access .usersAccessHeaderActions { display: flex; gap: 8px; }
#tab_users_access .usersAccessControlActions .btn, #usersAccessActivityRefresh { height: 38px; }

/* ---------- 6.6 Settings (names & labels) ---------- */
#tab_telemetry_tools #telemetryToolsMount { margin-top: 0 !important; }
#gate146ToolsCards { display: flex !important; flex-direction: column; gap: 16px !important; }
#gate146ToolsCtx { font-size: 13.5px !important; color: var(--muted) !important; margin: -8px 0 4px !important; }
#gate146ToolsCards > .card { padding: 0 !important; margin: 0 !important; overflow: hidden; }
#gate146ToolsCards > .card > .rdCardHead { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--line); }
#gate146ToolsCards > .card > .rdCardHead > div:first-child { font-size: 15px !important; font-weight: 600 !important; color: var(--text); }
#gate146ToolsCards > .card > .rdCardHead > .muted { font-size: 12.5px !important; }
#gate146ToolsCards > .card > div:not(.rdCardHead) { padding: 18px 20px 20px !important; margin: 0 !important; }
#gate146ToolsCards .row { gap: 10px !important; align-items: center; }
#gate146ToolsCards label { font-size: 13px; color: var(--text-2); font-weight: 500; }
#gate146ToolsCards .input, #gate146ToolsCards select { min-width: 0; }
#gate146ToolsCards textarea { width: 100%; max-width: 100% !important; font-family: var(--mono); font-size: 12.5px !important; }
.rdFoldable > .rdCardHead { cursor: pointer; user-select: none; }
.rdFoldable > .rdCardHead::after {
  content: ''; width: 16px; height: 16px; margin-left: 8px; align-self: center; flex: 0 0 16px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / contain;
  transition: transform .15s var(--ease);
}
.rdFoldable.rd-folded > .rdCardHead::after { transform: rotate(-90deg); }
.rdFoldable.rd-folded > .rdCardHead { border-bottom: 0 !important; }
.rdFoldable.rd-folded > :not(.rdCardHead) { display: none !important; }
.rdFoldable > .rdCardHead > .muted { margin-left: auto; }

/* ---------- 6.7 Sign-in (the full-screen hero app_core.js builds) ---------- */
.g2c-auth-hero { background: radial-gradient(1100px 520px at 50% -8%, rgb(var(--accent-rgb) / 0.12), transparent 62%), var(--bg) !important; }
.g2c-auth-card { border-radius: 18px !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-3) !important; }
.g2c-auth-card input:focus { border-color: rgb(var(--accent-rgb) / 0.7) !important; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.14) !important; outline: none !important; }
.g2c-btn-primary { border-radius: 10px !important; font-weight: 600 !important; height: 44px; padding: 0 16px !important; }
.g2c-auth-locale .select { background-color: var(--surface) !important; border-color: var(--line-strong) !important; }

/* ---------- 6.8 Account ---------- */
#tab_auth > .card { margin-top: 16px !important; }
#tab_auth > .card > .muted:first-child { font-size: 15px !important; font-weight: 600; color: var(--text) !important; margin-bottom: 4px; }
#tab_auth [data-g175-status]:empty { display: none; }
#tab_auth .cl-plan-section-label { display: block; font-size: 12.5px !important; font-weight: 600; color: var(--text-2) !important; margin: 20px 0 8px; text-transform: none; letter-spacing: 0; }
#tab_auth .cl-plan-current-section > .cl-plan-section-label:first-child { margin-top: 8px; }
#tab_auth .cl-plan-current-name { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
#tab_auth .cl-plan-current-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
#tab_auth .cl-plan-current-line { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); }
#tab_auth .cl-plan-current-line-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; min-width: 150px; }
#tab_auth .cl-plan-current-line-value { font-size: 13.5px; color: var(--text-2); }
#tab_auth .cl-plan-usage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
#tab_auth .cl-plan-usage-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
#tab_auth .cl-plan-usage-metrics { font-size: 13px; color: var(--muted); }
#tab_auth .cl-plan-usage-metrics b { color: var(--text); font-weight: 600; }
#tab_auth .cl-plan-usage-chip { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 0; }
#tab_auth .cl-plan-usage-chip-ok { background: var(--ok-soft); color: var(--ok); }
#tab_auth .cl-plan-usage-chip-near { background: var(--warn-soft); color: var(--warn); }
#tab_auth .cl-plan-usage-chip-at { background: var(--bad-soft); color: var(--bad); }
#tab_auth .cl-plan-usage-chip-muted { background: var(--surface-3); color: var(--muted); }
#tab_auth .cl-pkg-card { padding: 14px 16px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; }
#tab_auth .cl-pkg-card.is-current { border-color: rgb(var(--accent-rgb) / 0.45) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
#tab_auth .cl-pkg-card.is-current .cl-pkg-badge { color: var(--accent); font-weight: 600; }
#gate194AccountCard .form { max-width: 520px; }

/* ---------- 6.9 Metric detail drawer (app_metric_drawer.js) ---------- */
#gate138MetricDetailHost .g138-backdrop { background: var(--scrim) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#gate138MetricDetailHost .g138-drawer { background: var(--bg) !important; border-left: 1px solid var(--line) !important; box-shadow: var(--shadow-3) !important; width: min(720px, 100vw) !important; }
#gate138MetricDetailHost .g138-head { padding: 18px 24px !important; background: var(--surface); border-bottom: 1px solid var(--line) !important; align-items: center; }
#gate138MetricDetailHost .g138-title { font-size: 20px !important; font-weight: 650 !important; letter-spacing: -0.02em; margin: 0 0 6px !important; }
#gate138MetricDetailHost .g138-sub .tag { background: var(--surface-3); border: 0; color: var(--text-2); }
#gate138MetricDetailHost .g138-close { height: 34px; padding: 0 14px; border-radius: var(--r-m); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; }
#gate138MetricDetailHost .g138-close:hover { background: var(--surface-2); }
/* [30/9] a long name or place never pushes «?» and «Κλείσιμο» off a phone's screen (Minas: «δες … το κλείσιμο»):
   the title side shrinks and its place line wraps; the two buttons keep their size */
#gate138MetricDetailHost .g138-head > div:first-child { min-width: 0; flex: 1 1 auto; }
#gate138MetricDetailHost .g138-head > div:first-child .tag { white-space: normal; flex-wrap: wrap; max-width: 100%; height: auto; line-height: 1.35; padding-top: 3px; padding-bottom: 3px; }
#gate138MetricDetailHost .g138-head .g138-title { overflow-wrap: anywhere; }
#gate138MetricDetailHost .g138-close { flex: 0 0 auto; }
#gate138MetricDetailHost .g138-body { padding: 18px 24px 28px !important; gap: 14px !important; }
#gate138MetricDetailHost .g138-card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-l) !important; padding: 16px !important; box-shadow: var(--shadow-1); }
#gate138MetricDetailHost .g138-ranges { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-m); background: var(--surface-3); }
#gate138MetricDetailHost .g138-range, #gate138MetricDetailHost .g138-nav {
  height: 30px; min-width: 34px; padding: 0 12px; border: 0 !important; border-radius: 8px !important; background: transparent !important;
  color: var(--muted) !important; font-size: 12.5px !important; font-weight: 500; box-shadow: none !important;
}
#gate138MetricDetailHost .g138-range.active { background: var(--surface) !important; color: var(--text) !important; font-weight: 600; box-shadow: var(--shadow-1) !important; }
#gate138MetricDetailHost .g138-mini { color: var(--muted) !important; font-size: 12.5px; }
#gate138MetricDetailHost .g138-kpi { gap: 8px !important; margin-top: 14px; }
#gate138MetricDetailHost .g138-kpi .item { flex: 1 1 0; min-width: 90px; border: 0 !important; border-radius: var(--r-m) !important; background: var(--surface-2) !important; padding: 10px 12px !important; }
#gate138MetricDetailHost .g138-kpi .k { font-size: 12px !important; color: var(--muted) !important; }
#gate138MetricDetailHost .g138-kpi .v { font-size: 18px !important; font-weight: 650 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#gate138MetricDetailHost .g138-liveBtn { height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; }
#gate138MetricDetailHost .g138-state { font-size: 12.5px; font-weight: 600; }
#gate138MetricDetailHost .g138-state.ok { color: var(--ok) !important; }
#gate138MetricDetailHost svg text { fill: var(--muted); }
@media (max-width: 640px) {
  #gate138MetricDetailHost .g138-head { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px !important; }
  #gate138MetricDetailHost .g138-body { padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
}
#gate138MetricDetailHost .g138-clickHint { display: none !important; }              /* "click a card…" inside the card's own drawer */
#gate138MetricDetailHost .g138-foot { color: var(--muted); font-size: 12.5px; }
/* alerts on the phone: every row is a card (the grid of styles.css Gate237c/d/e), re-skinned to the theme */
@media (max-width: 700px) {
  #tab_alerts .card[data-rd-sec]:not([data-rd-sec="create"]) { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
  #tab_alerts .card[data-rd-sec] .gate127-card-head { padding: 0 0 12px !important; border: 0 !important; justify-content: flex-start; }
  #tab_alerts .gate127-alerts-tblwrap { border: 0 !important; background: transparent !important; overflow: visible !important; max-height: none !important; }
  #tab_alerts .gate127-alerts-tbl tbody tr {
    background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-l) !important;
    box-shadow: var(--shadow-1) !important; padding: 14px 16px !important; margin: 0 0 10px !important; transform: none !important;
  }
  #tab_alerts .gate127-alerts-tbl tbody tr::before { display: none !important; }
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.err) { border-color: rgb(var(--bad-rgb) / 0.45) !important; box-shadow: 0 0 0 3px var(--bad-soft) !important; }
  #tab_alerts .gate127-alerts-tbl tbody td { color: var(--text-2); font-size: 13px !important; }
  #tab_alerts .gate127-alerts-tbl tbody td::before { color: var(--faint) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; }
  #tab_alerts .gate127-alerts-tbl tbody td:last-child { border-top: 1px solid var(--line) !important; }
  #tab_alerts .gate127-alerts-tbl tbody td:last-child .row { justify-content: flex-end; }
  #tab_alerts .gate127-alerts-tbl tbody td:last-child .btn:not(.rdMore) { flex: 0 1 auto !important; height: 34px; background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; }
  #tab_alerts .gate127-alerts-tbl tbody td:last-child .rdMore { flex: 0 0 34px !important; width: 34px; height: 34px; border: 0 !important; background: transparent !important; }
  .rdSecTabs button { padding: 0 10px; font-size: 13.5px; }
  #tab_alerts .gate127-alerts-header { margin-bottom: 12px; }
}

/* ---------- 6.10 Phone: the wide tables become card lists ---------- */
@media (max-width: 640px) {
  /* devices */
  #devicesTable { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  #devicesTable > table, #devicesTable .tbl { display: block; min-width: 0 !important; }
  #devicesTable thead { display: none; }
  #devicesTable tbody { display: flex; flex-direction: column; gap: 0; }
  #devicesTable tbody tr:not(.node-row) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px;
    grid-template-areas: "serial acts" "name name" "health health" "ver seen";
    padding: 14px 16px; margin-top: 10px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-l); box-shadow: var(--shadow-1);
  }
  #devicesTable tbody tr:not(.node-row) > td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
  #devicesTable tbody tr:not(.node-row) > td:nth-child(1) { grid-area: serial; font-size: 15px; align-self: center; }
  #devicesTable tbody tr:not(.node-row) > td:nth-child(2) { display: none; }
  #devicesTable tbody tr:not(.node-row) > td:nth-child(3) { grid-area: name; color: var(--text-2); }
  #devicesTable tbody tr:not(.node-row) > td:nth-child(4) { display: none; }
  #devicesTable tbody tr:not(.node-row) > td:nth-child(4):has(:not(.rdStateQuiet)) { display: block; grid-area: name; justify-self: end; }
  #devicesTable tbody tr:not(.node-row) > td:nth-child(5) { grid-area: health; }
  #devicesTable tbody tr:not(.node-row) > td:nth-child(6) { grid-area: ver; font-size: 12px !important; color: var(--muted) !important; }
  #devicesTable tbody tr:not(.node-row) > td:nth-child(7) { grid-area: seen; font-size: 12px !important; justify-self: end; }
  #devicesTable tbody tr:not(.node-row) > td:last-child { grid-area: acts; width: auto; align-self: center; }
  #devicesTable tr.node-row { display: block; margin: -1px 0 0; }
  #devicesTable tr.node-row > td { display: block; border: 1px solid var(--line) !important; border-top: 0 !important; border-radius: 0 0 var(--r-l) var(--r-l); padding: 10px 16px 12px !important; }
  /* [DEL-WAIT 25/10] a row's tags («Σβήνονται στις …», «Αποδεσμεύεται …», «Διαγραφή μετρήσεων: …») on lines of their own at
     the card's foot, never over its title (the phone walk of 25/10: «…Κατάστημα Κέντρου (CL-0008)» ran over «CL-0008» and off
     the card): the actions cell and its wrap step aside (the wrap's own style says flex: hence !important), the ⋯ (or a kept
     button) keeps its corner */
  #devicesTable tbody tr:not(.node-row) > td:last-child:has(.ownLeaving, .ownDeleted, .ownStolen),
  #devicesTable tbody tr:not(.node-row) > td:last-child:has(.ownLeaving, .ownDeleted, .ownStolen) > .rdRowActions { display: contents !important; }
  #devicesTable tbody tr:not(.node-row) > td:last-child > .rdRowActions > button:not(.rdFolded) { grid-area: acts; justify-self: end; align-self: center; }
  #devicesTable tbody tr:not(.node-row) > td:last-child > .rdRowActions > :is(.ownLeaving, .ownDeleted, .ownStolen) { grid-column: 1 / -1; justify-self: start; text-align: left; white-space: normal; border-radius: 10px; margin-top: 6px; }
  /* readings */
  #latestTable { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  #latestTable .tbl { display: block; min-width: 0 !important; }
  #latestTable .tbl thead { display: none; }
  #latestTable .tbl tbody { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden; }
  #latestTable .tbl tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
  #latestTable .tbl tbody tr:last-child { border-bottom: 0; }
  #latestTable .tbl tbody tr::after { content: ''; order: 4; flex-basis: 100%; height: 0; }
  #latestTable .tbl tbody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; background: transparent !important; }
  #latestTable .tbl tbody td:nth-child(4) { order: 1; flex: 1 1 auto; font-weight: 600 !important; color: var(--text) !important; }
  #latestTable .tbl tbody td.rdNum { order: 2; font-size: 15px !important; }
  #latestTable .tbl tbody td.rdUnit { order: 3; padding-left: 0 !important; }
  #latestTable .tbl tbody td:nth-child(1) { order: 5; flex: 0 1 auto; font-size: 12px !important; color: var(--muted) !important; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #latestTable .tbl tbody td:nth-child(2) { order: 6; font-size: 12px !important; color: var(--faint) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
  #latestTable .tbl tbody td:nth-child(3) { display: none; }
  #latestTable .tbl tbody td.rdTime { order: 7; flex: 0 0 auto; white-space: nowrap; font-size: 12px !important; margin-left: auto; }
  /* users */
  #tab_users_access > .card > div[style] { overflow: visible; }
  #usersAccessMembers table, #usersAccessMembers tbody { display: block; min-width: 0 !important; }
  #usersAccessMembers thead { display: none; }
  #usersAccessMembers tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who acts" "mail mail" "role seen"; row-gap: 3px; column-gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  #usersAccessMembers tbody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
  #usersAccessMembers tbody td:nth-child(1) { grid-area: who; align-self: center; }
  #usersAccessMembers tbody td:nth-child(2) { grid-area: mail; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
  #usersAccessMembers tbody td:nth-child(3) { grid-area: role; font-size: 12.5px; }
  #usersAccessMembers tbody td:nth-child(4), #usersAccessMembers tbody td:nth-child(5) { display: none; }
  #usersAccessMembers tbody td:nth-child(6) { grid-area: seen; font-size: 12px; color: var(--muted); justify-self: end; }
  #usersAccessMembers tbody td:last-child { grid-area: acts; align-self: center; }
  #usersAccessMembers .usersAccessActionSelect { min-width: 0 !important; max-width: 130px; }
  /* dashboard: the folded panels as quiet rows */
  .g2cMobCollapsible .g2cMobCollapseBtn { width: 30px; height: 30px; border-radius: 8px; border: 0 !important; background: var(--surface-3) !important; color: var(--muted) !important; display: inline-flex; align-items: center; justify-content: center; }
  .g2cMobCollapsible .g2cMobArrow { font-size: 0 !important; width: 16px; height: 16px; display: inline-block; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / contain;
    transform: rotate(-90deg); transition: transform .15s var(--ease); }
  .g2cMobCollapsible:not(.is-mobile-collapsed) .g2cMobArrow { transform: none; }
}
/* the virtualised readings table (app_core.js gate255: rows of a FIXED height, 40 px here, 64 px on a phone) */
#latestTable .gate255-vlatest-outer { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
#latestTable .gate255-vlatest thead { background: var(--surface-2) !important; box-shadow: 0 1px 0 var(--line) !important; }
@media (min-width: 641px) {
  #latestTable .gate255-vlatest tbody td { padding-top: 0 !important; padding-bottom: 0 !important; height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
}
@media (max-width: 640px) {
  #latestTable .gate255-vlatest-outer { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-l) !important; box-shadow: var(--shadow-1); }
  #latestTable .gate255-vlatest tbody { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  #latestTable .gate255-vlatest tbody tr { height: 64px !important; box-sizing: border-box; overflow: hidden; align-content: center; }
}

/* ---------- 7. Motion and feedback ---------- */
/* busy: the old spinner lived in the hidden top-right cluster; a hairline progress bar across the top instead */
@keyframes rdLoad { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
body:has(#spinner[style*="inline-block"])::after {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9000; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: rdLoad 1.1s var(--ease) infinite;
}
/* a page arrives with a short settle, not a jump (display none -> block restarts the animation) */
@keyframes rdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.main > .tab { animation: rdIn .24s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .main > .tab { animation: none; } }

/* ---------- phone drawer (app_core.js gate2cNavDrawer) ---------- */
@media (max-width: 640px) {
  body.navDrawerOpen .sidebar { z-index: 5000 !important; background: var(--surface) !important; }
  body.navDrawerOpen .gate2cNavDrawerBackdrop { z-index: 4900 !important; background: var(--scrim) !important; }
  .rdSideFoot { display: none; }                          /* on a phone the header avatar is the user menu */
  #gate2cDrawerHeader { display: none !important; }       /* the same person, said twice */
  body.navDrawerOpen .sidebar .gate2cDrawerFooter { border-top: 1px solid var(--line) !important; padding: 14px 4px 4px !important; margin-top: 16px !important; }
  body.navDrawerOpen .sidebar .gate2cDrawerFooter #portalPrefsRow { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; }
  body.navDrawerOpen .sidebar .gate2cDrawerFooter #portalPrefsRow > span[style], body.navDrawerOpen .sidebar #portalClockWrap, body.navDrawerOpen .sidebar #gate284AudioCtl, body.navDrawerOpen .sidebar #gate285PushCtl { display: contents !important; }
  body.navDrawerOpen .sidebar .gate2cDrawerFooter #portalPrefsRow .muted { font-size: 12.5px; color: var(--text-2) !important; margin-top: 6px; }
  body.navDrawerOpen .sidebar .gate2cDrawerFooter #portalPrefsRow select { width: 100% !important; max-width: none !important; }
  body.navDrawerOpen .sidebar .gate2cDrawerFooter #portalRoleTag { display: none !important; }
  body.navDrawerOpen .sidebar .gate2cDrawerFooter .tz-status:empty { display: none !important; }
  body.navDrawerOpen .sidebar .gate2cDrawerFooter #gate2cDrawerSignOut { margin-top: 12px; height: 42px; color: var(--bad); border-color: rgb(var(--bad-rgb) / 0.3); }
}
#portalPrefsRow select:not([multiple]) {
  -webkit-appearance: none; appearance: none; padding-right: 34px !important; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center / 16px 16px !important;
  border: 1px solid var(--line-strong) !important; border-radius: var(--r-m) !important; color: var(--text) !important; min-height: 38px;
}

/* =====================================================================================================
   8. PHONE PASS (26/9, after Minas walked it on a phone): tap targets, sheets, cards for every table
   ===================================================================================================== */
@media (max-width: 640px) {
  /* type ≥16px in fields: iOS zooms the page into any smaller field on focus */
  .tab input:not([type="checkbox"]):not([type="radio"]), .tab select, .tab textarea, .input, .select,
  #portalPrefsPopover select, .g2c-auth-card input, #cpPanel input, #cpPanel textarea, .rs262c-f input, .rs262c-f select {
    font-size: 16px !important; min-height: 44px;
  }
  /* tap targets: 40–44 px */
  .btn, .btn.tiny, .btn.small, .btn-secondary { min-height: 40px; }
  .telemetry-view-toggle .btn, .rdSeg button { height: 36px !important; }
  .rdSecTabs button { height: 44px; }
  .rdMore, .rdIconBtn { width: 40px !important; height: 40px !important; }
  .rdMenuItem { height: 46px; font-size: 15px; }
  .g293HealthPill { padding: 8px 0 !important; }
  .rdAdvToggle { padding: 10px 0; }
  .g2c-link { min-height: 40px; }
  #gate138MetricDetailHost .g138-range, #gate138MetricDetailHost .g138-nav { height: 36px; }
  #gate138MetricDetailHost .g138-close { height: 40px; }

  /* the bottom bar sits under every dialog (they start at z-index 1000) */
  #gate2cBottomNav.gate2cBottomNav { z-index: 950; }
  #gate2cBottomNav.gate2cBottomNav button.active svg { background: var(--accent-soft); border-radius: 14px; padding: 3px 14px; width: 52px; height: 28px; flex-basis: 28px; }
  #gate2cBottomNav.gate2cBottomNav button svg { padding: 3px 14px; width: 52px; height: 28px; flex-basis: 28px; box-sizing: border-box; }

  /* the drawer is navigation only: time/language and sign-out live in the account menu (avatar) */
  body.navDrawerOpen .sidebar .gate2cDrawerFooter, .sidebar .gate2cDrawerFooter { display: none !important; }

  /* time & language as a bottom sheet (the popover the gear opens; styles.css hides it on phones) */
  #portalPrefsPopover[style*="display: block"] {
    display: block !important; position: fixed !important; z-index: 6000 !important;
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-width: none !important; max-height: 86vh; overflow-y: auto;
    border-radius: 20px 20px 0 0 !important; padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(#portalPrefsPopover[style*="display: block"])::before {
    content: ''; position: fixed; inset: 0; z-index: 5990; background: var(--scrim);
  }

  /* overview: the folded panels open from anywhere on their row, and say what is inside while folded */
  #tab_dashboard .g2cMobCollapsible { cursor: pointer; }
  #tab_dashboard .g2cMobCollapsible.is-mobile-collapsed .dashAlertsSub,
  #tab_dashboard .g2cMobCollapsible.is-mobile-collapsed .dashOperationalSub { display: block !important; font-size: 12.5px !important; margin-top: 1px; }
  #tab_dashboard .dashAlertsLead, #tab_dashboard .dashOperationalLead { flex: 1 1 auto !important; display: flex !important; flex-direction: column; align-items: flex-start !important; text-align: left !important; min-width: 0; }
  #tab_dashboard .dashAlertsCard, #tab_dashboard .dashOperationalCard { position: relative; }
  #tab_dashboard .dashAlertsCard .g2cMobCollapseBtn, #tab_dashboard .dashOperationalCard .g2cMobCollapseBtn { position: absolute; top: 12px; right: 12px; }
  #tab_dashboard .dashAlertsTop, #tab_dashboard .dashOperationalTop { padding-right: 40px; }
  #tab_dashboard .dashAlertsActions { order: 4 !important; margin: 10px 0 0 !important; }
  #tab_dashboard .dashAlertsTitle, #tab_dashboard .dashOperationalTitle { font-size: 14px !important; }
  /* the filters: always open on a phone, one select a row (27/9: two on a row cut the names — Minas's screenshot), no header */
  #tab_dashboard #dashFilterPanel > .g2cMobHeaderRow { display: none !important; }
  #tab_dashboard #dashFilterPanel.is-mobile-collapsed .g2cMobBody { display: block !important; }
  #tab_dashboard #dashFilterPanel { cursor: default; margin-bottom: 14px !important; }
  #tab_dashboard .dashGroupFilters { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; }
  #tab_dashboard .dashGroupFilters .dashField { width: auto !important; min-width: 0 !important; }
  #tab_dashboard .dashGroupActions { width: 100% !important; justify-content: flex-start; }
  #tab_dashboard .dashRefreshBtn, #tab_dashboard .dashCustomizeBtn { height: 38px !important; }
  /* a card whose photo/icon is not there yet keeps its title where it will be */
  #dashCards .dashCard:not(:has(.dashCardThumb)) .dashTitleRow .dashTitle { grid-column: 1 / -1; }

  /* KPI tiles two by two */
  #gate138MetricDetailHost .g138-kpi .item { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }
  .telemetry-chart-shell-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .telemetry-chart-shell-stat { min-width: 0 !important; width: auto !important; }

  /* alerts: the state on its own row under the rule name (the right column squeezed it to three lines) */
  #tab_alerts table.gate127-alerts-state tbody tr { grid-template-columns: 1fr !important; grid-template-areas: "rule" "status" "target" "cond" "actions" !important; }
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(4) { justify-self: stretch !important; max-width: none !important; }
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(4) > div { flex-direction: row !important; align-items: center !important; flex-wrap: wrap; gap: 4px 8px; }
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(4) .rdStateMeta { margin-top: 0 !important; white-space: normal; }
  #tab_alerts table.gate127-alerts-state tbody td:nth-child(4)::before { display: none !important; }
  #tab_alerts .rdEmptyCell, #tab_alerts table.gate127-alerts-events tbody td.rdEmptyCell, #tab_alerts table.gate127-alerts-tbl tbody tr td.rdEmptyCell { display: none !important; }
  #tab_alerts .gate127-alerts-header .gate127-alerts-actions .btn { height: 38px; }

  /* users: numbers in a compact grid, the role once, invitations and activity as cards */
  #usersAccessSummaryCards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #usersAccessSummaryCards > .card { padding: 14px 16px !important; }
  #usersAccessSummaryCards > .card:nth-child(3) { grid-column: 1 / -1; }
  #usersAccessSummaryCards > .card:nth-child(3) > div:nth-child(2) { font-size: 17px !important; }
  #usersAccessSummaryCards > .card > .hint { display: none; }
  #usersAccessMembers tbody tr:has(.usersAccessActionSelect) > td:nth-child(3) { display: none; }
  #usersAccessMembers tbody tr:has(.usersAccessActionSelect) { grid-template-areas: "who acts" "mail mail" "seen seen" !important; }
  #usersAccessMembers tbody tr:has(.usersAccessActionSelect) > td:nth-child(6) { justify-self: start; }
  #usersAccessInvitations table, #usersAccessInvitations tbody, #usersAccessActivity table, #usersAccessActivity tbody { display: block; min-width: 0 !important; width: 100%; }
  #usersAccessInvitations thead, #usersAccessActivity thead { display: none; }
  #usersAccessInvitations tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px;
    grid-template-areas: "mail mail" "role state" "made ends" "send send" "acts acts"; padding: 12px 16px; border-bottom: 1px solid var(--line);
  }
  #usersAccessInvitations tbody td, #usersAccessActivity tbody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; font-size: 13px; }
  #usersAccessInvitations tbody td:nth-child(1) { grid-area: mail; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
  #usersAccessInvitations tbody td:nth-child(2) { grid-area: role; color: var(--text-2); }
  #usersAccessInvitations tbody td:nth-child(3) { grid-area: state; justify-self: end; color: var(--muted); }
  #usersAccessInvitations tbody td:nth-child(4) { grid-area: made; color: var(--muted); font-size: 12px; }
  #usersAccessInvitations tbody td:nth-child(5) { grid-area: ends; justify-self: end; color: var(--muted); font-size: 12px; }
  #usersAccessInvitations tbody td:nth-child(6) { grid-area: send; color: var(--muted); font-size: 12px; }
  #usersAccessInvitations tbody td:nth-child(7) { grid-area: acts; }
  #usersAccessInvitations tbody td:nth-child(7):empty { display: none; }
  #usersAccessActivity tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px;
    grid-template-areas: "what what" "who when" "area result"; padding: 12px 16px; border-bottom: 1px solid var(--line);
  }
  #usersAccessActivity tbody td:nth-child(1) { grid-area: when; justify-self: end; color: var(--muted); font-size: 12px; white-space: nowrap; }
  #usersAccessActivity tbody td:nth-child(2) { grid-area: who; color: var(--text-2); overflow-wrap: anywhere; }
  #usersAccessActivity tbody td:nth-child(3) { grid-area: area; color: var(--muted); font-size: 12px; }
  #usersAccessActivity tbody td:nth-child(4) { grid-area: what; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
  #usersAccessActivity tbody td:nth-child(5) { grid-area: result; justify-self: end; font-size: 12px; }
  #usersAccessActivity .usersAccessControls > * { flex: 1 1 100%; max-width: none; }

  /* settings: a card head stacks its note under the title */
  #gate146ToolsCards > .card > .rdCardHead { flex-direction: column; align-items: flex-start !important; gap: 2px; position: relative; }
  .rdFoldable > .rdCardHead { padding-right: 48px !important; }
  .rdFoldable > .rdCardHead::after { position: absolute; right: 18px; top: 50%; margin-top: -8px; }
  .rdFoldable > .rdCardHead > .muted { margin-left: 0; }
  #gate146ToolsCards .row { flex-wrap: wrap; }
  #gate146ToolsCards .row > .input, #gate146ToolsCards .row > select, #gate146ToolsCards .row > input { flex: 1 1 100%; max-width: none !important; }

  /* scheduled reports / export: full-screen sheets, wide tables scroll inside their box */
  #rs262cPanel { width: 100vw !important; max-width: 100vw !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; left: 0 !important; top: 0 !important; transform: none !important; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto; }
  .rs262c-tbl { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ---------- customise cards (app_core.js gate137 "cl" drawer) ---------- */
.clOverlay { background: var(--scrim) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.clDrawer { background: var(--surface) !important; border-left: 1px solid var(--line) !important; box-shadow: var(--shadow-3) !important; }
.clDrawerHeader { padding: 18px 20px !important; border-bottom: 1px solid var(--line) !important; }
.clDrawerTitle { font-size: 17px !important; font-weight: 650 !important; letter-spacing: -0.015em; }
.clDrawerSub { color: var(--muted); opacity: 1 !important; font-size: 12.5px !important; }
.clDrawerBody { padding: 16px 20px !important; }
.clDrawerFooter { padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid var(--line) !important; }
.clSearch, .clSelect { min-height: 38px; background: var(--surface) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-m) !important; font-size: 14px !important; }
.clSectionTitle { font-size: 12.5px !important; font-weight: 600; color: var(--text-2); opacity: 1 !important; margin: 16px 0 8px !important; }
.clRow { padding: 8px 10px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-m) !important; }
.clHandle { color: var(--faint); opacity: 1 !important; cursor: grab; }
.clMedia { border-radius: 10px !important; background: var(--surface-2) !important; border-color: var(--line) !important; }
.clMediaPh { color: var(--faint); opacity: 1 !important; }
.clName { font-size: 14px !important; }
.clBtn { height: 30px; padding: 0 11px !important; border-radius: 8px !important; border: 1px solid var(--line-strong) !important; background: var(--surface) !important; color: var(--text) !important; font-weight: 600; font-size: 12.5px !important; }
.clBtn:hover { background: var(--surface-2) !important; }
.clBtnPri { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: transparent !important; }
.clPreviewOverlay { background: var(--scrim) !important; }
.clPreviewPanel { background: var(--surface) !important; border-color: var(--line) !important; box-shadow: var(--shadow-3) !important; }
/* [1/10] the drawer is narrow (520 px): the sensor's name and number beside its photo and the buttons on a line of their
   own, on a computer too — four Greek buttons squeezed the name and the number out of the row (Minas 1/10: «δεν αναφέρει
   όνομα αισθητήρα ή νούμερο, με αποτέλεσμα ο χρήστης να πρέπει να θυμάται το νούμερο»). The phone keeps its 48 px photo. */
.clRow { display: grid !important; grid-template-columns: 22px 56px minmax(0, 1fr); grid-template-areas: "handle media main" "acts acts acts"; column-gap: 10px; row-gap: 8px; align-items: center; }
.clHandle { grid-area: handle; }
.clMedia { grid-area: media; }
.clMain { grid-area: main; }
.clActions { grid-area: acts; justify-content: flex-start !important; }
@media (max-width: 640px) {
  .clOverlay .clDrawer { width: 100vw !important; }
  .clDrawerHeader { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px !important; }
  .clDrawerBody { padding: 14px 16px !important; }
  .clRow { display: grid !important; grid-template-columns: 22px 48px minmax(0, 1fr); grid-template-areas: "handle media main" "acts acts acts"; column-gap: 10px; row-gap: 10px; align-items: center; }
  .clHandle { grid-area: handle; }
  .clMedia { grid-area: media; width: 48px !important; height: 48px !important; flex: none !important; }
  .clMain { grid-area: main; }
  .clActions { grid-area: acts; justify-content: flex-start !important; }
  .clBtn { height: 36px; }
}
/* a card without a photo: an image outline instead of "No photo" squeezed into 48 px */
.clMediaPh { font-size: 0 !important; width: 22px; height: 22px; padding: 0 !important; background: var(--faint);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2.5'/><circle cx='9' cy='9' r='2'/><path d='m21 15-4.5-4.5L5 21'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2.5'/><circle cx='9' cy='9' r='2'/><path d='m21 15-4.5-4.5L5 21'/></svg>") no-repeat center / contain; }
@media (max-width: 640px) {
  .clActions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .clActions .clBtn { width: 100%; }
}
/* the chart's selection chips read as labels, not code */
.telemetry-chart-shell-chip { font-family: var(--font) !important; background: var(--surface-3) !important; border: 0 !important; color: var(--text-2) !important; border-radius: 999px !important; font-size: 12.5px !important; }
.telemetry-chart-shell-chip .mono, .telemetry-chart-shell-chip code { font-family: var(--font) !important; font-size: inherit !important; background: transparent !important; padding: 0 !important; color: var(--text) !important; font-weight: 600; }
@media (max-width: 640px) {
  #tab_devices > .row { flex-wrap: nowrap !important; }
  #tab_devices > .row #deviceSelect { flex: 1 1 auto; min-width: 0 !important; max-width: none !important; }
  #tab_devices > .row #refresh { flex: 0 0 auto; }
  .tab > h2:first-child + .muted, .tab > h2:first-child + div.muted, .gate127-alerts-header h2 + .muted, .telemetry-latest-head h2 + .muted, .rdLead { font-size: 13.5px !important; }
}
/* a viewer's card said "Read-only" on every row: on a phone the absence of buttons says it */
@media (max-width: 640px) { .rdReadOnly { display: none !important; } }
@media (max-width: 700px) { #tab_alerts .gate127-alerts-tbl tbody td:last-child:has(> .rdReadOnly:only-child) { display: none !important; } }

/* =====================================================================================================
   9. DEVICES: List · Status · New device (26/9, redesign.js devicesLayout) and the battery / power / signal marks
   ===================================================================================================== */
/* one view at a time: the page's list, the Status cards, or the claim form in a tab of its own */
#rdDevStatus { display: none; }
#tab_devices[data-rd-view="status"] #rdDevStatus { display: block; }
#tab_devices[data-rd-view="status"] > .row,
#tab_devices[data-rd-view="status"] #devicesEmpty,
#tab_devices[data-rd-view="status"] #devicesTable,
#tab_devices[data-rd-view="status"] #gate227ClaimCard,
#tab_devices[data-rd-view="list"] #gate227ClaimCard,
#tab_devices[data-rd-view="claim"] > .row,
#tab_devices[data-rd-view="claim"] #devicesTable { display: none !important; }
#tab_devices[data-rd-view="claim"] #gate227ClaimCard { margin-top: 0 !important; max-width: 640px; }
#tab_devices[data-rd-view="claim"] #gate227ClaimCard > details > summary { cursor: default; font-size: 15px; }
#tab_devices[data-rd-view="claim"] #gate227ClaimCard > details > summary::before { display: none; }
#rdDevTabs { margin-top: 4px; }

/* the Status bar: All / Need attention · updated · Refresh */
.rdStatusBar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.rdStatusSeg { margin: 0; flex: 0 0 auto; }
.rdStatusSeg button { flex: 0 0 auto; padding: 0 12px; height: 32px; font-size: 13px; }
.rdSegCount { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: rgb(var(--fg-rgb) / 0.07); color: var(--muted); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.rdSegCount.is-bad { background: var(--bad); color: var(--on-bad); }
.rdStatusNote { color: var(--muted); font-size: 12.5px; margin-left: auto; font-variant-numeric: tabular-nums; }
.rdStatusRefresh { height: 32px; padding: 0 12px; font-size: 13px; }
.rdStatusEmpty { display: flex; align-items: center; gap: 10px; padding: 28px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-l); color: var(--muted); font-size: 14px; }
.rdStatusEmpty.is-ok { color: var(--ok); border-style: solid; border-color: transparent; background: var(--ok-soft); font-weight: 500; }
.rdStatusEmpty svg { width: 22px; height: 22px; flex: 0 0 22px; }

/* one card per device and per node; the ones that need a hand come first and carry a coloured edge */
.rdStatusGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.rdDevCard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); min-width: 0; }
.rdDevCard.is-bad { border-color: rgb(var(--bad-rgb) / 0.35); box-shadow: 0 0 0 3px var(--bad-soft), var(--shadow-1); }
.rdDevCard.is-warn { border-color: rgb(var(--warn-rgb) / 0.35); }
.rdDevCard.is-off { opacity: .7; }
.rdDevHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rdDevName { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rdDevName > b { font-size: 15px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rdDevRole { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.rdDevRole .rdDot, .rdDevFacts .rdDot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); display: inline-block; vertical-align: middle; margin: 0 6px; }
.rdDevRole .rdDot { margin: 0; }
.rdDevState { flex: 0 0 auto; gap: 6px; }
.rdDevState > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rdDevState.ok > i { box-shadow: 0 0 0 3px var(--ok-soft); }
.rdDevIssues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rdDevIssues li { position: relative; padding-left: 16px; font-size: 13px; font-weight: 500; line-height: 1.45; }
.rdDevIssues li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rdDevIssues li.is-bad { color: var(--bad); }
.rdDevIssues li.is-warn { color: var(--warn); }
.rdDevFacts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.rdDevFacts > div { display: contents; }
.rdDevFacts dt { color: var(--muted); font-weight: 400; white-space: nowrap; }
.rdDevFacts dd { margin: 0; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rdDevFacts dd > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rdWarnTxt { color: var(--warn); font-weight: 500; }
.rdBadTxt { color: var(--bad); font-weight: 600; }   /* [SENSORS 29/9] sensors not answering: red, as everywhere */
.rdDevFacts .rdMono { font-family: var(--mono); font-size: 12px; color: var(--text-2); font-variant-numeric: normal; }
.rdDevFoot { display: flex; justify-content: flex-end; margin-top: -2px; }
.rdLinkBtn { border: 0; background: none; padding: 4px 2px; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.rdLinkBtn:hover { text-decoration: underline; text-underline-offset: 2px; }

/* battery (five cells, the colour says how full), mains (a bolt), signal (four bars) */
.rdBatt, .rdMains, .rdSig { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rdBatt .rdBattIco { width: 24px; height: 13px; flex: 0 0 24px; }
.rdBatt.is-ok { color: var(--ok); }
.rdBatt.is-warn { color: var(--warn); }
.rdBatt.is-bad { color: var(--bad); }
.rdBattPct { font-weight: 600; }
.rdMains .rdMainsIco { width: 15px; height: 15px; flex: 0 0 15px; color: var(--warn); }
.rdSig .rdBars { width: 17px; height: 12px; flex: 0 0 17px; }
.rdSig .rdBars rect { fill: currentColor; }
.rdSig .rdBars rect.off { opacity: .2; }
.rdSig.is-excellent, .rdSig.is-good { color: var(--ok); }
.rdSig.is-fair { color: var(--text-2); }
.rdSig.is-weak { color: var(--warn); }
.rdSig > span { color: var(--text); }
/* in the list's node row and the Overview's status bar the marks sit in running text */
#devicesTable tr.node-row .rdBatt, #devicesTable tr.node-row .rdMains { vertical-align: middle; }
#devicesTable tr.node-row .rdMains { color: var(--text-2); }
#dashSBBatt .rdBatt { font-size: inherit; }
.dashOperationalChipValue .rdBatt { color: inherit; gap: 5px; }
.dashOperationalChipValue .rdBatt .rdBattIco { width: 20px; height: 11px; flex-basis: 20px; }

/* the rules list: "added automatically", "no email or Telegram" */
.rdRuleName { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.rdRuleTag { height: 20px; padding: 0 8px; font-size: 11.5px; cursor: help; }
/* the new-rule form: e-mail the administrator (ticked by default) */
.rdNotifyNew { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--r-m); background: var(--accent-soft); color: var(--text) !important; font-size: 13.5px !important; font-weight: 500 !important; cursor: pointer; line-height: 1.45; }
.rdNotifyNew input { margin: 2px 0 0; flex: 0 0 auto; }
.rdNotifyNew span { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .rdStatusBar { gap: 10px; }
  .rdStatusSeg { flex: 1 1 100%; }
  .rdStatusSeg button { flex: 1 1 0; height: 36px; }
  .rdStatusNote { margin-left: 0; flex: 1 1 auto; }
  .rdStatusRefresh { height: 36px; flex: 0 0 auto; }
  .rdStatusGrid { grid-template-columns: 1fr; gap: 12px; }
  .rdDevCard { padding: 14px 16px 12px; }
  #tab_devices[data-rd-view="claim"] #gate227ClaimCard { max-width: none; }
}

/* =====================================================================================================
   10. DEVICE NOTIFICATIONS (26/9, redesign.js notifySettingsCard / notifyMenu) — a service of the account
   ===================================================================================================== */
.rdNotifyCard { padding: 0 !important; margin: 16px 0 20px !important; overflow: hidden; max-width: 860px; }
.rdNotifyHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.rdNotifyHead h3 { margin: 0 0 4px; font-size: 16px; }
.rdNotifyHead p { margin: 0; font-size: 13.5px; max-width: 60ch; }
.rdNotifyBody { padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.rdNotifyBody.is-off { opacity: .55; }
.rdNotifyRow { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; }
.rdNotifyLabel { font-size: 13px; font-weight: 500; color: var(--text-2); }
.rdNotifyDelay { max-width: 280px; }
.rdNotifyChannels { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rdCheck { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; min-height: 32px; }
.rdCheck input { margin: 0; flex: 0 0 auto; }
.rdCheck small { font-size: 12px; }
.rdNotifyRecipients { border-top: 1px solid var(--line); padding-top: 12px; }
.rdNotifyRecHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13.5px; }
.rdRecList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rdRecList li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rdRecList li:last-child { border-bottom: 0; }
.rdRecWho { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rdRecWho b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.rdRecWho span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.rdRecMeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }
.rdRecMe { color: var(--accent); font-weight: 600; }
.rdRecOver { color: var(--warn); font-weight: 600; }
.rdNotifyRecipients .hint { margin: 8px 0 0; }
.rdNotifyFoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 12px; }
.rdNotifyApplied { font-weight: 600; color: var(--muted); }
.rdNotifyApplied.is-ok { color: var(--ok); }
/* a switch */
.rdSwitch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; position: relative; }
.rdSwitch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rdSwitchTrack { width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s var(--ease); }
.rdSwitchTrack::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s var(--ease); }
.rdSwitch input:checked + .rdSwitchTrack { background: var(--accent); }
.rdSwitch input:checked + .rdSwitchTrack::after { transform: translateX(16px); }
.rdSwitch input:focus-visible + .rdSwitchTrack { outline: 2px solid rgb(var(--accent-rgb) / 0.55); outline-offset: 2px; }
.rdSwitch input:disabled + .rdSwitchTrack { opacity: .5; }
.rdSwitchText { font-size: 13px; font-weight: 600; color: var(--text-2); }
/* the account menu row */
.rdMenuNotify { height: auto !important; min-height: 44px; padding: 6px 10px !important; }
.rdMenuNotifyText { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; text-align: left; }
.rdMenuNotifyText small { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.rdMiniSwitch { width: 30px; height: 18px; border-radius: 999px; background: var(--line-strong); position: relative; flex: 0 0 30px; }
.rdMiniSwitch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); }
.rdMiniSwitch.is-on { background: var(--accent); }
.rdMiniSwitch.is-on::after { transform: translateX(12px); }
.rdMenuItem.is-current { font-weight: 600; }
.rdMenuItem.is-current::after { content: "✓"; margin-left: auto; color: var(--accent); }
/* Users & Access: said where administrator rights are given */
.rdAdminNotifyHint { flex-basis: 100%; width: 100%; font-size: 12px; color: var(--accent); margin-top: 4px; line-height: 1.35; }
/* the Status card's notification button */
.rdDevFoot { gap: 14px; }
.rdNotifyBtn { display: inline-flex; align-items: center; gap: 6px; }
.rdNotifyBtn svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .rdNotifyHead { padding: 16px; }
  .rdNotifyBody { padding: 14px 16px 16px; }
  .rdNotifyRow { grid-template-columns: 1fr; gap: 6px; }
  .rdNotifyDelay { max-width: none; width: 100%; }
  .rdRecList li { align-items: flex-start; }
  .rdDevFoot { justify-content: space-between; }
}
.rdHasNotifyHint { flex-wrap: wrap !important; row-gap: 4px !important; }
.rdHasNotifyHint > .rdAdminNotifyHint { flex: 1 0 100%; order: 99; max-width: 280px; }
@media (max-width: 640px) {
  .rdNotifyHead { flex-direction: column; align-items: stretch; gap: 10px; }
  .rdNotifyHead .rdSwitch { align-self: flex-start; }
}
.rdAdminNotifyNote { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--accent-soft); color: var(--text); font-size: 13px; }
.rdAdminNotifyNote svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--accent); }

/* ---------- [UX 27/9] small fixes from the UX check (Minas: «Ναι») ---------- */
/* the rule's on/off: the portal's switch (.rdSwitch/.rdSwitchTrack, as in Settings) with its word; the word hides on
   a desktop, where the column head says it */
.rdRuleSwitch { min-height: 40px; }
.rdRuleSwitch .rdSwitchTxt { font-size: 13px; color: var(--text-2); }
@media (min-width: 701px) { #tab_alerts .rdRuleSwitch .rdSwitchTxt { display: none; } }
/* live pages update themselves: their Refresh shows only while the live stream is off */
body.rdIsLive #dashRefresh, body.rdIsLive #gate105_alerts_refresh { display: none !important; }
/* Settings → Advanced: the WiFi slot names and the JSON copy of the settings */
.rdAdvanced { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.rdAdvanced > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; font-weight: 600; color: var(--text-2); }
.rdAdvanced > summary::-webkit-details-marker { display: none; }
.rdAdvanced > summary::before { content: "\25B8"; color: var(--muted); }
.rdAdvanced[open] > summary::before { content: "\25BE"; }
.rdAdvancedBody { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
/* targets for a finger on a phone (were 20–30 px); padding with a negative margin keeps the layout where it was */
@media (max-width: 640px) {
  .rdLinkBtn { padding-block: 10px; margin-block: -8px; }
  .rdLead .rdBad { padding-block: 10px; margin-block: -10px; }
  .g2cMobCollapsible .g2cMobCollapseBtn { width: 40px !important; height: 40px !important; }
  #usersAccessMembers .usersAccessActionSelect { min-height: 40px; }
}
/* [SENSOR NAMES 27/9] the card's «⋯» (rename the sensor where it is) */
.dashTitleRow .rdCardMore { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; color: var(--muted); opacity: .7; }
.dashTitleRow .rdCardMore:hover, .dashTitleRow .rdCardMore:focus-visible { opacity: 1; color: var(--text); }
.dashTitleRow .rdCardMore svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .dashTitleRow .rdCardMore { width: 40px; height: 40px; margin-block: -6px; margin-right: -8px; } }
/* [USERS 27/9] Users & Access in three tabs (redesign.js usersTabs) */
#rdUsersTabs { margin-top: 16px; }
#tab_users_access[data-rd-view="members"] #usersAccessInvitations,
#tab_users_access[data-rd-view="members"] #usersAccessActivity,
#tab_users_access[data-rd-view="invites"] #usersAccessMembers,
#tab_users_access[data-rd-view="invites"] #usersAccessActivity,
#tab_users_access[data-rd-view="activity"] #usersAccessMembers,
#tab_users_access[data-rd-view="activity"] #usersAccessInvitations { display: none !important; }
/* [READINGS 27/9] «Τελευταίες»: one line per sensor with its newest value (redesign.js latestNow) */
.rdLatestSeg { margin: 0 0 12px; }
#tab_latest[data-rd-latest="now"] #latestTable,
#tab_latest[data-rd-latest="now"] #latestViewStatus,
#tab_latest[data-rd-latest="now"] #latestEmpty { display: none !important; }
.rdLatestNow { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden; }
.rdLatestRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 11px 16px;
  text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; color: var(--text); }
.rdLatestRow:last-child { border-bottom: 0; }
.rdLatestRow:hover { background: rgb(var(--fg-rgb) / 0.03); }
.rdLatestRow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rdLatestL, .rdLatestR { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdLatestR { align-items: flex-end; flex: 0 0 auto; text-align: right; }
.rdLatestName { font-weight: 600; overflow-wrap: anywhere; }
.rdLatestWhere, .rdLatestAge { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.rdLatestVal { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rdLatestEmpty { padding: 16px; }

/* ---------- [LIGHT 27/9] what the eye stumbled on (Minas's screenshot of the Overview) ---------- */
/* the selected menu entry: blue on pale blue was 4.18:1 */
:root:not([data-theme="dark"]) .sidebar .navbtn.active { color: var(--accent-hover); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar .navbtn.active { color: var(--accent); } }
.rdBrandSub { color: var(--accent); }
/* the card's «⋯» on its title's line (it hung 25 px lower, on a row of its own) */
#dashCards > .dashCard { position: relative; }
#dashCards .dashCard .dashTitleRow .dashTitle { padding-right: 30px; }   /* the «⋯» sits over this corner */
/* [MESSAGES 27/9, found on the way] only a card WITH the «⋯» (administrators) keeps that corner free: an operator's or a
   viewer's phone card lost 30 of its 97 px to it, and «Θερμοκρασία» broke in the middle («Θερμοκρ-ασία») */
#dashCards .dashCard:not(:has(.rdCardMore)) .dashTitleRow .dashTitle { padding-right: 0; }
#dashCards .dashCard .dashTitleRow .rdCardMore { position: absolute; top: 10px; right: 8px; margin: 0 !important; }
@media (max-width: 640px) { #dashCards .dashCard .dashTitleRow .rdCardMore { top: 6px; right: 4px; } }
/* the mini chart on a row of its own, under the number: it sat on the number and its unit on narrow cards */
body.is-card-v2-layout #dashCards .dashCard > .dashSparkRow { grid-area: spark !important; justify-self: start; margin: 8px 0 0 0 !important; }
/* the node's strip: the cards' elevation (it had a heavy shadow of its own) and room before the cards under it */
#dashStatusBar.dashStatusBar { box-shadow: var(--shadow-1); border-color: var(--line); margin-bottom: 12px; }
/* a long pill wraps instead of being cut ("Αιτιολογημένο · Αποσυνδεδεμένο (ε…") */
body.is-card-v2-layout #dashCards .dashCard > .dashCardCompliancePill,
body.is-card-v2-layout #dashCards .dashCard > .dashCardStatusPill:not(.dashCardCompliancePill) {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; height: auto; line-height: 1.35;
  padding-top: 4px; padding-bottom: 4px;
}
/* the phone's bottom bar: its selected entry on the new ground (3.97:1 in the brand blue) */
#gate2cBottomNav.gate2cBottomNav button.active { color: var(--accent-hover); }
/* a card's title on a phone wraps to two lines instead of being cut to «Θερμοκρασία…» (the «⋯» sits beside it) */
@media (max-width: 640px) {
  #dashCards .dashCard .dashTitleRow .dashTitle { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
  /* the «⋯» on the "πριν 3 λεπ." line (redesign.js cardMenus): the title keeps the whole width */
  #dashCards .dashCard.rd-more-meta .dashTitleRow .dashTitle { padding-right: 0; }
  #dashCards .dashCard .dashTitleRow .dashTitle { min-height: 2.5em; }   /* one line or two, the numbers of a row line up */
  #dashCards .dashCard.rd-more-meta > .dashMeta { justify-self: stretch; display: flex; align-items: center; gap: 6px; }
  #dashCards .dashCard.rd-more-meta > .dashMeta .rdCardMore { position: static; margin: -8px -6px -8px auto !important; width: 40px; height: 40px; flex: 0 0 auto; }
}

/* =====================================================================================================
   [NAV-TABLET 27/9] 641–1100px keeps the rail; the arrow (redesign.js) opens the names OVER the page.
   The rail's own rules are restated for the open state (display:revert would fall back to the browser's).
   ===================================================================================================== */
@media (min-width: 641px) and (max-width: 1100px) {
  body.navExpanded .sidebar { width: 248px; padding: 18px 14px 14px; align-items: stretch; box-shadow: var(--shadow-3); z-index: 5000; }
  body.navExpanded .sidebar > .rdBrand { padding: 2px 8px 18px; }
  body.navExpanded .sidebar > .rdBrand .rdBrandText { display: flex; }
  body.navExpanded .rdNavGroup { display: block; }
  body.navExpanded .sidebar .nav { align-items: stretch; }
  body.navExpanded .sidebar .navbtn { width: 100%; padding: 0 12px; justify-content: flex-start; font-size: 14px; }
  body.navExpanded .rdSideUser { width: 100%; padding: 8px; justify-content: flex-start; border: 1px solid var(--line); background: var(--surface-2); }
  body.navExpanded .rdSideUserText { display: flex; }
  body.navExpanded .rdCollapse { width: 100%; padding: 0 12px; justify-content: flex-start; }
  body.navExpanded .rdCollapse span { display: inline; }
  body.navExpanded .rdCollapse svg { transform: none; }
  body.navExpanded::after { content: ""; position: fixed; inset: 0; z-index: 4999; background: var(--scrim); }
}

/* [LANDSCAPE 27/9] a phone on its side: wider than 640px but at most 500px tall. The chrome ate the whole
   screen — the Overview's first reading sat at 514px on a 412px screen — and the rail's arrow fell below it. */
@media (min-width: 641px) and (max-height: 500px) {
  :root { --top-h: 48px; }
  .main { padding-top: 14px; }
  .tab > h2:first-child, .tab h2.rdPageTitle, .gate127-alerts-header h2, .telemetry-latest-head h2, .rdPageHead h2 { font-size: 21px; margin-bottom: 4px !important; }
  .tab > h2:first-child + .muted, .tab > h2:first-child + div.muted, .gate127-alerts-header h2 + .muted, .telemetry-latest-head h2 + .muted { font-size: 13px; margin-bottom: 12px; }
  .rdDashStatus { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .sidebar { padding-top: 10px; padding-bottom: 8px; }
  .sidebar > .rdBrand { padding-bottom: 10px; }
  .sidebar .navbtn { height: 38px; }
  .rdSideFoot { padding-top: 6px; gap: 4px; }
}

/* [ALARMS-TABLE 27/9] ≤980px hides the 3rd column of the Rules and State tables (app_alerts_pro.js) with
   display:none on its CELLS — which takes them out of the table grid, so every later cell slid one column to
   the left while the <colgroup> kept all six widths: «Συνθήκη» and «Ενεργός» landed in the unsized columns
   (43px each: one letter per line, Minas's screenshot on a phone on its side) and an empty 220px column sat on
   the right. The column definition goes with its cells; then, in the table range (701–980px, below that the
   rows are cards), the desktop widths give «Συνθήκη» the room: a 92px switch column, not 110; a 150px name. */
@media (max-width: 980px) {
  #tab_alerts table.gate127-alerts-rules col:nth-child(3),
  #tab_alerts table.gate127-alerts-state col:nth-child(3) { display: none; }
}
@media (min-width: 701px) and (max-width: 980px) {
  #tab_alerts table.gate127-alerts-rules col:nth-child(2) { width: 150px !important; }
  #tab_alerts table.gate127-alerts-rules col:nth-child(5) { width: 92px !important; }   /* the switch + cell padding needs ~74px; the head «Ενεργός» ~88 */
  #tab_alerts table.gate127-alerts-rules col:nth-child(6) { width: 170px !important; }
}
/* ...and below 900px the old phone rule in styles.css (4) turns every .tab .table into display:block with its
   thead and tbody as two separate tables — header and rows then size their columns apart and no longer line up
   (844px on its side, 820px tablet). The alarm tables already scroll in .gate127-alerts-tblwrap: they stay tables. */
@media (min-width: 701px) and (max-width: 900px) {
  #tab_alerts .gate127-alerts-tblwrap > table.gate127-alerts-tbl { display: table; }
  #tab_alerts .gate127-alerts-tblwrap > table.gate127-alerts-tbl > thead { display: table-header-group; }
  #tab_alerts .gate127-alerts-tblwrap > table.gate127-alerts-tbl > tbody { display: table-row-group; }
  /* the same for the three other tables the check found apart (each sits in a container that already scrolls) */
  #devicesTable > .tbl, #usersAccessMembers .tbl, .gate255-vlatest-outer .tbl.gate255-vlatest { display: table; }
  #devicesTable > .tbl > thead, #usersAccessMembers .tbl > thead, .gate255-vlatest-outer .tbl.gate255-vlatest > thead { display: table-header-group; }
  #devicesTable > .tbl > tbody, #usersAccessMembers .tbl > tbody, .gate255-vlatest-outer .tbl.gate255-vlatest > tbody { display: table-row-group; }
}

/* =====================================================================================================
   [CARDS 27/9] Minas: «το πράσινο Υγιές σε όλο το μήκος, με ίσια περιθώρια»· the old right-angle line back
   on a problem; the device-status cards one size; the chart's numbers readable. («ναι!» to all four.)
   ===================================================================================================== */
/* the chart's y-axis numbers (app_core.js gate165BuildChartSvg): fixed size, outside the stretched svg.
   The stage is drawn at 75% opacity, so the text takes the full ink colour to read as a mid grey. */
.telemetry-chart-shell-line .g165Y span {
  position: absolute; left: 4px; padding: 1px 5px; border-radius: 5px;
  font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--surface) 80%, transparent); white-space: nowrap;
}
.telemetry-chart-shell-line .g165Y span.is-mid { transform: translateY(-50%); }
.telemetry-chart-shell-line .g165Y span.is-bot { transform: translateY(-100%); }

/* the card's state: one full-width bar, the same place on every card, equal margins both sides */
#dashCards .dashCard .dashCardStatusPill {
  justify-self: stretch; display: flex; justify-content: center; height: 28px; padding: 0 12px;
}
/* a card with no alarm rule said nothing at all (hidden until hover, and never on a phone): a quiet grey bar */
#dashCards .dashCard .dashCardStatusPill.is-unconfigured {
  background: var(--surface-3); color: var(--muted); padding: 0 12px; margin-top: 12px; opacity: 1;
}
@media (hover: none) { #dashCards .dashCard .dashCardStatusPill.is-unconfigured { display: flex; } }
/* the compliance line under it: the same bar (it may need two lines: «Αιτιολογημένο · … (εκκρεμεί κλείσιμο)») */
#dashCards .dashCard .dashCardCompliancePill:not(.is-normal) {
  justify-self: stretch; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 28px; height: auto; padding: 5px 12px; border-radius: 14px; white-space: normal; line-height: 1.25;
}

/* the old L-rail (left + bottom edge, «μια ορθή γωνία γραμμή»), ONLY on a problem: red alarm, orange no data */
#dashCards .dashCard.alert-state-alarm::before,
#dashCards .dashCard.alert-state-no_data::before,
#dashCards .dashCard[data-g169-state="missing"]::before,
#dashCards .dashCard[data-g169-state="stale"]::before {
  display: block; content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-left: 2.4px solid var(--warn); border-bottom: 2.4px solid var(--warn); border-radius: inherit;   /* [27/9] 40 % thinner (Minas: «πολύ χοντρό») */
  background: none; width: auto;
}
#dashCards .dashCard.alert-state-alarm::before { border-left-color: var(--bad); border-bottom-color: var(--bad); }

/* [JUST 2/11] (Minas 2/11) one meaning per colour: red = an alarm; orange = no readings; YELLOW = a problem (an alarm, or no
   readings) someone justified, while the justification is open (app_core.js gate168ApplyOneCardAlertState: is-justified);
   green = an alarm set and well: a firmer frame and NO corner (the corner says «look here»; with red/green colour blindness
   the corner is the cue). The corners take !important to beat the card-v2 colours (app_core.js gate281, its own amber). */
#dashCards .dashCard.alert-state-ok:not([data-g169-state="missing"]):not([data-g169-state="stale"]) {
  border-color: rgb(var(--ok-rgb) / 0.70); box-shadow: 0 0 0 3px var(--c-ok-halo), var(--shadow-1);
}
#dashCards .dashCard.alert-state-no_data::before,
#dashCards .dashCard[data-g169-state="missing"]::before,
#dashCards .dashCard[data-g169-state="stale"]::before { border-left-color: var(--c-orange) !important; border-bottom-color: var(--c-orange) !important; }
#dashCards .dashCard .dashCardStatusPill.is-no-data,
#dashCards .dashCard .dashCardStatusPill.is-unknown { background: var(--c-orange-soft); color: var(--c-orange-ink); }
#dashCards .dashCard .dashCardCompliancePill.is-needs { background: var(--c-orange-soft); color: var(--c-orange-ink); }
#dashCards .dashCard.is-justified { border-color: rgb(var(--c-yellow-rgb) / 0.80); box-shadow: 0 0 0 3px var(--c-yellow-soft), var(--shadow-1); }
#dashCards .dashCard.is-justified::before { border-left-color: var(--c-yellow) !important; border-bottom-color: var(--c-yellow) !important; }
#dashCards .dashCard.is-justified.alert-state-alarm .dashValueNum { color: var(--c-yellow-num); }
#dashCards .dashCard.is-justified .dashCardStatusPill.is-alarm { background: var(--c-yellow); color: var(--c-on-yellow); }
#dashCards .dashCard.is-justified .dashCardStatusPill.is-no-data { background: var(--c-yellow-soft); color: var(--c-yellow-ink); }
#dashCards .dashCard .dashCardCompliancePill.is-justified,
#dashCards .dashCard .dashCardCompliancePill.is-justified.is-pending { background: var(--c-yellow-soft); color: var(--c-yellow-ink); }
/* [JUST 2/11] «Συναγερμοί» (app_alerts_pro.js): a justified alarm's tag, row and reason yellow, as its card; the
   «ΜΕ ΑΙΤΙΟΛΟΓΗΣΗ» count beside «ΣΥΝΑΓΕΡΜΟΣ» */
.tag.just, .badge.just, .pill.just { background: var(--c-yellow-soft); color: var(--c-yellow-ink); border-color: transparent; }
#tab_alerts .gate127-right .tag.warn { background: var(--c-orange-soft); color: var(--c-orange-ink); }   /* «ΧΩΡΙΣ ΔΕΔΟΜΕΝΑ» the cards' orange, never the yellow's twin */
@media (min-width: 701px) {   /* a table row: tinted as an alarm's is; on a phone the row is a card, its yellow frame says it */
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.just) td { background: rgb(var(--c-yellow-rgb) / 0.10) !important; }
}
#tab_alerts .rdStateJust { margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--c-yellow-ink); }
@media (max-width: 700px) {
  #tab_alerts table.gate127-alerts-state tbody tr:has(.tag.just) { border-color: rgb(var(--c-yellow-rgb) / 0.70) !important; box-shadow: 0 0 0 3px var(--c-yellow-soft) !important; }
}

/* Devices → Κατάσταση: every card one size (the tallest), the links always on the bottom line */
.rdStatusGrid { align-items: stretch; grid-auto-rows: 1fr; }
.rdStatusGrid .rdDevFoot { margin-top: auto; }

/* [GROUP-ALARM 27/9] a device-level alarm on its group heading (redesign.js groupAlarms) */
.rdGroupHead .rdGroupAlarm {
  align-self: center; margin-left: 4px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border: 0; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.rdGroupHead .rdGroupAlarm.is-alarm { background: var(--bad); color: var(--on-bad); }
.rdGroupHead .rdGroupAlarm.is-nodata { background: var(--warn-soft); color: var(--warn); }
/* [MESSAGES 27/9, found on the way] on a phone the heading had no room: «CL-0015» broke at its hyphen and the alarm ran
   off the edge. The heading wraps now; the alarm takes the next line whole (and is cut with «…» only if even that is short) */
.rdGroupHead { flex-wrap: wrap; row-gap: 6px; }
.rdGroupHead span { white-space: nowrap; }
.rdGroupHead .rdGroupAlarm { flex: 0 1 auto; min-width: 0; }


/* ---- [MESSAGES] 27/9: the envelope next to the bell, its panel, a message, and the red strip of a critical one
   (redesign.js; what is shown is decided in app_messages.js). The number's colour is the most important unread
   message: blue information, orange important, red critical (the bell's own red stays for the alarms). ---- */
.rdSrOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rdMsgBtn .rdCount[data-tone="info"] { background: var(--accent); color: var(--accent-ink); }
.rdMsgBtn .rdCount[data-tone="warn"] { background: var(--warn); color: var(--bg); }
.rdMenu.rdMsgMenu {
  width: 420px; max-width: calc(100vw - 24px); max-height: min(74vh, 640px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0;
}
.rdMsgHead {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.rdMsgHead > b { font-size: 14.5px; font-weight: 650; color: var(--text); }
.rdMsgLink { border: 0; background: transparent; padding: 6px 2px; color: var(--accent); font-size: 13px; font-weight: 550; cursor: pointer; }
.rdMsgLink:hover { text-decoration: underline; }
.rdMsgEmpty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 13.5px; }
.rdMsgList { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.rdMsgItem {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 11px 10px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.rdMsgItem:hover, .rdMsgItem:focus-visible { background: var(--surface-3); outline: none; }
.rdMsgDot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: transparent; }
.rdMsgItem.is-unread .rdMsgDot { background: var(--accent); }
.rdMsgItem.is-unread.sev-important .rdMsgDot { background: var(--warn); }
.rdMsgItem.is-unread.sev-critical .rdMsgDot { background: var(--bad); }
.rdMsgItemMain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdMsgMeta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sev-important > .rdMsgMeta, .sev-important .rdMsgItemMain > .rdMsgMeta { color: var(--warn); }
.sev-critical > .rdMsgMeta, .sev-critical .rdMsgItemMain > .rdMsgMeta { color: var(--bad); }
.rdMsgTitle { font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.rdMsgItem.is-unread .rdMsgTitle { font-weight: 650; }
.rdMsgExcerpt {
  font-size: 12.5px; line-height: 1.4; color: var(--text-2); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rdMsgFull { padding: 14px 16px 18px; }
.rdMsgFull.sev-critical { box-shadow: inset 3px 0 0 var(--bad); }
.rdMsgFull.sev-important { box-shadow: inset 3px 0 0 var(--warn); }
.rdMsgFullTitle { margin: 4px 0 10px; font-size: 16.5px; font-weight: 650; line-height: 1.35; color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
.rdMsgBody { font-size: 14px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.rdMsgUntil { margin-top: 12px; font-size: 12px; color: var(--muted); }
.rdMsgActs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.rdMsgAcked { font-size: 12.5px; color: var(--muted); }
.rdMsgBtn2 {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px;
  border-radius: var(--r-s); border: 1px solid transparent; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.rdMsgBtn2.is-accent { background: var(--accent); color: var(--accent-ink); }
.rdMsgBtn2.is-accent:hover { background: var(--accent-hover); }
.rdMsgBtn2.is-bad { background: var(--bad); color: var(--on-bad); }
.rdMsgBtn2.is-bad:hover { filter: brightness(1.08); }
.rdMsgBtn2.is-ghost { background: transparent; color: var(--bad); border-color: rgb(var(--bad-rgb) / 0.45); }
.rdMsgBtn2.is-ghost:hover { background: var(--bad-soft); }
.rdMsgBtn2:focus-visible, .rdMsgLink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the strip: above every page, until «Got it» */
.main > .rdMsgStrip { max-width: var(--page-max); margin: 0 auto 18px; }
.rdMsgStrip {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--bad-soft); border: 1px solid rgb(var(--bad-rgb) / 0.3); box-shadow: inset 4px 0 0 var(--bad); color: var(--text);
}
.rdMsgStripIcon { display: inline-flex; flex: 0 0 22px; color: var(--bad); }
.rdMsgStripIcon svg { width: 22px; height: 22px; }
.rdMsgStripText { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rdMsgStripText b { font-size: 14px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.rdMsgStripText span { font-size: 13px; line-height: 1.4; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdMsgStripActs { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rdMsgStripCount { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .rdMsgStrip { flex-wrap: wrap; align-items: flex-start; }
  .rdMsgStripText { flex-basis: calc(100% - 34px); }
  .rdMsgStripText span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rdMsgStripActs { width: 100%; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .rdMenu.rdMsgMenu { width: auto; max-height: calc(100dvh - var(--top-h) - 110px - env(safe-area-inset-top, 0px)); }
  .rdMsgItem { padding: 12px 10px; }
  .rdMsgBtn2 { height: 40px; }
  .rdMsgLink { min-height: 40px; }
}

/* =====================================================================================================
   [CARD-TAP 29/9] Minas: on a phone a tap meant for the chart often hit a button inside the card — the state opened
   Alarms, «! Αιτιολόγηση» the justification form, «⋯» the rename: a quarter of the card — and a long name was cut
   («Ψυγείο κρεάτων…»). On a phone the whole card opens the chart: its states stay, as coloured text; what the
   buttons did is in the chart panel (redesign.js panelActions, app_cardactions.js). The name has the card's whole
   width and is never cut; the tile (the sensor's photo, or its glyph) keeps 40 px beside the device's name —
   Minas: «είναι χρήσιμο να μπορεί να το διακρίνει ο χρήστης» (22 px was too small).
   ===================================================================================================== */
@media (max-width: 640px) {
  #dashCards .dashCard {
    grid-template-columns: 40px minmax(0, 1fr) !important; column-gap: 10px;
    grid-template-areas: "title title" "media subtitle" "value value" "spark spark" "band band" "ts ts" "foot foot" "comp comp" !important;
  }
  #dashCards .dashCard .dashTitleRow .dashTitle {
    display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
    padding-right: 0; margin-bottom: 8px; align-self: start;
  }
  #dashCards .dashCard .dashTitleRow .dashCardThumb { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; align-self: center; }
  #dashCards .dashCard .dashTitleRow .dashCardThumb .dashCardThumbGlyph svg { width: 22px; height: 22px; }
  #dashCards .dashCard > .dashSubtitle { align-self: center; }
  #dashCards .dashCard .rdCardMore { display: none !important; }
  /* the states: said, not pressed — a tap on them opens the chart like the rest of the card. They keep their coloured
     bar, as on a computer (Minas 30/9: «από την κάρτα χάθηκε το πλαίσιο με πράσινο χρώμα»; 29/9 had made them bare text) */
  #dashCards .dashCard > .dashCardStatusPill { pointer-events: none; margin-top: 8px; }
  #dashCards .dashCard > .dashCardStatusPill + .dashCardCompliancePill { margin-top: 6px; }
}
/* [1/10] Minas: on a computer the card's photo a little bigger in the same place (34 → 48 px), and the name wraps under
   itself instead of being cut and running into the «⋯» (two lines, three for the longest), the numbers of a row still in
   line (the name keeps the photo's height). */
@media (min-width: 641px) {
  #dashCards .dashCard { grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 12px; }
  #dashCards .dashCard .dashCardThumb { width: 48px; height: 48px; flex-basis: 48px; border-radius: 12px; }
  #dashCards .dashCard .dashTitleRow .dashCardThumb { align-self: start; }
  #dashCards .dashCard .dashTitleRow .dashTitle { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-height: 1.25; overflow: hidden; text-overflow: clip; align-self: start; min-height: 48px; }
}
/* [1/10] Minas: «η στοίχιση να γίνεται από αριστερά με βάση το πρώτο γράμμα του κειμένου» — the small glyph before a
   photographed card's name hangs in front: every line of the name starts under its first letter (phone and computer) */
body #dashCards .dashCard.has-card-photo.metric-temp .dashTitleRow .dashTitle,
body #dashCards .dashCard.has-card-photo.metric-humidity .dashTitleRow .dashTitle { padding-left: 20px; text-indent: -20px; }
/* the chart panel: what the card's buttons did — on top only what asks for something, the rest under the chart */
#gate138MetricDetailHost .rdPanelTop {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1);
}
#gate138MetricDetailHost .rdPanelLine { display: flex; align-items: center; gap: 10px; }
#gate138MetricDetailHost .rdPanelSay { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
#gate138MetricDetailHost .rdPanelSay.is-alarm { color: var(--bad); }
#gate138MetricDetailHost .rdPanelSay.is-needs { color: var(--warn); }
#gate138MetricDetailHost .rdPanelSay.is-justified { color: var(--info); }
#gate138MetricDetailHost .rdPanelLine .btn, #gate138MetricDetailHost .rdPanelMore .btn { flex: 0 0 auto; height: 40px; }
#gate138MetricDetailHost .rdPanelMore { display: flex; flex-wrap: wrap; gap: 8px; }
/* the working of the chart is not the customer's: the live row's help, the click hint — and [LIVE-ONE 29/9] the live
   switch itself: «Ζωντανά» is live (app_metric_drawer.js ensureLive), one button instead of two (Minas: «ναι κάν' το») */
#gate138MetricDetailHost #g138LiveRow, #gate138MetricDetailHost #g138LiveHelp, #gate138MetricDetailHost .g138-clickHint { display: none !important; }
#gate138MetricDetailHost .g138-state:empty { display: none; }
/* on a phone the chart right under 1h/6h/24h, the numbers under it (it began below the middle of the screen) */
@media (max-width: 640px) {
  #gate138MetricDetailHost .g138-body > .g138-card:has(> .g138-toolbar) { display: contents; }
  #gate138MetricDetailHost .g138-body > .g138-card > .g138-toolbar {
    order: 1; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1);
  }
  #gate138MetricDetailHost .g138-body > .g138-chartWrap { order: 2; }
  #gate138MetricDetailHost .g138-body > .g138-card > .g138-kpi { order: 3; margin-top: 0; }
  #gate138MetricDetailHost .g138-body > .g138-card > .g138-kpi .item { background: var(--surface) !important; border: 1px solid var(--line) !important; }
  #gate138MetricDetailHost .g138-body > .rdPanelMore { order: 4; }
  #gate138MetricDetailHost .g138-body > .g173-photoCard { order: 5; }
  #gate138MetricDetailHost .g138-body > .g138-foot { order: 6; }
}

/* =====================================================================================================
   [CHAT 29/9] the team conversation (app_chat.js): the page «Συζητήσεις», a conversation, the chart panel's
   «Συζήτηση» tab, a card's last line, the header's speech bubble. Everything through the theme's tokens.
   ===================================================================================================== */
#btn_chat { order: 3; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/></svg>"); }
.rdChatBtn .rdCount { background: var(--accent); color: var(--accent-ink); }
.navbtn .rdNavCount { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* [RAIL-BADGE 17/10] Minas: on the rail (the bar collapsed, or a tablet) the count sat BESIDE the icon inside a 44px
   button — it pushed the icon out of sight and was cut itself. There it sits on the icon's corner, ringed by the bar. */
@media (min-width: 641px) and (max-width: 1100px) {
  body:not(.navExpanded) .sidebar .navbtn { position: relative; }
  body:not(.navExpanded) .sidebar .navbtn .rdNavCount { position: absolute; top: 2px; right: 3px; margin: 0; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 9px; font-size: 10px; line-height: 17px; box-shadow: 0 0 0 2px var(--surface); }
}
@media (min-width: 641px) {
  body.navCollapsed:not(.navExpanded) .sidebar .navbtn { position: relative; }
  body.navCollapsed:not(.navExpanded) .sidebar .navbtn .rdNavCount { position: absolute; top: 2px; right: 3px; margin: 0; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 9px; font-size: 10px; line-height: 17px; box-shadow: 0 0 0 2px var(--surface); }
}

/* the page */
.rdChatPage { display: flex; flex-direction: column; gap: 10px; }
.rdChHead h2 { margin: 0; }
.rdChStats { color: var(--muted); font-size: 13px; min-height: 18px; }
.rdChGrid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.rdChList { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 8px; box-shadow: var(--shadow-1); }
.rdChPane { min-height: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden; }
.rdChSec { padding: 10px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.rdChRow { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-m); background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.rdChRow:hover { background: var(--surface-3); }
.rdChRow.is-on { background: var(--accent-soft); }
.rdChRow.is-live .rdChRowTitle::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-right: 6px; vertical-align: 1px; }
.rdChRowMain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rdChRowTitle { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.rdChRowLast { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdChRow.is-unread .rdChRowLast { color: var(--text-2); font-weight: 500; }
.rdChRowHold { font-size: 12px; color: var(--text-2); }
.rdChRow.is-live.is-free .rdChRowHold { color: var(--bad); font-weight: 500; }
.rdChRow.is-sub { padding-left: 22px; }
.rdChSec.rdChSecLive { color: var(--bad); }
.rdChFilter { display: flex; gap: 6px; padding: 4px 4px 6px; flex-wrap: wrap; }
.rdChFChip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 4px 12px; min-height: 30px;
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.rdChFChip:hover { background: var(--surface-3); }
.rdChFChip.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); font-weight: 600; }
.rdChFold { align-self: flex-start; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 10px; cursor: pointer; border-radius: var(--r-s); text-align: left; }
.rdChFold:hover { background: var(--accent-soft); }
.rdChRowSide { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rdChRowAt { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rdChRowCount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.rdChSearch { padding: 6px 4px; }
.rdChSearch input { width: 100%; }
.rdChNone { padding: 6px 10px 10px; font-size: 13px; }
.rdChEmpty { padding: 28px 16px; color: var(--muted); text-align: center; }
.rdChQuickEdit { margin: 10px 6px 4px; font-size: 13px; }
.rdChQuickEdit summary { cursor: pointer; color: var(--text-2); font-weight: 600; }
.rdChQuickEdit textarea { width: 100%; margin: 6px 0; }
.rdChRows { display: flex; flex-direction: column; gap: 2px; }
/* inside the conversation [hidden] always hides (several of its blocks are flex, which beats the browser's rule) */
.rdChatPage [hidden], .rdChThread [hidden], .rdChPList [hidden], .rdChToast[hidden] { display: none !important; }
/* the list and the conversation take turns only on a phone: there the conversation has its «back» */
@media (min-width: 641px) {
  .rdChatPage .rdChBack { display: none; }
  /* [CHAT 6/10] the page fits the screen: the list scrolls on its own, the conversation keeps its box to write in in sight */
  .rdChatPage .rdChList { max-height: calc(100dvh - 180px); overflow-y: auto; }
  .rdChatPage .rdChPane { height: calc(100dvh - 180px); min-height: 440px; }
  .rdChatPage .rdChPane .rdChThread { height: 100%; min-height: 0; }
  .rdChatPage .rdChPane .rdChTimeline { max-height: none; min-height: 0; }
}
@media (max-width: 640px) {
  .rdChGrid { grid-template-columns: minmax(0, 1fr); }
  .rdChatPage .rdChPane { display: none; }
  .rdChatPage.is-thread .rdChList, .rdChatPage.is-thread .rdChStats { display: none; }
  /* [CHAT 6/10] the open conversation is the whole screen under the header (over the tab bar): its box to write in is
     always at the bottom, never a scroll away */
  .rdChatPage.is-thread .rdChPane { display: block; position: fixed; z-index: 4500; left: 0; right: 0; bottom: 0;
    top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); border: 0; border-radius: 0; box-shadow: none; min-height: 0; }
  .rdChatPage.is-thread .rdChPane .rdChThread { height: 100%; min-height: 0; }
  .rdChatPage.is-thread .rdChPane .rdChTimeline { max-height: none; min-height: 0; }
  .rdChatPage.is-thread .rdChPane .rdChComposer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .main > #tab_chat.rd-chat-thread { animation: none; }
}

/* a conversation */
.rdChThread { display: flex; flex-direction: column; height: 100%; min-height: 420px; }
.rdChTHead { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rdChTTitle { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rdChTTitle b { font-size: 15px; overflow-wrap: anywhere; }
.rdChTTitle .muted { font-size: 12.5px; }
.rdChFollow.is-on { color: var(--accent); background: var(--accent-soft); }
.rdChHours { padding: 8px 14px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.rdChPinned { padding: 8px 12px; background: var(--accent-soft); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.rdChPin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdChTlWrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rdChTimeline { flex: 1 1 auto; overflow-y: auto; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; max-height: 62vh; min-height: 200px;
  background: var(--surface-2); overscroll-behavior: contain; }
.rdChNewPill { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); border: 0; border-radius: 999px; padding: 6px 14px; min-height: 32px;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-2); cursor: pointer; z-index: 2; }
/* [CHAT 6/10] an alarm's state now, always in sight */
.rdChStatus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 14px; font-size: 13px; color: var(--text-2);
  border-bottom: 1px solid var(--line); background: var(--surface); }
.rdChStatus.is-live { background: var(--bad-soft); }
.rdChStLead { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--text); }
.rdChStatus.is-live .rdChStLead { color: var(--bad); }
.rdChStLead i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.rdChStatus.is-live .rdChStLead i { background: var(--bad); box-shadow: 0 0 0 3px rgb(var(--bad-rgb) / 0.18); animation: rdChPulse 1.6s ease-in-out infinite; }
@keyframes rdChPulse { 50% { box-shadow: 0 0 0 6px rgb(var(--bad-rgb) / 0.06); } }
@media (prefers-reduced-motion: reduce) { .rdChStatus.is-live .rdChStLead i { animation: none; } }
.rdChStBit { font-variant-numeric: tabular-nums; }
.rdChStBit + .rdChStBit::before { content: "·"; margin-right: 12px; color: var(--faint); }
.rdChStHold.is-free { color: var(--bad); font-weight: 600; }
@media (max-width: 640px) {
  .rdChStatus { font-size: 12.5px; gap: 2px 10px; padding: 7px 12px; }
  .rdChStChart { order: 1; min-height: 30px; }
  .rdChStatus .rdChStHold { order: 2; flex: 1 1 100%; }
  .rdChStatus .rdChStHold::before { content: none; }
}
.rdChStChart { margin-left: auto; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 3px 12px; min-height: 30px;
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.rdChStChart:hover { background: var(--surface-3); }
.rdChOlder { align-self: center; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.rdChPager { align-self: center; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rdChPager .rdChOlder, .rdChNewer { min-height: 30px; }
.rdChNewer { margin-top: 4px; }
/* an older stretch of a long conversation: room under its last line for the «↓ Στα πιο πρόσφατα» pill */
.rdChThread.is-hist .rdChTimeline { padding-bottom: 60px; }
.rdChTake.is-undone { color: var(--faint); font-style: italic; }
.rdChEv { display: flex; gap: 8px; align-items: baseline; align-self: center; max-width: 100%; font-size: 12.5px; color: var(--muted); padding: 2px 10px; text-align: left; }
.rdChEv i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transform: translateY(-1px); }
.rdChEv.tone-bad i { background: var(--bad); }
.rdChEv.tone-ok i { background: var(--ok); }
.rdChEv.tone-acc i { background: var(--accent); }
.rdChEvAt { font-variant-numeric: tabular-nums; color: var(--faint); flex: 0 0 auto; }
.rdChEvTxt { min-width: 0; overflow-wrap: anywhere; }
.rdChEv.is-big { align-self: stretch; padding: 8px 12px; border-radius: var(--r-m); font-size: 13px; color: var(--text); border: 1px solid var(--line); background: var(--surface); }
.rdChEv.is-big.tone-bad { background: var(--bad-soft); border-color: rgb(var(--bad-rgb) / 0.25); }
.rdChEv.is-big.tone-bad .rdChEvTxt { color: var(--bad); font-weight: 600; }
.rdChEv.is-big.tone-ok { background: var(--ok-soft); border-color: rgb(var(--ok-rgb) / 0.25); }
.rdChEv.is-big.tone-ok .rdChEvTxt { color: var(--ok); font-weight: 600; }
.rdChEv.is-big i { width: 9px; height: 9px; flex-basis: 9px; }
.rdChTake { color: var(--text-2); }
.rdChTake.is-mine { color: var(--accent); font-weight: 500; }
.rdChGone { font-style: italic; color: var(--faint); }
.rdChRun { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rdChRunBtn { border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); border-radius: 999px; padding: 3px 12px; min-height: 28px;
  font: inherit; font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.rdChRunBtn:hover { background: var(--surface-3); color: var(--text-2); }
.rdChRun.is-open { align-items: flex-start; }
.rdChDay { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--faint); text-transform: uppercase; }
.rdChDay::before, .rdChDay::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }
.rdChNew { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 650; color: var(--accent); }
.rdChNew::before, .rdChNew::after { content: ""; flex: 1 1 0; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.rdChMsg { display: flex; gap: 8px; align-items: flex-start; position: relative; }
.rdChAv { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--pc, var(--faint)) 22%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pc, var(--faint)) 60%, transparent); }
.rdChMsg.pc-0 { --pc: var(--accent); } .rdChMsg.pc-1 { --pc: var(--m-temp); } .rdChMsg.pc-2 { --pc: var(--ok); }
.rdChMsg.pc-3 { --pc: var(--m-hum); } .rdChMsg.pc-4 { --pc: var(--warn); } .rdChMsg.pc-5 { --pc: color-mix(in srgb, var(--accent) 55%, var(--bad)); }
.rdChMsg.is-support .rdChAv { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.rdChBub { flex: 0 1 auto; min-width: 0; max-width: min(100%, 560px); background: var(--surface); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 8px 11px;
  box-shadow: 0 1px 1px rgb(var(--fg-rgb) / 0.03); }
.rdChMsg.is-mine { flex-direction: row-reverse; padding-left: 36px; }
.rdChMsg.is-mine .rdChAv { display: none; }
.rdChMsg.is-mine .rdChBub { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 14px 4px 14px 14px; }
.rdChMsg:not(.is-mine) { padding-right: 36px; }
.rdChMsg.is-ann .rdChBub, .rdChMsg.is-handover .rdChBub { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rdChWho { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.rdChWho b { color: var(--text); font-weight: 600; }
.rdChQuote { font-size: 12px; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 6px; margin: 2px 0 4px; }
.rdChBody { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.rdChBody.is-deleted { font-style: italic; color: var(--faint); }
.rdChMention { color: var(--accent); font-weight: 600; }
.rdChPhoto { display: block; margin-top: 6px; padding: 0; border: 0; background: var(--surface-3); border-radius: var(--r-m); overflow: hidden; cursor: zoom-in; max-width: 240px; min-height: 60px; }
.rdChPhoto img { display: block; width: 100%; height: auto; }
.rdChPhoto.is-missing { cursor: default; }
.rdChFlags { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.rdChMsgMore { flex: 0 0 auto; width: 30px; height: 30px; opacity: .55; }
.rdChMsgMore:hover, .rdChMsgMore:focus-visible { opacity: 1; }
.rdChJust { margin: 0 12px 8px; align-self: flex-start; }
.rdChRO { padding: 10px 14px; font-size: 13px; border-top: 1px solid var(--line); }
.rdChNote { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: 13px; color: var(--text-2);
  background: var(--surface-2); border-bottom: 1px solid var(--line); }
.rdChJustBox { display: flex; }

/* the composer */
.rdChComposer { border-top: 1px solid var(--line); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; position: relative; background: var(--surface); }
.rdChChips { display: flex; gap: 6px; flex-wrap: wrap; }
.rdChChip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; min-height: 34px; }
.rdChChip:hover { background: var(--surface-3); }
.rdChChip.is-take { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.rdChChip.is-take:hover { background: var(--accent-hover); }
.rdChChip:disabled { opacity: .55; cursor: default; }
.rdChLine { display: flex; gap: 6px; align-items: flex-end; }
.rdChFile { display: none; }
.rdChInput, .tab .rdChThread textarea.rdChInput { flex: 1 1 auto; min-width: 0; resize: none; border: 1px solid var(--line-strong); border-radius: 18px; padding: 8px 12px; font: inherit; font-size: 14px;
  background: var(--surface); color: var(--text); max-height: 140px; min-height: 38px; height: 38px; line-height: 20px; }
.rdChInput:focus { outline: 2px solid var(--accent-soft-2); border-color: var(--accent); }
.rdChSend { background: var(--accent); color: var(--accent-ink); border-radius: 50%; width: 38px; height: 38px; }
.rdChSend:hover { background: var(--accent-hover); color: var(--accent-ink); }
.rdChMentions { position: absolute; left: 10px; bottom: 100%; margin-bottom: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m);
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; min-width: 200px; z-index: 30; overflow: hidden; }
.rdChMentions[hidden] { display: none; }   /* its display:flex beat the browser's [hidden]: an empty line over the box */
.rdChMentionOpt { border: 0; background: none; color: var(--text); text-align: left; padding: 8px 12px; font: inherit; cursor: pointer; }
.rdChMentionOpt:hover, .rdChMentionOpt.is-active { background: var(--accent-soft); }
/* [CHAT 6/10] a finger reaches the conversation's small buttons (44 px, as the rest of the portal's taps) */
@media (pointer: coarse) {
  .rdChFChip, .rdChRunBtn, .rdChFold, .rdChStChart, .rdChOlder { position: relative; }   /* the pill is absolute already */
  .rdChFChip::after, .rdChRunBtn::after, .rdChFold::after, .rdChStChart::after, .rdChNewPill::after, .rdChOlder::after {
    content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; min-height: 100%; transform: translateY(-50%);
  }
}
/* [CHAT 6/10] a phone: the quick replies in one row that scrolls sideways; the bubbles use the width */
@media (max-width: 640px) {
  .rdChThread .rdChChips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
  .rdChThread .rdChChips::-webkit-scrollbar { display: none; }
  .rdChThread .rdChChip { flex: 0 0 auto; }
  .rdChThread .rdChMsg.is-mine { padding-left: 20px; }
  .rdChThread .rdChMsg:not(.is-mine) { padding-right: 12px; }
}
.rdChEdit { display: flex; flex-direction: column; gap: 6px; }
.rdChEditTa { border-radius: var(--r-m); width: 100%; }
.rdChEditActs { display: flex; gap: 8px; justify-content: flex-end; }

/* menus, dialogs, the photo */
.rdChPop { position: fixed; z-index: 100000; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; min-width: 180px; overflow: hidden; }
.rdChPop button { border: 0; background: none; color: var(--text); text-align: left; padding: 10px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.rdChPop button:hover { background: var(--surface-3); }
.rdChDialogBack { position: fixed; inset: 0; z-index: 99990; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rdChDialog { width: min(460px, 100%); max-height: 90vh; overflow: auto; background: var(--surface); color: var(--text); border-radius: var(--r-l); box-shadow: var(--shadow-3); }
.rdChDialogHead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rdChDialogBody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.rdChDialogBody .input { width: 100%; }
.rdChCheck { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.rdChRowIn { display: flex; gap: 8px; align-items: center; }
.rdChRowIn .input { width: auto; flex: 1 1 0; }
.rdChGuestList { display: flex; flex-direction: column; gap: 6px; }
.rdChGuestRow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
/* [CHAT 6/10] what a tap did, just above the box to write in */
.rdChToast { position: fixed; left: 50%; transform: translateX(-50%); z-index: 100002; display: flex; align-items: center; gap: 12px;
  max-width: min(520px, calc(100vw - 32px)); padding: 10px 10px 10px 16px; border-radius: var(--r-m); box-shadow: var(--shadow-3);
  background: var(--text); color: var(--surface); font-size: 14px; line-height: 1.35; }
.rdChToast.is-err { background: var(--bad); color: var(--on-bad); }
.rdChToastTxt { flex: 1 1 auto; min-width: 0; }
.rdChToastAct { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  padding: 6px 8px; min-height: 36px; cursor: pointer; border-radius: var(--r-s); }
.rdChToastX { flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: .75; font-size: 20px; line-height: 1; width: 36px; height: 36px; cursor: pointer; border-radius: 50%; }
.rdChToastAct:hover, .rdChToastX:hover { background: rgb(127 127 127 / .22); }
.rdChLight { position: fixed; inset: 0; z-index: 100001; background: rgba(0, 0, 0, .82); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.rdChLight img { max-width: 100%; max-height: 100%; border-radius: var(--r-m); }

/* the chart panel's tabs */
#gate138MetricDetailHost .rdChTabs { order: -1; display: flex; gap: 4px; padding: 3px; border-radius: var(--r-m); background: var(--surface-3); }
#gate138MetricDetailHost .rdChTab { flex: 1 1 0; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
#gate138MetricDetailHost .rdChTab.is-on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }
#gate138MetricDetailHost .rdChTabCount { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; display: inline-block; line-height: 18px; }
#gate138MetricDetailHost.rd-chat-tab .g138-body > :not(.rdChTabs):not(.rdChPanelPane):not(.rdPanelTop) { display: none !important; }
#gate138MetricDetailHost .rdChPanelPane { order: 0; display: flex; flex-direction: column; gap: 10px; }
#gate138MetricDetailHost .rdChPanelPane[hidden] { display: none !important; }
#gate138MetricDetailHost .rdChPList { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 6px; }
#gate138MetricDetailHost .rdChPThread { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
#gate138MetricDetailHost .rdChPThread .rdChTimeline { max-height: 48vh; }
#gate138MetricDetailHost .rdChPSum { display: none; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--accent);
  border-radius: var(--r-l); padding: 10px 14px; min-height: 44px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
/* [CHAT 6/10] on a phone the list folds away once a conversation is open (one button brings it back), and the panel's
   alarm card waits on the «Γράφημα» tab (the conversation's own status bar says the same): the box to write in is in
   sight without scrolling */
@media (max-width: 640px) {
  #gate138MetricDetailHost .rdChPanelPane.is-picked .rdChPList { display: none; }
  #gate138MetricDetailHost .rdChPSum { display: block; }
  #gate138MetricDetailHost.rd-chat-tab .g138-body > .rdPanelTop { display: none !important; }
  #gate138MetricDetailHost .rdChPThread .rdChTimeline { max-height: 42vh; }
}

/* a card's last line: said, not a button (the card opens the panel) */
#dashCards .dashCard > .rdCardChat { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 8px; border-radius: var(--r-s);
  background: var(--surface-3); color: var(--text-2); font-size: 12px; pointer-events: none; min-width: 0; }
#dashCards .dashCard > .rdCardChat svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--accent); }
#dashCards .dashCard > .rdCardChat .rdCardChatTxt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashCards .dashCard > .rdCardChat .rdCardChatCnt { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }

/* the Alarms page: the conversation of an alarm going off */
#tab_alerts .rdChAlarmBtn { margin-top: 6px; }

/* =====================================================================================================
   [HELP 29/9] the help centre (app_help.js): the page «Οδηγίες», an article, the «?» buttons. Everything through the
   theme's tokens; the article's HTML comes from the server's own marks (help_core.render).
   ===================================================================================================== */
#btn_help { order: 14; --nav-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.5'/><path d='M9.3 9.2a2.8 2.8 0 0 1 5.4 1c0 1.9-2.7 2.6-2.7 4.3'/><path d='M12 17.6h.01'/></svg>"); }
.rdHelpPage [hidden] { display: none !important; }
.rdHelpPage { max-width: 880px; display: flex; flex-direction: column; gap: 14px; }
.rdHelpHead h2 { margin: 0; }
.rdHelpHead p { margin: 4px 0 0; }
.rdHelpSearch { position: relative; }
.rdHelpPage .rdHelpSearch input.input, .rdHelpPage .rdHelpSearch input { width: 100%; padding-left: 40px !important; min-height: 44px; font-size: 15px; }
.rdHelpSearchIcon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.rdHelpSearchIcon svg { width: 18px; height: 18px; }
.rdHelpSections { display: flex; flex-direction: column; gap: 18px; }
.rdHelpSec h3 { margin: 0 0 8px; font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.rdHelpGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .rdHelpGrid { grid-template-columns: minmax(0, 1fr); } }
.rdHelpCard { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--shadow-1); min-width: 0; }
.rdHelpCard:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rdHelpCard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rdHelpCard b { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.rdHelpCardSum { font-size: 13px; color: var(--muted); line-height: 1.45; }
.rdHelpCardSec { font-size: 11.5px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.rdHelpResults { display: flex; flex-direction: column; gap: 8px; }
.rdHelpResultsHead { font-size: 13px; color: var(--muted); }
.rdHelpSupport { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border: 1px dashed var(--line-strong);
  border-radius: var(--r-l); color: var(--text-2); font-size: 14px; }
/* an article */
.rdHelpNav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rdHelpBack { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 4px; }
.rdHelpBack svg { width: 18px; height: 18px; }
.rdHelpCrumb { font-size: 12.5px; color: var(--faint); }
.rdHelpArticle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px 24px; box-shadow: var(--shadow-1); min-width: 0; }
@media (max-width: 640px) { .rdHelpArticle { padding: 16px 14px; } }
.rdHelpArticle h1 { margin: 0; font-size: 24px; line-height: 1.25; text-wrap: balance; }
.rdHelpLead { margin: 8px 0 4px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.rdHelpBody { font-size: 15px; line-height: 1.62; color: var(--text); }
.rdHelpBody > :not(figure):not(.hTable) { max-width: 70ch; }   /* the text reads at 70ch; pictures and tables take the article's width */
.rdHelpBody h2 { margin: 22px 0 6px; font-size: 18px; text-wrap: balance; }
.rdHelpBody h3 { margin: 16px 0 4px; font-size: 16px; }
/* [HELP-PLACES 6/10] the heading about the place the «?» was pressed on: brought into view, lit for a moment */
.rdHelpBody h2[id], .rdHelpBody h3[id] { scroll-margin-top: calc(var(--top-h, 60px) + 12px); border-radius: var(--r-s); transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
.rdHelpBody h2.rdHelpHere, .rdHelpBody h3.rdHelpHere { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .rdHelpBody h2[id], .rdHelpBody h3[id] { transition: none; } }
.rdHelpBody p { margin: 8px 0; }
.rdHelpBody ul { margin: 8px 0; padding-left: 22px; }
.rdHelpBody li { margin: 4px 0; }
.rdHelpBody ol.hSteps { list-style: none; counter-reset: hs; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rdHelpBody ol.hSteps > li { counter-increment: hs; position: relative; padding: 2px 0 2px 38px; margin: 0; }
.rdHelpBody ol.hSteps > li::before { content: counter(hs); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft-2); color: var(--accent); font-weight: 700; font-size: 13px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.rdHelpBody .hUi { display: inline-block; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-2);
  font-size: .92em; font-weight: 600; line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }   /* a long label wraps in its box: never wider than a phone */
.rdHelpBody kbd { font-family: var(--mono); font-size: .85em; padding: 0 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); }
.rdHelpBody .hPkg { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px;
  border-radius: 6px; background: var(--accent-soft-2); color: var(--accent); vertical-align: 2px; }
.rdHelpBody .hNote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-m) var(--r-m) 0; }
.rdHelpBody .hNote.is-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.rdHelpBody figure.hShot { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rdHelpBody figure.hShot img { max-width: 100%; max-height: 640px; width: auto; height: auto; min-height: 60px;   /* a computer's screen as wide as the article, a phone's about a phone's size */
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2);
  cursor: zoom-in; box-shadow: var(--shadow-1); }
.rdHelpBody figure.hShot.is-missing { display: none; }   /* no picture: no caption under nothing */
.rdHelpBody figure.hShot figcaption { font-size: 13px; color: var(--muted); }
.rdHelpBody .hTable { overflow-x: auto; margin: 10px 0; }
.rdHelpBody table { border-collapse: collapse; min-width: 100%; font-size: 14px; }
.rdHelpBody th, .rdHelpBody td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rdHelpBody th { font-size: 12px; font-weight: 650; color: var(--faint); letter-spacing: .03em; text-transform: uppercase; }
.rdHelpBody a { color: var(--accent); font-weight: 500; }
.rdHelpPrevNext { display: flex; gap: 10px; flex-wrap: wrap; }
.rdHelpNb { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: var(--r-l); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.rdHelpNb.is-next { text-align: right; align-items: flex-end; }
.rdHelpNb:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rdHelpNbLabel { font-size: 12px; color: var(--faint); }
.rdHelpLight { position: fixed; inset: 0; z-index: 100001; background: rgba(0, 0, 0, .84);   /* dark in both themes: a picture reads best on black */ display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.rdHelpLight img { max-width: 100%; max-height: 100%; border-radius: var(--r-m); }
/* the «?» of a panel or window that covers the header */
.rdHelpInline { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 10px;
  background: transparent; color: var(--text-2); cursor: pointer; margin-left: auto; margin-right: 6px; flex: 0 0 auto; }   /* beside «Κλείσιμο» */
.rdHelpInline svg { width: 18px; height: 18px; }
.rdHelpInline:hover { color: var(--accent); border-color: var(--accent); }
/* [B5 help-question-hidden-narrow-phones 8/10] the narrowest phones (≤350 px, or a large display size) keep the «?»
   (it was hidden at ≤340 px: help only from «Μενού» → «Οδηγίες», never the guide of the screen): the header's icons are
   a little smaller and closer (34 px, 2 px apart) and its sides a little narrower; at ≤310 px (a folded phone's cover
   screen) the logo stands without the word «Brevili». Five icons + the logo + «Brevili» fit 320 px; without the word,
   280 px. */
@media (max-width: 350px) {
  .topbar { padding-left: 12px; padding-right: 10px; gap: 6px; }
  .rdTopRight { gap: 2px; }
  .rdTopRight .rdIconBtn { width: 34px !important; height: 34px !important; }
  .rdTopRight .rdIconBtn svg { width: 18px; height: 18px; }
  .rdTopRight .rdAvatarBtn { margin-left: 2px; }
  .rdTopRight .rdAvatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; }
}
@media (max-width: 310px) {
  .rdTopLeft > .rdBrand .rdBrandText { display: none; }
}
/* [AUTOFILL 1/10] the rule form: the card's value beside the limits, and ready limits for a temperature */
.rdAfNow { margin-top: 8px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rdAfPresets { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rdAfPresetsLbl { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--muted); }
.rdAfPresets .rdAfPreset { border-radius: 999px; padding: 0 12px; min-height: 34px; font-size: 13px; font-variant-numeric: tabular-nums; }
/* [AUTOFILL Γ4 1/10] on a phone the four tabs of Alarms fit its width: the fourth («Νέος κανόνας») was cut to «Ν» */
@media (max-width: 640px) {
  #tab_alerts .rdSecTabs { gap: 4px; }
  #tab_alerts .rdSecTabs button { flex: 1 1 auto; min-width: 0; padding: 0 5px; gap: 4px; justify-content: center; text-align: center;
    white-space: normal; line-height: 1.15; font-size: 13px; }
  #tab_alerts .rdSecTabs .rdSecCount { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; flex: 0 0 auto; }
  /* [JUST 2/11] a tab's counts under its word (under «Κατάσταση» the red and the yellow), so the four tabs fit a phone:
     beside the word the yellow ran onto «Κανόνες», «Κανόνες 8» onto «Ιστορικό», and «Κατάσταση» lost its «Κ» */
  #tab_alerts .rdSecTabs button:has(.rdSecCount:not(:empty)) { flex-wrap: wrap; align-content: center; row-gap: 2px; }
  #tab_alerts .rdSecTabs button:has(.rdSecCount:not(:empty)) > span:first-child { flex: 1 0 100%; }
}
@media (max-width: 370px) {
  #tab_alerts .rdSecTabs button { padding: 0 4px; font-size: 12px; }
}

/* [READINGS 1/10] the history card on a phone (Minas's screenshot): the «Σειρά μετρήσεων» list took the width of its
   longest name and pushed the whole card's content past its right edge (a grid track sized to its widest child) —
   with large phone text, or a long name, on any narrow screen. Everything in the card now narrows with it. */
.telemetry-chart-shell { grid-template-columns: minmax(0, 1fr); }
.telemetry-chart-shell > * { min-width: 0; }
.telemetry-chart-shell-picker { min-width: 0 !important; width: 100%; }
.telemetry-chart-shell-picker select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }

/* [PHASE1] step 5 (4/10/2026): the account's state strip and the package page's buttons (app_plan.js) */
.plan-strip { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px;
  border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:14px; }
.plan-strip[hidden] { display:none !important; }
.plan-strip.is-info { border-color:rgba(77,163,255,.5); }
.plan-strip.is-warn { border-color:rgba(245,158,11,.65); background:rgba(245,158,11,.08); }
.plan-strip.is-bad  { border-color:rgba(239,68,68,.65); background:rgba(239,68,68,.08); }
.plan-strip-text { flex:1 1 240px; min-width:0; }
.plan-strip-btn, .plan-btn { border:1px solid var(--line-strong, var(--line)); background:var(--surface-2); color:var(--text);
  border-radius:10px; padding:6px 12px; font-size:13px; cursor:pointer; }
.plan-btn.is-sent { opacity:.65; cursor:default; }
.plan-btn.is-quiet { background:transparent; }
.plan-card-act { margin-top:8px; }
.plan-req-box { margin-top:14px; }
.plan-help-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.plan-note.is-bad { color:#ef4444; }
.plan-req-list { margin:6px 0 0 18px; padding:0; font-size:13px; }
/* [ARCHIVE] 8α: the cards' HACCP line, and the account's monthly archive (app_plan.js) */
.plan-card-note { margin-top:6px; }
.plan-arch-box { margin-top:14px; }
.plan-arch-line { margin-top:4px; }
.plan-arch-list { list-style:none; margin:8px 0 0; padding:0; font-size:13px; }
.plan-arch-month { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; padding:6px 0; border-top:1px solid var(--line); }
.plan-arch-label { flex:1 1 220px; min-width:0; }
.plan-arch-file { font-size:12.5px; padding:3px 9px; }

/* [NEWBIZ] the Account page's «Νέα επιχείρηση» */
.newBizRow { gap: 10px; align-items: center; flex-wrap: wrap; }
.newBizRow .input { flex: 1 1 220px; min-width: 0; }
.newBizBad { color: var(--bad); }

/* [OWNERS] Phase 4: the release and «Κλάπηκε» dialogs, a device being released, «Παλιές συσκευές» */
.ownDlgBack { position: fixed; inset: 0; z-index: 99990; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ownDlg { width: min(480px, 100%); max-height: 90vh; overflow: auto; background: var(--surface); color: var(--text); border-radius: var(--r-l); box-shadow: var(--shadow-3); }
.ownDlgHead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ownDlgX { padding: 2px 10px; font-size: 18px; line-height: 1; }
.ownDlgBody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ownDlgBody .input { width: 100%; box-sizing: border-box; }
.ownP { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ownOpt { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.ownWarn { font-size: 13px; line-height: 1.4; color: var(--warn); background: var(--warn-soft); border-radius: var(--r-m); padding: 8px 10px; }
.ownLbl { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ownMsg { font-size: 13px; min-height: 1.2em; color: var(--muted); }
.ownBad { color: var(--bad); }
.ownBtns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ownLeaving, .ownStolen { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.ownLeaving { color: var(--warn); background: var(--warn-soft); }
.ownStolen { color: var(--bad); background: var(--bad-soft); }
.ownDeleted { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; color: var(--ok); background: var(--ok-soft); }   /* [NODE-REMOVE 24/10] */
.ownFormerCard { margin-top: 12px; }
.ownFormerTitle { margin: 0 0 4px; font-size: 16px; }
.ownFormerList { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ownFormerRow { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.ownFormerWho { min-width: 0; flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ownFormerActs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ownWarnText { color: var(--warn); }

/* [TRANSFER] the claim card's «Ζητήστε μεταβίβαση», the account's transfer requests */
.xferEntry { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.xferCard { margin-top: 12px; }

/* [TAP 6/10] one tap to the place: the card a tap opened is lit for two seconds; a chip names whose battery it shows;
   a chip that does nothing shows no hand */
.rdDevCard.rdFlash { animation: rdFlash 2s ease-out; outline: none; }
@keyframes rdFlash { 0%, 35% { box-shadow: 0 0 0 3px var(--accent, #2563eb); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .rdDevCard.rdFlash { animation: none; box-shadow: 0 0 0 3px var(--accent, #2563eb); } }
.dashOperationalChipValue .rdChipWho { font-weight: 500; margin-left: 4px; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashOperationalChipValue .rdChipWho::before { content: "· "; }
.dashOperationalChip:disabled { cursor: default; }

/* [TAP B 6/10] what opens somewhere looks pressable (and says where in its title); what does not, does not */
.rdTapTag { cursor: pointer; }
.rdTapTag:hover, .rdTapTag:focus-visible { outline: 2px solid color-mix(in srgb, currentColor 30%, transparent); outline-offset: 1px; }
.rdTapTag.is-on { outline: 2px solid currentColor; outline-offset: 1px; }
.rdIssueBtn, .rdLinkCell { all: unset; cursor: pointer; color: inherit; font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.rdIssueBtn:hover, .rdLinkCell:hover, .rdIssueBtn:focus-visible, .rdLinkCell:focus-visible { text-decoration-style: solid; }
.rdIssueBtn:focus-visible, .rdLinkCell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
button.rdTapPill { cursor: pointer; font: inherit; }
.rdTapText { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.rdFilterChip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 3px 2px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.rdFilterX { all: unset; cursor: pointer; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; }
.rdFilterX:hover, .rdFilterX:focus-visible { background: var(--accent-soft-2); }
.rdStateAll { margin-left: 4px; }
.dashCard.rdFlash { animation: rdFlash 2s ease-out; }
#tab_alerts tr.rdFlash > td { animation: rdFlashRow 2s ease-out; }
@keyframes rdFlashRow { 0%, 35% { background: var(--accent-soft-2); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .dashCard.rdFlash { animation: none; box-shadow: 0 0 0 3px var(--accent, #2563eb); }
  #tab_alerts tr.rdFlash > td { animation: none; background: var(--accent-soft-2); }
}
/* [RULE-SAVED 3/11] a rule just made (app_alerts_pro.js rdRuleSavedMark): «✓ Ο κανόνας «…» αποθηκεύτηκε» above the Rules
   list and its row framed in green. A table row (≥ 701 px): the cells' inner edges, !important over that width's
   «td box-shadow: none». A phone card: the card itself, as a ringing State card is red. And the words of «Δημιουργία»
   under the button (rdRuleCreateSay). */
.rdRuleSavedNote { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid rgb(var(--ok-rgb) / 0.35);
  background: var(--ok-soft); color: var(--ok); font-size: 14px; font-weight: 600; scroll-margin-top: calc(var(--top-h, 60px) + 12px); }
.rdRuleSavedNote:focus { outline: none; }
.rdRuleSavedNote .rdRuleSavedWarn { margin-top: 4px; color: var(--warn); font-weight: 500; }
@media (min-width: 701px) {
  #tab_alerts table.gate127-alerts-rules tbody tr.rdRuleSavedRow > td { background: var(--ok-soft) !important;
    box-shadow: inset 0 2px 0 var(--ok), inset 0 -2px 0 var(--ok) !important; }
  #tab_alerts table.gate127-alerts-rules tbody tr.rdRuleSavedRow > td:first-child { box-shadow: inset 2px 0 0 var(--ok), inset 0 2px 0 var(--ok), inset 0 -2px 0 var(--ok) !important; }
  #tab_alerts table.gate127-alerts-rules tbody tr.rdRuleSavedRow > td:last-child { box-shadow: inset -2px 0 0 var(--ok), inset 0 2px 0 var(--ok), inset 0 -2px 0 var(--ok) !important; }
}
@media (max-width: 700px) {
  #tab_alerts table.gate127-alerts-rules tbody tr.rdRuleSavedRow { border-color: var(--ok) !important; box-shadow: 0 0 0 3px var(--ok-soft) !important;
    background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--surface) !important; }
}
.rdRuleCreateMsg { margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.rdRuleCreateMsg:empty { display: none; }
.rdRuleCreateMsg.is-err { color: var(--bad); font-weight: 600; }
.rdRuleCreateMsg.is-warn { color: var(--warn); font-weight: 600; }
#gate105_rule_create[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.dashCardStatusPill:disabled { cursor: default; }
@media (max-width: 640px) {
  .rdFilterX { width: 36px; height: 36px; }
  .rdIssueBtn { padding-block: 6px; }
  .rdTapTag { padding-block: 5px; }
}
#gate105_alerts_state > .muted { padding: 14px 16px; }

/* [TAP C 6/10] polish: what opens shows it, a card is reachable from the keyboard, a finger finds every small target */
.rdLive.rdLiveTap { cursor: pointer; }
.rdLive.rdLiveTap:hover span, .rdLive.rdLiveTap:focus-visible span { text-decoration: underline dotted; text-underline-offset: 3px; }
.cl-plan-usage-row[data-rd-go], [data-rd-users] { cursor: pointer; }
.cl-plan-usage-row[data-rd-go]:hover, .cl-plan-usage-row[data-rd-go]:focus-visible,
[data-rd-users]:hover, [data-rd-users]:focus-visible { outline: 2px solid var(--accent-soft-2); outline-offset: 2px; border-radius: 10px; }
#dashCards .dashCard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#rdNotifyCard.rdFlash { animation: rdFlash 2s ease-out; }
@media (pointer: coarse) {
  .rdTapTag, .dashOperationalChip, .rdGroupAlarm, .rdLead .rdBad, .rdIssueBtn, .rdLinkCell, .rdFilterX, button.rdTapPill, .rdTapText, .rdLive.rdLiveTap { position: relative; }
  .rdTapTag::after, .dashOperationalChip::after, .rdGroupAlarm::after, .rdLead .rdBad::after, .rdIssueBtn::after, .rdLinkCell::after,
  .rdFilterX::after, button.rdTapPill::after, .rdTapText::after, .rdLive.rdLiveTap::after, #dashCards .dashCard .dashCardStatusPill::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; min-height: 100%; transform: translateY(-50%);
  }
}

/* [TAP C 6/10, fix] what Minas found on a PC: the card's chat line and the trend arrow did not take the mouse (pointer-events
   none from the card's first design), so the line opened the chart and the arrow's explanation never showed */
#dashCards .dashCard > .rdCardChat { pointer-events: auto; cursor: pointer; }
#dashCards .dashCard > .rdCardChat:hover .rdCardChatTxt { text-decoration: underline dotted; text-underline-offset: 3px; }
#dashCards .dashCard > .dashSparkRow .dashTrend { pointer-events: auto; cursor: help; }
/* [PHONE-WIDTH 6/10] Minas 6/10 (photo from his phone): the chart panel opened as a side panel cut on the right — «στην
   προβολή κινητού κρατάει τη λογική προβολής υπολογιστή». Cause, reproduced on the Pi: anything on the page wider than
   the screen makes the phone's browser widen its layout viewport, and every layer anchored to the right edge (the panel)
   slides off by that much. On a phone the page never scrolls sideways: what is wider is clipped at the page's edge
   («clip», not «hidden»: no scroll container, so the sticky top bar and table heads keep working), and the panel always
   covers the whole screen from its left edge, whatever the page does — as it was before. */
@media (max-width: 640px) {
  .layout, .topbar { overflow-x: clip; }
  #gate138MetricDetailHost .g138-drawer { left: 0 !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; }
}
/* [PHONE-WIDTH 6/10, the cause] Minas's next photo named it: the «Υγεία συστήματος» chip «Μπαταρία 90% · Κατάστημα
   Κέντρου (CL-0008)» — new since CL-0008 reports its battery (1.3.2) — was wider than his phone. The device's name was
   meant to stop at 16ch with «…», but an inline span ignores max-width; and a chip (nowrap) wider than its card made
   the card, the grid's column and the page grow. Now the name is cut with «…», a chip never outgrows its card (its
   value is cut, never its label), and the two status cards never widen their column. */
.dashOperationalChip, .dashAlertsPill { max-width: 100%; min-width: 0; }
.dashOperationalChipLabel { flex: 0 0 auto; }
.dashOperationalChipValue { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the battery chip: the level always whole, the name as much as fits («· Κατάστημα Κέ…») */
.dashOperationalChipValue:has(.rdChipWho) { display: inline-flex; align-items: center; }
.dashOperationalChipValue:has(.rdChipWho) > .rdBatt { flex: 0 0 auto; }
.dashOperationalChipValue .rdChipWho { display: block; flex: 0 1 auto; min-width: 0; }
.rdDashStatus > .card { min-width: 0; }
/* [HELP-SHEET 7/10] Minas 7/10: «Φύλλο πάνω από την οθόνη» — the «?» opens the guide of the place over the screen; closing
   it leaves the person where they were. Above every window (their z-index tops at 999999); the alarm's red strip
   (2147483600) stays above it. On a phone it takes the whole screen. */
.rdHelpSheetHost { position: fixed; inset: 0; z-index: 2147483000; display: none; }
.rdHelpSheetHost.is-open { display: block; }
.rdHelpSheetShade { position: absolute; inset: 0; background: var(--scrim); }
.rdHelpSheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); border-left: 1px solid var(--line); box-shadow: var(--shadow-3); outline: none;
  animation: rdHelpSheetIn .2s var(--ease); }
@keyframes rdHelpSheetIn { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.rdHelpSheetHead { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.rdHelpSheetFill { flex: 1 1 auto; }
.rdHelpSheetHead .rdIconBtn svg { width: 20px; height: 20px; }
.rdHelpSheetBody { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px calc(28px + env(safe-area-inset-bottom, 0px)); }
.rdHelpSheetBody .rdHelpArticle h1 { font-size: 21px; margin: 4px 0 6px; text-wrap: balance; }
.rdHelpSheetBody .rdHelpCrumb { font-size: 12.5px; color: var(--muted); }
.rdHelpSheetBody .rdHelpBody h2[id], .rdHelpSheetBody .rdHelpBody h3[id] { scroll-margin-top: 12px; }
html.rdHelpSheetOn, html.rdHelpSheetOn body { overflow: hidden; }
@media (max-width: 640px) {
  .rdHelpSheet { width: 100vw; border-left: 0; }
  .rdHelpSheetBody { padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .rdHelpSheet { animation: none; } }
/* the small «?» of a window or a strip sits with its buttons */
.rdMsgStripActs .rdHelpInline, #planStrip .rdHelpInline, #gate284AlarmBanner .rdHelpInline { width: 30px; height: 30px; margin-left: 6px; }
/* [B3 alarm-strip-may-cover-icons 8/10] on a phone the ringing strip («⚠ Συναγερμός · Σίγαση», app_audio_alarm.js, inline
   top:0) sits just under the top bar: at the very top it covered the bell, «Συζητήσεις», the messages and «?» until
   «Σίγαση» was pressed */
@media (max-width: 640px) {
  #gate284AlarmBanner { top: calc(var(--top-h) + env(safe-area-inset-top, 0px)) !important; }
}

/* [PRESS 17/10] the claim card's request waiting for its press (app_core.js pressRender): the two steps, what the device
   does now (bold when it flashes twice: press now), the outcome. Text wraps: nothing here may widen a phone's page. */
.pressPanel { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-m);
  background: var(--accent-soft); min-width: 0; overflow-wrap: anywhere; }
.pressPanel .pressTitle { font-weight: 600; }
.pressPanel .pressSteps { margin: 8px 0 4px 20px; padding: 0; }
.pressPanel .pressSteps li { margin: 3px 0; }
.pressPanel .pressNow { margin-top: 8px; }
.pressPanel .pressNowGo { font-weight: 600; color: var(--accent); }
.pressPanel .pressOk { font-weight: 600; color: var(--ok); }
.pressPanel .pressWarn { font-weight: 600; color: var(--warn); }