/* 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;
  --down: #d64545; --warn: #d69a1f; --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); } }
: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); }
* { 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: #fff; }
.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; }
.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); }