/* Stowarly UI v1 — shared by Maritime, Edge settings and the local app.
 * Keep the distributed copies identical. Scope only the settings drawer on HMI;
 * the camera stage, alarm overlay, gestures and night layer are intentionally outside.
 */
.stowarly-ui {
  --ui-bg: #0b1220;
  --ui-panel: #111b2d;
  --ui-inner: #162239;
  --ui-input: #0c1422;
  --ui-line: #2b3c56;
  --ui-text: #edf3fb;
  --ui-muted: #a4b3c7;
  --ui-accent: #36a3ff;
  --ui-green: #53df94;
  --ui-red: #ff7580;
  --ui-yellow: #f3c765;
  --ui-radius: 16px;
  --ui-control-radius: 10px;
  --bg: var(--ui-bg);
  --panel: var(--ui-panel);
  --panel2: var(--ui-inner);
  --card: var(--ui-panel);
  --card2: var(--ui-inner);
  --border: var(--ui-line);
  --line: var(--ui-line);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --accent: var(--ui-accent);
  --blue: var(--ui-accent);
  --green: var(--ui-green);
  --ok: var(--ui-green);
  --red: var(--ui-red);
  --danger: var(--ui-red);
  --bad: var(--ui-red);
  --warn: var(--ui-yellow);
  --theme-topbar: var(--ui-bg);
  --theme-input: var(--ui-input);
  --theme-inner: var(--ui-inner);
  --theme-shadow: transparent;
  --theme-hover: #4c6b91;
  --theme-accent-soft: #183651;
  color-scheme: dark;
  color: var(--ui-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
body.stowarly-ui, .stowarly-ui.drawer { background: var(--ui-bg); }
.stowarly-ui :is(button, input, select, textarea) { font-family: inherit; }
.stowarly-ui :is(h1, h2, h3, strong) { font-weight: 700; }
.stowarly-ui h1 { font-size: clamp(25px, 3vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.stowarly-ui :is(h2, h3) { line-height: 1.3; }
.stowarly-ui :is(.muted, .sub, .who, .hint, .note, .lead, .settings-note, .dev-muted) { color: var(--ui-muted); line-height: 1.5; }
.stowarly-ui :is(.sub, .who, .hint, .note, .settings-note, .dev-muted) { font-size: 13px; }
.stowarly-ui :is(.card, .auth-card, .panel, .form-panel, .table-panel, .summary-card, .vessel-card, .admin-card, .device-card, .notification-vessel-card, .login-card, .dev-card) {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 20px;
  box-shadow: none !important;
}
.stowarly-ui :is(.check-card, .permission-card, .toggle-row, .push-status, .step, .compat, .web-address-card) {
  background: var(--ui-inner);
  border: 1px solid var(--ui-line);
  border-radius: 12px;
}
.stowarly-ui .summary-card.danger { border-color: #914051; background: #301d2a; }
.stowarly-ui :is(.field label, .eyebrow, .card > h2, .section > h3, .web-address-card h3) {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.4;
}
.stowarly-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea) {
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-control-radius);
  background: var(--ui-input) !important;
  color: var(--ui-text) !important;
  font-size: 15px;
  line-height: 1.4;
}
.stowarly-ui input::placeholder, .stowarly-ui textarea::placeholder { color: var(--ui-muted); opacity: .85; }
.stowarly-ui :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--ui-accent); }
.stowarly-ui :is(input[type=checkbox], input[type=radio]) { width: 20px; height: 20px; flex-shrink: 0; }
.stowarly-ui :is(.btn, .primary-btn, .secondary-btn, .dev-btn, .save, .close, .remove, .tab, .dev-tab, .login-card button, a.secondary), .stowarly-ui #pairBtn {
  min-height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-control-radius);
  padding: 10px 14px;
  background: var(--ui-inner);
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.stowarly-ui :is(.primary-btn, .btn.primary, .save, .login-card button, .dev-btn:not(.danger):not(.green):not(.secondary)), .stowarly-ui #pairBtn {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent);
  color: #071626;
}
.stowarly-ui :is(.btn.ok, .dev-btn.green) { background: #153b2b !important; border-color: #2d7755; color: #b6f5d1; }
.stowarly-ui .btn.warn { background: #443715; border-color: #89702b; color: #ffe3a0; }
.stowarly-ui :is(.btn.danger, .dev-btn.danger, .remove) { background: #471d29 !important; border-color: #914051; color: #ffd4d9; }
.stowarly-ui :is(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.stowarly-ui :is(button, input, select):disabled { opacity: .5; cursor: not-allowed; }
.stowarly-ui .tab.active, .stowarly-ui .dev-tab.active { background: #183651 !important; border-color: #3b82b6; color: #edf3fb; }
.stowarly-ui .tabs a { font-size: 14px; font-weight: 650; }
.stowarly-ui :is(.desktop-nav a, .mobile-menu-nav a) { font-size: 14px; font-weight: 650; }
.stowarly-ui :is(.mobile-menu, .drawer) { background: var(--ui-bg); border-color: var(--ui-line); }
.stowarly-ui .topbar { border-color: var(--ui-line); }
.stowarly-ui :is(.brand, .vessel) { font-weight: 750; letter-spacing: .02em; }
.stowarly-ui .btn.person { min-height: 112px; font-size: clamp(18px, 4vw, 24px); font-weight: 750; }
.stowarly-ui .bigstate { font-size: 25px; font-weight: 700; }
.stowarly-ui .count { font-weight: 700; }
.stowarly-ui .auth-card { width: min(430px, 100%); }
.stowarly-ui .code { font-family: ui-monospace, monospace !important; font-size: 22px !important; }
.stowarly-ui .meta { grid-template-columns: minmax(95px, .7fr) minmax(0, 1fr); overflow-wrap: anywhere; }
.stowarly-ui .dev-secret { font-family: ui-monospace, monospace; }
/* HMI drawer only: no changes to the camera or alarm layers. */
.drawer.stowarly-ui { grid-template-columns: minmax(0, 1fr); }
.drawer.stowarly-ui > * { min-width: 0; }
.drawer.stowarly-ui .drawer-head { padding: 18px; border-color: var(--ui-line); }
.drawer.stowarly-ui .drawer-head h2 { margin: 0; font-size: 23px; letter-spacing: -.02em; }
.drawer.stowarly-ui .tabs { gap: 8px; padding: 12px 16px; border-color: var(--ui-line); }
.drawer.stowarly-ui .scroll { padding: 16px; }
.drawer.stowarly-ui .section { padding: 16px; margin-bottom: 14px; background: var(--ui-panel); border-color: var(--ui-line); border-radius: var(--ui-radius); }
.drawer.stowarly-ui .section > h3 { margin: 0 0 12px; color: var(--ui-muted); }
.drawer.stowarly-ui .field { margin-top: 14px; }
.drawer.stowarly-ui .field label { margin-bottom: 7px; }
.drawer.stowarly-ui .cam-setting { background: var(--ui-input); border-color: var(--ui-line); border-radius: 12px; padding: 12px; }
.drawer.stowarly-ui .adv-toggle { min-height: 36px; font-size: 12px; font-weight: 650; color: var(--ui-accent); }
.drawer.stowarly-ui .actions { background: var(--ui-bg); border-color: var(--ui-line); padding: 14px 16px; }
.drawer.stowarly-ui .sys-item { background: var(--ui-input); border-color: var(--ui-line); }
.drawer.stowarly-ui .sys-item span { font-size: 12px; }
.drawer.stowarly-ui .sys-item strong { font-size: 14px; }
@media (max-width: 520px) {
  .stowarly-ui :is(.card, .auth-card, .panel, .form-panel, .table-panel, .summary-card, .vessel-card, .admin-card, .notification-vessel-card, .dev-card) { padding: 16px; }
  .stowarly-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { font-size: 16px; }
  .drawer.stowarly-ui .scroll { padding: 12px; }
  .drawer.stowarly-ui .section { padding: 14px; }
  .drawer.stowarly-ui .tab { padding-inline: 8px; font-size: 12px; }
}

/* Standalone DEV provisioning pages use native buttons. */
.stowarly-ui.dev-tools button, .stowarly-ui.dev-tools a.btn { min-height:44px; padding:10px 14px; border:1px solid var(--ui-line); border-radius:10px; font:650 14px/1.4 Inter,system-ui,sans-serif; background:var(--ui-accent); color:#071626; }
.stowarly-ui.dev-tools .secondary { background:var(--ui-inner); color:var(--ui-text); }
.stowarly-ui.dev-tools .danger, .stowarly-ui .secondary-btn.danger { background:#471d29; border-color:#914051; color:#ffd4d9; }

/* Prevent accidental text selection/long-press callouts on touch controls.
   Editable fields still support the browser's normal selection and clipboard. */
.stowarly-ui {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.stowarly-ui :is(input, textarea, [contenteditable="true"], [contenteditable="true"] *) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}