/* Bee design tokens + shared components (manager + app). Brand: BeeControls green #8cc63f, grey #939598, Lato. */
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root {
  --green: #8cc63f; --green-d: #6fa32c; --green-t: rgba(140,198,63,.14); --grey: #939598;
  --bg: #eef0f3; --panel: #ffffff; --panel-2: #f6f7f9; --line: #d9dde3; --line-2: #e7eaee;
  --ink: #1f2429; --ink-2: #4a5159; --muted: #7b838c; --sel: #e8f3d9; --hdr: #2b3136; --hdr-ink: #f1f3f5;
  --card: #ffffff;   /* 1.77.25 ROOT FIX: the cards' colour was never defined (always white) — white text on white in the dark theme */
  --down: #d64545; --warn: #d69a1f; --warn-soft: #f0d58a;--info: #3d7fd6; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --font: 'Lato', 'Segoe UI', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #15181c; --panel: #1d2126; --panel-2: #23282e; --line: #333a42; --line-2: #2a3036; --ink: #e9ecef; --ink-2: #c3c9cf; --muted: #8d959e;
  --sel: #2c3a1d; --hdr: #0f1215; --hdr-ink: #e9ecef; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3); --card: #23282e; } }
:root[data-theme="dark"] { --bg: #15181c; --panel: #1d2126; --panel-2: #23282e; --line: #333a42; --line-2: #2a3036; --ink: #e9ecef; --ink-2: #c3c9cf; --muted: #8d959e;
  --sel: #2c3a1d; --hdr: #0f1215; --hdr-ink: #e9ecef; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3); --card: #23282e; }
/* 1.77.38 (owner chose B — mockups/hex-background.png) the page background, ONE place for the manager AND the app: the header's
   hexagons fade into the page corner on a soft tint (no more blank white). The look's own colours stay (other skins), the
   photo looks keep their photo. */
:root { --page-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cdefs%3E%3Cpath id='h' d='M-34 0l17-29.4h34L34 0 17 29.4h-34z'/%3E%3C/defs%3E%3Cg fill='%238cc63f'%3E%3Cuse href='%23h' x='380' y='40' opacity='.42'/%3E%3Cuse href='%23h' x='329' y='70' opacity='.34'/%3E%3Cuse href='%23h' x='380' y='100' opacity='.3'/%3E%3Cuse href='%23h' x='278' y='40' opacity='.24'/%3E%3Cuse href='%23h' x='329' y='130' opacity='.22'/%3E%3Cuse href='%23h' x='227' y='70' opacity='.16'/%3E%3Cuse href='%23h' x='278' y='100' opacity='.18'/%3E%3Cuse href='%23h' x='380' y='160' opacity='.2'/%3E%3Cuse href='%23h' x='176' y='40' opacity='.12'/%3E%3Cuse href='%23h' x='278' y='160' opacity='.12'/%3E%3Cuse href='%23h' x='329' y='190' opacity='.14'/%3E%3Cuse href='%23h' x='380' y='220' opacity='.1'/%3E%3C/g%3E%3C/svg%3E"); --page-t1: var(--panel-2); --page-t2: var(--bg); --page-hex-o: 1; --page-hex-rtl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cdefs%3E%3Cpath id='h' d='M-34 0l17-29.4h34L34 0 17 29.4h-34z'/%3E%3C/defs%3E%3Cg fill='%238cc63f'%3E%3Cuse href='%23h' x='40' y='40' opacity='.42'/%3E%3Cuse href='%23h' x='91' y='70' opacity='.34'/%3E%3Cuse href='%23h' x='40' y='100' opacity='.3'/%3E%3Cuse href='%23h' x='142' y='40' opacity='.24'/%3E%3Cuse href='%23h' x='91' y='130' opacity='.22'/%3E%3Cuse href='%23h' x='193' y='70' opacity='.16'/%3E%3Cuse href='%23h' x='142' y='100' opacity='.18'/%3E%3Cuse href='%23h' x='40' y='160' opacity='.2'/%3E%3Cuse href='%23h' x='244' y='40' opacity='.12'/%3E%3Cuse href='%23h' x='142' y='160' opacity='.12'/%3E%3Cuse href='%23h' x='91' y='190' opacity='.14'/%3E%3Cuse href='%23h' x='40' y='220' opacity='.1'/%3E%3C/g%3E%3C/svg%3E"); }
:root:not([data-skin]) { --page-t1: #f7f9f4; --page-t2: #eef2ea; }
:root:not([data-skin])[data-theme="dark"] { --page-t1: #171c19; --page-t2: #121613; }
@media (prefers-color-scheme: dark) { :root:not([data-skin]):not([data-theme="light"]) { --page-t1: #171c19; --page-t2: #121613; } }
.main, .content { background: var(--page-hex) no-repeat right top / 420px auto, linear-gradient(160deg, var(--page-t1), var(--page-t2)); background-attachment: local, scroll; }
[dir="rtl"] .main, [dir="rtl"] .content { background-image: var(--page-hex-rtl), linear-gradient(160deg, var(--page-t1), var(--page-t2)); background-position: left top, 0 0; }
:root[data-skin="photo"] .content, :root[data-skin="contrast"] .content { background: none; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex: 0 0 auto; }
img.camimg { width: 100%; max-width: 360px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #111; display: block; }
img.cicon { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--green); }
.btn.primary { background: var(--green); border-color: var(--green); color: var(--hdr); }   /* 1.77.41 owner rule: white on the light green was contrast 2.0 */
.btn.primary:hover { background: var(--green-d); }
.btn.danger:hover { border-color: var(--down); color: var(--down); }
.btn.sm { padding: 4px 9px; font-size: 13px; }
.btn.sm svg, .ib svg { width: 17px; height: 17px; }
.btn:disabled { opacity: .5; cursor: default; }
.ib { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--ink-2); }
.ib:hover { border-color: var(--green); color: var(--ink); }
.ib.act { background: var(--green); border-color: var(--green); color: #fff; }
input[type=text], input[type=password], input[type=number], input[type=time], select, textarea, .tx { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-t); border-color: var(--green); }
input[type=range] { accent-color: var(--green); width: 130px; direction: ltr; }
input[type=color] { width: 40px; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: var(--panel); }
.sw { width: 44px; height: 24px; border-radius: 999px; background: #c5cad0; border: 0; position: relative; cursor: pointer; padding: 0; flex: 0 0 auto; transition: background .15s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.sw.on { background: var(--green); } .sw.on i { left: 23px; }
.bc { display: inline-flex; align-items: center; gap: 6px; }
.bv { font-weight: 700; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.bv.big { font-size: 15px; }
/* multi-function devices: shutter (▲■▼ + position + slat), thermostat (power, temperature, mode, fan), read-only indicators */
.bshut, .btherm { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 150px; }
.bpos { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; } .bpos input[type=range] { flex: 1; width: auto; }
.bslat { font-size: 12px; } .brow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btemp { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .btemp svg { width: 16px; height: 16px; }
.bchips { display: flex; flex-wrap: wrap; gap: 4px; }
.bchip { border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 11.5px; background: var(--panel); color: inherit; cursor: pointer; }
.bchip.on { background: var(--green); border-color: var(--green); color: #16240a; font-weight: 700; }
.bind { display: inline-flex; align-items: center; gap: 7px; } .bind i { width: 12px; height: 12px; border-radius: 50%; background: #c5cad0; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.bind.on i { background: var(--green); box-shadow: 0 0 0 3px var(--green-t); } .bind small { font-size: 10.5px; color: var(--muted, #888); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 6px; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line-2); white-space: nowrap; }
/* 1.49.2 connection LED on cards + the building sign (owner-approved mockups/building-connection-mockup.png) */
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #c5cad0; vertical-align: middle; }
.led.led-ok { background: #8cc63f; box-shadow: 0 0 6px #8cc63f; } .led.led-bad { background: #e5534b; box-shadow: 0 0 6px #e5534b; } .led.led-grey { background: #c5cad0; }
.bsign { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 1px 10px; font-weight: 600; font-size: 12.5px; }
.bsign.ok { background: #eef6e3; color: #4d7a14; } .bsign.bad { background: #fdecea; color: #b3261e; }
.pill.ok { background: var(--green-t); color: var(--green-d); border-color: transparent; }
.pill.bad { background: rgba(214,69,69,.12); color: var(--down); border-color: transparent; }
.pill.warn { background: rgba(214,154,31,.14); color: var(--warn); border-color: transparent; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--down); display: inline-block; }
.dot.on { background: var(--green); }
.muted { color: var(--muted); }
.err { color: var(--down); min-height: 18px; font-size: 13px; }
.toast-box { position: fixed; bottom: 34px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--hdr); color: var(--hdr-ink); padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); border-left: 4px solid var(--green); font-size: 13px; }
.toast.bad { border-left-color: var(--down); }
.modal-bg { position: fixed; inset: 0; background: rgba(15,18,21,.45); display: grid; place-items: center; z-index: 40; padding: 16px; }
.modal { background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); width: min(460px, 100%); padding: 20px; max-height: calc(100vh - 32px); overflow: auto; }
.modal h3 { margin: 0 0 12px; font-size: 17px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(1200px 500px at 50% -10%, var(--green-t), transparent), var(--bg); }
.login .card { width: min(400px, 100%); background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 28px; }
.login .logo { display: flex; justify-content: center; margin-bottom: 6px; }
.login .logo img { width: min(260px, 80%); height: auto; }
/* 1.77.105 owner: "why bee logo is not in the middle — check all centrally". The logo sits inside a link (www.bee-controls.com);
   the link was wider than the picture (80% of itself) and the picture stood at its start: 30 px off the middle. The link now
   fills the row and centres the picture; the header's .beelink divider never reaches a sign-in card. ONE rule for every sign-in. */
.login .logo > a, .login .logo .beelink { display: flex; justify-content: center; width: 100%; padding: 0; margin: 0; border: 0; }
/* 1.77.105 ONE header rule for every Bee page (owner: "fix header … centrallllll"): the manager / programs header (.hdr) and the
   app / wall screen header (.top). Nothing in a header ever breaks onto 2-3 lines; a narrow window lets the extra words step back
   (each button keeps its icon + tooltip) and long titles end with "…". */
.hdr, .top { flex-wrap: nowrap; overflow: hidden; }
.hdr > *, .top > *, .hdr .hb, .top .tb, .hdr .who, .hdr .ttl { white-space: nowrap; }
.hdr .beelink, .hdr .hb, .hdr .who .pill, .top .tb { flex-shrink: 0; }
.hdr .ttl { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.hdr .who { min-width: 0; flex-shrink: 1; overflow: hidden; } .hdr .who .nm { overflow: hidden; text-overflow: ellipsis; }
.hdr { min-height: 54px; }
@media (max-width: 1500px) { .hdr .ttl small { display: none; } .hdr .hb > span:not([data-notr]) { display: none; } }
@media (max-width: 1100px) { .hdr .who .nm { display: none; } }
/* 1.77.105 ONE button rule (owner: "fix centrally"): the words on a button never break onto 2 lines ("Restart", "Send to server",
   "✓ Confirm" did at 1000 px). When a row of buttons has no room, whole buttons move to the next line instead. */
.btn, .hb, .avchip, .avb, .pill, .badge, .chip, .tbb > span { white-space: nowrap; }
.btn { max-width: 100%; }
.row:has(> .btn), .avchips, .btns { flex-wrap: wrap; }
/* ONE field rule: a field's name never breaks ("Function" did); too long = "…" (the full name stays in the tooltip / the line) */
.field > span, label.pr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ONE table rule (was only inside the manager): every Bee table looks the same; a wide table scrolls inside its own pane
   (never pushes a column off the screen); text-align start = right in Arabic by itself. */
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.grid th { text-align: start; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; background: var(--panel-2); padding: 8px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; white-space: nowrap; }
.grid td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover td { background: var(--panel-2); }
.grid tr.on td { background: var(--sel); }
.grid td.ic svg { width: 18px; height: 18px; color: var(--grey); }
.grid tr[data-card].on td.ic svg { color: var(--green-d); }
.grid .nm { font-weight: 600; }
.grid .mono { font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; color: var(--ink-2); }
.grid td.ctl { text-align: end; white-space: nowrap; }
.grid td.ck, .grid th.ck { width: 28px; padding-inline-end: 0; }
[dir=rtl] .grid th[style*="right"] { text-align: left !important; }
/* narrow screens (a 1000-1280 px laptop): the tree and the properties give the middle room (their drag-resize still wins) */
@media (max-width: 1280px) { .body { --sideW: 220px; --propsW: 290px; } }
.login h1 { text-align: center; font-size: 18px; font-weight: 600; margin: 6px 0 18px; color: var(--ink-2); letter-spacing: .3px; }
.login .btn.primary { width: 100%; justify-content: center; padding: 10px; }
.login .switch-link { text-align: center; margin-top: 12px; font-size: 13px; }
.login .switch-link a { color: var(--green-d); cursor: pointer; font-weight: 600; }

/* password eye (BeeUI.pwEyes wraps every password input) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; box-sizing: border-box; padding-inline-end: 40px; }
.pw-eye { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted, #888); cursor: pointer; border-radius: 8px; padding: 0; }
.pw-eye:hover { color: var(--green, #8cc63f); background: rgba(140, 198, 63, .1); }