/* =========================================================
   THEME.CSS - ORGANIZED ONLY
   จัดเรียงเป็นหมวดให้อ่านง่ายขึ้น
   หมายเหตุ: ไม่ได้แก้ logic / selector / property / value เดิม
   ========================================================= */

/* =========================================================
   00) ROOT VARIABLES + GLOBAL BASE
   ========================================================= */
/* Shared responsive theme for Smart Building pages */
:root {
  color-scheme: light;
  --page-bg: #f3f7ef;
  --card-bg: rgba(255, 255, 255, 0.96);
  --soft-bg: #f7f9f4;
  --line: #e8f0cf;
  --text: #101a13;
  --muted: #68766b;
  --primary: #294c35;
  --shadow: 0 18px 45px rgba(13, 21, 16, 0.08);
}

/* =========================================================
   16) V1.6.8 NAV TABS + OPERATIONS PAGES
   ========================================================= */
.navbar-account-actions {
  min-width: 0;
}

.navbar-desktop-tabs {
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0.25rem 0 0.1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.navbar-desktop-tabs .nav-desktop-link {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid #cbd9c5;
  border-radius: 9999px;
  padding: 0.45rem 0.9rem;
  background: rgba(255, 255, 255, 0.7);
}

.navbar-desktop-tabs .nav-desktop-link.is-active,
.nav-mobile-link.is-active {
  border-color: #294c35;
  background: #294c35;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(41, 76, 53, 0.2);
}

html.dark .navbar-desktop-tabs .nav-desktop-link {
  border-color: #35563c;
  background: rgba(13, 21, 16, 0.86);
}

html.dark .navbar-desktop-tabs .nav-desktop-link.is-active,
html.dark .nav-mobile-link.is-active {
  border-color: #a8bf20;
  background: #294c35;
  color: #ffffff;
}

@media (min-width: 1024px) {
  #navbarSpacer {
    height: calc(126px + env(safe-area-inset-top));
  }
}

/* =========================================================
   17) V1.6.9 SINGLE-ROW NAVBAR + OVERLAP GUARD
   ========================================================= */
:root {
  --navbar-height: calc(70px + env(safe-area-inset-top));
}

#navbarSpacer {
  height: var(--navbar-height) !important;
}

.navbar-shell .navbar-inner {
  width: 100% !important;
  max-width: none !important;
  padding: 0.65rem clamp(0.75rem, 2.2vw, 2rem) !important;
}

@media (min-width: 1024px) {
  :root {
    --navbar-height: calc(92px + env(safe-area-inset-top));
  }

  .navbar-shell .navbar-row {
    min-height: 70px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(0.65rem, 1vw, 1.1rem) !important;
  }

  .navbar-shell .navbar-brand {
    width: clamp(150px, 10vw, 178px);
    max-width: 178px;
    flex: 0 0 auto !important;
    overflow: visible;
  }

  .navbar-shell .navbar-brand-logo {
    width: 100%;
    height: 68px;
    border-radius: 0.4rem;
    object-fit: contain;
    object-position: left center;
    box-shadow: none;
  }

  .navbar-shell .navbar-desktop-tabs {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.15rem 0.1rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .navbar-shell .navbar-desktop-tabs::-webkit-scrollbar {
    display: none;
  }

  .navbar-shell .navbar-desktop-tabs .nav-desktop-link {
    min-height: 44px;
    flex: 0 0 auto;
    justify-content: center;
    border: 1px solid #cbd9c5;
    border-radius: 9999px;
    padding: 0.55rem clamp(0.75rem, 0.9vw, 1rem);
    background: rgba(255, 255, 255, 0.7);
    color: #35563c;
    font-size: clamp(0.78rem, 0.8vw, 0.92rem);
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
  }

  .navbar-shell .navbar-desktop-tabs .nav-desktop-link:hover {
    border-color: #cfdf71;
    background: #f3f8d9;
    color: #294c35;
  }

  .navbar-shell .navbar-desktop-tabs .nav-desktop-link.is-active {
    border-color: #294c35;
    background: #294c35;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(41, 76, 53, 0.26);
  }

  .navbar-shell .navbar-account-actions {
    min-width: max-content;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 0.45rem !important;
  }

  .navbar-shell .navbar-desktop-icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 1rem;
  }

  .navbar-shell .navbar-profile-card {
    min-height: 56px;
    width: clamp(170px, 14vw, 245px);
    max-width: 245px;
    border-radius: 1.15rem;
    padding: 0.4rem 0.65rem;
  }

  .navbar-shell .navbar-desktop-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex-basis: 42px !important;
  }

  .navbar-shell .navbar-profile-text,
  .navbar-shell .navbar-profile-name,
  .navbar-shell .navbar-profile-role {
    width: 100%;
    max-width: none;
  }

  .navbar-shell .navbar-profile-name {
    font-size: 0.82rem;
  }

  .navbar-shell .navbar-profile-role {
    margin-top: 0.15rem;
    font-size: 0.66rem;
  }

  .navbar-shell .navbar-logout-btn {
    min-height: 48px;
    border-radius: 1rem;
    padding: 0.65rem 0.9rem;
  }

  html.dark .navbar-shell .navbar-desktop-tabs .nav-desktop-link {
    border-color: #35563c;
    background: rgba(13, 21, 16, 0.82);
    color: #cbd9c5;
  }

  html.dark .navbar-shell .navbar-desktop-tabs .nav-desktop-link:hover {
    border-color: #506156;
    background: #1b2b20;
    color: #ffffff;
  }

  html.dark .navbar-shell .navbar-desktop-tabs .nav-desktop-link.is-active {
    border-color: #a8bf20;
    background: #294c35;
    color: #ffffff;
  }
}

@media (max-width: 1023px) {
  #mobileMenu,
  .navbar-mobile-panel {
    top: var(--navbar-height) !important;
    max-height: calc(100dvh - var(--navbar-height)) !important;
  }
}

@media (max-width: 430px) {
  .navbar-shell .navbar-brand-logo {
    width: 104px;
    height: 44px;
  }
}

.operations-page {
  width: 100%;
  max-width: 72rem;
  margin: 1.5rem auto 0;
  padding: 0 1rem 2rem;
}

.operations-hero,
.operations-panel {
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.operations-hero {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.operations-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.operations-title {
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  line-height: 1.12;
  font-weight: 900;
  color: var(--text);
}

.operations-subtitle {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem 0.75rem;
  border: 1px solid #9dae9f;
  border-radius: 9999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.status-pill.is-online,
.status-pill.is-enabled {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.status-pill.is-slow {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.status-pill.is-offline,
.status-pill.is-disabled {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.25rem;
}

.automation-summary-dynamic-host {
  display: contents;
}

.metric-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--soft-bg);
}

.metric-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.metric-value {
  margin-top: 0.3rem;
  color: var(--text);
  font-size: clamp(1.2rem, 3vw, 1.75rem);
  line-height: 1.1;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.operations-panel {
  margin-top: 1.25rem;
  padding: clamp(1rem, 2.5vw, 1.6rem);
}

.panel-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-title {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 900;
}

.range-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.range-button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--soft-bg);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
}

.range-button.is-active {
  border-color: #294c35;
  background: #294c35;
  color: #ffffff;
}

.monitor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1rem 0 0.65rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.monitor-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.monitor-legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
}

.monitor-timeline {
  display: flex;
  align-items: stretch;
  gap: 3px;
  min-height: 170px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--soft-bg);
  overflow-x: auto;
}

.monitor-bar {
  flex: 1 0 7px;
  min-width: 7px;
  border-radius: 0.3rem;
  background: #68766b;
}

.monitor-bar.online { background: #16a34a; }
.monitor-bar.slow { background: #eab308; }
.monitor-bar.offline { background: #dc2626; }
.monitor-bar.no-data { background: #68766b; }

.timeline-axis {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.25rem;
}

.schedule-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--card-bg);
  padding: 1.25rem;
}

.schedule-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.schedule-master-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
}

.schedule-master-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.schedule-master-switch-track {
  position: relative;
  display: inline-block;
  width: 3.1rem;
  height: 1.65rem;
  border-radius: 9999px;
  background: #cbd9c5;
  box-shadow: inset 0 0 0 1px rgb(100 116 139 / 0.12);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.schedule-master-switch-track::after {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.3);
  content: "";
  transition: transform 0.2s ease;
}

.schedule-master-switch-input:checked + .schedule-master-switch-track {
  background: #22c55e;
}

.schedule-master-switch-input:checked + .schedule-master-switch-track::after {
  transform: translateX(1.45rem);
}

.schedule-master-switch-input:focus-visible + .schedule-master-switch-track {
  outline: 3px solid rgb(192 213 48 / 0.45);
  outline-offset: 2px;
}

.schedule-master-switch-input:disabled + .schedule-master-switch-track {
  cursor: not-allowed;
  opacity: 0.55;
}

.schedule-master-switch-state {
  min-width: 2rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.schedule-master-switch.is-on .schedule-master-switch-state {
  color: #16a34a;
}

html.dark .schedule-master-switch-track {
  background: #68766b;
}

html.dark .schedule-master-switch-input:checked + .schedule-master-switch-track {
  background: #22c55e;
}

.schedule-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.schedule-field label,
.holiday-form label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.schedule-field input,
.holiday-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--soft-bg);
  color: var(--text);
  padding: 0.65rem 0.8rem;
}

.schedule-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.schedule-day {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--soft-bg);
  padding: 0.45rem 0.6rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.schedule-save,
.holiday-add {
  width: 100%;
  min-height: 46px;
  margin-top: 1rem;
  border-radius: 0.9rem;
  background: #294c35;
  color: #ffffff;
  font-weight: 900;
}

.schedule-card > .schedule-save {
  margin-top: 1.5rem;
}

.holiday-form {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr auto;
  align-items: end;
  gap: 0.8rem;
}

.holiday-add {
  width: auto;
  margin-top: 0;
  padding: 0 1rem;
}

.holiday-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.holiday-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--soft-bg);
  padding: 0.85rem;
}

.holiday-delete {
  flex: 0 0 auto;
  min-height: 38px;
  border-radius: 0.75rem;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  padding: 0.35rem 0.7rem;
  font-weight: 800;
}

.logs-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .operations-title-row,
  .panel-heading-row {
    align-items: stretch;
    flex-direction: column;
  }

  .metric-grid,
  .logs-summary-grid,
  .schedule-grid,
  .holiday-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .holiday-form {
    grid-template-columns: 1fr;
  }

  .holiday-add {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .metric-grid,
  .logs-summary-grid,
  .schedule-grid,
  .holiday-grid,
  .schedule-form-grid {
    grid-template-columns: 1fr;
  }
}

html.dark {
  color-scheme: dark;
  --page-bg: #08140d;
  --card-bg: rgba(13, 21, 16, 0.96);
  --soft-bg: #101a13;
  --line: #1b2b20;
  --text: #f7f9f4;
  --muted: #9dae9f;
  --primary: #c0d530;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top left, rgba(41, 76, 53, 0.08), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.08), transparent 32rem),
    var(--page-bg) !important;
  color: var(--text);
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
  font-size: 16px !important;
  max-width: 100%;
}

button,
.btn-touch {
  min-height: 44px;
}

/* =========================================================
   01) PAGE LAYOUT BASE
   ========================================================= */

/* ===============================
   Page Layout
   =============================== */

.page-wrap,
.app-container,
body > .max-w-5xl,
body > .max-w-4xl {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

body > .max-w-4xl {
  max-width: 56rem;
}

.app-card,
.page-wrap > .bg-white,
.page-wrap > div > .bg-white,
body > .max-w-4xl > .bg-white,
body > .max-w-4xl .bg-white,
body > .max-w-5xl .bg-white {
  box-shadow: var(--shadow);
}

.card-soft {
  background: var(--soft-bg);
  border: 1px solid var(--line);
}

/* Settings automation logic card
   Use explicit theme colors because the bundled Tailwind build does not
   include every dark color/opacity utility used by newer Tailwind versions. */
.automation-logic-card {
  background: #f7f9f4;
  border: 1px solid #e5e7eb;
  color: #1f2937;
}

html.dark .automation-logic-card {
  background: #1b2b20;
  border-color: #35563c;
  color: #f7f9f4;
}

.mobile-scroll-x {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-stack {
  min-width: 0;
}

.break-safe {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* =========================================================
   02) NAVBAR - BASE / DESKTOP / MOBILE
   ========================================================= */

/* ===============================
   Navbar Base
   =============================== */

.navbar-shell {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.94) !important;
}

html.dark .navbar-shell {
  background: rgba(13, 21, 16, 0.94) !important;
}

.navbar-shell a,
.navbar-shell button {
  touch-action: manipulation;
}

.navbar-shell .max-w-5xl {
  width: 100%;
}

#navbarSpacer {
  height: calc(64px + env(safe-area-inset-top));
  flex: 0 0 auto;
}

@media (min-width: 640px) {
  #navbarSpacer {
    height: calc(76px + env(safe-area-inset-top));
  }
}

body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* ===============================
   Navbar Row / Brand
   =============================== */

.navbar-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.navbar-brand {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-brand-logo {
  display: block;
  width: 120px;
  height: 50px;
  object-fit: contain;
  object-position: left center;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(13, 21, 16, 0.18);
  flex: 0 0 auto;
}

.login-brand-logo {
  width: 190px;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(13, 21, 16, 0.24);
}

.login-brand-logo-mobile {
  width: 176px;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgba(13, 21, 16, 0.2);
}

.navbar-title {
  max-width: 150px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 900;
  color: #132019;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .navbar-title {
  color: #ffffff;
}

@media (min-width: 640px) {
  .navbar-title {
    max-width: none;
    font-size: 24px;
    line-height: 32px;
  }
}

/* ===============================
   Desktop Navbar
   =============================== */

.nav-desktop-link {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  border-radius: 0.875rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #506156;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.nav-desktop-link:hover {
  background: #f3f8d9;
  color: #294c35;
}

html.dark .nav-desktop-link {
  color: #cbd9c5;
}

html.dark .nav-desktop-link:hover {
  background: #1b2b20;
  color: #c0d530;
}

/* ===============================
   Mobile Navbar Buttons
   =============================== */

.navbar-mobile-actions {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

.navbar-icon-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  flex: 0 0 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  line-height: 1;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html.dark .navbar-icon-btn {
  border-color: #35563c;
  background: #101a13;
  color: #ffffff;
}

.navbar-icon-btn svg,
#themeToggleBtn svg,
#themeToggleBtnMobile svg,
#themeToggleBtnMobileTop svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
  flex: 0 0 auto;
}

/* ===============================
   Hamburger / Close Icon Fix
   =============================== */

.navbar-toggle-icon {
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 22px;
  font-weight: 800;
  transform: translateY(-1px);
}

.navbar-toggle-icon:not(.hidden) {
  display: inline-flex !important;
}

.navbar-toggle-icon.hidden,
#navOpenIcon.hidden,
#navCloseIcon.hidden {
  display: none !important;
}

/* ===============================
   Mobile Dropdown Panel
   =============================== */

#mobileMenu,
.navbar-mobile-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9998;
  max-height: calc(100dvh - 64px - env(safe-area-inset-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.navbar-mobile-profile {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #f7f9f4;
  overflow: hidden;
}

html.dark .navbar-mobile-profile {
  border-color: #35563c;
  background: #1b2b20;
}

.navbar-mobile-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid #cfdf71;
  display: block;
}

/* ===============================
   Mobile Menu Links
   =============================== */

.nav-mobile-link {
  width: 100%;
  min-height: 50px;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #e3eadf;
  background: #f7f9f4;
  color: #35563c;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(13, 21, 16, 0.04);
}

.nav-mobile-link:active {
  transform: scale(0.99);
}

html.dark .nav-mobile-link {
  border-color: #35563c;
  background: #1b2b20;
  color: #e3eadf;
}

.nav-mobile-icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 18px;
  text-align: center;
}

.nav-mobile-text {
  display: block;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-mobile-logout {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 14px;
  font-weight: 800;
  transition: 0.2s;
  border: none;
}

.navbar-mobile-logout:hover {
  background: #dc2626;
  color: #ffffff;
}

.navbar-mobile-logout:active {
  background: #b91c1c;
  color: #ffffff;
  transform: scale(0.99);
}

html.dark .navbar-mobile-logout {
  background: #7f1d1d;
  color: #fecaca;
}

html.dark .navbar-mobile-logout:hover {
  background: #dc2626;
  color: #ffffff;
}

/* ===============================
   Mobile Dropdown Visibility
   จอย่อ = มี dropdown / จอคอม = dropdown หาย
   =============================== */

@media (min-width: 1024px) {
  .navbar-mobile-actions {
    display: none !important;
  }

  #mobileMenu,
  .navbar-mobile-panel {
    display: none !important;
  }

  body.nav-open {
    overflow: auto;
    touch-action: auto;
  }
}

@media (max-width: 1023px) {
  .navbar-mobile-actions {
    display: flex !important;
  }
}


/* =========================================================
   03) NAVBAR - POLISH / CONSISTENCY / DROPDOWN FIXES
   ========================================================= */

/* ===============================
   Navbar Desktop + iPhone polish
   =============================== */
.navbar-inner {
  width: 100%;
}

.navbar-desktop-menu {
  min-width: 0;
}

.navbar-desktop-icon-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.96);
  color: #35563c;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.navbar-desktop-icon-btn:hover {
  background: #f3f8d9;
  border-color: #dce8a5;
  transform: translateY(-1px);
}

html.dark .navbar-desktop-icon-btn {
  border-color: #35563c;
  background: rgba(13, 21, 16, 0.96);
  color: #ffffff;
}

html.dark .navbar-desktop-icon-btn:hover {
  background: #1b2b20;
  border-color: #506156;
}

.navbar-profile-card {
  min-width: 0;
  max-width: 190px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 0.35rem 0.55rem;
  background: rgba(255, 255, 255, 0.96);
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.navbar-profile-card:hover {
  background: #f3f8d9;
  border-color: #dce8a5;
  transform: translateY(-1px);
}

html.dark .navbar-profile-card {
  border-color: #35563c;
  background: rgba(13, 21, 16, 0.96);
}

html.dark .navbar-profile-card:hover {
  background: #1b2b20;
  border-color: #506156;
}

.navbar-desktop-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 9999px;
  object-fit: cover;
  flex: 0 0 34px;
  border: 1px solid #cfdf71;
}

.navbar-profile-text {
  width: 120px;
  overflow: hidden;
}

.navbar-profile-name,
.navbar-profile-role {
  max-width: 120px;
}

.navbar-logout-btn {
  min-height: 40px;
  padding: 0.55rem 0.8rem;
  border-radius: 0.9rem;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 900;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}

.navbar-logout-btn:hover {
  background: #dc2626;
  color: #ffffff;
  transform: translateY(-1px);
}

html.dark .navbar-logout-btn {
  background: #7f1d1d;
  color: #fecaca;
}

html.dark .navbar-logout-btn:hover {
  background: #dc2626;
  color: #ffffff;
}

@media (min-width: 1024px) {
  .navbar-brand {
    flex: 0 1 auto;
  }

  .navbar-title {
    max-width: 220px;
  }

  .nav-desktop-link {
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
  }
}

@media (min-width: 1180px) {
  .nav-desktop-link {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .navbar-profile-card {
    max-width: 220px;
  }

  .navbar-profile-text,
  .navbar-profile-name,
  .navbar-profile-role {
    width: 145px;
    max-width: 145px;
  }
}

@media (max-width: 1023px) {
  .navbar-shell {
    background: rgba(255, 255, 255, 0.96) !important;
  }

  html.dark .navbar-shell {
    background: rgba(13, 21, 16, 0.96) !important;
  }

  .navbar-brand {
    flex: 1 1 auto;
  }

  .navbar-title {
    max-width: clamp(120px, 45vw, 240px);
  }

  #mobileMenu,
  .navbar-mobile-panel {
    border-radius: 0 0 1.5rem 1.5rem;
  }
}

@media (max-width: 430px) {
  .navbar-inner {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .navbar-title {
    max-width: 150px !important;
  }

  .navbar-brand-logo {
    width: 96px;
    height: 40px;
  }

  .navbar-mobile-actions {
    gap: 0.4rem;
  }

  .navbar-icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }

  #mobileMenu,
  .navbar-mobile-panel {
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }
}

/* ===============================
   Final navbar consistency fix
   ใช้ navbar/layout เดียวกันทุกหน้า โดยเฉพาะ iPhone
   =============================== */
#navbar-placeholder {
  width: 100%;
  flex: 0 0 auto;
}

.navbar-shell {
  max-width: 100vw;
  overflow-x: clip;
}

.navbar-inner {
  width: 100%;
  max-width: 72rem;
}

.navbar-row {
  width: 100%;
  min-width: 0;
}

.navbar-brand,
.navbar-mobile-actions,
.navbar-desktop-menu,
.navbar-profile-card,
.nav-mobile-link,
.navbar-mobile-profile {
  box-sizing: border-box;
}

.navbar-avatar-safe,
.navbar-desktop-avatar,
.navbar-mobile-avatar,
#navbarAvatar,
#navbarAvatarMobile,
#profileAvatar {
  background: #e8f0cf;
}

html.dark .navbar-avatar-safe,
html.dark .navbar-desktop-avatar,
html.dark .navbar-mobile-avatar,
html.dark #navbarAvatar,
html.dark #navbarAvatarMobile,
html.dark #profileAvatar {
  background: #1b2b20;
}

/* Profile photo: the avatar itself is the file picker. */
.profile-avatar-picker {
  position: relative;
  display: block;
  width: 6rem;
  height: 6rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid #dce8a5;
  border-radius: 9999px;
  background: #e8f0cf;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(41, 76, 53, 0.14);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.profile-avatar-picker:hover {
  transform: translateY(-1px);
  border-color: #c0d530;
  box-shadow: 0 10px 28px rgba(41, 76, 53, 0.24);
}

.profile-avatar-picker:focus-visible {
  outline: 3px solid rgba(168, 191, 32, 0.4);
  outline-offset: 4px;
}

.profile-avatar-picker:disabled {
  cursor: wait;
}

.profile-avatar-picker #profileAvatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

html.dark .profile-avatar-picker {
  border-color: #35563c;
  background: #1b2b20;
}

@media (min-width: 640px) {
  .profile-avatar-picker {
    width: 7rem;
    height: 7rem;
  }
}

@media (min-width: 1024px) {
  .navbar-row {
    justify-content: space-between;
    gap: 1rem;
  }

  .navbar-brand {
    flex: 0 0 auto;
    max-width: 230px;
  }

  .navbar-desktop-menu {
    margin-left: auto;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
  }

  .navbar-desktop-menu .nav-desktop-link {
    flex: 0 0 auto;
  }
}

@media (max-width: 1023px) {
  .navbar-shell {
    left: 0;
    right: 0;
    width: 100vw;
  }

  .navbar-inner {
    max-width: none;
    padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
  }

  .navbar-row {
    min-height: 44px;
    gap: 0.5rem;
  }

  .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100vw - 120px);
  }

  .navbar-title {
    max-width: min(52vw, 210px) !important;
  }

  .navbar-mobile-actions {
    margin-left: auto;
    flex: 0 0 auto;
  }

  #mobileMenu,
  .navbar-mobile-panel {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }

  .navbar-mobile-profile,
  .nav-mobile-link,
  .navbar-mobile-logout {
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  .navbar-inner {
    padding-left: max(0.625rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.625rem, env(safe-area-inset-right)) !important;
  }

  .navbar-title {
    max-width: 132px !important;
    font-size: 15px !important;
  }

  .navbar-mobile-actions {
    gap: 6px !important;
  }

  .navbar-icon-btn {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    min-height: 39px !important;
    flex-basis: 39px !important;
    border-radius: 13px !important;
  }
}


/* ===============================
   Deep Fix: Same navbar behavior on every page
   =============================== */
.navbar-shell {
  isolation: isolate;
}

.navbar-shell,
.navbar-shell * {
  box-sizing: border-box;
}

.navbar-inner {
  width: 100%;
  max-width: 72rem;
}

@media (max-width: 1023px) {
  .navbar-shell {
    min-height: calc(64px + env(safe-area-inset-top));
  }

  .navbar-row {
    min-height: 44px;
  }

  .navbar-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .navbar-mobile-actions {
    position: relative;
    z-index: 10001;
    margin-left: 0.5rem !important;
    flex: 0 0 auto !important;
  }

  #navToggleBtn,
  #themeToggleBtnMobile {
    position: relative;
    z-index: 10002;
  }

  #mobileMenu,
  .navbar-mobile-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
  }

  #mobileMenu.hidden,
  .navbar-mobile-panel.hidden {
    display: none !important;
  }

  #mobileMenu:not(.hidden),
  .navbar-mobile-panel:not(.hidden) {
    display: block !important;
  }

  .navbar-title {
    max-width: clamp(120px, 42vw, 210px) !important;
  }
}

@media (max-width: 390px) {
  .navbar-inner {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .navbar-title {
    max-width: 132px !important;
  }
}

@media (min-width: 1024px) {
  .navbar-row {
    gap: 1rem !important;
  }

  .navbar-brand {
    flex: 0 0 auto !important;
  }

  .navbar-desktop-menu {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
}

/* =========================================================
   CRITICAL FIX: Mobile dropdown must float ABOVE every page
   สาเหตุเดิม: navbar มี overflow/stacking context ทำให้ dropdown ไปอยู่ใต้ content บางหน้า
   ========================================================= */
.navbar-shell {
  z-index: 2147483000 !important;
  overflow: visible !important;
  isolation: auto !important;
}

#navbar-placeholder {
  position: relative !important;
  z-index: 2147483000 !important;
}

@media (max-width: 1023px) {
  .navbar-shell {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483000 !important;
    overflow: visible !important;
  }

  .navbar-inner,
  .navbar-row,
  .navbar-mobile-actions,
  #navToggleBtn {
    position: relative !important;
    z-index: 2147483002 !important;
  }

  #mobileMenu,
  .navbar-mobile-panel {
    position: fixed !important;
    top: calc(64px + env(safe-area-inset-top)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 2147483001 !important;
    display: block;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    transform: translateZ(0);
  }

  #mobileMenu.hidden,
  .navbar-mobile-panel.hidden {
    display: none !important;
  }

  #mobileMenu:not(.hidden),
  .navbar-mobile-panel:not(.hidden) {
    display: block !important;
    pointer-events: auto !important;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147482999;
    background: transparent;
  }
}


/* =========================================================
   NAVBAR FIRST FIX (safe rollback version)
   - ให้ทุกหน้าจัดวางเหมือนหน้า logs บน iPhone
   - dropdown อยู่เหนือ content
   - ไม่แก้ layout หน้าอื่น
   ========================================================= */
#navbar-placeholder {
  width: 100%;
  min-height: calc(64px + env(safe-area-inset-top));
  flex: 0 0 auto;
}

.navbar-shell {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

.navbar-inner,
.navbar-row,
.navbar-mobile-actions,
#navToggleBtn,
#themeToggleBtnMobile {
  position: relative;
  z-index: 100001 !important;
}

@media (max-width: 1023px) {
  #mobileMenu,
  .navbar-mobile-panel {
    position: fixed !important;
    top: calc(64px + env(safe-area-inset-top)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 100000 !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
  }

  #mobileMenu.hidden,
  .navbar-mobile-panel.hidden {
    display: none !important;
  }

  #mobileMenu:not(.hidden),
  .navbar-mobile-panel:not(.hidden) {
    display: block !important;
    pointer-events: auto !important;
  }

  .page-wrap,
  .app-container,
  body > .max-w-5xl,
  body > .max-w-4xl {
    margin-top: 1rem !important;
  }
}

@media (min-width: 1024px) {
  #mobileMenu,
  .navbar-mobile-panel,
  .navbar-mobile-actions {
    display: none !important;
  }
}


/* =========================================================
   04) NAVBAR - ROLE VISIBILITY FIX
   ========================================================= */

/* Role navbar fix: ซ่อน Settings เฉพาะ role ที่ไม่มีสิทธิ์ โดยไม่กระทบ hidden lg:flex ของ desktop */
.navbar-shell .nav-role-hidden,
#navSettingsLinkMobile.nav-role-hidden,
.navbar-mobile-panel .nav-mobile-link.nav-role-hidden {
  display: none !important;
}


/* =========================================================
   05) DASHBOARD / OFFICE / TOILET RESPONSIVE FIXES
   ========================================================= */

/* ===============================
   Dashboard / Office / Toilet iPhone Fix
   ไม่กระทบ Profile / Logs
   =============================== */

.dashboard-page-wrap,
.device-page-wrap {
  width: 100%;
  max-width: 64rem;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .dashboard-page-wrap,
  .device-page-wrap {
    margin-top: 1.25rem !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  .device-page-title {
    font-size: 1.65rem !important;
    line-height: 2rem !important;
    margin-bottom: 1.25rem !important;
    letter-spacing: -0.02em;
  }

  .dashboard-page-wrap > div:first-child {
    margin-bottom: 1.25rem !important;
  }

  .dashboard-page-wrap > div:first-child h1 {
    font-size: 1.75rem !important;
    line-height: 2.1rem !important;
  }

  .dashboard-page-wrap > div:first-child p {
    font-size: 0.875rem !important;
    line-height: 1.35rem !important;
  }

  .device-page-wrap .app-card {
    border-radius: 1.5rem !important;
    padding: 1rem !important;
    overflow: hidden;
  }

  .device-page-wrap .app-card > .flex.items-center {
    align-items: center !important;
    gap: 0.875rem !important;
  }

  .device-page-wrap .app-card svg {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }

  .device-page-wrap .app-card .p-4 {
    padding: 0.875rem !important;
  }

  .device-page-wrap .device-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .device-page-wrap .device-actions button {
    width: 100% !important;
    min-height: 48px;
    font-size: 0.95rem;
  }

  .dashboard-page-wrap section {
    border-radius: 1.5rem !important;
    overflow: hidden;
  }

  .dashboard-page-wrap .grid {
    min-width: 0;
  }
}

@media (max-width: 390px) {
  .device-page-title {
    font-size: 1.5rem !important;
    line-height: 1.9rem !important;
  }

  .dashboard-page-wrap > div:first-child h1 {
    font-size: 1.6rem !important;
    line-height: 2rem !important;
  }
}

/* ===============================
   General Mobile Responsive
   =============================== */

@media (max-width: 640px) {
  .page-wrap,
  .app-container,
  body > .max-w-5xl,
  body > .max-w-4xl {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    margin-top: 1rem !important;
  }

  h1 {
    font-size: 1.75rem !important;
    line-height: 2.1rem !important;
  }

  h2 {
    line-height: 1.75rem;
  }

  .page-wrap > div:first-child {
    margin-bottom: 1.25rem !important;
  }

  .rounded-\[2\.5rem\] {
    border-radius: 1.5rem !important;
  }

  .rounded-\[2rem\] {
    border-radius: 1.25rem !important;
  }

  .p-6 {
    padding: 1rem !important;
  }

  .sm\:p-10 {
    padding: 1rem !important;
  }

  .shadow-xl {
    box-shadow: var(--shadow) !important;
  }

  .grid,
  .flex {
    min-width: 0;
  }

  .navbar-shell .max-w-5xl,
  .navbar-shell .mx-auto {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  .navbar-shell h1 {
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
  }

  #mobileMenu a,
  #mobileMenu button {
    min-height: 48px;
  }

  .device-actions {
    flex-direction: column;
    gap: 0.75rem !important;
  }

  .device-actions button {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .page-wrap,
  .app-container,
  body > .max-w-5xl,
  body > .max-w-4xl {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* iPhone จอเล็ก เช่น SE / mini */
@media (max-width: 390px) {
  .navbar-shell .max-w-5xl,
  .navbar-shell .mx-auto {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .navbar-title,
  .navbar-shell h1 {
    max-width: 140px !important;
    font-size: 15px !important;
    line-height: 20px !important;
  }

  .navbar-mobile-actions {
    gap: 6px;
  }

  .navbar-icon-btn,
  #navToggleBtn,
  #themeToggleBtnMobile,
  #themeToggleBtnMobileTop {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }

  .navbar-mobile-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex-basis: 38px !important;
  }

  .nav-mobile-link {
    min-height: 48px;
    padding: 11px 12px;
    font-size: 14px;
  }
}

/* iOS Safari dynamic viewport fallback */
@supports (-webkit-touch-callout: none) {
  .min-h-screen {
    min-height: 100dvh;
  }
}


/* =========================================================
   06) SETTINGS PAGE FIXES
   ========================================================= */

/* ===============================
   Settings page input overflow fix
   แก้ input date/time ยืดออกนอกกรอบบน iPhone
   =============================== */

   .setting-input-date-time {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block;
  }
  
  /* iPhone / Safari fix */
  input[type="date"].setting-input-date-time,
  input[type="time"].setting-input-date-time {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  
  /* กัน div รอบ input ดันขนาดเกิน */
  #holidayDate,
  #onTime,
  #offTime {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  /* แก้เฉพาะจอมือถือ */
  @media (max-width: 640px) {
    #holidayDate,
    #onTime,
    #offTime {
      font-size: 16px !important;
      height: 44px;
    }
  
    #holidayDate::-webkit-date-and-time-value,
    #onTime::-webkit-date-and-time-value,
    #offTime::-webkit-date-and-time-value {
      text-align: left;
    }
  }


/* =========================================================
   07) LOGS PAGE FIXES
   ========================================================= */

/* ===============================
   Logs page date input overflow fix
   แก้ช่องตั้งแต่วันที่ / ถึงวันที่ ยืดติดขอบบน iPhone
   =============================== */

.log-input-date {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block;
}

/* iPhone / Safari fix */
input[type="date"].log-input-date {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
}

/* กัน input ดันออกนอกกรอบ */
#dateFrom,
#dateTo {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* แก้เฉพาะมือถือ */
@media (max-width: 640px) {
  #dateFrom,
  #dateTo {
    font-size: 16px !important;
    height: 44px;
  }

  #dateFrom::-webkit-date-and-time-value,
  #dateTo::-webkit-date-and-time-value {
    text-align: left;
  }

  /* เพิ่มระยะห่างไม่ให้ติดขอบ section */
  #dateFrom,
  #dateTo {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* =========================================================
   Logs theme polish v3
   ให้หน้า Logs ใช้โทนเดียวกับ Dashboard/Profile ทั้งโหมดสว่างและมืด
   Scoped เฉพาะ body.logs-page เพื่อไม่กระทบหน้าอื่น
   ========================================================= */
body.logs-page {
  background:
    radial-gradient(circle at top left, rgba(41, 76, 53, 0.08), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.08), transparent 32rem),
    var(--page-bg) !important;
  color: var(--text) !important;
}

body.logs-page .logs-card,
body.logs-page .app-card {
  background: var(--card-bg) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

body.logs-page #logsFilterPanel {
  background: var(--soft-bg) !important;
  border-color: var(--line) !important;
}

body.logs-page h1,
body.logs-page h2,
body.logs-page h3,
body.logs-page .logs-title-text {
  color: var(--text) !important;
}

body.logs-page p,
body.logs-page label,
body.logs-page .logs-muted-text {
  color: var(--muted);
}

/* ปุ่มเลือกช่วงเวลา ให้เหมือนปุ่ม/การ์ดของหน้าอื่น */
body.logs-page .preset-btn {
  min-height: 44px;
  border-radius: 0.875rem;
  border: 1px solid #cbd9c5 !important;
  background: #ffffff !important;
  color: #35563c !important;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(13, 21, 16, 0.04);
}

body.logs-page .preset-btn:hover,
body.logs-page .preset-btn.active {
  border-color: #c0d530 !important;
  background: #f3f8d9 !important;
  color: #294c35 !important;
}

html.dark body.logs-page .preset-btn {
  border-color: #35563c !important;
  background: #101a13 !important;
  color: #cbd9c5 !important;
}

html.dark body.logs-page .preset-btn:hover,
html.dark body.logs-page .preset-btn.active {
  border-color: #a8bf20 !important;
  background: #1b2b20 !important;
  color: #c0d530 !important;
}

/* Android date/select: ใช้สีเดียวกับหน้าอื่นและไม่บังคับ appearance none */
body.logs-page .log-input-date,
body.logs-page .logs-select,
body.logs-page #zoneFilter {
  min-height: 46px;
  border-radius: 0.875rem;
  border: 1px solid #cbd9c5 !important;
  background-color: #ffffff !important;
  color: #101a13 !important;
  caret-color: #294c35;
  box-shadow: 0 1px 2px rgba(13, 21, 16, 0.04);
  color-scheme: light;
}

html.dark body.logs-page .log-input-date,
html.dark body.logs-page .logs-select,
html.dark body.logs-page #zoneFilter {
  border-color: #35563c !important;
  background-color: #101a13 !important;
  color: #f7f9f4 !important;
  caret-color: #c0d530;
  color-scheme: dark;
}

body.logs-page input[type="date"].log-input-date {
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

body.logs-page #applyFilter {
  min-height: 46px;
  border-radius: 0.875rem;
  background: #294c35 !important;
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(41, 76, 53, 0.18);
}

body.logs-page #applyFilter:hover {
  background: #294c35 !important;
}

html.dark body.logs-page #applyFilter {
  background: #a8bf20 !important;
  box-shadow: 0 10px 24px rgba(168, 191, 32, 0.16);
}

/* ตาราง desktop ให้สีเหมือน card ใน dashboard */
body.logs-page #logListDesktop,
body.logs-page #logListDesktop > li,
body.logs-page .logs-table-wrap {
  background: var(--card-bg) !important;
  color: var(--text) !important;
}

body.logs-page #logListDesktop > li {
  border-color: var(--line) !important;
}

body.logs-page #logListDesktop > li:hover {
  background: #f7f9f4 !important;
}

html.dark body.logs-page #logListDesktop > li:hover {
  background: #1b2b20 !important;
}

/* Mobile log cards */
body.logs-page #logList > li {
  background: var(--card-bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 22px rgba(13, 21, 16, 0.06);
}

html.dark body.logs-page #logList > li {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

body.logs-page #logList .bg-slate-50,
body.logs-page .log-mobile-soft {
  background: var(--soft-bg) !important;
  border: 1px solid var(--line) !important;
}

body.logs-page #logList .text-slate-800,
body.logs-page #logList .text-slate-700 {
  color: var(--text) !important;
}

body.logs-page #logList .text-slate-500,
body.logs-page #logList .text-slate-400,
body.logs-page .log-muted {
  color: var(--muted) !important;
}

/* ปุ่มเปลี่ยนธีมบน navbar ในหน้า Logs ให้พื้นหลัง/ขอบตรงกับหน้าอื่นบน Android */
body.logs-page #themeToggleBtn,
body.logs-page #themeToggleBtnMobile,
body.logs-page #themeToggleBtnMobileTop {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #35563c !important;
}

html.dark body.logs-page #themeToggleBtn,
html.dark body.logs-page #themeToggleBtnMobile,
html.dark body.logs-page #themeToggleBtnMobileTop {
  background: #101a13 !important;
  border-color: #35563c !important;
  color: #f7f9f4 !important;
}

@media (max-width: 640px) {
  body.logs-page .page-wrap {
    margin-top: 1.25rem !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  body.logs-page .logs-card {
    padding: 1rem !important;
    border-radius: 1.75rem !important;
  }

  body.logs-page #logsFilterPanel {
    padding: 0.875rem !important;
    border-radius: 1.35rem !important;
  }

  body.logs-page .preset-btn {
    font-size: 0.78rem !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }

  body.logs-page .log-input-date,
  body.logs-page .logs-select,
  body.logs-page #zoneFilter {
    font-size: 16px !important;
    height: 46px;
  }

  body.logs-page #logList > li {
    border-radius: 1.5rem !important;
    padding: 0.95rem !important;
  }
}


/* =========================================================
   Logs Android final polish v4
   แก้เฉพาะสี loading logs + เส้นใต้ navbar บน Android
   ========================================================= */
body.logs-page .navbar-shell {
  border-bottom: 1px solid rgba(219, 234, 254, 0.95) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 22px rgba(13, 21, 16, 0.06) !important;
}

html.dark body.logs-page .navbar-shell {
  border-bottom-color: #1b2b20 !important;
  background: rgba(13, 21, 16, 0.96) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20) !important;
}

body.logs-page .navbar-shell::before,
body.logs-page .navbar-shell::after,
body.logs-page #navbar-placeholder::before,
body.logs-page #navbar-placeholder::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: transparent !important;
}

body.logs-page .navbar-mobile-panel {
  border-top-color: rgba(219, 234, 254, 0.95) !important;
}

html.dark body.logs-page .navbar-mobile-panel {
  border-top-color: #1b2b20 !important;
}

body.logs-page .logs-loading-row {
  width: 100%;
  min-height: 56px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(219, 234, 254, 0.95) !important;
  background: #f7f9f4 !important;
  color: #68766b !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}

html.dark body.logs-page .logs-loading-row {
  border-color: #1b2b20 !important;
  background: #101a13 !important;
  color: #9dae9f !important;
}

body.logs-page #logListDesktop .logs-loading-row {
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

html.dark body.logs-page #logListDesktop .logs-loading-row {
  background: #101a13 !important;
}

body.logs-page #logList .logs-loading-row {
  padding: 1rem !important;
  box-shadow: 0 8px 22px rgba(13, 21, 16, 0.05);
}

html.dark body.logs-page #logList .logs-loading-row {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

body.logs-page .logs-loading-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: #294c35;
  box-shadow: 0 0 0 4px rgba(41, 76, 53, 0.12);
  flex: 0 0 auto;
}

html.dark body.logs-page .logs-loading-dot {
  background: #c0d530;
  box-shadow: 0 0 0 4px rgba(192, 213, 48, 0.16);
}


/* =========================================================
   Logs theme match v5
   แก้ header ตาราง Logs ไม่ให้โหมดสว่างติดสีมืด + ปรับ shadow navbar ให้เหมือนหน้าอื่น
   ========================================================= */
body.logs-page .navbar-shell {
  border-bottom: 1px solid rgba(219, 234, 254, 0.92) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 30px rgba(13, 21, 16, 0.08) !important;
}

html.dark body.logs-page .navbar-shell {
  border-bottom-color: rgba(27, 43, 32, 0.95) !important;
  background: rgba(13, 21, 16, 0.94) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28) !important;
}

body.logs-page .logs-table-header {
  background: #f3f8d9 !important;
  color: #294c35 !important;
  border-bottom: 1px solid #e8f0cf !important;
}

body.logs-page .logs-table-header span {
  color: inherit !important;
}

html.dark body.logs-page .logs-table-header {
  background: rgba(27, 43, 32, 0.92) !important;
  color: #cbd9c5 !important;
  border-bottom-color: #35563c !important;
}

/* กัน class เดิมของ Tailwind ในส่วนหัวตารางดึงสี slate/dark กลับมาใน Android */
body.logs-page .logs-table-header.bg-slate-50,
html.dark body.logs-page .logs-table-header.dark\:bg-slate-800\/80 {
  background: #f3f8d9 !important;
}

html.dark body.logs-page .logs-table-header.bg-slate-50,
html.dark body.logs-page .logs-table-header.dark\:bg-slate-800\/80 {
  background: rgba(27, 43, 32, 0.92) !important;
}


/* =========================================================
   Logs theme match v6
   แก้ border ตาราง Logs ให้ไม่ติดสีโหมดมืดในโหมดสว่าง
   ========================================================= */
body.logs-page .logs-table-wrap {
  border: 1px solid #dce8a5 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(41, 76, 53, 0.07) !important;
}

html.dark body.logs-page .logs-table-wrap {
  border-color: #35563c !important;
  background: #101a13 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

body.logs-page .logs-table-body,
body.logs-page #logListDesktop {
  border-color: #e8f0cf !important;
}

body.logs-page .logs-table-body > li,
body.logs-page #logListDesktop > li {
  border-color: #e8f0cf !important;
  background-color: #ffffff !important;
}

body.logs-page .logs-table-body > li + li,
body.logs-page #logListDesktop > li + li {
  border-top: 1px solid #e8f0cf !important;
}

html.dark body.logs-page .logs-table-body,
html.dark body.logs-page #logListDesktop {
  border-color: #35563c !important;
}

html.dark body.logs-page .logs-table-body > li,
html.dark body.logs-page #logListDesktop > li {
  border-color: #35563c !important;
  background-color: #101a13 !important;
}

html.dark body.logs-page .logs-table-body > li + li,
html.dark body.logs-page #logListDesktop > li + li {
  border-top-color: #35563c !important;
}

body.logs-page #logListDesktop > li:hover {
  background-color: #f3f8d9 !important;
}

html.dark body.logs-page #logListDesktop > li:hover {
  background-color: #1b2b20 !important;
}

body.logs-page .logs-table-header {
  border-bottom: 1px solid #dce8a5 !important;
}

html.dark body.logs-page .logs-table-header {
  border-bottom-color: #35563c !important;
}

body.logs-page .logs-table-wrap .border-slate-200,
body.logs-page .logs-table-wrap .divide-slate-100,
body.logs-page .logs-table-wrap [class*="border-slate"],
body.logs-page .logs-table-wrap [class*="divide-slate"] {
  border-color: #e8f0cf !important;
}

html.dark body.logs-page .logs-table-wrap .border-slate-200,
html.dark body.logs-page .logs-table-wrap .divide-slate-100,
html.dark body.logs-page .logs-table-wrap [class*="border-slate"],
html.dark body.logs-page .logs-table-wrap [class*="divide-slate"] {
  border-color: #35563c !important;
}

body.logs-page .navbar-shell {
  box-shadow: 0 12px 32px rgba(41, 76, 53, 0.08), 0 1px 0 rgba(219, 234, 254, 0.9) !important;
}

html.dark body.logs-page .navbar-shell {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(27, 43, 32, 0.95) !important;
}


/* =========================================================
   Logs theme match v7
   แก้ border ให้เป็นโทนสว่างจริง + shadow navbar โหมดสว่างให้เหมือนหน้าอื่น
   ========================================================= */
body.logs-page .navbar-shell {
  border-bottom: 1px solid rgba(219, 234, 254, 0.88) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 45px rgba(13, 21, 16, 0.08) !important;
}

html.dark body.logs-page .navbar-shell {
  border-bottom-color: rgba(27, 43, 32, 0.95) !important;
  background: rgba(13, 21, 16, 0.94) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}

body.logs-page .logs-table-wrap,
body.logs-page div.logs-table-wrap.hidden.lg\:block.overflow-hidden.rounded-3xl.border {
  border-color: #e8f0cf !important;
  background-color: #ffffff !important;
  box-shadow: 0 18px 45px rgba(13, 21, 16, 0.08) !important;
}

html.dark body.logs-page .logs-table-wrap,
html.dark body.logs-page div.logs-table-wrap.hidden.lg\:block.overflow-hidden.rounded-3xl.border {
  border-color: #1b2b20 !important;
  background-color: #101a13 !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}

body.logs-page .logs-table-header {
  background: #f3f8d9 !important;
  color: #294c35 !important;
  border-bottom: 1px solid #e8f0cf !important;
}

html.dark body.logs-page .logs-table-header {
  background: #1b2b20 !important;
  color: #cbd9c5 !important;
  border-bottom-color: #35563c !important;
}

body.logs-page .logs-table-body,
body.logs-page #logListDesktop,
body.logs-page #logListDesktop.divide-y,
body.logs-page #logListDesktop.divide-slate-100,
body.logs-page #logListDesktop.divide-blue-100 {
  border-color: #e8f0cf !important;
  --tw-divide-opacity: 1 !important;
  --tw-divide-color: #e8f0cf !important;
}

html.dark body.logs-page .logs-table-body,
html.dark body.logs-page #logListDesktop,
html.dark body.logs-page #logListDesktop.divide-y,
html.dark body.logs-page #logListDesktop.divide-slate-100,
html.dark body.logs-page #logListDesktop.divide-blue-100 {
  border-color: #1b2b20 !important;
  --tw-divide-color: #1b2b20 !important;
}

body.logs-page #logListDesktop > li,
body.logs-page .logs-table-body > li {
  border-color: #e8f0cf !important;
  background-color: #ffffff !important;
}

html.dark body.logs-page #logListDesktop > li,
html.dark body.logs-page .logs-table-body > li {
  border-color: #1b2b20 !important;
  background-color: #101a13 !important;
}

body.logs-page #logListDesktop > li:hover,
body.logs-page .logs-table-body > li:hover {
  background-color: #f3f8d9 !important;
}

html.dark body.logs-page #logListDesktop > li:hover,
html.dark body.logs-page .logs-table-body > li:hover {
  background-color: #1b2b20 !important;
}

body.logs-page #logList > li {
  border-color: #e8f0cf !important;
}

html.dark body.logs-page #logList > li {
  border-color: #1b2b20 !important;
}

body.logs-page #logList .bg-slate-50,
body.logs-page #logList .bg-blue-50\/70 {
  background-color: #f3f8d9 !important;
}

html.dark body.logs-page #logList .dark\:bg-slate-800 {
  background-color: #1b2b20 !important;
}

/* =========================================================
   Logs theme match v8
   ให้ shadow ใต้ navbar ของหน้า Logs เหมือนหน้าอื่นในโหมดสว่าง
   สาเหตุ: v5-v7 เคย override .navbar-shell เป็นเงาใหญ่แบบ card
   ========================================================= */
body.logs-page .navbar-shell {
  border-bottom: 1px solid #e5e7eb !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html.dark body.logs-page .navbar-shell {
  border-bottom-color: #1b2b20 !important;
  background: rgba(13, 21, 16, 0.95) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

/* กันเส้น pseudo ใต้ navbar โผล่ซ้ำบน Android */
body.logs-page .navbar-shell::before,
body.logs-page .navbar-shell::after,
body.logs-page #navbar-placeholder::before,
body.logs-page #navbar-placeholder::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ===============================
   Logs stable revert fix
   - ใช้ select เดิมเพื่อไม่ให้หน้า logs ค้าง
   - แก้สี input/select ตาม html.dark เท่านั้น
   =============================== */
body.logs-page .logs-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #ffffff !important;
  color: #101a13 !important;
  border-color: #cbd9c5 !important;
  color-scheme: light !important;
  background-image: none !important;
}

body.logs-page .logs-select option {
  background-color: #ffffff !important;
  color: #101a13 !important;
}

html.dark body.logs-page .logs-select {
  background-color: #1b2b20 !important;
  color: #ffffff !important;
  border-color: #35563c !important;
  color-scheme: dark !important;
  background-image: none !important;
}

html.dark body.logs-page .logs-select option {
  background-color: #1b2b20 !important;
  color: #ffffff !important;
}

/* กัน custom dropdown เก่าจากรอบก่อนโผล่มาทับ */
body.logs-page .logs-custom-dropdown,
body.logs-page .logs-custom-dropdown-btn,
body.logs-page .logs-custom-dropdown-menu {
  display: none !important;
}


/* =========================================================
   Logs exact fix: dropdown light mode + date filter behavior
   แก้เฉพาะหน้า Logs เท่านั้น
   ========================================================= */
body.logs-page #zoneFilter,
html:not(.dark) body.logs-page #zoneFilter,
html:not(.dark) body.logs-page #zoneFilter option {
  background-color: #ffffff !important;
  color: #101a13 !important;
  border-color: #cbd9c5 !important;
  color-scheme: light !important;
}

body.logs-page #zoneFilter option {
  background-color: #ffffff !important;
  color: #101a13 !important;
}

body.logs-page #zoneFilter:focus {
  background-color: #ffffff !important;
  color: #101a13 !important;
}

@media (prefers-color-scheme: dark) {
  html:not(.dark) body.logs-page #zoneFilter,
  html:not(.dark) body.logs-page #zoneFilter option {
    background-color: #ffffff !important;
    color: #101a13 !important;
    color-scheme: light !important;
  }
}

html.dark body.logs-page #zoneFilter,
html.dark body.logs-page #zoneFilter option {
  background-color: #101a13 !important;
  color: #f7f9f4 !important;
  border-color: #35563c !important;
  color-scheme: dark !important;
}


/* =========================================================
   Logs dropdown exact final fix
   แก้เฉพาะ dropdown ระบบหน้า Logs: ไม่พึ่ง native select popup
   ========================================================= */
body.logs-page #zoneFilter.hidden {
  display: none !important;
}

body.logs-page .logs-zone-dropdown {
  overflow: visible !important;
}

body.logs-page .logs-zone-button,
html:not(.dark) body.logs-page .logs-zone-button {
  background: #ffffff !important;
  color: #101a13 !important;
  border: 1px solid #cbd9c5 !important;
  box-shadow: 0 1px 2px rgba(13, 21, 16, 0.04) !important;
}

body.logs-page .logs-zone-menu,
html:not(.dark) body.logs-page .logs-zone-menu {
  background: #ffffff !important;
  color: #101a13 !important;
  border: 1px solid #e8f0cf !important;
  box-shadow: 0 18px 40px rgba(13, 21, 16, 0.12) !important;
}

body.logs-page .logs-zone-option,
html:not(.dark) body.logs-page .logs-zone-option {
  width: 100% !important;
  min-height: 44px !important;
  display: block !important;
  padding: 0.7rem 0.9rem !important;
  text-align: left !important;
  background: #ffffff !important;
  color: #101a13 !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-bottom: 1px solid #f3f8d9 !important;
}

body.logs-page .logs-zone-option:hover,
html:not(.dark) body.logs-page .logs-zone-option:hover {
  background: #f3f8d9 !important;
  color: #294c35 !important;
}

html.dark body.logs-page .logs-zone-button {
  background: #1b2b20 !important;
  color: #f7f9f4 !important;
  border-color: #35563c !important;
}

html.dark body.logs-page .logs-zone-menu {
  background: #101a13 !important;
  color: #f7f9f4 !important;
  border-color: #35563c !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36) !important;
}

html.dark body.logs-page .logs-zone-option {
  background: #101a13 !important;
  color: #f7f9f4 !important;
  border-bottom-color: #1b2b20 !important;
}

html.dark body.logs-page .logs-zone-option:hover {
  background: #1b2b20 !important;
  color: #c0d530 !important;
}

/* =========================================================
   Logs navbar mobile menu theme fix
   แก้เฉพาะ mobileMenu / navbar-mobile-panel บนหน้า Logs
   สาเหตุ: หน้า Logs มี override ของ navbar หลายชุดและไม่ได้บังคับ background
   ของ #mobileMenu ใน light mode ไว้ท้ายไฟล์ ทำให้บางเครื่องยังเห็นพื้นหลังมืด
   ========================================================= */
html:not(.dark) body.logs-page #mobileMenu,
html:not(.dark) body.logs-page .navbar-mobile-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #101a13 !important;
  border-top-color: #e5e7eb !important;
  box-shadow: 0 18px 40px rgba(13, 21, 16, 0.12) !important;
  color-scheme: light !important;
}

html:not(.dark) body.logs-page .navbar-mobile-profile {
  background: #f7f9f4 !important;
  background-color: #f7f9f4 !important;
  border-color: #e5e7eb !important;
  color: #101a13 !important;
}

html:not(.dark) body.logs-page .nav-mobile-link {
  background: #f7f9f4 !important;
  background-color: #f7f9f4 !important;
  border-color: #e3eadf !important;
  color: #35563c !important;
}

html:not(.dark) body.logs-page .nav-mobile-link:hover,
html:not(.dark) body.logs-page .nav-mobile-link:active {
  background: #f3f8d9 !important;
  background-color: #f3f8d9 !important;
  color: #294c35 !important;
}

html:not(.dark) body.logs-page #navbarUserNameMobile {
  color: #101a13 !important;
}

html:not(.dark) body.logs-page #navbarUserRoleMobile {
  color: #68766b !important;
}

html:not(.dark) body.logs-page .navbar-mobile-logout {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
}

html:not(.dark) body.logs-page .navbar-mobile-logout:hover,
html:not(.dark) body.logs-page .navbar-mobile-logout:active {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

html.dark body.logs-page #mobileMenu,
html.dark body.logs-page .navbar-mobile-panel {
  background: #101a13 !important;
  background-color: #101a13 !important;
  color: #f7f9f4 !important;
  border-top-color: #1b2b20 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36) !important;
  color-scheme: dark !important;
}

.logs-page .logs-date-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 640px) {
  .logs-page .logs-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.logs-page .logs-date-field {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.logs-page input[type="date"].log-input-date {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 46px;
  line-height: 46px;
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 0.75rem !important;
  padding-right: 2.5rem !important;
  border-radius: 0.75rem;
  font-size: 16px !important;
}

.logs-page input[type="date"].log-input-date::-webkit-date-and-time-value {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

.logs-page input[type="date"].log-input-date::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
}

@supports (-webkit-touch-callout: none) {
  .logs-page input[type="date"].log-input-date {
    width: -webkit-fill-available !important;
    max-width: -webkit-fill-available !important;
  }
}


/* Logs only: จัดหัวตารางและคอลัมน์ให้อยู่กลาง */
.logs-page .logs-table-header,
.logs-page #logListDesktop > li {
  align-items: center;
}

.logs-page .logs-table-header span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logs-page .logs-col-center {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logs-page .logs-col-text {
  min-width: 0;
  width: 100%;
  text-align: center;
}


/* Logs only: iPhone date input final fix
   ใช้กรอบครอบ input แทนการให้ native date input วาดกรอบเอง */
.logs-page .logs-date-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 46px;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #e8f0cf;
  border-radius: 0.75rem;
  background: #ffffff;
  box-sizing: border-box;
  clip-path: inset(0 round 0.75rem);
}

html.dark .logs-page .logs-date-shell {
  border-color: #35563c;
  background: #1b2b20;
}

.logs-page .logs-date-shell:focus-within {
  box-shadow: 0 0 0 2px #c0d530;
}

.logs-page .logs-date-shell input[type="date"].log-input-date {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  inline-size: 100% !important;
  height: 44px !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 0.7rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #35563c !important;
  font-size: 16px !important;
  text-align: center !important;
  text-align-last: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: translateZ(0);
}

html.dark .logs-page .logs-date-shell input[type="date"].log-input-date {
  color: #ffffff !important;
}

.logs-page .logs-date-shell input[type="date"].log-input-date::-webkit-date-and-time-value {
  text-align: center !important;
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}

.logs-page .logs-date-shell input[type="date"].log-input-date::-webkit-calendar-picker-indicator {
  margin: 0 !important;
  padding: 0 !important;
  width: 1.1rem !important;
  height: 1.1rem !important;
  flex: 0 0 1.1rem !important;
}

@media (max-width: 420px) {
  .logs-page #logsFilterPanel {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .logs-page .logs-date-shell input[type="date"].log-input-date {
    padding-left: 0.55rem !important;
    padding-right: 0.45rem !important;
    font-size: 15px !important;
  }
}

/* Logs only: mobile card layout ตามแบบ อุปกรณ์/ประเภท + สถานะ/ผลลัพธ์ */
.logs-page .log-mobile-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.logs-page .log-mobile-info-box {
  min-width: 0;
  border-radius: 1rem;
  background: rgba(239, 246, 255, 0.72);
  padding: 0.75rem;
  text-align: center;
  overflow: hidden;
}

html.dark .logs-page .log-mobile-info-box {
  background: #1b2b20;
}

.logs-page .log-mobile-info-label {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #a8bf20;
}

html.dark .logs-page .log-mobile-info-label {
  color: #9dae9f;
}

.logs-page .log-mobile-info-value {
  margin-top: 0.35rem;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.logs-page .log-mobile-info-value span {
  max-width: 100%;
}

/* Logs date input: iPhone vertical center fix */
@media (max-width: 640px) {
  .logs-page .logs-date-shell {
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .logs-page .logs-date-shell input[type="date"].log-input-date,
  .logs-page #dateFrom,
  .logs-page #dateTo {
    height: 46px !important;
    min-height: 46px !important;
    line-height: normal !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;

    text-align: center !important;
    text-align-last: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .logs-page .logs-date-shell input[type="date"].log-input-date::-webkit-date-and-time-value,
  .logs-page #dateFrom::-webkit-date-and-time-value,
  .logs-page #dateTo::-webkit-date-and-time-value {
    width: 100% !important;
    text-align: center !important;
    transform: translateY(8px) !important;
  }
}


/* =========================================================
   08) LOGIN / REGISTER PAGE FIXES
   ========================================================= */

/* ===============================
   Login Dark Mode Fix
   =============================== */
.login-page {
  background:
    radial-gradient(circle at top left, rgba(41, 76, 53, 0.18), transparent 28rem),
    radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.16), transparent 30rem),
    var(--page-bg) !important;
}

.login-card {
  box-shadow: 0 24px 70px rgba(13, 21, 16, 0.18);
}

html.dark .login-card {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.login-theme-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* ===============================
   Login Form Theme Fix
   ให้กรอบ Login / Form เปลี่ยนสีตามโหมดมืด-สว่าง
   =============================== */

   .login-card-theme {
    background-color: #ffffff !important;
    color: #101a13 !important;
    border-color: #f3f8d9 !important; /* border-blue-50 */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  
  html.dark .login-card-theme {
    background-color: #101a13 !important;
    color: #ffffff !important;
    border-color: #1b2b20 !important; /* dark:border-slate-800 */
  }

.login-form-panel {
  background-color: #f7f9f4 !important;
  color: #101a13 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark .login-form-panel {
  background-color: #08140d !important;
  color: #ffffff !important;
}

.login-form-panel input {
  background-color: #ffffff !important;
  color: #101a13 !important;
  border-color: #cbd9c5 !important;
}

html.dark .login-form-panel input {
  background-color: #1b2b20 !important;
  color: #ffffff !important;
  border-color: #35563c !important;
}

.login-form-panel input::placeholder {
  color: #9dae9f !important;
}

html.dark .login-form-panel input::placeholder {
  color: #68766b !important;
}

/* ===============================
   Login Text Visible Fix
   แก้โหมดสว่างกรอบขาวแต่ตัวอักษรขาว
   =============================== */

/* โหมดสว่าง: ข้อความในกรอบ Login ต้องเป็นสีเข้ม */
html:not(.dark) .login-card-theme,
html:not(.dark) .login-form-panel,
html:not(.dark) .login-form-panel h1,
html:not(.dark) .login-form-panel h2,
html:not(.dark) .login-form-panel h3,
html:not(.dark) .login-form-panel label,
html:not(.dark) .login-form-panel span,
html:not(.dark) .login-form-panel p {
  color: #101a13 !important;
}

/* โหมดสว่าง: ข้อความอธิบายให้เป็นเทาเข้ม */
html:not(.dark) .login-form-panel .text-slate-400,
html:not(.dark) .login-form-panel .text-slate-500,
html:not(.dark) .login-form-panel .text-gray-500,
html:not(.dark) .login-form-panel .dark\:text-slate-400,
html:not(.dark) .login-form-panel .dark\:text-slate-500 {
  color: #68766b !important;
}

/* โหมดสว่าง: input ต้องพื้นขาว ตัวอักษรดำ */
html:not(.dark) .login-form-panel input {
  background-color: #ffffff !important;
  color: #101a13 !important;
  border-color: #cbd9c5 !important;
}

html:not(.dark) .login-form-panel input::placeholder {
  color: #9dae9f !important;
}

/* โหมดมืด: ข้อความในกรอบ Login เป็นสีขาว */
html.dark .login-card-theme,
html.dark .login-form-panel,
html.dark .login-form-panel h1,
html.dark .login-form-panel h2,
html.dark .login-form-panel h3,
html.dark .login-form-panel label,
html.dark .login-form-panel span {
  color: #f7f9f4 !important;
}

/* โหมดมืด: ข้อความอธิบายเป็นเทาอ่อน */
html.dark .login-form-panel p {
  color: #9dae9f !important;
}

/* โหมดมืด: input เป็นพื้นเข้ม ตัวอักษรขาว */
html.dark .login-form-panel input {
  background-color: #1b2b20 !important;
  color: #ffffff !important;
  border-color: #35563c !important;
}

html.dark .login-form-panel input::placeholder {
  color: #68766b !important;
}

/* ปุ่มลิงก์ เช่น สมัครสมาชิก / กลับไป Login */
html:not(.dark) .login-form-panel button[type="button"] {
  color: #294c35 !important;
}

html.dark .login-form-panel button[type="button"] {
  color: #c0d530 !important;
}

/* ปุ่ม Login หลักต้องขาวเสมอ */
.login-form-panel button[type="submit"],
.login-form-panel #loginButton,
.login-form-panel #registerButton {
  color: #ffffff !important;
}

/* error ให้เป็นสีแดง ไม่โดนทับ */
.login-form-panel #error {
  color: #dc2626 !important;
}

html.dark .login-form-panel #error {
  color: #f87171 !important;
}

/* ===============================
   Register Form Theme Fix
   ให้กรอบสมัครสมาชิกตามโหมดสว่าง/มืด
   =============================== */

   .login-register-panel {
    background-color: rgba(255, 255, 255, 0.7) !important; /* bg-blue-50/70 */
    border-color: #c7c7c8 !important; /* border-blue-50 */
    color: #101a13 !important;
  }
  
  html.dark .login-register-panel {
    background-color: rgba(27, 43, 32, 0.7) !important; /* dark:bg-slate-800/70 */
    border-color: #35563c !important; /* dark:border-slate-700 */
    color: #f7f9f4 !important;
  }
  
  /* ตัวอักษรใน Register */
  html:not(.dark) .login-register-panel h1,
  html:not(.dark) .login-register-panel h2,
  html:not(.dark) .login-register-panel h3,
  html:not(.dark) .login-register-panel label,
  html:not(.dark) .login-register-panel span,
  html:not(.dark) .login-register-panel p {
    color: #101a13 !important;
  }
  
  html.dark .login-register-panel h1,
  html.dark .login-register-panel h2,
  html.dark .login-register-panel h3,
  html.dark .login-register-panel label,
  html.dark .login-register-panel span {
    color: #f7f9f4 !important;
  }
  
  html.dark .login-register-panel p {
    color: #9dae9f !important;
  }
  
  /* input ใน Register */
  html:not(.dark) .login-register-panel input {
    background-color: #ffffff !important;
    color: #101a13 !important;
    border-color: #cbd9c5 !important;
  }
  
  html.dark .login-register-panel input {
    background-color: #101a13 !important;
    color: #ffffff !important;
    border-color: #35563c !important;
  }
  
  .login-register-panel input::placeholder {
    color: #9dae9f !important;
  }
  
  html.dark .login-register-panel input::placeholder {
    color: #68766b !important;
  }
  
  /* ปุ่มกลับไป Login ให้เห็นชัด */
  html:not(.dark) .login-register-panel button[type="button"] {
    color: #294c35 !important;
  }
  
  html.dark .login-register-panel button[type="button"] {
    color: #c0d530 !important;
  }
  
  /* ปุ่มสมัครสมาชิก ตัวอักษรขาวเสมอ */
  .login-register-panel #registerButton {
    color: #ffffff !important;
  }

  /* ===============================
   Login Error / Register Message Color Fix
   โหมดสว่างให้ error แดงชัดขึ้น
   =============================== */

/* Error ตอน Login */
html:not(.dark) .login-form-panel #error {
  background-color: #fee2e2 !important; /* red-100 */
  border-color: #ef4444 !important;     /* red-500 */
  color: #b91c1c !important;            /* red-700 */
}

html.dark .login-form-panel #error {
  background-color: rgba(127, 29, 29, 0.35) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fca5a5 !important;
}

/* Register message: success/error */
.login-form-panel .register-success {
  background-color: #dcfce7 !important;
  border: 1px solid #22c55e !important;
  color: #166534 !important;
}

.login-form-panel .register-error {
  background-color: #fee2e2 !important;
  border: 1px solid #ef4444 !important;
  color: #991b1b !important;
}

html.dark .login-form-panel .register-success {
  background-color: rgba(20, 83, 45, 0.45) !important;
  border-color: #4ade80 !important;
  color: #bbf7d0 !important;
}

html.dark .login-form-panel .register-error {
  background-color: rgba(127, 29, 29, 0.45) !important;
  border-color: #f87171 !important;
  color: #fecaca !important;
}


/* =========================================================
   09) SMART OFFICE PAGE FIXES
   ========================================================= */

/* =========================================================
   Smart Office final light-mode visual fix
   แก้เฉพาะหน้า Smart Office โหมดสว่าง ให้ใกล้ Smart Toilet
   ========================================================= */
html:not(.dark) body.smartoffice-page {
  background:
    radial-gradient(circle at top left, rgba(41, 76, 53, 0.08), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.08), transparent 32rem),
    #f3f7ef !important;
}

/* หัวข้อหน้า */
html:not(.dark) body.smartoffice-page .device-page-title {
  color: #132019 !important;
}

/* การ์ด/กรอบหลักให้เป็นขาวเหมือน Smart Toilet */
html:not(.dark) body.smartoffice-page .app-card,
html:not(.dark) body.smartoffice-page #sensorTestSection {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 18px 45px rgba(13, 21, 16, 0.08) !important;
}

/* การ์ด sensor ด้านบน ใช้ขอบฟ้าอ่อนแบบ Smart Toilet */
html:not(.dark) body.smartoffice-page .device-page-wrap > .grid:first-of-type .app-card {
  border-color: #e8f0cf !important;
}

/* กรอบย่อยใน AC remote ให้เป็นขาว ไม่เทาจาง */
html:not(.dark) body.smartoffice-page section.app-card > .grid > div,
html:not(.dark) body.smartoffice-page section.app-card .bg-gray-50,
html:not(.dark) body.smartoffice-page section.app-card .bg-blue-50 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 8px 20px rgba(13, 21, 16, 0.04) !important;
}

/* Navbar color is now controlled by navbar.html/global navbar theme. */

/* Current temperature และเลขอุณหภูมิให้เป็นดำในโหมดสว่าง */
html:not(.dark) body.smartoffice-page #officeTemperature,
html:not(.dark) body.smartoffice-page #airRemoteTemp,
html:not(.dark) body.smartoffice-page #airRemoteTempBig {
  color: #132019 !important;
}

/* หัวข้อที่ผู้ใช้ระบุ ให้เป็นดำเฉพาะโหมดสว่าง */
html:not(.dark) body.smartoffice-page .app-card h2,
html:not(.dark) body.smartoffice-page section h2,
html:not(.dark) body.smartoffice-page section h3,
html:not(.dark) body.smartoffice-page #sensorTestSection h2 {
  color: #132019 !important;
}

html:not(.dark) body.smartoffice-page section.app-card .flex.items-center.justify-center.gap-3 button {
  border: 1px solid #e8f0cf !important;
  box-shadow: 0 6px 16px rgba(13, 21, 16, 0.06) !important;
}

/* ปุ่ม Mode/FAN/Swing ให้มีกรอบขาวแต่ไม่ไปเปลี่ยนปุ่ม ON/OFF */
html:not(.dark) body.smartoffice-page button.air-mode-btn,
html:not(.dark) body.smartoffice-page button[onclick="toggleAirFan()"],
html:not(.dark) body.smartoffice-page button[onclick="toggleAirSwing()"] {
  /* ไม่บังคับ background/color เพื่อให้เปลี่ยน bg และสีตัวอักษรจากหน้า HTML ได้ */
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 20px rgba(13, 21, 16, 0.05) !important;
}

/* Smart Office navbar/dropdown overrides removed: use navbar.html + global navbar CSS. */

/* =========================================================
   Smart Office navbar/dropdown theme fix
   แก้เฉพาะหน้า smartoffice + theme.css เท่านั้น ไม่แตะ navbar.html
   ทำให้ navbar/dropdown โหมดสว่างใช้สีเดียวกับหน้าอื่น
   ========================================================= */
html:not(.dark) body.smartoffice-page .navbar-shell {
  background: rgba(255, 255, 255, 0.96) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: #e5e7eb !important;
  color: #101a13 !important;
  box-shadow: 0 8px 22px rgba(13, 21, 16, 0.06) !important;
  color-scheme: light !important;
}

html:not(.dark) body.smartoffice-page .navbar-title,
html:not(.dark) body.smartoffice-page #navbarUserName,
html:not(.dark) body.smartoffice-page #navbarUserNameMobile {
  color: #101a13 !important;
}

html:not(.dark) body.smartoffice-page .navbar-shell p,
html:not(.dark) body.smartoffice-page #navbarUserRole,
html:not(.dark) body.smartoffice-page #navbarUserRoleMobile {
  color: #68766b !important;
}

html:not(.dark) body.smartoffice-page .nav-desktop-link {
  color: #506156 !important;
}

html:not(.dark) body.smartoffice-page .nav-desktop-link:hover {
  background: #f3f8d9 !important;
  color: #294c35 !important;
}

html:not(.dark) body.smartoffice-page .navbar-desktop-icon-btn,
html:not(.dark) body.smartoffice-page .navbar-icon-btn,
html:not(.dark) body.smartoffice-page #themeToggleBtn,
html:not(.dark) body.smartoffice-page #themeToggleBtnMobile,
html:not(.dark) body.smartoffice-page #languageToggleBtn,
html:not(.dark) body.smartoffice-page #languageToggleBtnMobile,
html:not(.dark) body.smartoffice-page #navToggleBtn {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #35563c !important;
}

html:not(.dark) body.smartoffice-page .navbar-profile-card {
  background: rgba(255, 255, 255, 0.96) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #e5e7eb !important;
  color: #101a13 !important;
}

html:not(.dark) body.smartoffice-page .navbar-profile-card:hover,
html:not(.dark) body.smartoffice-page .navbar-desktop-icon-btn:hover,
html:not(.dark) body.smartoffice-page .navbar-icon-btn:hover {
  background: #f3f8d9 !important;
  background-color: #f3f8d9 !important;
  border-color: #dce8a5 !important;
}

html:not(.dark) body.smartoffice-page #mobileMenu,
html:not(.dark) body.smartoffice-page .navbar-mobile-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #101a13 !important;
  border-top-color: #e5e7eb !important;
  box-shadow: 0 18px 40px rgba(13, 21, 16, 0.12) !important;
  color-scheme: light !important;
}

html:not(.dark) body.smartoffice-page .navbar-mobile-profile {
  background: #f7f9f4 !important;
  background-color: #f7f9f4 !important;
  border-color: #e5e7eb !important;
  color: #101a13 !important;
}

html:not(.dark) body.smartoffice-page .nav-mobile-link {
  background: #f7f9f4 !important;
  background-color: #f7f9f4 !important;
  border-color: #e3eadf !important;
  color: #35563c !important;
}

html:not(.dark) body.smartoffice-page .nav-mobile-link:hover,
html:not(.dark) body.smartoffice-page .nav-mobile-link:active {
  background: #f3f8d9 !important;
  background-color: #f3f8d9 !important;
  color: #294c35 !important;
}

html:not(.dark) body.smartoffice-page .navbar-mobile-logout {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
}

html:not(.dark) body.smartoffice-page .navbar-mobile-logout:hover,
html:not(.dark) body.smartoffice-page .navbar-mobile-logout:active {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  color: #ffffff !important;
}


/* =========================================================
   09.1) SMART OFFICE - LIGHT MODE COLOR CUSTOM ONLY
   แก้เฉพาะหน้า Smart Office + เฉพาะโหมดสว่างเท่านั้น
   ไม่กระทบโหมดมืด เพราะใช้ html:not(.dark)
   ========================================================= */

/* ไอคอน Current temperature ด้านบนซ้าย */
html:not(.dark) body.smartoffice-page .device-page-wrap > .grid:first-of-type .app-card:nth-child(1) > .flex > .p-4 {
  background-color: #dfdfe2 !important; /* สีพื้นหลังไอคอน */
  color: #000000 !important;            /* สีรูปไอคอน */
}

/* ไอคอน Motion detection ด้านบนขวา */
html:not(.dark) body.smartoffice-page .device-page-wrap > .grid:first-of-type .app-card:nth-child(2) > .flex > .p-4 {
  background-color: #dfdfe2 !important; /* สีพื้นหลังไอคอน */
  color: #000104 !important;            /* สีรูปไอคอน */
}

/* ปุ่มลดอุณหภูมิ (-) ใน AC remote */
html:not(.dark) body.smartoffice-page button[onclick="changeAirTemp(-1)"] {
  background-color: #dfdfe2 !important; /* สีพื้นหลังปุ่ม */
  color: #000000 !important;            /* สีเครื่องหมาย - */
  border-color: #35563c !important;
}

html:not(.dark) body.smartoffice-page button[onclick="changeAirTemp(-1)"]:hover {
  background-color: #1b2b20 !important;
  color: #e8f0cf !important;
}

/* ช่องกรอก Temperature ใน Simulate sensor */
html:not(.dark) body.smartoffice-page #testTemp {
  background-color: #dfdfe2 !important; /* สีพื้นหลังช่องกรอก */
  color: #000000 !important;            /* สีตัวเลข */
  border-color: #dfdfe2 !important;
}

/* ปุ่ม Mode / FAN / Swing ให้พื้นหลังขาวในโหมดสว่าง แต่สีตัวอักษรเปลี่ยนได้จาก CSS ตรงนี้ */
html:not(.dark) body.smartoffice-page button.air-mode-btn {
  background-color: #ffffff !important;
  color: #456b35 !important; /* สีตัวอักษร Mode */
  border-color: #e5e7eb !important;
}

html:not(.dark) body.smartoffice-page button[onclick="toggleAirFan()"] {
  background-color: #ffffff !important;
  color: #a855f7 !important; /* สีตัวอักษร FAN */
  border-color: #e5e7eb !important;
}

html:not(.dark) body.smartoffice-page button[onclick="toggleAirSwing()"] {
  background-color: #ffffff !important;
  color: #f59e0b !important; /* สีตัวอักษร Swing */
  border-color: #e5e7eb !important;
}

html:not(.dark) body.smartoffice-page button.air-mode-btn:hover,
html:not(.dark) body.smartoffice-page button[onclick="toggleAirFan()"]:hover,
html:not(.dark) body.smartoffice-page button[onclick="toggleAirSwing()"]:hover {
  background-color: #ffffff !important;
  filter: brightness(0.98);
}

/* =========================================================
   PROFILE - SYSTEM MEMBERS
   Compact, non-stretching cards with clear account controls.
   ========================================================= */
.system-members-shell {
  padding: clamp(1rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid #e8f0cf;
  border-radius: 2rem;
  background:
    radial-gradient(circle at top right, rgba(168, 191, 32, 0.09), transparent 30%),
    #ffffff;
  box-shadow: 0 22px 55px rgba(13, 21, 16, 0.1);
}

html.dark .system-members-shell {
  border-color: #294c35;
  background:
    radial-gradient(circle at top right, rgba(168, 191, 32, 0.12), transparent 32%),
    #101a13;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
}

.system-members-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.system-members-eyebrow {
  margin: 0 0 0.3rem;
  color: #294c35;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.system-members-title {
  margin: 0;
  color: #101a13;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 900;
  line-height: 1.2;
}

.system-members-subtitle {
  margin: 0.4rem 0 0;
  color: #68766b;
  font-size: 0.875rem;
  line-height: 1.55;
}

html.dark .system-members-title {
  color: #f7f9f4;
}

html.dark .system-members-subtitle {
  color: #9dae9f;
}

.system-members-security-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.45rem 0.75rem;
  border: 1px solid #dce8a5;
  border-radius: 999px;
  background: #f3f8d9;
  color: #294c35;
  font-size: 0.72rem;
  font-weight: 800;
}

html.dark .system-members-security-badge {
  border-color: #355f41;
  background: rgba(30, 64, 175, 0.24);
  color: #cfdf71;
}

.system-member-create-panel {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid #dce8a5;
  border-radius: 1.25rem;
  background: #f3f8d9;
}

html.dark .system-member-create-panel {
  border-color: #35563c;
  background: #1b2b20;
}

.system-member-create-heading h2 {
  margin: 0;
  color: #101a13;
  font-size: 1rem;
  font-weight: 900;
}

.system-member-create-heading p {
  margin: 0.2rem 0 0;
  color: #68766b;
  font-size: 0.76rem;
}

html.dark .system-member-create-heading h2 {
  color: #f7f9f4;
}

html.dark .system-member-create-heading p {
  color: #9dae9f;
}

.system-member-create-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.system-member-create-form label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  color: #506156;
  font-size: 0.73rem;
  font-weight: 800;
}

html.dark .system-member-create-form label {
  color: #9dae9f;
}

.system-member-create-form input,
.system-member-create-form select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border: 1px solid #cbd9c5;
  border-radius: 0.85rem;
  background: #ffffff;
  color: #101a13;
  outline: none;
}

html.dark .system-member-create-form input,
html.dark .system-member-create-form select {
  border-color: #506156;
  background: #101a13;
  color: #f7f9f4;
}

.system-member-create-form input:focus,
.system-member-create-form select:focus {
  border-color: #a8bf20;
  box-shadow: 0 0 0 3px rgba(168, 191, 32, 0.14);
}

.system-member-create-actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0.75rem;
}

.system-member-create-actions button {
  min-height: 42px;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 0.8rem;
  background: #294c35;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.system-member-create-actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.pending-members-panel {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid #e0e7ff;
  border-radius: 1.25rem;
  background: rgba(238, 242, 255, 0.72);
}

html.dark .pending-members-panel {
  border-color: #263653;
  background: rgba(27, 43, 32, 0.64);
}

.pending-members-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.pending-members-heading h4 {
  margin: 0;
  color: #355f41;
  font-size: 1rem;
  font-weight: 900;
}

.pending-members-heading p:not(.pending-members-count) {
  margin: 0.2rem 0 0;
  color: #68766b;
  font-size: 0.75rem;
}

.pending-members-count {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: #ffffff;
  color: #506156;
  font-size: 0.72rem;
  white-space: nowrap;
}

html.dark .pending-members-heading h4 {
  color: #cfdf71;
}

html.dark .pending-members-heading p:not(.pending-members-count) {
  color: #9dae9f;
}

html.dark .pending-members-count {
  background: #101a13;
  color: #cbd9c5;
}

.pending-members-grid,
.system-members-grid {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pending-members-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.pending-member-card {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid #e8f0cf;
  border-radius: 1rem;
  background: #ffffff;
}

html.dark .pending-member-card {
  border-color: #35563c;
  background: #142b1c;
}

.pending-member-profile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}

.pending-member-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid #e8f0cf;
  border-radius: 999px;
  object-fit: cover;
}

.pending-member-identity {
  min-width: 0;
}

.pending-member-identity p,
.pending-member-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-member-identity p {
  margin: 0;
  color: #101a13;
  font-size: 0.9rem;
  font-weight: 800;
}

.pending-member-identity span,
.pending-member-date {
  color: #68766b;
  font-size: 0.72rem;
}

.pending-member-date {
  margin: 0.65rem 0 0;
}

html.dark .pending-member-identity p {
  color: #f7f9f4;
}

html.dark .pending-member-identity span,
html.dark .pending-member-date {
  color: #9dae9f;
}

.pending-member-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.pending-member-actions button {
  width: 100%;
  min-height: 38px;
  padding: 0.55rem 0.8rem;
  border-radius: 0.7rem;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.pending-member-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.pending-approve {
  background: #16a34a;
}

.pending-reject {
  background: #e11d48;
}

.pending-members-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.25rem;
  color: #68766b;
  font-size: 0.8rem;
}

.pending-members-empty span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 900;
}

html.dark .pending-members-empty {
  color: #9dae9f;
}

.system-members-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.system-members-search {
  position: relative;
  display: block;
  flex: 1 1 24rem;
  max-width: 34rem;
}

.system-members-search-icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  z-index: 1;
  color: #9dae9f;
  font-size: 1.3rem;
  line-height: 1;
  transform: translateY(-53%);
  pointer-events: none;
}

.system-members-search input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem 0.7rem 2.65rem;
  border: 1px solid #cbd9c5;
  border-radius: 0.9rem;
  outline: none;
  background: rgba(248, 250, 252, 0.9);
  color: #101a13;
  font-size: 0.86rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.system-members-search input:focus {
  border-color: #a8bf20;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(168, 191, 32, 0.12);
}

html.dark .system-members-search input {
  border-color: #35563c;
  background: #142b1c;
  color: #f7f9f4;
}

html.dark .system-members-search input:focus {
  border-color: #c0d530;
  background: #101a13;
}

.system-members-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin: 0;
  color: #68766b;
  font-size: 0.75rem;
  white-space: nowrap;
}

.system-smtp-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-weight: 800;
}

.system-smtp-status.is-ready {
  background: #dcfce7;
  color: #15803d;
}

.system-smtp-status.is-missing {
  background: #fff7ed;
  color: #c2410c;
}

html.dark .system-members-status {
  color: #9dae9f;
}

html.dark .system-smtp-status.is-ready {
  background: rgba(20, 83, 45, 0.5);
  color: #86efac;
}

html.dark .system-smtp-status.is-missing {
  background: rgba(124, 45, 18, 0.42);
  color: #fdba74;
}

.system-members-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.system-member-card {
  position: relative;
  min-width: 0;
  padding: 1.1rem;
  overflow: hidden;
  border: 1px solid #dfe8d9;
  border-radius: 1.25rem;
  background: rgba(248, 250, 252, 0.94);
  box-shadow: 0 8px 24px rgba(13, 21, 16, 0.055);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.system-member-card:hover {
  border-color: #cfdf71;
  box-shadow: 0 14px 32px rgba(41, 76, 53, 0.1);
  transform: translateY(-2px);
}

.system-member-card.is-ingress-owner {
  border-color: #cfdf71;
  background: linear-gradient(145deg, rgba(239, 246, 255, 0.98), rgba(248, 250, 252, 0.94));
}

html.dark .system-member-card {
  border-color: #35563c;
  background: rgba(27, 43, 32, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

html.dark .system-member-card:hover,
html.dark .system-member-card.is-ingress-owner {
  border-color: #a8bf20;
  background: linear-gradient(145deg, rgba(30, 58, 95, 0.88), rgba(27, 43, 32, 0.94));
}

.system-member-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.system-member-avatar {
  width: 52px;
  height: 52px;
  border: 2px solid #dce8a5;
  border-radius: 999px;
  background: #e8f0cf;
  object-fit: cover;
  box-shadow: 0 5px 14px rgba(13, 21, 16, 0.12);
}

html.dark .system-member-avatar {
  border-color: #a8bf20;
  background: #355f41;
}

.system-member-identity {
  min-width: 0;
}

.system-member-name,
.system-member-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-member-name {
  margin: 0;
  color: #101a13;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.35;
}

.system-member-email {
  margin: 0.16rem 0 0;
  color: #68766b;
  font-size: 0.75rem;
}

html.dark .system-member-name {
  color: #f7f9f4;
}

html.dark .system-member-email {
  color: #9dae9f;
}

.system-member-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.system-role-badge,
.system-current-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 0.27rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.system-role-super_admin {
  background: #e8f0cf;
  color: #294c35;
}

.system-role-admin {
  background: #ede9fe;
  color: #6d28d9;
}

.system-role-assistant_admin {
  background: #cffafe;
  color: #0e7490;
}

.system-role-user {
  background: #e3eadf;
  color: #506156;
}

.system-current-user-badge {
  background: #dcfce7;
  color: #15803d;
}

html.dark .system-role-super_admin {
  background: rgba(30, 64, 175, 0.52);
  color: #dce8a5;
}

html.dark .system-role-admin {
  background: rgba(91, 33, 182, 0.48);
  color: #ddd6fe;
}

html.dark .system-role-assistant_admin {
  background: rgba(21, 94, 117, 0.52);
  color: #a5f3fc;
}

html.dark .system-role-user {
  background: #35563c;
  color: #cbd9c5;
}

html.dark .system-current-user-badge {
  background: rgba(20, 83, 45, 0.5);
  color: #86efac;
}

.system-member-uid {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.45rem 0.6rem;
  overflow: hidden;
  border-radius: 0.65rem;
  background: rgba(226, 232, 240, 0.58);
  color: #68766b;
  font-size: 0.66rem;
}

.system-member-uid span {
  flex: 0 0 auto;
  color: #294c35;
  font-weight: 900;
}

.system-member-uid code {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .system-member-uid {
  background: rgba(13, 21, 16, 0.55);
  color: #9dae9f;
}

html.dark .system-member-uid span {
  color: #c0d530;
}

.system-member-controls {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.system-member-approval {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #dfe8d9;
  border-radius: 0.8rem;
  background: rgba(239, 246, 255, 0.72);
  color: #506156;
  font-size: 0.75rem;
  line-height: 1.45;
}

.system-member-approval span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.system-member-approval strong {
  color: #294c35;
  font-weight: 800;
}

html.dark .system-member-approval {
  border-color: #35563c;
  background: rgba(13, 21, 16, 0.45);
  color: #cbd9c5;
}

html.dark .system-member-approval strong {
  color: #c0d530;
}

@media (max-width: 640px) {
  .system-member-approval {
    grid-template-columns: 1fr;
  }
}

.system-member-field {
  min-width: 0;
}

.system-member-field-label {
  display: block;
  margin-bottom: 0.35rem;
  color: #506156;
  font-size: 0.7rem;
  font-weight: 800;
}

html.dark .system-member-field-label {
  color: #9dae9f;
}

.system-member-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.member-username-input,
.member-role-select,
.member-compact-button {
  box-sizing: border-box;
  min-height: 42px;
  border-radius: 0.75rem;
  font-size: 0.78rem;
}

.member-username-input,
.member-role-select {
  width: 100%;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid #cbd9c5;
  outline: none;
  background: #ffffff;
  color: #101a13;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.member-username-input:focus,
.member-role-select:focus {
  border-color: #a8bf20;
  box-shadow: 0 0 0 3px rgba(168, 191, 32, 0.12);
}

html.dark .member-username-input,
html.dark .member-role-select {
  border-color: #506156;
  background: #101a13;
  color: #f7f9f4;
}

.member-compact-button {
  min-width: 104px;
  padding: 0.6rem 0.85rem;
  border: 0;
  color: #ffffff;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.member-compact-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.member-compact-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.member-username-save,
.member-role-save {
  background: linear-gradient(135deg, #294c35, #a8bf20);
  box-shadow: 0 6px 14px rgba(41, 76, 53, 0.18);
}

.system-member-readonly-value,
.system-role-locked {
  display: flex;
  min-height: 42px;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e3eadf;
  border-radius: 0.75rem;
  background: rgba(241, 245, 249, 0.75);
  color: #506156;
  font-size: 0.78rem;
}

.system-role-locked {
  gap: 0.5rem;
  border-color: #dce8a5;
  background: #f3f8d9;
  color: #294c35;
  font-weight: 800;
}

.system-role-lock-icon {
  color: #a8bf20;
  font-size: 0.55rem;
}

html.dark .system-member-readonly-value {
  border-color: #35563c;
  background: rgba(13, 21, 16, 0.5);
  color: #cbd9c5;
}

html.dark .system-role-locked {
  border-color: #355f41;
  background: rgba(30, 64, 175, 0.24);
  color: #dce8a5;
}

.system-member-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e3eadf;
}

html.dark .system-member-actions {
  border-top-color: #35563c;
}

.member-reset-password {
  background: #d97706;
}

.member-delete {
  background: #dc2626;
}

.system-members-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  padding: 1.5rem;
  border: 1px dashed #cbd9c5;
  border-radius: 1.25rem;
  color: #68766b;
  text-align: center;
}

.system-members-empty > span {
  font-size: 2rem;
  line-height: 1;
}

.system-members-empty > strong {
  color: #35563c;
  font-size: 0.95rem;
}

.system-members-empty > small {
  font-size: 0.75rem;
}

html.dark .system-members-empty {
  border-color: #35563c;
  color: #9dae9f;
}

html.dark .system-members-empty > strong {
  color: #e3eadf;
}

.system-members-message {
  margin: 1rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .system-members-grid,
  .pending-members-grid {
    grid-template-columns: 1fr;
  }

  .system-members-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .system-members-search {
    max-width: none;
  }

  .system-members-status {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .system-members-shell {
    border-radius: 1.4rem;
  }

  .system-members-heading-row,
  .pending-members-heading {
    flex-direction: column;
  }

  .system-members-security-badge {
    align-self: flex-start;
  }

  .system-members-status {
    flex-wrap: wrap;
    white-space: normal;
  }

  .system-member-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .system-member-badges {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    padding-left: 64px;
  }

  .system-member-input-row {
    grid-template-columns: 1fr;
  }

  .member-compact-button {
    width: 100%;
  }

  .system-member-actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   V1.29.5 PER-ROOM NAVBAR & ACCESS
   ========================================================= */
.room-config-progress { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.room-navigation-access-stage { overflow: hidden; }

.room-navigation-access-grid {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(420px, 1.4fr);
  gap: 1rem;
  margin-top: 1.1rem;
}

.room-navbar-setting-card,
.room-access-setting-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid #dfe8d9;
  border-radius: 1.25rem;
  background: #f7f9f4;
}

.dark .room-navbar-setting-card,
.dark .room-access-setting-card {
  border-color: #35563c;
  background: #142b1c;
}

.room-navbar-setting-head,
.room-access-setting-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.room-navbar-setting-head h4,
.room-access-setting-head h4 {
  margin: 0;
  color: #101a13;
  font-size: 1rem;
  font-weight: 900;
}

.dark .room-navbar-setting-head h4,
.dark .room-access-setting-head h4 { color: #f7f9f4; }

.room-navbar-setting-head p:not(.schedule-overview-kicker),
.room-access-setting-head p:not(.schedule-overview-kicker) {
  margin: .3rem 0 0;
  color: #68766b;
  font-size: .76rem;
  line-height: 1.55;
}

.room-navbar-preview {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: .75rem .85rem;
  border: 1px dashed #cbd9c5;
  border-radius: .9rem;
  background: #fff;
  color: #68766b;
  font-size: .78rem;
  font-weight: 800;
}

.room-navbar-preview.is-visible {
  border-color: #cfdf71;
  background: #f3f8d9;
  color: #294c35;
}

.dark .room-navbar-preview { border-color: #506156; background: #101a13; color: #9dae9f; }
.dark .room-navbar-preview.is-visible { border-color: #294c35; background: #1a2b1f; color: #c0d530; }

.room-access-member-list {
  display: grid;
  gap: .65rem;
  max-height: 540px;
  overflow-y: auto;
}

.room-access-member-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid #dfe8d9;
  border-radius: 1rem;
  background: #fff;
}

.dark .room-access-member-row { border-color: #35563c; background: #101a13; }

.room-access-member-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.room-access-member-identity > div { min-width: 0; }
.room-access-member-identity strong,
.room-access-member-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-access-member-identity strong { color: #101a13; font-size: .8rem; font-weight: 900; }
.room-access-member-identity small { margin-top: .15rem; color: #9dae9f; font-size: .66rem; }
.dark .room-access-member-identity strong { color: #f7f9f4; }

.room-access-member-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}

.room-access-choice {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: .45rem;
  padding: .5rem .65rem;
  border: 1px solid #dfe8d9;
  border-radius: .75rem;
  background: #f7f9f4;
  color: #506156;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}

.room-access-choice:has(input:checked) { border-color: #cfdf71; background: #f3f8d9; color: #294c35; }
.room-access-choice:has(input:disabled) { cursor: not-allowed; opacity: .68; }
.room-access-choice input { width: 1rem; height: 1rem; flex: none; accent-color: #294c35; }
.dark .room-access-choice { border-color: #35563c; background: #142b1c; color: #cbd9c5; }
.dark .room-access-choice:has(input:checked) { border-color: #294c35; background: #1a2b1f; color: #cfdf71; }

.room-access-member-state {
  min-width: 74px;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: #f3f7ef;
  color: #68766b;
  font-size: .64rem;
  font-weight: 900;
  text-align: center;
}

.room-access-member-state.is-view { background: #f3f8d9; color: #294c35; }
.room-access-member-state.is-manage { background: #ecfdf5; color: #15803d; }
.dark .room-access-member-state { background: #1b2b20; color: #9dae9f; }
.dark .room-access-member-state.is-view { background: #1a2b1f; color: #c0d530; }
.dark .room-access-member-state.is-manage { background: #052e16; color: #4ade80; }

.room-access-empty {
  padding: 1.25rem;
  border: 1px dashed #cbd9c5;
  border-radius: 1rem;
  color: #68766b;
  text-align: center;
  font-size: .78rem;
  font-weight: 750;
}

.dark .room-access-empty { border-color: #35563c; color: #9dae9f; }
.room-navbar-setting-card > .schedule-save,
.room-access-setting-card > .schedule-save { margin-top: auto; }

@media (max-width: 980px) {
  .room-navigation-access-grid { grid-template-columns: 1fr; }
  .room-access-member-row { grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr) auto; }
}

@media (max-width: 720px) {
  .room-config-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-access-member-row { grid-template-columns: 1fr; }
  .room-access-member-identity { align-items: flex-start; }
  .room-access-member-state { justify-self: start; }
}

@media (max-width: 480px) {
  .room-navbar-setting-head { align-items: stretch; flex-direction: column; }
  .room-navbar-setting-head .schedule-master-switch { justify-content: flex-end; }
  .room-access-member-choices { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
  #navbarSpacer {
    height: calc(126px + env(safe-area-inset-top));
  }
}

/* V1.6.9 must stay last: older compatibility rules above use fixed offsets. */
#navbarSpacer {
  height: var(--navbar-height) !important;
}

@media (max-width: 1023px) {
  #mobileMenu,
  .navbar-mobile-panel {
    top: var(--navbar-height) !important;
    max-height: calc(100dvh - var(--navbar-height)) !important;
  }
}

/* V1.6.10 must stay last: balance the three desktop navbar zones. */
@media (min-width: 1024px) {
  .navbar-shell .navbar-row {
    gap: clamp(0.6rem, 0.9vw, 1rem) !important;
  }

  .navbar-shell .navbar-brand {
    justify-content: flex-start;
  }

  .navbar-shell .navbar-desktop-tabs {
    justify-content: safe center;
    gap: clamp(0.3rem, 0.38vw, 0.48rem);
    padding-inline: 0.4rem;
    scroll-padding-inline: 0.5rem;
  }

  .navbar-shell .navbar-desktop-tabs .nav-desktop-link {
    padding-left: clamp(0.68rem, 0.72vw, 0.88rem);
    padding-right: clamp(0.68rem, 0.72vw, 0.88rem);
  }

  .navbar-shell .navbar-account-actions {
    justify-content: flex-end;
  }
}

/* =========================================================
   V1.6.11 UI CONSISTENCY
   Solid cards, compact operations typography, visible log badges,
   and a circular mobile Login logo.
   ========================================================= */
:root {
  --card-bg: #ffffff;
}

html.dark {
  --card-bg: #101a13;
}

/* Outer cards use one opaque surface in each theme. */
.app-card,
.operations-hero,
.operations-panel,
.system-members-shell,
.login-card-theme {
  background-color: #ffffff !important;
  background-image: none !important;
}

html.dark .app-card,
html.dark .operations-hero,
html.dark .operations-panel,
html.dark .system-members-shell,
html.dark .login-card-theme {
  background-color: #101a13 !important;
  background-image: none !important;
}

/* Inner cards remain visually grouped but are fully opaque. */
.metric-card,
.schedule-card,
.holiday-card,
.monitor-timeline,
.pending-members-panel,
.pending-member-card,
.system-member-card,
.system-member-readonly-value,
.log-mobile-info-box,
.login-register-panel {
  background-color: #f7f9f4 !important;
  background-image: none !important;
}

html.dark .metric-card,
html.dark .schedule-card,
html.dark .holiday-card,
html.dark .monitor-timeline,
html.dark .pending-members-panel,
html.dark .pending-member-card,
html.dark .system-member-card,
html.dark .system-member-readonly-value,
html.dark .log-mobile-info-box,
html.dark .login-register-panel {
  background-color: #1b2b20 !important;
  background-image: none !important;
}

.system-member-card.is-ingress-owner,
html.dark .system-member-card.is-ingress-owner {
  background-image: none !important;
}

.system-member-uid {
  background-color: #e3eadf !important;
}

html.dark .system-member-uid {
  background-color: #132019 !important;
}

/* Logs: solid device badges remain readable in light and dark modes. */
.logs-page .log-device-badge {
  border-width: 1px !important;
  border-style: solid !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(13, 21, 16, 0.12);
}

.logs-page .log-device-light {
  border-color: #ca8a04 !important;
  background: #eab308 !important;
  color: #422006 !important;
}

.logs-page .log-device-fan {
  border-color: #0891b2 !important;
  background: #06b6d4 !important;
  color: #083344 !important;
}

.logs-page .log-device-air {
  border-color: #294c35 !important;
  background: #294c35 !important;
}

.logs-page .log-device-perfume {
  border-color: #be185d !important;
  background: #db2777 !important;
}

.logs-page .log-device-default {
  border-color: #506156 !important;
  background: #68766b !important;
}

/* Internet Monitor and Schedules: compact hierarchy without reducing clarity. */
body.monitor-page .operations-title,
body.schedules-page .operations-title {
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
}

body.monitor-page .operations-subtitle,
body.schedules-page .operations-subtitle {
  font-size: 0.82rem;
  line-height: 1.45;
}

body.monitor-page .panel-title,
body.schedules-page .panel-title {
  font-size: 1.05rem;
}

body.monitor-page .metric-label,
body.schedules-page .metric-label {
  font-size: 0.72rem;
}

body.monitor-page .metric-value,
body.schedules-page .metric-value {
  font-size: clamp(1rem, 2.25vw, 1.4rem);
}

body.monitor-page .range-button,
body.schedules-page .schedule-day,
body.schedules-page .schedule-field input,
body.schedules-page .holiday-form input {
  font-size: 0.76rem;
}

body.monitor-page .range-button {
  min-height: 38px;
  padding: 0.45rem 0.7rem;
}

body.schedules-page .status-pill,
body.monitor-page .status-pill {
  min-height: 31px;
  font-size: 0.72rem;
}

/* Mobile Login logo: equal width/height produces a true circle. */
.login-brand-logo-mobile {
  width: 116px;
  height: 116px;
  border: 3px solid #ffffff;
  border-radius: 9999px;
  background: #bedb28;
  object-fit: cover;
  object-position: center;
}

html.dark .login-brand-logo-mobile {
  border-color: #35563c;
}

/* Custom-room automation uses the same opaque card hierarchy as the
   built-in Office and Toilet schedule editors. */
body.schedules-page .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.dynamic-automation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
}

.dynamic-automation-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: #f7f9f4;
}

.dynamic-automation-card.is-room-disabled {
  opacity: 0.58;
  filter: grayscale(0.35);
}

.dynamic-automation-card.is-room-disabled input,
.dynamic-automation-card.is-room-disabled select,
.dynamic-automation-card.is-room-disabled button {
  cursor: not-allowed;
}

html.dark .dynamic-automation-card {
  background: #1b2b20;
}

.dynamic-automation-card-heading,
.dynamic-automation-rule-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dynamic-automation-card-heading h3 {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.dynamic-automation-card-heading p,
.dynamic-automation-rule-heading small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.dynamic-automation-master,
.dynamic-automation-toggle,
.dynamic-automation-day {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.dynamic-automation-master {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--soft-bg);
}

.dynamic-automation-general-panel,
.dynamic-automation-device-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: #ffffff;
}

html.dark .dynamic-automation-general-panel,
html.dark .dynamic-automation-device-panel {
  background: #101a13;
}

.dynamic-automation-section-heading h4,
.dynamic-automation-delay-heading h4 {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
}

.dynamic-automation-section-heading p,
.dynamic-automation-delay-heading p {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.dynamic-automation-schedule-fields,
.dynamic-automation-sensors,
.dynamic-automation-rule-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.dynamic-automation-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.dynamic-automation-field input,
.dynamic-automation-field select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.6rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--soft-bg);
  color: var(--text);
}

.dynamic-automation-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.dynamic-automation-day {
  min-height: 38px;
  padding: 0.4rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--soft-bg);
}

.dynamic-automation-device-selectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.dynamic-automation-device-selector {
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--soft-bg);
  cursor: pointer;
}

.dynamic-automation-device-selector-text {
  min-width: 0;
}

.dynamic-automation-device-selector-text strong,
.dynamic-automation-device-selector-text small {
  display: block;
  overflow-wrap: anywhere;
}

.dynamic-automation-device-selector-text strong {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 900;
}

.dynamic-automation-device-selector-text small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.66rem;
}

.dynamic-automation-switch-control {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
}

.dynamic-automation-switch-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.dynamic-automation-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #9dae9f;
  transition: background 160ms ease;
}

.dynamic-automation-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(13, 21, 16, 0.3);
  transition: transform 160ms ease;
}

.dynamic-automation-switch-control input:checked + .dynamic-automation-switch-track {
  background: #294c35;
}

.dynamic-automation-switch-control input:checked + .dynamic-automation-switch-track::after {
  transform: translateX(18px);
}

.dynamic-automation-switch-control input:focus-visible + .dynamic-automation-switch-track {
  outline: 3px solid rgba(168, 191, 32, 0.32);
  outline-offset: 2px;
}

.dynamic-automation-switch-control input:disabled + .dynamic-automation-switch-track {
  cursor: not-allowed;
  opacity: 0.55;
}

.dynamic-automation-divider {
  margin: 1.15rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.dynamic-automation-delay-heading {
  margin-bottom: 0.85rem;
}

.dynamic-automation-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.75rem;
}

.dynamic-automation-rule {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #ffffff;
  transition: opacity 160ms ease, border-color 160ms ease;
}

html.dark .dynamic-automation-rule {
  background: #101a13;
}

.dynamic-automation-rule.is-disabled {
  opacity: 0.58;
}

.dynamic-automation-rule-heading strong {
  display: block;
  color: var(--text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.dynamic-automation-rule-fields {
  grid-template-columns: 1fr;
}

/* These fields also have component display rules below, so make mode-based
   visibility authoritative regardless of stylesheet order. */
.dynamic-automation-rule-fields > .hidden {
  display: none !important;
}

.dynamic-delay-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.dynamic-delay-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7.2rem, 0.7fr);
  gap: 0.5rem;
}

.dynamic-delay-controls input,
.dynamic-delay-controls select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.6rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--soft-bg);
  color: var(--text);
}

.dynamic-automation-empty {
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: 1rem;
  background: var(--soft-bg);
  color: var(--muted);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
}

.dynamic-automation-save {
  margin-top: auto;
}

.dynamic-schedule-card-host {
  display: contents;
}

@media (max-width: 640px) {
  .dynamic-automation-grid {
    grid-template-columns: 1fr;
  }

  .dynamic-automation-card {
    padding: 0.85rem;
    border-radius: 1.15rem;
  }

  .dynamic-automation-card-heading,
  .dynamic-automation-rule-heading {
    flex-direction: column;
    gap: 0.65rem;
  }

  .dynamic-automation-master {
    width: 100%;
    justify-content: center;
  }

  .dynamic-automation-schedule-fields,
  .dynamic-automation-sensors,
  .dynamic-automation-rule-fields {
    grid-template-columns: 1fr;
  }

  .dynamic-automation-general-panel,
  .dynamic-automation-device-panel {
    padding: 0.8rem;
  }

  .dynamic-automation-device-selectors,
  .dynamic-automation-rules {
    grid-template-columns: 1fr;
  }

  .dynamic-delay-controls {
    grid-template-columns: minmax(0, 1fr) 7rem;
  }

  .dynamic-automation-day {
    flex: 1 0 calc(25% - 0.45rem);
    justify-content: center;
  }
}

/* =========================================================
   V1.6.12 RESPONSIVE NAVBAR + ACTIVE STATE + DEVICE BADGES
   Collapse before the desktop controls overlap, keep every active
   mobile route blue, and preserve semantic device badge colours.
   ========================================================= */

/* Office/Logs light-mode rules above intentionally theme normal links,
   so the selected route is restated last with stronger specificity. */
html body #mobileMenu .nav-mobile-link.is-active,
html:not(.dark) body #mobileMenu .nav-mobile-link.is-active,
html.dark body #mobileMenu .nav-mobile-link.is-active,
html:not(.dark) body.logs-page #mobileMenu .nav-mobile-link.is-active,
html:not(.dark) body.smartoffice-page #mobileMenu .nav-mobile-link.is-active {
  border-color: #294c35 !important;
  background: #294c35 !important;
  background-color: #294c35 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(41, 76, 53, 0.24) !important;
}

html body #mobileMenu .nav-mobile-link.is-active:hover,
html body #mobileMenu .nav-mobile-link.is-active:active,
html:not(.dark) body.logs-page #mobileMenu .nav-mobile-link.is-active:hover,
html:not(.dark) body.logs-page #mobileMenu .nav-mobile-link.is-active:active,
html:not(.dark) body.smartoffice-page #mobileMenu .nav-mobile-link.is-active:hover,
html:not(.dark) body.smartoffice-page #mobileMenu .nav-mobile-link.is-active:active {
  border-color: #294c35 !important;
  background: #294c35 !important;
  background-color: #294c35 !important;
  color: #ffffff !important;
}

#mobileMenu .nav-mobile-link.is-active .nav-mobile-text {
  color: #ffffff !important;
}

/* The full desktop navigation needs more room than Tailwind's lg (1024px).
   Between tablet and 1399px, use the compact controls and dropdown instead. */
@media (max-width: 1399px) {
  .navbar-shell .navbar-desktop-tabs,
  .navbar-shell .navbar-account-actions {
    display: none !important;
  }

  .navbar-shell .navbar-mobile-actions {
    display: flex !important;
  }

  .navbar-shell .navbar-row {
    justify-content: space-between !important;
  }

  #mobileMenu,
  .navbar-mobile-panel {
    top: var(--navbar-height) !important;
    max-height: calc(100dvh - var(--navbar-height)) !important;
  }

  #mobileMenu.hidden,
  .navbar-mobile-panel.hidden {
    display: none !important;
  }

  #mobileMenu:not(.hidden),
  .navbar-mobile-panel:not(.hidden) {
    display: block !important;
  }
}

@media (min-width: 1400px) {
  .navbar-shell .navbar-desktop-tabs,
  .navbar-shell .navbar-account-actions {
    display: flex !important;
  }

  .navbar-shell .navbar-mobile-actions,
  #mobileMenu,
  .navbar-mobile-panel {
    display: none !important;
  }
}

/* White labels with a border matching each device's solid badge colour. */
.logs-page .log-device-light {
  border-color: #eab308 !important;
  color: #ffffff !important;
}

.logs-page .log-device-fan {
  border-color: #06b6d4 !important;
  color: #ffffff !important;
}

.logs-page .log-device-air {
  border-color: #294c35 !important;
  color: #ffffff !important;
}

.logs-page .log-device-perfume {
  border-color: #db2777 !important;
  color: #ffffff !important;
}

.logs-page .log-device-default {
  border-color: #68766b !important;
  color: #ffffff !important;
}

/* =========================================================
   V1.6.13 SYSTEM MEMBERS RESPONSIVE POLISH
   One border palette, compact mobile spacing, and a search icon
   anchored to the real input height instead of the flex basis.
   ========================================================= */
.system-members-page .operations-hero,
.system-members-page .system-members-shell,
.system-members-page .pending-members-panel,
.system-members-page .metric-card,
.system-members-page .pending-member-card,
.system-members-page .system-member-card,
.system-members-page .system-members-search input,
.system-members-page .system-members-empty {
  border-color: var(--line) !important;
}

/* Preserve the protected Ingress-owner highlight as a semantic exception. */
.system-members-page .system-member-card.is-ingress-owner {
  border-color: #a8bf20 !important;
}

.system-members-page .pending-members-heading h2,
.system-members-page .pending-members-heading h4 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.system-members-page .system-members-search {
  position: relative;
  display: block;
  width: min(100%, 34rem);
  min-width: 0;
  min-height: 46px;
  flex: 1 1 24rem;
  line-height: 0;
}

.system-members-page .system-members-search-icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  z-index: 2;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.system-members-page .system-members-search-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.system-members-page .system-members-search input {
  display: block;
  height: 46px;
  min-height: 46px;
  line-height: 1.25;
}

.system-members-page .system-members-search input:focus {
  border-color: #a8bf20 !important;
}

@media (max-width: 900px) {
  .system-members-page .system-members-toolbar {
    align-items: stretch;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
  }

  .system-members-page .system-members-search {
    width: 100%;
    max-width: none;
    min-height: 46px;
    flex: 0 0 46px;
  }

  .system-members-page .system-members-grid,
  .system-members-page .pending-members-grid {
    gap: 0.75rem;
  }
}

@media (max-width: 640px) {
  .system-members-page .operations-page {
    margin-top: 0.75rem;
    padding-inline: 0.65rem;
    padding-bottom: 1.25rem;
  }

  .system-members-page .operations-hero,
  .system-members-page .system-members-shell {
    border-radius: 1.35rem;
  }

  .system-members-page .operations-hero {
    padding: 1rem;
  }

  .system-members-page .operations-title-row {
    gap: 0.75rem;
  }

  .system-members-page .operations-title {
    font-size: 1.55rem;
  }

  .system-members-page .operations-subtitle {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .system-members-page .system-members-security-badge {
    min-height: 31px;
    padding: 0.38rem 0.65rem;
  }

  .system-members-page .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.9rem;
  }

  .system-members-page .metric-card {
    padding: 0.8rem;
    border-radius: 1rem;
  }

  .system-members-page .system-members-shell {
    margin-top: 0.75rem !important;
    padding: 0.75rem;
  }

  .system-members-page .pending-members-panel {
    margin-bottom: 0.75rem;
    padding: 0.8rem;
    border-radius: 1rem;
  }

  .system-member-create-panel {
    margin-bottom: 0.75rem;
    padding: 0.8rem;
    border-radius: 1rem;
  }

  .system-member-create-form {
    grid-template-columns: 1fr;
  }

  .system-member-create-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .system-member-create-actions button {
    width: 100%;
  }

  .system-members-page .pending-members-heading {
    gap: 0.55rem;
    margin-bottom: 0.6rem;
  }

  .system-members-page .pending-members-heading p:not(.pending-members-count) {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .system-members-page .pending-members-count {
    align-self: flex-start;
    padding: 0.3rem 0.55rem;
  }

  .system-members-page .pending-members-empty {
    padding: 0.45rem 0.1rem;
  }

  .system-members-page .system-members-toolbar {
    gap: 0.55rem;
    margin-bottom: 0.7rem;
  }

  .system-members-page .system-members-status {
    gap: 0.4rem;
    font-size: 0.7rem;
  }

  .system-members-page .system-member-card,
  .system-members-page .pending-member-card {
    padding: 0.85rem;
    border-radius: 1rem;
  }
}

@media (max-width: 360px) {
  .system-members-page .metric-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   22) V1.8.0 DYNAMIC ROOMS + HOME ASSISTANT DEVICE CARDS
   ========================================================= */
.dynamic-navbar-room-links {
  display: contents;
}

.dynamic-navbar-mobile-room-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-desktop-link.is-room-disabled,
.nav-mobile-link.is-room-disabled {
  border-style: dashed !important;
  opacity: 0.72;
}

.dynamic-manager-shell,
.dynamic-room-hero,
.dynamic-room-additional-section {
  border: 1px solid #dce8a5;
  border-radius: 2rem;
  background: #ffffff;
  box-shadow: var(--shadow);
}

html.dark .dynamic-manager-shell,
html.dark .dynamic-room-hero,
html.dark .dynamic-room-additional-section {
  border-color: #35563c;
  background: #101a13;
}

.dynamic-manager-shell {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.dynamic-manager-heading,
.dynamic-manager-panel-title,
.dynamic-manager-item-header,
.dynamic-room-section-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dynamic-manager-heading h3,
.dynamic-room-section-heading h2 {
  margin: 0;
  color: #101a13;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 900;
}

.dynamic-manager-heading p,
.dynamic-manager-panel-title p,
.dynamic-room-section-heading p,
.dynamic-room-hero > p:last-child {
  margin: 0.3rem 0 0;
  color: #68766b;
  font-size: 0.82rem;
  line-height: 1.55;
}

html.dark .dynamic-manager-heading h3,
html.dark .dynamic-room-section-heading h2,
html.dark .dynamic-room-hero h1 {
  color: #f7f9f4;
}

html.dark .dynamic-manager-heading p,
html.dark .dynamic-manager-panel-title p,
html.dark .dynamic-room-section-heading p,
html.dark .dynamic-room-hero > p:last-child {
  color: #9dae9f;
}

.dynamic-manager-badge,
.dynamic-status-pill,
.dynamic-domain-pill,
.dynamic-device-domain {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 900;
}

.dynamic-manager-badge {
  border: 1px solid #86efac;
  background: #dcfce7;
  color: #166534;
}

.dynamic-manager-badge.is-readonly {
  border-color: #cbd9c5;
  background: #f3f7ef;
  color: #506156;
}

html.dark .dynamic-manager-badge {
  border-color: #166534;
  background: #052e16;
  color: #86efac;
}

html.dark .dynamic-manager-badge.is-readonly {
  border-color: #506156;
  background: #1b2b20;
  color: #cbd9c5;
}

.dynamic-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.room-manager-grid {
  grid-template-columns: 1fr;
}

.room-manager-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.room-manager-list .dynamic-manager-item {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.room-manager-list .dynamic-manager-controls {
  margin-top: auto;
  padding-top: 0.75rem;
}

.settings-device-manager-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.settings-device-manager-single {
  grid-template-columns: minmax(0, 1fr);
}

.settings-device-form-panel {
  width: 100%;
}

.settings-added-devices-panel {
  width: 100%;
}

.settings-added-devices-panel .dynamic-manager-panel-title p {
  margin: 0.25rem 0 0;
  color: #68766b;
  font-size: 0.76rem;
}

html.dark .settings-added-devices-panel .dynamic-manager-panel-title p {
  color: #9dae9f;
}

.settings-added-device-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-manager-panel {
  min-width: 0;
  border: 1px solid #e8f0cf;
  border-radius: 1.4rem;
  padding: 1rem;
  background: #f7f9f4;
}

html.dark .dynamic-manager-panel {
  border-color: #35563c;
  background: #142b1c;
}

.dynamic-manager-panel-title h4 {
  margin: 0;
  color: #1b2b20;
  font-size: 1rem;
  font-weight: 900;
}

html.dark .dynamic-manager-panel-title h4 {
  color: #f7f9f4;
}

.dynamic-form-row,
.dynamic-device-form,
.dynamic-manager-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.dynamic-form-row > button {
  grid-column: 1 / -1;
}

.dynamic-form-row label,
.dynamic-device-form label,
.dynamic-manager-fields label,
.dynamic-device-select,
.dynamic-device-range {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  color: #506156;
  font-size: 0.73rem;
  font-weight: 800;
}

html.dark .dynamic-form-row label,
html.dark .dynamic-device-form label,
html.dark .dynamic-manager-fields label,
html.dark .dynamic-device-select,
html.dark .dynamic-device-range {
  color: #9dae9f;
}

.dynamic-form-row input,
.dynamic-device-form input:not([type="checkbox"]),
.dynamic-device-form select,
.dynamic-manager-fields input,
.dynamic-device-select select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #cbd9c5;
  border-radius: 0.85rem;
  padding: 0.65rem 0.75rem;
  background: #ffffff;
  color: #101a13;
  font-size: 0.82rem;
  outline: none;
}

.dynamic-form-row input:focus,
.dynamic-device-form input:focus,
.dynamic-device-form select:focus,
.dynamic-manager-fields input:focus,
.dynamic-device-select select:focus {
  border-color: #a8bf20;
  box-shadow: 0 0 0 3px rgba(168, 191, 32, 0.14);
}

html.dark .dynamic-form-row input,
html.dark .dynamic-device-form input:not([type="checkbox"]),
html.dark .dynamic-device-form select,
html.dark .dynamic-manager-fields input,
html.dark .dynamic-device-select select {
  border-color: #506156;
  background: #101a13;
  color: #f7f9f4;
}

.dynamic-form-span {
  grid-column: 1 / -1;
}

.dynamic-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.dynamic-toggle-grid label,
.dynamic-inline-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #e8f0cf;
  border-radius: 0.8rem;
  padding: 0.65rem;
  background: #ffffff;
  color: #35563c;
  font-size: 0.72rem;
  font-weight: 800;
}

html.dark .dynamic-toggle-grid label,
html.dark .dynamic-inline-toggle {
  border-color: #35563c;
  background: #101a13;
  color: #cbd9c5;
}

.dynamic-toggle-grid input,
.dynamic-inline-toggle input {
  width: 1rem;
  height: 1rem;
  accent-color: #294c35;
}

.dynamic-form-actions,
.dynamic-manager-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.dynamic-primary-button,
.dynamic-secondary-button,
.dynamic-danger-button {
  min-height: 42px;
  border: 0;
  border-radius: 0.8rem;
  padding: 0.65rem 1rem;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.dynamic-primary-button {
  background: #294c35;
  color: #ffffff;
}

.dynamic-secondary-button {
  border: 1px solid #cbd9c5;
  background: #ffffff;
  color: #35563c;
}

.dynamic-danger-button {
  background: #dc2626;
  color: #ffffff;
}

.dynamic-danger-button:disabled,
.dynamic-primary-button:disabled,
.dynamic-secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

html.dark .dynamic-secondary-button {
  border-color: #506156;
  background: #101a13;
  color: #e3eadf;
}

.dynamic-manager-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.dynamic-manager-item {
  min-width: 0;
  border: 1px solid #e8f0cf;
  border-radius: 1rem;
  padding: 0.85rem;
  background: #ffffff;
}

html.dark .dynamic-manager-item {
  border-color: #35563c;
  background: #101a13;
}

.dynamic-manager-item-header strong {
  display: block;
  color: #101a13;
  font-size: 0.9rem;
}

.dynamic-manager-item-header small {
  display: block;
  max-width: 100%;
  margin-top: 0.15rem;
  overflow: hidden;
  color: #68766b;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .dynamic-manager-item-header strong {
  color: #f7f9f4;
}

html.dark .dynamic-manager-item-header small {
  color: #9dae9f;
}

.dynamic-status-pill.is-on {
  background: #dcfce7;
  color: #166534;
}

.dynamic-status-pill.is-off {
  background: #fee2e2;
  color: #991b1b;
}

.dynamic-domain-pill,
.dynamic-device-domain {
  border: 1px solid #dce8a5;
  background: #f3f8d9;
  color: #294c35;
}

html.dark .dynamic-domain-pill,
html.dark .dynamic-device-domain {
  border-color: #355f41;
  background: #1a2b1f;
  color: #cfdf71;
}

.dynamic-domain-pill.is-draft {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

html.dark .dynamic-domain-pill.is-draft {
  border-color: #b45309;
  background: #451a03;
  color: #fcd34d;
}

.dynamic-device-summary {
  margin-top: 0.65rem;
  color: #68766b;
  font-size: 0.7rem;
  line-height: 1.55;
}

html.dark .dynamic-device-summary {
  color: #9dae9f;
}

.dynamic-manager-item .dynamic-manager-controls {
  margin-top: 0.75rem;
}

.dynamic-manager-message {
  min-height: 1.25rem;
  margin: 0.8rem 0 0;
  color: #68766b;
  font-size: 0.75rem;
  font-weight: 800;
}

.dynamic-manager-message.is-success {
  color: #15803d;
}

.dynamic-manager-message.is-error {
  color: #dc2626;
}

.dynamic-form-help {
  margin: -0.25rem 0 0;
  color: #68766b;
  font-size: 0.7rem;
  line-height: 1.5;
}

html.dark .dynamic-form-help {
  color: #9dae9f;
}

.dynamic-empty-state,
.dynamic-room-empty {
  grid-column: 1 / -1;
  border: 1px dashed #cbd9c5;
  border-radius: 1rem;
  padding: 1.25rem;
  color: #68766b;
  text-align: center;
}

.dynamic-room-empty strong {
  display: block;
  color: #35563c;
  font-size: 1rem;
}

.dynamic-room-empty p {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
}

html.dark .dynamic-empty-state,
html.dark .dynamic-room-empty {
  border-color: #506156;
  color: #9dae9f;
}

html.dark .dynamic-room-empty strong {
  color: #e3eadf;
}

.dynamic-room-hero {
  margin-bottom: 1rem;
  padding: clamp(1.15rem, 3vw, 2rem);
}

.dynamic-room-eyebrow {
  margin: 0 0 0.4rem !important;
  color: #294c35 !important;
  font-size: 0.7rem !important;
  font-weight: 900;
  letter-spacing: 0.22em;
}

.dynamic-room-hero h1 {
  margin: 0;
  color: #101a13;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 950;
}

.dynamic-room-additional-section {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.dynamic-room-section-heading {
  margin-bottom: 1rem;
}

.dynamic-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: stretch;
  gap: 1rem;
}

.dynamic-device-card {
  display: flex;
  position: relative;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e8f0cf;
  border-radius: 1.35rem;
  padding: 1rem;
  background: #f7f9f4;
  transition: opacity 160ms ease, transform 160ms ease;
}

.dynamic-device-card.is-busy {
  opacity: 0.7;
}

.dynamic-device-card.is-disabled {
  border-style: dashed;
  opacity: 0.75;
}

.dynamic-device-card.is-unmapped {
  border-style: dashed;
  border-color: #f59e0b;
}

html.dark .dynamic-device-card.is-unmapped {
  border-color: #b45309;
}

html.dark .dynamic-device-card {
  border-color: #35563c;
  background: #142b1c;
}

.dynamic-device-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.dynamic-device-card-title {
  min-width: 0;
}

.dynamic-device-card-title h3 {
  margin: 0;
  color: #101a13;
  font-size: 1.05rem;
  font-weight: 900;
}

.dynamic-device-card-title p {
  margin: 0.2rem 0 0;
  overflow: hidden;
  color: #68766b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .dynamic-device-card-title h3 {
  color: #f7f9f4;
}

html.dark .dynamic-device-card-title p {
  color: #9dae9f;
}

.dynamic-device-current {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  border-radius: 0.9rem;
  padding: 0.8rem;
  background: #ffffff;
}

html.dark .dynamic-device-current {
  background: #101a13;
}

.dynamic-device-current span {
  color: #68766b;
  font-size: 0.72rem;
  font-weight: 800;
}

.dynamic-device-current strong {
  color: #dc2626;
  font-size: 1.05rem;
  font-weight: 950;
  text-align: right;
}

.dynamic-device-current strong.is-on {
  color: #16a34a;
}

.dynamic-device-current strong.is-unavailable {
  color: #68766b;
  font-size: 0.78rem;
}

.dynamic-device-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.dynamic-device-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 0.8rem;
  padding: 0.6rem;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.dynamic-device-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.dynamic-on-button {
  background: #16a34a;
}

.dynamic-off-button {
  background: #dc2626;
}

.dynamic-primary-control {
  background: #294c35;
}

.dynamic-secondary-control {
  background: #68766b;
}

.dynamic-device-settings {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.dynamic-device-range,
.dynamic-device-select {
  border: 1px solid #e3eadf;
  border-radius: 0.85rem;
  padding: 0.7rem;
  background: #ffffff;
}

html.dark .dynamic-device-range,
html.dark .dynamic-device-select {
  border-color: #35563c;
  background: #101a13;
}

.dynamic-device-range input {
  width: 100%;
  accent-color: #294c35;
}

.dynamic-device-message {
  margin-top: auto;
  padding-top: 0.65rem;
  min-height: 1rem;
  margin-bottom: 0;
  color: #68766b;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.dynamic-entity-room-heading {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.dynamic-entity-room-heading h3,
.dynamic-entity-room-card h4 {
  margin: 0;
  color: var(--text);
  font-weight: 900;
}

.dynamic-entity-room-heading p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.dynamic-entity-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  margin-top: 1rem;
}

.dynamic-entity-room-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--soft-bg);
}

.dynamic-entity-room-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dynamic-entity-device-grid {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.dynamic-entity-device-item {
  display: grid;
  min-width: 0;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--card-bg);
}

.dynamic-entity-device-actions {
  margin-top: 0;
}

.dynamic-entity-warning {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid #f59e0b;
  border-radius: 0.85rem;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 800;
}

html.dark .dynamic-entity-warning {
  border-color: #92400e;
  background: rgba(120, 53, 15, 0.2);
  color: #fcd34d;
}

.dynamic-entity-device-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 800;
}

.dynamic-entity-device-grid select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--card-bg);
  color: var(--text);
}

.dynamic-entity-room-save {
  width: 100%;
  margin-top: 1rem;
}

.dynamic-room-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.dashboard-dynamic-room-grid {
  display: contents;
}

.dashboard-dynamic-room-grid.hidden {
  display: none;
}

.dashboard-dynamic-room-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #e8f0cf;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.dashboard-dynamic-room-card.is-disabled {
  border-style: dashed;
  opacity: 0.75;
}

.dashboard-dynamic-room-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dashboard-dynamic-room-heading h3 {
  overflow-wrap: anywhere;
  color: #294c35;
  font-size: 1.125rem;
  font-weight: 800;
}

.dashboard-dynamic-room-badge {
  flex: 0 0 auto;
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.7rem;
  font-weight: 800;
}

.dashboard-dynamic-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

.dashboard-dynamic-device-status {
  min-width: 0;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #f7f9f4;
}

.dashboard-dynamic-device-status span,
.dashboard-dynamic-device-status strong {
  display: block;
  overflow-wrap: anywhere;
}

.dashboard-dynamic-device-status span {
  color: #68766b;
  font-size: 0.875rem;
}

.dashboard-dynamic-device-status strong {
  margin-top: 0.25rem;
  color: #101a13;
  font-size: 1.125rem;
  font-weight: 700;
}

.dashboard-dynamic-device-status strong.is-on {
  color: #15803d;
}

.dashboard-dynamic-device-status strong.is-off {
  color: #dc2626;
}

.dashboard-dynamic-device-status strong.is-unavailable {
  color: #68766b;
}

.dashboard-dynamic-room-empty {
  grid-column: 1 / -1;
  padding: 1rem;
  border: 1px dashed #cbd9c5;
  border-radius: 0.75rem;
  color: #68766b;
  text-align: center;
  font-size: 0.82rem;
}

.dashboard-dynamic-room-link {
  margin-top: auto;
  color: #294c35;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-dynamic-room-link:hover {
  text-decoration: underline;
}

html.dark .dashboard-dynamic-room-link {
  color: #c0d530;
}

html.dark .dashboard-dynamic-room-card {
  border-color: #1b2b20;
  background: #101a13;
}

html.dark .dashboard-dynamic-room-heading h3 {
  color: #c0d530;
}

html.dark .dashboard-dynamic-device-status {
  background: #1b2b20;
}

html.dark .dashboard-dynamic-device-status span {
  color: #9dae9f;
}

html.dark .dashboard-dynamic-device-status strong {
  color: #f7f9f4;
}

html.dark .dashboard-dynamic-device-status strong.is-on {
  color: #4ade80;
}

html.dark .dashboard-dynamic-device-status strong.is-off {
  color: #f87171;
}

html.dark .dashboard-dynamic-device-status strong.is-unavailable {
  color: #9dae9f;
}

.dynamic-room-shortcut {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid #dce8a5;
  border-radius: 1rem;
  padding: 1rem;
  background: #ffffff;
  color: #101a13;
  text-decoration: none;
}

.dynamic-room-shortcut strong {
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-room-shortcut span {
  color: #294c35;
  font-size: 0.72rem;
  font-weight: 800;
}

.dynamic-room-shortcut.is-disabled {
  border-style: dashed;
  opacity: 0.7;
}

html.dark .dynamic-room-shortcut {
  border-color: #35563c;
  background: #142b1c;
  color: #f7f9f4;
}

@media (max-width: 900px) {
  .dynamic-automation-grid {
    grid-template-columns: 1fr;
  }

  .dynamic-manager-grid,
  .dynamic-device-grid,
  .dynamic-entity-room-grid,
  .settings-added-device-list {
    grid-template-columns: 1fr;
  }

  .dynamic-room-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 640px) {
  .dashboard-dynamic-room-card {
    padding: 1.5rem;
  }
}

@media (max-width: 640px) {
  .dynamic-manager-shell,
  .dynamic-room-hero,
  .dynamic-room-additional-section {
    border-radius: 1.3rem;
  }

  .dynamic-manager-heading,
  .dynamic-manager-panel-title,
  .dynamic-room-section-heading {
    flex-direction: column;
    gap: 0.55rem;
  }

  .dynamic-manager-panel {
    padding: 0.75rem;
  }

  .dynamic-form-row,
  .dynamic-device-form,
  .dynamic-manager-fields,
  .dynamic-toggle-grid,
  .dynamic-room-shortcut-grid {
    grid-template-columns: 1fr;
  }

  .room-manager-list {
    grid-template-columns: 1fr;
  }

  .dynamic-manager-controls,
  .dynamic-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dynamic-manager-controls > button,
  .dynamic-form-actions > button {
    width: 100%;
  }

  .dynamic-device-card {
    border-radius: 1rem;
    padding: 0.85rem;
  }
}

/* V1.9.0: final mobile-menu spacing authority. `display: contents` makes
   dynamic room links participate in the same gap as every fixed link and
   prevents an empty wrapper from creating a double gap. */
.navbar-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navbar-mobile-links > .dynamic-navbar-mobile-room-links {
  display: contents;
}

.navbar-mobile-links .nav-mobile-link,
.navbar-mobile-links .navbar-mobile-logout {
  margin: 0 !important;
}

/* =========================================================
   V1.21.0 NETWORK HEALTH
   A status-first Internet Monitor with clearer live health,
   availability, distribution, and responsive history views.
   ========================================================= */
body.monitor-page {
  --network-accent: #68766b;
  --network-accent-soft: rgba(100, 116, 139, 0.12);
  --network-surface: #f7f9f4;
  --network-surface-strong: #ffffff;
  --network-track: #e3eadf;
}

html.dark body.monitor-page {
  --network-surface: #142b1c;
  --network-surface-strong: #17301f;
  --network-track: #35563c;
}

body.monitor-page .network-monitor-layout {
  max-width: 82rem;
  margin-top: clamp(1rem, 2.5vw, 2rem);
}

body.monitor-page .network-overview {
  position: relative;
  overflow: hidden;
}

body.monitor-page .network-overview::before {
  display: none;
}

body.monitor-page .network-overview.is-online {
  --network-accent: #16a34a;
  --network-accent-soft: rgba(22, 163, 74, 0.12);
}

body.monitor-page .network-overview.is-slow {
  --network-accent: #d97706;
  --network-accent-soft: rgba(217, 119, 6, 0.14);
}

body.monitor-page .network-overview.is-offline {
  --network-accent: #dc2626;
  --network-accent-soft: rgba(220, 38, 38, 0.12);
}

body.monitor-page .network-title-row {
  align-items: center;
}

body.monitor-page .network-eyebrow {
  margin-bottom: 0.45rem;
  color: #294c35;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

html.dark body.monitor-page .network-eyebrow {
  color: #c0d530;
}

body.monitor-page .status-pill.is-no-data {
  border-color: #9dae9f;
  background: rgba(100, 116, 139, 0.1);
  color: #68766b;
}

html.dark body.monitor-page .status-pill.is-no-data {
  color: #cbd9c5;
}

body.monitor-page .network-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 1rem;
  margin-top: 1.4rem;
}

body.monitor-page .network-live-card,
body.monitor-page .network-availability-card,
body.monitor-page .network-quick-card,
body.monitor-page .network-distribution-card,
body.monitor-page .network-timeline-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: var(--network-surface);
}

body.monitor-page .network-live-card {
  display: flex;
  min-height: 16.5rem;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.15rem, 2.8vw, 1.75rem);
  background:
    radial-gradient(circle at 88% 18%, var(--network-accent-soft), transparent 42%),
    var(--network-surface);
}

body.monitor-page .network-live-heading,
body.monitor-page .network-live-status,
body.monitor-page .network-section-heading {
  display: flex;
  align-items: center;
}

body.monitor-page .network-live-heading,
body.monitor-page .network-section-heading {
  justify-content: space-between;
  gap: 1rem;
}

body.monitor-page .network-live-status {
  gap: 0.75rem;
}

body.monitor-page .network-pulse {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: #68766b;
}

body.monitor-page .network-pulse.is-online {
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.38);
  animation: network-status-pulse 2s infinite;
}

body.monitor-page .network-pulse.is-slow {
  background: #f59e0b;
}

body.monitor-page .network-pulse.is-offline {
  background: #ef4444;
}

@keyframes network-status-pulse {
  70% {
    box-shadow: 0 0 0 0.6rem rgba(22, 163, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}

body.monitor-page .network-card-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

body.monitor-page .network-status-text {
  margin-top: 0.1rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
}

body.monitor-page .network-checked-time {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: right;
}

body.monitor-page .network-checked-block > span {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
  text-align: right;
}

body.monitor-page .network-checked-block .network-checked-time {
  margin-top: 0.15rem;
}

body.monitor-page .network-latency-block {
  margin-top: 2rem;
}

body.monitor-page .network-current-latency {
  margin-top: 0.2rem;
  color: var(--text);
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
}

body.monitor-page .network-quality-text {
  margin-top: 0.55rem;
  color: var(--network-accent);
  font-size: 0.84rem;
  font-weight: 850;
}

body.monitor-page .network-availability-card {
  display: flex;
  min-height: 16.5rem;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1.15rem, 2.8vw, 1.75rem);
}

body.monitor-page .network-availability-ring {
  --availability-angle: 0deg;
  display: grid;
  width: clamp(8rem, 14vw, 10.5rem);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9999px;
  background: conic-gradient(var(--network-accent) var(--availability-angle), var(--network-track) 0deg);
}

body.monitor-page .network-ring-inner {
  display: grid;
  width: calc(100% - 1.05rem);
  aspect-ratio: 1;
  place-content: center;
  border-radius: 9999px;
  background: var(--network-surface);
  text-align: center;
}

body.monitor-page .network-ring-inner strong {
  color: var(--text);
  font-size: clamp(1.3rem, 2.7vw, 2rem);
  line-height: 1;
  font-weight: 950;
}

body.monitor-page .network-ring-inner span {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

body.monitor-page .network-period-copy {
  min-width: 0;
}

body.monitor-page .network-period-value {
  margin-top: 0.25rem;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 900;
}

body.monitor-page .network-period-copy .operations-subtitle {
  max-width: 15rem;
}

body.monitor-page .network-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

body.monitor-page .network-quick-card {
  padding: 1rem;
}

body.monitor-page .network-quick-card .metric-value {
  font-size: clamp(1rem, 2vw, 1.3rem);
}

body.monitor-page .network-history-panel {
  padding: clamp(1rem, 2.8vw, 1.75rem);
}

body.monitor-page .network-history-heading {
  align-items: flex-end;
  margin-bottom: 1.25rem;
}

body.monitor-page .network-distribution-card,
body.monitor-page .network-timeline-card {
  padding: clamp(1rem, 2.2vw, 1.35rem);
}

body.monitor-page .network-timeline-card {
  margin-top: 0.85rem;
}

body.monitor-page .network-section-heading h3 {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 900;
}

body.monitor-page .network-section-heading > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-align: right;
}

body.monitor-page .network-distribution-bar {
  display: flex;
  height: 0.75rem;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--network-track);
}

body.monitor-page .network-distribution-bar > span {
  display: block;
  height: 100%;
  transition: width 240ms ease;
}

body.monitor-page .network-distribution-bar .online,
body.monitor-page .monitor-legend i.online {
  background: #16a34a;
}

body.monitor-page .network-distribution-bar .slow,
body.monitor-page .monitor-legend i.slow {
  background: #eab308;
}

body.monitor-page .network-distribution-bar .offline,
body.monitor-page .monitor-legend i.offline {
  background: #dc2626;
}

body.monitor-page .network-distribution-bar .no-data,
body.monitor-page .monitor-legend i.no-data {
  background: #68766b;
}

body.monitor-page .network-distribution-legend {
  justify-content: space-between;
  margin: 0.8rem 0 0;
}

body.monitor-page .network-distribution-legend strong {
  color: var(--text);
  font-size: 0.76rem;
}

body.monitor-page .network-timeline-card .monitor-timeline {
  min-height: 8.5rem;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border-radius: 1rem;
  background-color: var(--network-surface-strong) !important;
}

body.monitor-page .network-timeline-card .monitor-bar {
  min-width: 6px;
  border-radius: 9999px;
}

body.monitor-page .network-monitor-message {
  padding-top: 0.25rem;
}

body.monitor-page .range-button {
  background: var(--network-surface);
}

body.monitor-page .range-button:hover {
  border-color: #c0d530;
}

body.monitor-page .range-button:focus-visible {
  outline: 3px solid rgba(41, 76, 53, 0.3);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  body.monitor-page .network-overview-grid {
    grid-template-columns: 1fr;
  }

  body.monitor-page .network-live-card,
  body.monitor-page .network-availability-card {
    min-height: auto;
  }

  body.monitor-page .network-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.monitor-page .network-history-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  body.monitor-page .network-monitor-layout {
    padding-inline: 0.7rem;
  }

  body.monitor-page .network-title-row {
    align-items: flex-start;
  }

  body.monitor-page .network-availability-card {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  body.monitor-page .network-period-copy .operations-subtitle {
    max-width: none;
  }

  body.monitor-page .network-quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.monitor-page .network-quick-card {
    padding: 0.85rem;
  }

  body.monitor-page .network-live-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  body.monitor-page .network-checked-time {
    text-align: left;
  }

  body.monitor-page .network-checked-block > span {
    text-align: left;
  }

  body.monitor-page .network-distribution-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.monitor-page .network-timeline-card .monitor-timeline {
    min-height: 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.monitor-page .network-pulse.is-online {
    animation: none;
  }

  body.monitor-page .network-distribution-bar > span {
    transition: none;
  }
}

/* =========================================================
   V1.30.2 ACCESS DELEGATION + DASHBOARD SURFACE CONSISTENCY
   Final contrast authority for Settings, Rooms, and dark surfaces.
   ========================================================= */

html.dark body.dark\:bg-slate-950,
html.dark body:not(.login-page) .dark\:bg-slate-950 {
  background:
    radial-gradient(circle at 8% 4%, rgba(192, 213, 48, .1), transparent 27rem),
    radial-gradient(circle at 92% 18%, rgba(57, 103, 69, .13), transparent 30rem),
    var(--iv-canvas) !important;
  background-color: var(--iv-canvas) !important;
}

html.dark body:not(.login-page) .dark\:bg-slate-900,
html.dark body:not(.login-page) .bg-slate-900 {
  background: var(--iv-surface) !important;
  background-color: #152118 !important;
}

html.dark body:not(.login-page) .dark\:bg-slate-800,
html.dark body:not(.login-page) .bg-slate-800 {
  background: var(--iv-surface-soft) !important;
  background-color: #1a2a1f !important;
}

html.dark .settings-hub-panel,
html.dark .settings-selected-user-panel,
html.dark .settings-user-picker,
html.dark .rooms-directory-panel,
html.dark .room-config-content,
html.dark .settings-navbar-room-card {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface) !important;
  background-color: #152118 !important;
}

html.dark .settings-user-picker,
html.dark .settings-selected-user-identity,
html.dark .settings-hub-empty {
  border-color: var(--iv-line) !important;
}

.settings-selected-user-role {
  display: inline-flex;
  width: max-content;
  margin-top: .35rem;
  padding: .25rem .5rem;
  border: 1px solid rgba(41, 76, 53, .2);
  border-radius: 999px;
  background: var(--iv-lime-soft);
  color: var(--iv-forest) !important;
  font-size: .6rem;
  font-weight: 900;
}

.settings-user-room-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-user-room-choice {
  grid-template-columns: 1fr;
  align-content: start;
  gap: .7rem;
  min-height: 148px;
  border-color: var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
  cursor: default;
}

.settings-user-room-choice:hover { transform: none; }

.settings-user-room-choice.is-selected {
  border-color: rgba(168, 191, 32, .72) !important;
  background: #f3f8d9 !important;
}

.settings-user-room-choice.is-managed {
  box-shadow: inset 4px 0 0 var(--iv-forest), 0 10px 24px rgba(33, 62, 41, .08);
}

.settings-user-room-copy { min-width: 0; }

.settings-user-room-choice .settings-user-room-copy strong,
html.dark .settings-user-room-choice.is-selected .settings-user-room-copy strong {
  color: #17221a !important;
}

.settings-user-room-choice .settings-user-room-copy small,
html.dark .settings-user-room-choice.is-selected .settings-user-room-copy small {
  color: #59685d !important;
}

html.dark .settings-user-room-choice:not(.is-selected) {
  border-color: var(--iv-line) !important;
  background: #132019 !important;
}

html.dark .settings-user-room-choice:not(.is-selected) .settings-user-room-copy strong {
  color: #f5f8f1 !important;
}

html.dark .settings-user-room-choice:not(.is-selected) .settings-user-room-copy small {
  color: #9dae9f !important;
}

.settings-room-permission-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.settings-room-permission-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  min-width: 0;
  min-height: 58px;
  padding: .6rem;
  border: 1px solid #d5e0d0;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .78);
  color: #17221a;
  cursor: pointer;
}

.settings-room-permission-toggle input,
.settings-user-room-choice .settings-room-permission-toggle input {
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
  accent-color: var(--iv-forest);
}

.settings-room-permission-toggle input:disabled { cursor: not-allowed; }
.settings-room-permission-toggle input:disabled + span { opacity: 1 !important; }
.settings-room-permission-toggle span { min-width: 0; }
.settings-room-permission-toggle strong,
.settings-room-permission-toggle small { display: block; }
.settings-room-permission-toggle strong { color: inherit !important; font-size: .69rem; }
.settings-room-permission-toggle small { margin-top: .16rem; color: #667268 !important; font-size: .56rem; line-height: 1.35; }

.settings-room-permission-toggle.is-view.is-selected {
  border-color: #a8bf20;
  background: #eaf3b9;
  color: #294c35;
}

.settings-room-permission-toggle.is-manage.is-selected {
  border-color: var(--iv-forest);
  background: var(--iv-forest);
  color: #fff;
}

.settings-room-permission-toggle.is-manage.is-selected small { color: #dce8df !important; }

html.dark .settings-room-permission-toggle:not(.is-selected) {
  border-color: #344b38;
  background: #1b2b20;
  color: #e7ede7;
}

html.dark .settings-room-permission-toggle:not(.is-selected) small { color: #9dae9f !important; }
html.dark .settings-room-permission-toggle.is-view.is-selected { color: #294c35; }

.rooms-directory-actions:has(.rooms-directory-settings) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rooms-directory-settings {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid rgba(41, 76, 53, .34) !important;
  border-radius: .9rem;
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest-strong) !important;
  font-weight: 850;
  text-decoration: none;
}

.rooms-directory-settings:hover {
  border-color: var(--iv-lime-strong) !important;
  background: #e8f1ba !important;
}

html.dark .rooms-directory-settings {
  border-color: rgba(192, 213, 48, .45) !important;
  background: rgba(192, 213, 48, .14) !important;
  color: var(--iv-lime) !important;
}

@media (max-width: 760px) {
  .settings-user-room-grid,
  .settings-room-permission-options { grid-template-columns: 1fr; }
  .rooms-directory-actions:has(.rooms-directory-settings) { grid-template-columns: 1fr; }
}

/* =========================================================
   V1.30.1 GREEN PALETTE + MOBILE NAV CONTRAST FIX
   Final authority over legacy blue utilities and old navbar rules.
   ========================================================= */

/* Legacy Tailwind blue utilities become Innovative Village green. */
html body .bg-blue-50 { background-color: var(--iv-lime-soft) !important; }
html body .bg-blue-100,
html body .bg-blue-200 { background-color: #e7efb8 !important; }
html body .bg-blue-400,
html body .bg-blue-500,
html body .bg-blue-600,
html body button.bg-blue-500,
html body button.bg-blue-600,
html body a.bg-blue-600 {
  border-color: #a8bf20 !important;
  background: var(--iv-lime) !important;
  background-color: var(--iv-lime) !important;
  color: #17221a !important;
}

html body .hover\:bg-blue-50:hover { background-color: var(--iv-lime-soft) !important; }
html body .hover\:bg-blue-200:hover,
html body .hover\:bg-blue-600:hover,
html body .hover\:bg-blue-700:hover,
html body .active\:bg-blue-800:active {
  background: #aec424 !important;
  background-color: #aec424 !important;
  color: #17221a !important;
}

html body .text-blue-300,
html body .text-blue-400,
html body .text-blue-500,
html body .text-blue-600,
html body .text-blue-700,
html body .hover\:text-blue-600:hover,
html body .hover\:text-blue-700:hover { color: var(--iv-forest) !important; }

html.dark body .dark\:text-blue-200,
html.dark body .dark\:text-blue-300,
html.dark body .dark\:text-blue-400,
html.dark body .dark\:hover\:text-blue-300:hover,
html.dark body .dark\:hover\:text-blue-400:hover { color: var(--iv-lime) !important; }

html body .border-blue-50,
html body .border-blue-100,
html body .border-blue-200,
html body .border-blue-400,
html body .border-blue-500,
html body .border-blue-700,
html body .hover\:border-blue-400:hover,
html.dark body .dark\:border-blue-400,
html.dark body .dark\:border-blue-400\/30,
html.dark body .dark\:border-blue-700,
html.dark body .dark\:hover\:border-blue-500:hover {
  border-color: rgba(168, 191, 32, .58) !important;
}

html body .divide-blue-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--iv-line) !important;
}

html.dark body .dark\:bg-blue-400,
html.dark body .dark\:bg-blue-500 {
  background-color: var(--iv-lime) !important;
  color: #17221a !important;
}

html.dark body .dark\:bg-blue-400\/20 { background-color: rgba(192, 213, 48, .16) !important; }
html.dark body .dark\:bg-blue-950 { background-color: #1a2b1f !important; }

html body .focus\:border-blue-500:focus { border-color: var(--iv-lime-strong) !important; }
html body .focus\:ring-blue-400:focus,
html body .focus\:ring-blue-500\/15:focus {
  --tw-ring-color: rgba(192, 213, 48, .32) !important;
}

html body .peer:checked ~ .peer-checked\:bg-blue-600 {
  background: var(--iv-lime) !important;
  background-color: var(--iv-lime) !important;
}

/* Mobile navbar always uses high-contrast brand colours, including dark mode. */
html body #mobileMenu,
html.dark body #mobileMenu,
html body .navbar-mobile-panel,
html.dark body .navbar-mobile-panel {
  border-top-color: #cbd9c5 !important;
  background: #eef4e9 !important;
  background-color: #eef4e9 !important;
}

html body #mobileMenu .navbar-mobile-profile,
html.dark body #mobileMenu .navbar-mobile-profile {
  border-color: #365441 !important;
  background: #14291c !important;
  background-color: #14291c !important;
  color: #ffffff !important;
}

html body #mobileMenu #navbarUserNameMobile,
html.dark body #mobileMenu #navbarUserNameMobile {
  color: #ffffff !important;
}

html body #mobileMenu #navbarUserRoleMobile,
html.dark body #mobileMenu #navbarUserRoleMobile {
  color: #c9d8cc !important;
}

html body #mobileMenu .navbar-mobile-links .nav-mobile-link,
html:not(.dark) body #mobileMenu .navbar-mobile-links .nav-mobile-link,
html.dark body #mobileMenu .navbar-mobile-links .nav-mobile-link,
html:not(.dark) body.logs-page #mobileMenu .nav-mobile-link,
html:not(.dark) body.smartoffice-page #mobileMenu .nav-mobile-link {
  border: 1px solid #d5e0d0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17221a !important;
  box-shadow: 0 5px 14px rgba(33, 62, 41, .045) !important;
}

html body #mobileMenu .navbar-mobile-links .nav-mobile-link .nav-mobile-text,
html.dark body #mobileMenu .navbar-mobile-links .nav-mobile-link .nav-mobile-text {
  color: #17221a !important;
}

html body #mobileMenu .navbar-mobile-links .nav-mobile-link:hover,
html body #mobileMenu .navbar-mobile-links .nav-mobile-link:active,
html.dark body #mobileMenu .navbar-mobile-links .nav-mobile-link:hover,
html.dark body #mobileMenu .navbar-mobile-links .nav-mobile-link:active {
  border-color: #b8cb56 !important;
  background: #f3f8d9 !important;
  background-color: #f3f8d9 !important;
  color: #294c35 !important;
}

html body #mobileMenu .nav-mobile-link.is-active,
html:not(.dark) body #mobileMenu .nav-mobile-link.is-active,
html.dark body #mobileMenu .nav-mobile-link.is-active,
html:not(.dark) body.logs-page #mobileMenu .nav-mobile-link.is-active,
html:not(.dark) body.smartoffice-page #mobileMenu .nav-mobile-link.is-active,
html body #mobileMenu .nav-mobile-link.is-active:hover,
html body #mobileMenu .nav-mobile-link.is-active:active {
  border-color: #9fb51f !important;
  background: var(--iv-lime) !important;
  background-color: var(--iv-lime) !important;
  color: #101a13 !important;
  box-shadow: 0 9px 22px rgba(109, 127, 27, .2) !important;
}

html body #mobileMenu .nav-mobile-link.is-active .nav-mobile-text,
html.dark body #mobileMenu .nav-mobile-link.is-active .nav-mobile-text {
  color: #101a13 !important;
}

html body #mobileMenu .navbar-mobile-logout,
html.dark body #mobileMenu .navbar-mobile-logout {
  border-color: #ebc9c9 !important;
  background: #fff8f7 !important;
  color: #a73333 !important;
}

/* Standalone visual preview shipped with the project. */
.iv-preview-page {
  min-height: 100vh;
  padding: 0 0 2rem;
  background:
    radial-gradient(circle at 4% 0%, rgba(192, 213, 48, .18), transparent 25rem),
    radial-gradient(circle at 100% 20%, rgba(41, 76, 53, .1), transparent 32rem),
    #f4f7f1 !important;
}

.iv-preview-nav {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  width: min(100% - 2rem, 78rem);
  min-height: 76px;
  align-items: center;
  gap: 1.25rem;
  margin: 1rem auto 0;
  padding: .6rem .7rem;
  border: 1px solid rgba(95, 119, 74, .18);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 44px rgba(33, 62, 41, .1);
  backdrop-filter: blur(18px) saturate(150%);
}

.iv-preview-brand { display: flex; flex: 0 0 auto; align-items: center; }
.iv-preview-brand img { width: 154px; height: 56px; border-radius: .9rem; object-fit: contain; }

.iv-preview-links {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: .25rem;
  padding: .3rem;
  border-radius: 1rem;
  background: #edf2e9;
}

.iv-preview-links a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: .78rem;
  padding: .55rem .8rem;
  color: #59685d;
  font-size: .78rem;
  font-weight: 800;
}

.iv-preview-links a.is-active { background: #173322; color: #fff; }

.iv-preview-profile {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .65rem;
  padding: .35rem .55rem;
  border: 1px solid #dfe8d9;
  border-radius: 1rem;
}

.iv-preview-profile > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: .75rem;
  background: #c0d530;
  color: #17221a;
  font-size: .72rem;
  font-weight: 950;
}

.iv-preview-profile strong,
.iv-preview-profile small { display: block; }
.iv-preview-profile strong { color: #17221a; font-size: .75rem; }
.iv-preview-profile small { color: #758178; font-size: .6rem; }

.iv-preview-shell { width: min(100% - 2rem, 78rem); margin: 1.25rem auto 0; }

.iv-preview-hero {
  position: relative;
  display: grid;
  min-height: 286px;
  grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr);
  align-items: end;
  gap: 2rem;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.4rem);
  border: 1px solid rgba(108, 135, 75, .22);
  border-radius: 2.25rem;
  background:
    radial-gradient(circle at 95% 0%, rgba(192, 213, 48, .26), transparent 22rem),
    linear-gradient(130deg, #fff, #f7faec 62%, #eef5d8);
  box-shadow: 0 24px 58px rgba(33, 62, 41, .1);
}

.iv-preview-hero::after {
  position: absolute;
  right: -5rem;
  top: -8rem;
  width: 24rem;
  height: 24rem;
  border: 3.2rem solid rgba(192, 213, 48, .12);
  border-radius: 99rem;
  content: "";
}

.iv-preview-eyebrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
  color: #45604c;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.iv-preview-eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: #c0d530; box-shadow: 0 0 0 6px rgba(192, 213, 48, .17); }
.iv-preview-hero h1 { position: relative; z-index: 1; margin: 0; color: #17221a; font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: .98; font-weight: 950; letter-spacing: -.055em; }
.iv-preview-hero h1 span { color: #54705d; }
.iv-preview-hero > div:first-child > p:last-child { position: relative; z-index: 1; max-width: 42rem; margin: 1.25rem 0 0; color: #6b796e; font-size: .92rem; line-height: 1.75; }

.iv-preview-hero-status {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid rgba(118, 146, 82, .22);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 14px 28px rgba(33, 62, 41, .08);
}

.iv-preview-live-dot { width: 12px; height: 12px; border-radius: 50%; background: #15935b; box-shadow: 0 0 0 7px rgba(21, 147, 91, .11); }
.iv-preview-hero-status small,
.iv-preview-hero-status strong { display: block; }
.iv-preview-hero-status small { color: #859087; font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.iv-preview-hero-status strong { margin-top: .16rem; color: #233429; font-size: .76rem; }
.iv-preview-hero-status b { padding: .3rem .5rem; border-radius: 99px; background: #edf7ef; color: #15935b; font-size: .58rem; }

.iv-preview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
.iv-preview-metrics article { display: flex; min-width: 0; align-items: center; gap: .9rem; padding: 1.15rem; border: 1px solid #dfe8d9; border-radius: 1.4rem; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 28px rgba(33, 62, 41, .06); }
.iv-preview-metric-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: .9rem; background: #f3f8d9; color: #294c35; font-weight: 950; }
.iv-preview-metrics small,
.iv-preview-metrics strong,
.iv-preview-metrics p { display: block; margin: 0; }
.iv-preview-metrics small { color: #758178; font-size: .65rem; font-weight: 750; }
.iv-preview-metrics strong { margin-top: .1rem; color: #17221a; font-size: 1.45rem; line-height: 1.1; font-weight: 950; }
.iv-preview-metrics p { margin-top: .15rem; color: #8b958d; font-size: .58rem; }

.iv-preview-content-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .65fr); gap: 1rem; margin-top: 1rem; }
.iv-preview-panel { border: 1px solid #dfe8d9; border-radius: 1.7rem; background: rgba(255, 255, 255, .95); padding: 1.35rem; box-shadow: 0 12px 30px rgba(33, 62, 41, .06); }
.iv-preview-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5ece0; }
.iv-preview-panel-head.compact { align-items: center; }
.iv-preview-panel-head p,
.iv-preview-panel-head h2,
.iv-preview-panel-head span { margin: 0; }
.iv-preview-panel-head p { color: #577060; font-size: .6rem; font-weight: 900; letter-spacing: .13em; }
.iv-preview-panel-head h2 { margin-top: .2rem; color: #17221a; font-size: 1.25rem; font-weight: 950; }
.iv-preview-panel-head div > span { display: block; margin-top: .2rem; color: #7e8980; font-size: .7rem; }
.iv-preview-panel-head button { min-height: 40px; border-radius: .85rem; background: #173322; color: #fff; padding: .55rem .75rem; font-size: .68rem; font-weight: 850; }

.iv-preview-room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
.iv-preview-room-card { position: relative; overflow: hidden; padding: 1.05rem; border: 1px solid #dfe8d9; border-radius: 1.35rem; background: #f8faf6; }
.iv-preview-room-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #c0d530; content: ""; }
.iv-preview-room-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.iv-preview-room-head > span { color: #708077; font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.iv-preview-room-head b { display: flex; align-items: center; gap: .3rem; color: #15935b; font-size: .6rem; }
.iv-preview-room-head b i { width: 6px; height: 6px; border-radius: 50%; background: #15935b; }
.iv-preview-room-card h3 { margin: .85rem 0 0; color: #17221a; font-size: 1.2rem; font-weight: 950; }
.iv-preview-room-card > p { margin: .12rem 0 0; color: #7a867d; font-size: .67rem; }
.iv-preview-room-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .85rem; }
.iv-preview-room-stats span { padding: .65rem; border: 1px solid #e1e9dc; border-radius: .9rem; background: #fff; }
.iv-preview-room-stats small,
.iv-preview-room-stats strong { display: block; }
.iv-preview-room-stats small { color: #849087; font-size: .58rem; }
.iv-preview-room-stats strong { margin-top: .12rem; color: #2b3a2f; font-size: .78rem; }
.iv-preview-device-row { display: flex; gap: .35rem; margin-top: .65rem; overflow: hidden; }
.iv-preview-device-row span { flex: 1 1 0; padding: .45rem .3rem; border-radius: .65rem; background: #eef2eb; color: #78837a; text-align: center; font-size: .55rem; white-space: nowrap; }
.iv-preview-device-row b { color: #2b5238; }
.iv-preview-room-card > a { display: flex; min-height: 40px; align-items: center; justify-content: space-between; margin-top: .75rem; border-radius: .85rem; background: #173322; color: #fff; padding: .55rem .7rem; font-size: .68rem; font-weight: 850; }

.iv-preview-side-column { display: grid; gap: 1rem; }
.iv-preview-status { padding: .35rem .55rem; border-radius: 99px; background: #edf7ef; color: #15935b !important; font-size: .6rem !important; font-weight: 850; }
.iv-preview-time { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin-top: 1rem; padding: .85rem; border-radius: 1rem; background: #f5f8f2; }
.iv-preview-time div:last-child { text-align: right; }
.iv-preview-time small,
.iv-preview-time strong { display: block; }
.iv-preview-time small { color: #849087; font-size: .58rem; }
.iv-preview-time strong { margin-top: .12rem; color: #17221a; font-size: 1.25rem; font-weight: 950; }
.iv-preview-time > b { color: #9eb51e; }
.iv-preview-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .28rem; margin-top: .65rem; }
.iv-preview-days span { display: grid; min-height: 32px; place-items: center; border: 1px solid #e0e7dc; border-radius: .55rem; color: #8c958d; font-size: .55rem; font-weight: 850; }
.iv-preview-days span.is-on { border-color: #b5ca2a; background: #f3f8d9; color: #294c35; }
.iv-preview-schedule-card > a { display: flex; align-items: center; justify-content: space-between; margin-top: .75rem; color: #294c35; font-size: .68rem; font-weight: 850; }

.iv-preview-quick-card > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; margin-top: .55rem; padding: .65rem; border-radius: .9rem; color: #27352b; }
.iv-preview-quick-card > a:hover { background: #f3f8d9; }
.iv-preview-quick-card > a > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: .7rem; background: #edf2e9; color: #294c35; font-weight: 900; }
.iv-preview-quick-card strong,
.iv-preview-quick-card small { display: block; }
.iv-preview-quick-card strong { font-size: .7rem; }
.iv-preview-quick-card small { margin-top: .1rem; color: #859087; font-size: .58rem; }
.iv-preview-quick-card b { color: #9caa9f; font-size: 1.2rem; }

.iv-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem .2rem 0; color: #859087; font-size: .62rem; }
.iv-preview-footer span { color: #486151; font-weight: 950; letter-spacing: .14em; }

@media (max-width: 900px) {
  .iv-preview-nav { width: calc(100% - 1.25rem); margin-top: .65rem; }
  .iv-preview-links { display: none; }
  .iv-preview-profile { margin-left: auto; }
  .iv-preview-shell { width: calc(100% - 1.25rem); }
  .iv-preview-hero { min-height: auto; grid-template-columns: 1fr; align-items: start; }
  .iv-preview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-preview-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .iv-preview-nav { min-height: 64px; }
  .iv-preview-brand img { width: 124px; height: 46px; }
  .iv-preview-profile > div { display: none; }
  .iv-preview-profile { padding: .25rem; border: 0; }
  .iv-preview-hero { padding: 1.35rem; border-radius: 1.6rem; }
  .iv-preview-hero h1 { font-size: 2.45rem; }
  .iv-preview-hero-status { grid-template-columns: auto minmax(0, 1fr); }
  .iv-preview-hero-status > b { display: none; }
  .iv-preview-metrics { grid-template-columns: 1fr; }
  .iv-preview-metrics article { padding: .9rem; }
  .iv-preview-room-grid { grid-template-columns: 1fr; }
  .iv-preview-panel { padding: 1rem; border-radius: 1.35rem; }
  .iv-preview-panel-head button { display: none; }
  .iv-preview-footer { align-items: flex-start; flex-direction: column; }
}

/* V1.22.0: replace the dense status bars with a readable latency line chart. */
body.monitor-page .network-latency-card {
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: var(--network-surface);
}

body.monitor-page .network-chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.monitor-page .network-chart-heading h3 {
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
}

body.monitor-page .network-chart-heading p {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.76rem;
}

body.monitor-page .network-chart-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

body.monitor-page .network-chart-facts > span {
  display: grid;
  min-width: 7.2rem;
  gap: 0.08rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--network-surface-strong);
}

body.monitor-page .network-chart-facts small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 750;
}

body.monitor-page .network-chart-facts strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
}

body.monitor-page .network-latency-chart {
  width: 100%;
  min-height: 17rem;
  margin-top: 1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(168, 191, 32, 0.035), transparent 70%),
    var(--network-surface-strong);
}

body.monitor-page .network-latency-chart svg {
  display: block;
  width: 100%;
  min-width: 46rem;
  height: auto;
  aspect-ratio: 1000 / 280;
}

body.monitor-page .network-chart-grid-line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body.monitor-page .network-chart-y-label,
body.monitor-page .network-threshold-label {
  fill: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

body.monitor-page .network-latency-area {
  fill: url("#networkLatencyArea");
}

body.monitor-page .network-latency-line {
  fill: none;
  stroke: #a8bf20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

body.monitor-page .network-threshold-line {
  stroke: #f59e0b;
  stroke-dasharray: 7 7;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

body.monitor-page .network-threshold-label {
  fill: #d97706;
}

html.dark body.monitor-page .network-threshold-label {
  fill: #fbbf24;
}

body.monitor-page .network-chart-marker {
  vector-effect: non-scaling-stroke;
}

body.monitor-page .network-chart-marker.slow {
  fill: #f59e0b;
  stroke: var(--network-surface-strong);
  stroke-width: 3;
}

body.monitor-page .network-chart-marker.offline {
  fill: #ef4444;
}

body.monitor-page .network-chart-marker.no-data {
  fill: #68766b;
}

body.monitor-page .network-chart-hit-area {
  fill: transparent;
  cursor: pointer;
  outline: none;
}

body.monitor-page .network-chart-hit-area:focus-visible {
  fill: rgba(168, 191, 32, 0.14);
  stroke: #c0d530;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

body.monitor-page .network-chart-empty {
  display: grid;
  min-height: 17rem;
  place-items: center;
  padding: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
}

body.monitor-page .network-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

body.monitor-page .network-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

body.monitor-page .network-chart-legend i {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 9999px;
}

body.monitor-page .network-chart-legend i.latency {
  width: 1.2rem;
  height: 0.18rem;
  border-radius: 9999px;
  background: #a8bf20;
}

body.monitor-page .network-chart-legend i.slow {
  background: #f59e0b;
}

body.monitor-page .network-chart-legend i.offline {
  background: #ef4444;
}

body.monitor-page .network-chart-legend i.no-data {
  background: #68766b;
}

@media (max-width: 760px) {
  body.monitor-page .network-chart-heading {
    flex-direction: column;
  }

  body.monitor-page .network-chart-facts {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.monitor-page .network-chart-facts > span {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  body.monitor-page .network-chart-facts {
    grid-template-columns: 1fr;
  }
}

body.monitor-page .network-chart-tooltip {
  position: fixed;
  z-index: 9999;
  width: max-content;
  max-width: min(19rem, calc(100vw - 1rem));
  padding: 0.8rem 0.9rem;
  border: 1px solid #35563c;
  border-radius: 0.9rem;
  background: #101a13;
  color: #f7f9f4;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

body.monitor-page .network-tooltip-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #35563c;
  font-size: 0.82rem;
}

body.monitor-page .network-tooltip-status i {
  width: 0.6rem;
  height: 0.6rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: #68766b;
}

body.monitor-page .network-chart-tooltip.is-online .network-tooltip-status i {
  background: #22c55e;
}

body.monitor-page .network-chart-tooltip.is-slow .network-tooltip-status i {
  background: #f59e0b;
}

body.monitor-page .network-chart-tooltip.is-offline .network-tooltip-status i {
  background: #ef4444;
}

body.monitor-page .network-chart-tooltip dl {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

body.monitor-page .network-chart-tooltip dl > div {
  display: grid;
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
}

body.monitor-page .network-chart-tooltip dt {
  color: #9dae9f;
  font-size: 0.7rem;
  font-weight: 700;
}

body.monitor-page .network-chart-tooltip dd {
  color: #f7f9f4;
  font-size: 0.76rem;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}
/* Rooms directory */
.rooms-hero-actions { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; flex-wrap:wrap; }
.rooms-manage-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.7rem 1.15rem; border-radius:999px; border:1px solid #22c55e; color:#16a34a; font-weight:800; text-decoration:none; }
.dark .rooms-manage-button { color:#4ade80; }
.rooms-directory-panel { overflow:hidden; }
.rooms-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.25rem; }
.rooms-directory-card { display:flex; min-height:245px; flex-direction:column; justify-content:space-between; gap:1.25rem; padding:1.5rem; border:1px solid #dfe8d9; border-radius:1.6rem; background:linear-gradient(145deg,#fff,#f7f9f4); box-shadow:0 12px 30px rgba(13, 21, 16,.06); }
.dark .rooms-directory-card { border-color:#35563c; background:linear-gradient(145deg,#17301f,#142b1c); box-shadow:0 16px 36px rgba(0, 0, 0,.3); }
.rooms-directory-card-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.rooms-directory-icon { display:grid; width:50px; height:50px; place-items:center; border-radius:16px; background:#e8f0cf; color:#294c35; font-size:1.7rem; font-weight:900; }
.dark .rooms-directory-icon { background:#355f41; color:#c0d530; }
.rooms-directory-status { border:1px solid #86efac; border-radius:999px; padding:.35rem .7rem; color:#15803d; font-size:.72rem; font-weight:800; }
.dark .rooms-directory-status { border-color:#166534; color:#4ade80; }
.rooms-directory-type { margin:0 0 .35rem; color:#68766b; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.rooms-directory-card h2 { margin:0; color:#101a13; font-size:1.65rem; font-weight:900; overflow-wrap:anywhere; }
.dark .rooms-directory-card h2 { color:#f7f9f4; }
.rooms-directory-enter { display:flex; align-items:center; justify-content:space-between; width:100%; padding:.85rem 1rem; border-radius:1rem; background:#294c35; color:#fff; font-weight:800; text-decoration:none; transition:transform .18s ease,background .18s ease; }
.rooms-directory-enter:hover { background:#294c35; transform:translateY(-1px); }
.rooms-directory-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.65rem; }
.rooms-directory-config { display:inline-flex; min-width:132px; align-items:center; justify-content:space-between; gap:.7rem; padding:.82rem .9rem; border:1px solid #cfdf71; border-radius:1rem; background:#f3f8d9; color:#294c35; font-weight:800; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.rooms-directory-config:hover { border-color:#294c35; background:#e8f0cf; transform:translateY(-1px); }
.rooms-directory-config.is-readonly { border-color:#cbd9c5; background:#f7f9f4; color:#506156; }
.dark .rooms-directory-config { border-color:#294c35; background:#1a2b1f; color:#cfdf71; }
.dark .rooms-directory-config:hover { border-color:#c0d530; background:#355f41; }
.dark .rooms-directory-config.is-readonly { border-color:#506156; background:#101a13; color:#cbd9c5; }
@media (max-width:900px) { .rooms-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .rooms-hero-actions { justify-content:flex-start; } .rooms-directory-grid { grid-template-columns:1fr; } .rooms-directory-card { min-height:215px; } .rooms-directory-actions { grid-template-columns:1fr; } .rooms-directory-config { width:100%; } }
.logs-room-overview { margin:1.25rem 0; padding:1.15rem; border:1px solid #dfe8d9; border-radius:1.25rem; background:#f7f9f4; }
.dark .logs-room-overview { border-color:#35563c; background:#17301f; }
.logs-room-overview h2 { margin:0; color:#101a13; font-size:1rem; font-weight:900; }
.dark .logs-room-overview h2 { color:#f7f9f4; }
.logs-room-overview p { margin:.2rem 0 0; color:#68766b; font-size:.8rem; }
.logs-room-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }
.logs-room-summary-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.15rem .5rem; padding:.8rem; border:1px solid #cbd9c5; border-radius:1rem; background:#fff; color:#35563c; text-align:left; }
.dark .logs-room-summary-card { border-color:#506156; background:#142b1c; color:#e3eadf; }
.logs-room-summary-card span { overflow:hidden; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.logs-room-summary-card strong { grid-row:span 2; color:#294c35; font-size:1.35rem; }
.logs-room-summary-card small { color:#9dae9f; }
.logs-room-summary-card.is-selected { border-color:#294c35; box-shadow:0 0 0 2px rgba(41, 76, 53,.15); }
@media (max-width:900px) { .logs-room-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .logs-room-summary-grid { grid-template-columns:1fr; } }
.schedule-overview-legend { display:flex; gap:1rem; margin-top:1rem; color:#68766b; font-size:.78rem; }
.schedule-overview-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.schedule-overview-legend i { width:.65rem; height:.65rem; border-radius:999px; background:#9dae9f; }
.schedule-overview-legend i.is-active { background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.schedule-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.15rem; }
.schedule-overview-card { position:relative; display:flex; flex-direction:column; gap:1.1rem; padding:1.35rem; border:1px solid #cbd9c5; border-radius:1.5rem; background:#fff; box-shadow:0 10px 26px rgba(13, 21, 16,.05); overflow:hidden; }
.dark .schedule-overview-card { border-color:#35563c; background:#17301f; box-shadow:0 14px 30px rgba(0, 0, 0,.28); }
.schedule-overview-card::before { display:none; content:none; }
.schedule-overview-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.schedule-overview-kicker { margin:0 0 .25rem; color:#68766b; font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.schedule-overview-card h3 { margin:0; color:#101a13; font-size:1.25rem; font-weight:900; }
.dark .schedule-overview-card h3 { color:#f7f9f4; }
.schedule-overview-status { flex:none; padding:.35rem .65rem; border:1px solid #cbd9c5; border-radius:999px; color:#68766b; font-size:.7rem; font-weight:800; }
.schedule-overview-card.is-active .schedule-overview-status { border-color:#86efac; color:#15803d; background:#f0fdf4; }
.dark .schedule-overview-card.is-active .schedule-overview-status { border-color:#166534; color:#4ade80; background:#052e16; }
.schedule-overview-time { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:.75rem; padding:1rem; border-radius:1rem; background:#f3f7ef; }
.dark .schedule-overview-time { background:#101a13; }
.schedule-overview-time div { display:flex; flex-direction:column; }
.schedule-overview-time div:last-child { text-align:right; }
.schedule-overview-time small { color:#68766b; font-size:.72rem; font-weight:700; }
.schedule-overview-time strong { color:#101a13; font-size:1.55rem; font-weight:900; }
.dark .schedule-overview-time strong { color:#f7f9f4; }
.schedule-overview-time > span { color:#a8bf20; font-size:1.3rem; }
.schedule-overview-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem; }
.schedule-overview-days span { display:grid; min-height:34px; place-items:center; border:1px solid #dfe8d9; border-radius:.65rem; color:#9dae9f; font-size:.7rem; font-weight:800; }
.dark .schedule-overview-days span { border-color:#35563c; }
.schedule-overview-days span.is-on { border-color:#cfdf71; background:#f3f8d9; color:#294c35; }
.dark .schedule-overview-days span.is-on { border-color:#294c35; background:#1a2b1f; color:#c0d530; }
.schedule-overview-footer { display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:#68766b; font-size:.72rem; }
.schedule-overview-edit { display:flex; justify-content:center; padding:.7rem; border-radius:.85rem; background:#294c35; color:#fff; font-size:.8rem; font-weight:800; text-decoration:none; }
@media (max-width:760px) { .schedule-overview-grid { grid-template-columns:1fr; } }

/* Schedule editor cards mirror the compact room summaries while keeping every field editable. */
.schedule-editor-card {
  gap: 1.05rem;
  padding: 1.35rem;
  border-color: #cbd9c5;
  background: #fff;
  box-shadow: 0 10px 26px rgba(13, 21, 16, .05);
}
.dark .schedule-editor-card {
  border-color: #35563c;
  background: #17301f;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.schedule-editor-identity .schedule-overview-kicker { margin-bottom: .25rem; }
.schedule-editor-identity .operations-subtitle { margin-top: .2rem; }
.schedule-editor-card .schedule-form-grid {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: .8rem;
  margin-top: 0;
  padding: 1rem;
  border-radius: 1rem;
  background: #f3f7ef;
}
.dark .schedule-editor-card .schedule-form-grid { background: #101a13; }
.schedule-editor-card .schedule-field:last-child { text-align: right; }
.schedule-editor-card .schedule-field input {
  min-height: 48px;
  padding: .25rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #101a13;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-weight: 900;
}
.dark .schedule-editor-card .schedule-field input { color: #f7f9f4; }
.schedule-editor-card .schedule-field:last-child input { text-align: right; }
.schedule-editor-card .schedule-field input:focus-visible {
  outline: 2px solid #a8bf20;
  outline-offset: 4px;
}
.schedule-editor-time-arrow {
  align-self: center;
  margin-top: 1.35rem;
  color: #a8bf20;
  font-size: 1.4rem;
  line-height: 1;
}
.schedule-editor-card .schedule-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .45rem;
  margin-top: 0;
}
.schedule-editor-card .schedule-day {
  position: relative;
  justify-content: center;
  min-width: 0;
  padding: .55rem .35rem;
  background: transparent;
  color: #68766b;
  cursor: pointer;
  overflow: hidden;
}
.schedule-editor-card .schedule-day input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.schedule-editor-card .schedule-day:has(input:checked) {
  border-color: #c0d530;
  background: #f3f8d9;
  color: #294c35;
}
.dark .schedule-editor-card .schedule-day {
  border-color: #35563c;
  color: #9dae9f;
}
.dark .schedule-editor-card .schedule-day:has(input:checked) {
  border-color: #294c35;
  background: #1a2b1f;
  color: #c0d530;
}
.schedule-editor-card .schedule-day:has(input:focus-visible) {
  outline: 3px solid rgba(168, 191, 32, .35);
  outline-offset: 2px;
}
.schedule-editor-card .schedule-day:has(input:disabled) { cursor: not-allowed; opacity: .58; }

/* Per-room holiday summaries on Schedules. Holidays are edited inside each room's Settings page. */
.room-holiday-overview-card { gap: 1rem; }
.room-holiday-overview-list { display: grid; gap: .6rem; }
.room-holiday-overview-item {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  min-height: 54px;
  padding: .75rem .85rem;
  border: 1px solid #dfe8d9;
  border-radius: .9rem;
  background: #f3f7ef;
}
.dark .room-holiday-overview-item { border-color: #35563c; background: #101a13; }
.room-holiday-overview-item strong { color: #101a13; font-size: .88rem; font-weight: 900; }
.dark .room-holiday-overview-item strong { color: #f7f9f4; }
.room-holiday-overview-item span { min-width: 0; overflow: hidden; color: #68766b; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.schedule-overview-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  border: 1px dashed #cbd9c5;
  border-radius: 1.25rem;
  color: #68766b;
  text-align: center;
}
.dark .schedule-overview-empty { border-color: #35563c; color: #9dae9f; }
@media (max-width: 560px) {
  .schedule-editor-card { padding: 1rem; }
  .schedule-editor-card .schedule-form-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: .85rem; }
  .schedule-editor-card .schedule-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .room-holiday-overview-item { grid-template-columns: 1fr; gap: .2rem; }
}

/* Member room access */
.system-member-room-help {
  margin:.2rem 0 .7rem;
  color:#68766b;
  font-size:.75rem;
  line-height:1.55;
}
.system-member-room-choices {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.system-member-room-choice {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:42px;
  padding:.55rem .8rem;
  border:1px solid #cbd9c5;
  border-radius:.9rem;
  background:#f7f9f4;
  color:#35563c;
  font-size:.78rem;
  font-weight:750;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.system-member-room-choice:hover {
  border-color:#c0d530;
  background:#f3f8d9;
  transform:translateY(-1px);
}
.system-member-room-choice:has(input:checked) {
  border-color:#a8bf20;
  background:#e8f0cf;
  color:#294c35;
}
.system-member-room-choice input {
  width:1rem;
  height:1rem;
  accent-color:#294c35;
}
.dark .system-member-room-help { color:#9dae9f; }
.dark .system-member-room-choice {
  border-color:#35563c;
  background:#101a13;
  color:#cbd9c5;
}
.dark .system-member-room-choice:hover {
  border-color:#a8bf20;
  background:#1a2b1f;
}
.dark .system-member-room-choice:has(input:checked) {
  border-color:#c0d530;
  background:#355f41;
  color:#dce8a5;
}

/* Per-room configuration */
.room-config-hero-top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; }
.room-config-back { display:inline-flex; align-items:center; min-height:40px; padding:.55rem .85rem; border:1px solid #cbd9c5; border-radius:999px; color:#506156; font-size:.78rem; font-weight:800; text-decoration:none; }
.room-config-back:hover { border-color:#c0d530; color:#294c35; background:#f3f8d9; }
.dark .room-config-back { border-color:#35563c; color:#cbd9c5; }
.dark .room-config-back:hover { border-color:#a8bf20; color:#cfdf71; background:#1a2b1f; }
.room-config-mode .settings-added-device-list { max-height:none; }
.room-config-mode .dynamic-device-form > label:has(#dynamicDeviceRoom) { opacity:.78; }
.room-holiday-section { overflow:hidden; }
.room-holiday-form { display:grid; grid-template-columns:minmax(180px,.75fr) minmax(240px,1.5fr) auto; align-items:end; gap:.75rem; margin-top:1.1rem; }
.room-holiday-form label { display:grid; gap:.4rem; color:#68766b; font-size:.76rem; font-weight:800; }
.room-holiday-form input { min-height:46px; width:100%; padding:.75rem .85rem; border:1px solid #cbd9c5; border-radius:.9rem; background:#fff; color:#101a13; }
.dark .room-holiday-form input { border-color:#35563c; background:#101a13; color:#f7f9f4; }
.room-holiday-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin:1rem 0 0; padding:0; list-style:none; }
.room-holiday-list > li { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:64px; padding:.75rem .9rem; border:1px solid #dfe8d9; border-radius:1rem; background:#f7f9f4; }
.dark .room-holiday-list > li { border-color:#35563c; background:#101a13; }
.room-holiday-list .delete-holiday { flex:none; }
.room-holiday-empty { grid-column:1/-1; justify-content:center!important; color:#9dae9f; text-align:center; }
@media (max-width:760px) { .room-config-hero-top { align-items:flex-start; } .room-holiday-form { grid-template-columns:1fr; } .room-holiday-list { grid-template-columns:1fr; } }

/* Per-user, per-room permissions */
.system-member-room-permissions { display:grid; gap:.55rem; }
.system-member-room-permission-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(135px,auto) minmax(135px,auto); align-items:center; gap:.55rem; padding:.55rem; border:1px solid #dfe8d9; border-radius:1rem; background:#f7f9f4; }
.system-member-room-permission-row > strong { min-width:0; overflow:hidden; color:#35563c; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.system-member-room-choice.is-compact { min-height:36px; justify-content:center; padding:.4rem .6rem; background:#fff; }
.system-member-room-choice:has(input:disabled) { opacity:.48; cursor:not-allowed; }
.dark .system-member-room-permission-row { border-color:#35563c; background:#101a13; }
.dark .system-member-room-permission-row > strong { color:#e3eadf; }
.dark .system-member-room-choice.is-compact { background:#142b1c; }
@media (max-width:680px) { .system-member-room-permission-row { grid-template-columns:1fr; } .system-member-room-choice.is-compact { justify-content:flex-start; } }

/* =========================================================
   V1.29.0 ROOM CONFIG WORKFLOW
   One room per page, compact gear actions, progressive setup,
   and a calmer member-management layout.
   ========================================================= */
html.has-room-config-scope [data-room-config-section] {
  display: none !important;
}

html.has-room-config-scope [data-room-config-section].room-config-current {
  display: block !important;
}

/* =========================================================
   V1.29.1 ROOM CONFIG HARD SCOPE
   A room configuration page must never display controls from
   another room. This rule intentionally overrides the global
   .hidden styling used by other UI components.
   ========================================================= */
html.has-room-config-scope [data-room-scope-hidden="true"] {
  display: none !important;
}

/* Fixed built-in schedules/entities are hidden only when the scope filter marks
   them as belonging to another room. */
html.has-room-config-scope .room-config-mode [data-zone][data-room-scope-hidden="true"],
html.has-room-config-scope .room-config-mode [data-room-entity-section][data-room-scope-hidden="true"] {
  display: none !important;
}

.rooms-directory-card {
  position: relative;
}

.rooms-directory-card-head {
  justify-content: flex-start;
  padding-right: 3.6rem;
}

.rooms-directory-config-icon {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #cfdf71;
  border-radius: 14px;
  background: #f3f8d9;
  color: #294c35;
  text-decoration: none;
  box-shadow: 0 7px 18px rgba(41, 76, 53, 0.12);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.rooms-directory-config-icon svg,
.settings-room-card-icon svg,
.settings-room-card > a svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rooms-directory-config-icon:hover {
  border-color: #294c35;
  background: #e8f0cf;
  box-shadow: 0 10px 24px rgba(41, 76, 53, 0.2);
  transform: translateY(-2px) rotate(8deg);
}

.rooms-directory-config-icon.is-readonly {
  border-color: #cbd9c5;
  background: #f7f9f4;
  color: #68766b;
  box-shadow: none;
}

.dark .rooms-directory-config-icon {
  border-color: #294c35;
  background: #1a2b1f;
  color: #cfdf71;
}

.dark .rooms-directory-config-icon.is-readonly {
  border-color: #506156;
  background: #132019;
  color: #cbd9c5;
}

.rooms-directory-actions {
  grid-template-columns: 1fr;
}

.settings-room-directory {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  overflow: hidden;
}

.settings-room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.settings-room-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid #dfe8d9;
  border-radius: 1.35rem;
  background: #f7f9f4;
  box-shadow: 0 10px 26px rgba(13, 21, 16, .05);
}

.dark .settings-room-card {
  border-color: #35563c;
  background: #17301f;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}

.settings-room-card-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: #e8f0cf;
  color: #294c35;
}

.dark .settings-room-card-icon {
  background: #355f41;
  color: #cfdf71;
}

.settings-room-card-copy {
  min-width: 0;
}

.settings-room-card-copy p {
  margin: 0 0 .2rem;
  color: #68766b;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.settings-room-card-copy h3 {
  margin: 0;
  overflow: hidden;
  color: #101a13;
  font-size: 1.2rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .settings-room-card-copy h3 {
  color: #f7f9f4;
}

.settings-room-card-copy > span {
  display: inline-block;
  margin-top: .35rem;
  color: #68766b;
  font-size: .72rem;
  font-weight: 750;
}

.settings-room-card > a {
  grid-column: 1 / -1;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .65rem .8rem;
  border-radius: .9rem;
  background: #294c35;
  color: #fff;
  font-size: .78rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.settings-room-card > a svg {
  width: 18px;
  height: 18px;
}

.settings-room-card > a:hover {
  background: #294c35;
  transform: translateY(-1px);
}

.settings-room-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  border: 1px dashed #cbd9c5;
  border-radius: 1.2rem;
  color: #68766b;
  text-align: center;
}

.settings-room-empty.is-error {
  border-color: #fecaca;
  color: #dc2626;
}

.room-config-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.room-config-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.room-config-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  padding: .85rem;
  border: 1px solid #dfe8d9;
  border-radius: 1.25rem;
  background: #fff;
}

.dark .room-config-progress {
  border-color: #35563c;
  background: #101a13;
}

.room-config-progress-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
  padding: .65rem .7rem;
  border-radius: .9rem;
  background: #f3f7ef;
  color: #68766b;
}

.dark .room-config-progress-item {
  background: #1b2b20;
  color: #9dae9f;
}

.room-config-progress-item > span {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: #cbd9c5;
  color: #506156;
  font-size: .7rem;
  font-weight: 900;
}

.room-config-progress-item > strong {
  min-width: 0;
  overflow: hidden;
  font-size: .73rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-config-progress-item.is-current {
  background: #f3f8d9;
  color: #294c35;
}

.room-config-progress-item.is-current > span {
  background: #294c35;
  color: #fff;
}

.room-config-progress-item.is-done {
  background: #ecfdf5;
  color: #047857;
}

.room-config-progress-item.is-done > span {
  background: #10b981;
  color: #fff;
}

.dark .room-config-progress-item.is-current {
  background: #1a2b1f;
  color: #dce8a5;
}

.dark .room-config-progress-item.is-done {
  background: #052e16;
  color: #86efac;
}

.room-config-stage,
.room-config-fixed-stage {
  position: relative;
  min-width: 0;
  animation: room-config-stage-in .24s ease both;
}

.room-config-stage.workflow-collapsed,
.room-config-fixed-stage.workflow-collapsed,
[data-fixed-automation-select].workflow-collapsed,
[data-fixed-automation-rules].workflow-collapsed,
[data-fixed-automation-logic].workflow-collapsed {
  display: none !important;
}

@keyframes room-config-stage-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.room-config-stage-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .9rem;
  color: #294c35;
  font-size: .78rem;
  font-weight: 900;
}

.room-config-stage-label > span {
  display: grid;
  min-width: 29px;
  height: 29px;
  padding: 0 .35rem;
  place-items: center;
  border-radius: 999px;
  background: #294c35;
  color: #fff;
  font-size: .68rem;
}

.room-config-fixed-stage > .app-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.room-config-fixed-stage [data-fixed-automation-select],
.room-config-fixed-stage [data-fixed-automation-rules] {
  padding: 1.1rem !important;
  border: 1px solid #dfe8d9 !important;
  border-radius: 1.25rem !important;
  background: #f7f9f4 !important;
}

.dark .room-config-fixed-stage [data-fixed-automation-select],
.dark .room-config-fixed-stage [data-fixed-automation-rules] {
  border-color: #35563c !important;
  background: #142b1c !important;
}

.room-config-mode .room-config-room-field {
  display: none !important;
}

.room-config-mode #roomScheduleStage .schedule-grid,
.room-config-mode #roomAutomationStage .dynamic-automation-grid {
  grid-template-columns: 1fr;
}

.room-config-mode #dynamicScheduleCards {
  display: contents;
}

.room-config-mode #roomAutomationStage .dynamic-automation-card {
  background: #fff;
}

.dark .room-config-mode #roomAutomationStage .dynamic-automation-card {
  background: #17301f;
}

.room-config-mode .dynamic-automation-rule.workflow-rule-hidden {
  display: none !important;
}

.room-config-mode .dynamic-automation-divider,
.room-config-mode .dynamic-automation-delay-heading {
  display: none;
}

.room-config-mode .dynamic-automation-card:has([data-automation-device]:checked) .dynamic-automation-divider,
.room-config-mode .dynamic-automation-card:has([data-automation-device]:checked) .dynamic-automation-delay-heading {
  display: block;
}

.room-config-mode .dynamic-entity-room-heading h3 {
  font-size: 1rem;
}

.room-config-is-readonly .room-config-stage,
.room-config-is-readonly .room-config-fixed-stage {
  border-color: #cbd9c5;
}

@media (max-width: 900px) {
  .settings-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-config-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .settings-room-grid,
  .room-config-progress {
    grid-template-columns: 1fr;
  }

  .room-config-progress-item > strong {
    white-space: normal;
  }

  .rooms-directory-config-icon {
    top: 1rem;
    right: 1rem;
  }
}

/* =========================================================
   V1.39.1 ON-DEMAND ROOM ARRANGE MODE
   ========================================================= */

body[data-generic-room="true"] .dynamic-room-hero {
  position: relative;
  padding-right: clamp(4.75rem, 8vw, 6rem);
}

.dynamic-room-arrange-button {
  position: absolute;
  z-index: 3;
  top: clamp(1rem, 2.4vw, 1.55rem);
  right: clamp(1rem, 2.4vw, 1.55rem);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid #9bab9e;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #294c35;
  box-shadow: 0 7px 18px rgba(22, 50, 32, .12);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dynamic-room-arrange-button.hidden {
  display: none;
}

.dynamic-room-arrange-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dynamic-room-arrange-button:hover {
  border-color: #8fa51c;
  background: #f2f7d8;
  box-shadow: 0 9px 22px rgba(79, 101, 24, .18);
  transform: translateY(-1px) rotate(8deg);
}

.dynamic-room-arrange-button:focus-visible {
  outline: 3px solid rgba(192, 213, 48, .66);
  outline-offset: 3px;
}

.dynamic-room-arrange-button.is-active {
  border-color: #91a918;
  background: var(--iv-lime);
  color: #173d26;
  box-shadow: 0 0 0 5px rgba(192, 213, 48, .16), 0 9px 22px rgba(79, 101, 24, .2);
}

.dynamic-room-arrange-hint {
  margin: -.45rem 0 1rem;
  padding: .72rem 1rem;
  border: 1px dashed #91a918;
  border-radius: 1rem;
  background: #f4f8dd;
  color: #35502c;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.dynamic-room-arrange-hint.hidden {
  display: none;
}

/* The compact pair sits at the far right and appears only while editing. */
.dynamic-device-order-controls {
  grid-template-columns: repeat(2, 36px);
  grid-template-rows: 36px;
  gap: .35rem;
}

.dynamic-device-grid:not(.is-arrange-mode) .dynamic-device-order-controls {
  display: none;
}

.dynamic-device-shell.is-arrange-mode {
  position: relative;
  cursor: grab;
  opacity: 1;
  user-select: none;
}

.dynamic-device-shell.is-arrange-mode:active {
  cursor: grabbing;
}

.dynamic-device-shell.is-arrange-mode .dynamic-device-control-row {
  border-color: #a5bd22;
  background: #fbfdeb;
  box-shadow: 0 0 0 4px rgba(192, 213, 48, .1), 0 8px 22px rgba(22, 50, 32, .09);
}

.dynamic-device-shell.is-arrange-mode .dynamic-device-actions,
.dynamic-device-shell.is-arrange-mode > .dynamic-device-settings {
  display: none !important;
}

.dynamic-device-shell.is-dragging {
  opacity: .42;
  transform: scale(.99);
}

.dynamic-device-shell.is-drop-before::before,
.dynamic-device-shell.is-drop-after::after {
  position: absolute;
  z-index: 5;
  right: 1rem;
  left: 1rem;
  height: 5px;
  border-radius: 999px;
  background: var(--iv-lime);
  box-shadow: 0 0 0 3px rgba(192, 213, 48, .18);
  content: "";
}

.dynamic-device-shell.is-drop-before::before {
  top: -.48rem;
}

.dynamic-device-shell.is-drop-after::after {
  bottom: -.48rem;
}

.dynamic-device-grid.is-reordering .dynamic-device-shell {
  cursor: progress;
}

html.dark .dynamic-room-arrange-button {
  border-color: #53705a;
  background: #11251a;
  color: #d8e765;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
}

html.dark .dynamic-room-arrange-button:hover,
html.dark .dynamic-room-arrange-button.is-active {
  border-color: #d1e255;
  background: var(--iv-lime);
  color: #112719;
}

html.dark .dynamic-room-arrange-hint {
  border-color: #a9c329;
  background: #1c3322;
  color: #dce8d9;
}

html.dark .dynamic-device-shell.is-arrange-mode .dynamic-device-control-row {
  border-color: #a9c329;
  background: #173020;
  box-shadow: 0 0 0 4px rgba(192, 213, 48, .09), 0 10px 24px rgba(0, 0, 0, .22);
}

@media (max-width: 600px) {
  body[data-generic-room="true"] .dynamic-room-hero {
    padding-right: 4.15rem;
  }

  .dynamic-room-arrange-button {
    width: 42px;
    height: 42px;
  }

  .dynamic-room-arrange-button svg {
    width: 21px;
    height: 21px;
  }

  .dynamic-room-arrange-hint {
    padding: .65rem .78rem;
    font-size: .69rem;
  }

  .dynamic-device-order-controls {
    grid-template-columns: repeat(2, 31px);
    grid-template-rows: 31px;
  }
}

/* =========================================================
   V1.29.0 SYSTEM MEMBERS COMPACT WORKFLOW
   ========================================================= */
.system-member-create-disclosure {
  margin: 0 0 1rem;
  overflow: hidden;
  border: 1px solid #dce8a5;
  border-radius: 1.15rem;
  background: #f7faf2;
}

.dark .system-member-create-disclosure {
  border-color: #35563c;
  background: #142b1c;
}

.system-member-create-disclosure > summary,
.system-member-details > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  list-style: none;
}

.system-member-create-disclosure > summary {
  min-height: 70px;
  padding: .8rem 1rem;
}

.system-member-create-disclosure > summary::-webkit-details-marker,
.system-member-details > summary::-webkit-details-marker {
  display: none;
}

.system-member-create-disclosure > summary strong,
.system-member-details > summary strong {
  display: block;
  color: #101a13;
  font-size: .86rem;
  font-weight: 900;
}

.system-member-create-disclosure > summary small,
.system-member-details > summary small {
  display: block;
  margin-top: .12rem;
  color: #68766b;
  font-size: .7rem;
  line-height: 1.45;
}

.dark .system-member-create-disclosure > summary strong,
.dark .system-member-details > summary strong {
  color: #f7f9f4;
}

.dark .system-member-create-disclosure > summary small,
.dark .system-member-details > summary small {
  color: #9dae9f;
}

.system-member-create-icon,
.system-member-details-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: .75rem;
  background: #e8f0cf;
  color: #294c35;
  font-size: 1.15rem;
  font-weight: 900;
}

.dark .system-member-create-icon,
.dark .system-member-details-icon {
  background: rgba(41, 76, 53, .22);
  color: #cfdf71;
}

.system-member-disclosure-arrow {
  color: #68766b;
  font-size: 1.15rem;
  font-weight: 900;
  transition: transform .18s ease;
}

details[open] > summary .system-member-disclosure-arrow {
  transform: rotate(180deg);
}

.system-member-create-disclosure .system-member-create-panel {
  margin: 0;
  border: 0;
  border-top: 1px solid #e8f0cf;
  border-radius: 0;
  background: #f3f8d9;
}

.dark .system-member-create-disclosure .system-member-create-panel {
  border-top-color: #35563c;
  background: #17301f;
}

.system-members-role-filter {
  display: flex;
  flex: 0 1 13rem;
  min-width: 10rem;
  flex-direction: column;
  gap: .25rem;
  color: #68766b;
  font-size: .65rem;
  font-weight: 800;
}

.system-members-role-filter select {
  width: 100%;
  min-height: 46px;
  padding: .65rem 2rem .65rem .75rem;
  border: 1px solid #cbd9c5;
  border-radius: .9rem;
  outline: none;
  background: #f7f9f4;
  color: #101a13;
  font-size: .78rem;
  font-weight: 800;
}

.dark .system-members-role-filter {
  color: #9dae9f;
}

.dark .system-members-role-filter select {
  border-color: #35563c;
  background: #142b1c;
  color: #f7f9f4;
}

.system-member-room-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .8rem;
}

.system-member-room-summary-label {
  margin-right: .1rem;
  color: #68766b;
  font-size: .68rem;
  font-weight: 800;
}

.system-member-room-chip,
.system-member-room-state {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 900;
}

.system-member-room-chip.is-access,
.system-member-room-state.is-access {
  background: #dcfce7;
  color: #15803d;
}

.system-member-room-chip.is-manage,
.system-member-room-state.is-manage {
  background: #e8f0cf;
  color: #294c35;
}

.system-member-room-chip.is-empty,
.system-member-room-state.is-empty {
  background: #e3eadf;
  color: #68766b;
}

.dark .system-member-room-chip.is-access,
.dark .system-member-room-state.is-access {
  background: rgba(20, 83, 45, .5);
  color: #86efac;
}

.dark .system-member-room-chip.is-manage,
.dark .system-member-room-state.is-manage {
  background: rgba(30, 64, 175, .5);
  color: #dce8a5;
}

.dark .system-member-room-chip.is-empty,
.dark .system-member-room-state.is-empty {
  background: #35563c;
  color: #cbd9c5;
}

.system-member-details {
  margin-top: .85rem;
  overflow: hidden;
  border: 1px solid #dfe8d9;
  border-radius: .95rem;
  background: rgba(255, 255, 255, .68);
}

.dark .system-member-details {
  border-color: #35563c;
  background: rgba(13, 21, 16, .48);
}

.system-member-details > summary {
  min-height: 58px;
  padding: .65rem .75rem;
}

.system-member-details[open] > summary {
  border-bottom: 1px solid #dfe8d9;
  background: #f3f8d9;
}

.dark .system-member-details[open] > summary {
  border-bottom-color: #35563c;
  background: rgba(30, 64, 175, .16);
}

.system-member-details-icon {
  width: 30px;
  height: 30px;
  border-radius: .65rem;
  font-size: .9rem;
}

.system-member-details-body {
  padding: .85rem;
}

.system-member-details-body > .system-member-uid {
  margin-top: 0;
}

.system-member-room-permission-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}

.system-member-room-permission-name > strong {
  max-width: 100%;
  overflow: hidden;
  color: #35563c;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-member-readonly {
  margin-top: .75rem;
  padding: .55rem .65rem;
  border: 1px solid #dfe8d9;
  border-radius: .7rem;
  background: #f7f9f4;
  color: #68766b;
  font-size: .7rem;
  font-weight: 800;
}

.dark .pending-member-readonly {
  border-color: #35563c;
  background: #101a13;
  color: #9dae9f;
}

.dark .system-member-room-permission-name > strong {
  color: #e3eadf;
}

@media (max-width: 900px) {
  .system-members-role-filter {
    width: 100%;
    flex: 0 0 auto;
  }
}

@media (max-width: 520px) {
  .system-member-create-disclosure > summary,
  .system-member-details > summary {
    gap: .55rem;
  }

  .system-member-details-body {
    padding: .7rem;
  }
}

/* =========================================================
   V1.29.6 GLOBAL NAVBAR & USER ROOM SETTINGS
   ========================================================= */
.room-config-progress {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-hub-shell {
  padding-bottom: 2rem;
}

.settings-hub-panel {
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

.settings-navbar-room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1.15rem;
}

.settings-navbar-room-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid #dfe8d9;
  border-radius: 1.15rem;
  background: #f7f9f4;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.settings-navbar-room-card.is-visible {
  border-color: #cfdf71;
  box-shadow: 0 12px 26px rgba(41, 76, 53, .08);
}

.dark .settings-navbar-room-card {
  border-color: #35563c;
  background: #142b1c;
}

.dark .settings-navbar-room-card.is-visible {
  border-color: #294c35;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.settings-navbar-room-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.settings-navbar-room-head > div {
  min-width: 0;
}

.settings-navbar-room-head p {
  margin: 0 0 .2rem;
  color: #68766b;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.settings-navbar-room-head h3 {
  margin: 0;
  overflow: hidden;
  color: #101a13;
  font-size: 1rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .settings-navbar-room-head h3 {
  color: #f7f9f4;
}

.settings-navbar-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .45rem;
  color: #68766b;
  font-size: .65rem;
  font-weight: 900;
  cursor: pointer;
}

.settings-navbar-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.settings-navbar-switch-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #cbd9c5;
  transition: background .18s ease;
}

.settings-navbar-switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(13, 21, 16, .2);
  content: "";
  transition: transform .18s ease;
}

.settings-navbar-switch input:checked + .settings-navbar-switch-track {
  background: #294c35;
}

.settings-navbar-switch input:checked + .settings-navbar-switch-track::after {
  transform: translateX(18px);
}

.settings-navbar-switch input:disabled ~ * {
  cursor: not-allowed;
  opacity: .68;
}

.settings-navbar-room-description {
  min-height: 2.3em;
  margin: 0;
  color: #68766b;
  font-size: .72rem;
  line-height: 1.55;
}

.settings-navbar-room-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: auto;
}

.settings-navbar-room-actions a {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: .55rem .65rem;
  border: 1px solid #cbd9c5;
  border-radius: .75rem;
  background: #fff;
  color: #506156;
  font-size: .7rem;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}

.settings-navbar-room-actions a.is-primary {
  border-color: #294c35;
  background: #294c35;
  color: #fff;
}

.dark .settings-navbar-room-actions a {
  border-color: #506156;
  background: #101a13;
  color: #cbd9c5;
}

.dark .settings-navbar-room-actions a.is-primary {
  border-color: #294c35;
  background: #294c35;
  color: #fff;
}

.settings-hub-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 38%);
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.settings-hub-actions .schedule-save {
  margin-top: 0;
}

.settings-hub-message {
  min-height: 1.25rem;
  margin: 0;
  color: #68766b;
  font-size: .75rem;
  font-weight: 750;
}

.settings-hub-message.is-success { color: #047857; }
.settings-hub-message.is-error { color: #dc2626; }

.settings-user-picker {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(280px, 1.25fr);
  gap: .85rem;
  margin-top: 1.15rem;
  padding: 1rem;
  border: 1px solid #dfe8d9;
  border-radius: 1.1rem;
  background: #f7f9f4;
}

.dark .settings-user-picker {
  border-color: #35563c;
  background: #142b1c;
}

.settings-user-picker label {
  display: grid;
  gap: .4rem;
  min-width: 0;
  color: #506156;
  font-size: .7rem;
  font-weight: 850;
}

.dark .settings-user-picker label { color: #cbd9c5; }

.settings-user-picker input,
.settings-user-picker select {
  width: 100%;
  min-height: 46px;
  padding: .7rem .85rem;
  border: 1px solid #cbd9c5;
  border-radius: .85rem;
  outline: none;
  background: #fff;
  color: #101a13;
  font-size: .8rem;
  font-weight: 700;
}

.settings-user-picker input:focus,
.settings-user-picker select:focus {
  border-color: #294c35;
  box-shadow: 0 0 0 3px rgba(41, 76, 53, .12);
}

.dark .settings-user-picker input,
.dark .settings-user-picker select {
  border-color: #506156;
  background: #101a13;
  color: #f7f9f4;
}

.settings-selected-user-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #dce8a5;
  border-radius: 1.15rem;
  background: #f7faf2;
}

.dark .settings-selected-user-panel {
  border-color: #294c35;
  background: rgba(23, 37, 84, .34);
}

.settings-selected-user-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid #dfe8d9;
}

.dark .settings-selected-user-identity { border-color: #35563c; }

.settings-selected-user-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: #294c35;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}

.settings-selected-user-identity > div { min-width: 0; }
.settings-selected-user-identity strong,
.settings-selected-user-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-selected-user-identity strong { color: #101a13; font-size: .9rem; font-weight: 900; }
.settings-selected-user-identity small { margin-top: .15rem; color: #68766b; font-size: .7rem; }
.dark .settings-selected-user-identity strong { color: #f7f9f4; }

.settings-selected-user-count {
  padding: .4rem .65rem;
  border-radius: 999px;
  background: #e8f0cf;
  color: #294c35;
  font-size: .68rem;
  font-weight: 900;
}

.dark .settings-selected-user-count { background: #1a2b1f; color: #cfdf71; }

.settings-user-room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .9rem;
}

.settings-user-room-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  min-height: 76px;
  padding: .8rem;
  border: 1px solid #dfe8d9;
  border-radius: .95rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.settings-user-room-choice:hover { transform: translateY(-1px); }
.settings-user-room-choice.is-selected { border-color: #c0d530; background: #f3f8d9; }
.settings-user-room-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.settings-user-room-choice input:disabled ~ * { cursor: not-allowed; opacity: .7; }
.settings-user-room-choice > span:first-of-type { min-width: 0; }
.settings-user-room-choice strong,
.settings-user-room-choice small { display: block; }
.settings-user-room-choice strong { overflow: hidden; color: #101a13; font-size: .8rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.settings-user-room-choice small { margin-top: .2rem; color: #68766b; font-size: .64rem; line-height: 1.4; }

.settings-user-room-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: #e3eadf;
  color: #68766b;
  font-size: .85rem;
  font-weight: 900;
}

.settings-user-room-choice.is-selected .settings-user-room-mark { background: #294c35; color: #fff; }
.dark .settings-user-room-choice { border-color: #35563c; background: #101a13; }
.dark .settings-user-room-choice.is-selected { border-color: #294c35; background: #1a2b1f; }
.dark .settings-user-room-choice strong { color: #f7f9f4; }
.dark .settings-user-room-mark { background: #35563c; color: #cbd9c5; }
.dark .settings-user-room-choice.is-selected .settings-user-room-mark { background: #294c35; color: #fff; }

.settings-hub-empty {
  grid-column: 1 / -1;
  padding: 1.4rem;
  border: 1px dashed #cbd9c5;
  border-radius: 1rem;
  color: #68766b;
  text-align: center;
  font-size: .78rem;
  font-weight: 750;
}

.settings-user-empty { margin-top: 1rem; }
.settings-hub-empty.is-error { border-color: #fecaca; color: #dc2626; }
.dark .settings-hub-empty { border-color: #506156; color: #9dae9f; }

@media (max-width: 900px) {
  .settings-navbar-room-grid,
  .settings-user-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .room-config-progress,
  .settings-navbar-room-grid,
  .settings-user-room-grid,
  .settings-user-picker,
  .settings-hub-actions { grid-template-columns: 1fr; }

  .settings-selected-user-identity { grid-template-columns: auto minmax(0, 1fr); }
  .settings-selected-user-count { grid-column: 1 / -1; justify-self: start; }
}

/* =========================================================
   V1.29.7 PER-ROOM DEVICE SETUP WORKFLOW
   Device creation, entity mapping, and automation selection
   are one clear group followed by schedule and holidays.
   ========================================================= */
.room-config-mode .room-config-progress {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.room-config-mode .room-config-progress-item {
  appearance: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.room-config-mode .room-config-progress-item:hover {
  transform: translateY(-1px);
}

.room-config-mode .room-config-progress-item:focus-visible {
  outline: 3px solid rgba(41, 76, 53, .2);
  outline-offset: 2px;
}

.room-automation-setup-body > .room-config-fixed-stage > .app-card,
.room-automation-setup-body > #roomAutomationStage {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.room-automation-setup-heading {
  margin-bottom: 1rem;
}

.room-automation-setup-heading h3 {
  margin: 0;
  color: #101a13;
  font-size: 1.05rem;
  font-weight: 900;
}

.room-automation-setup-heading p {
  margin: .3rem 0 0;
  color: #68766b;
  font-size: .78rem;
  line-height: 1.55;
}

.dark .room-automation-setup-heading h3 {
  color: #f7f9f4;
}

.dark .room-automation-setup-heading p {
  color: #9dae9f;
}

.room-automation-setup-body {
  display: grid;
  gap: 1rem;
}

.room-automation-setup-body > #roomAutomationStage .panel-heading-row {
  margin-bottom: 1rem;
}

.room-automation-setup-empty {
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed #cbd9c5;
  border-radius: 1rem;
  color: #68766b;
  text-align: center;
  font-size: .78rem;
  font-weight: 750;
}

.room-automation-setup-empty.workflow-collapsed {
  display: none !important;
}

.dark .room-automation-setup-empty {
  border-color: #506156;
  color: #9dae9f;
}

.room-config-mode #roomScheduleStage,
.room-config-mode #roomHolidaySection {
  scroll-margin-top: 5.5rem;
}

@media (max-width: 1050px) {
  .room-config-mode .room-config-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .room-config-mode .room-config-progress {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   V1.29.8 INLINE ENTITY MAPPING IN ADDED DEVICES
   The separate mapping stage is removed. Automation selection
   appears only after the room has devices to configure.
   ========================================================= */
.room-config-mode .room-config-progress {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.room-config-mode #roomDeviceStage,
.room-config-mode #roomAutomationSetupGroup,
.room-config-mode #roomScheduleStage,
.room-config-mode #roomHolidaySection {
  scroll-margin-top: 5.5rem;
}

.room-config-mode #roomAutomationSetupGroup {
  min-width: 0;
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border-color: #dfe8d9;
}

.dark .room-config-mode #roomAutomationSetupGroup {
  border-color: #35563c;
}

.room-config-mode #roomAutomationSetupGroup > .room-config-stage-label {
  margin-bottom: 1rem;
}

.room-config-mode #roomAutomationSetupGroup .room-automation-setup-heading h2 {
  margin: 0;
  color: #101a13;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 900;
}

.dark .room-config-mode #roomAutomationSetupGroup .room-automation-setup-heading h2 {
  color: #f7f9f4;
}

.dynamic-added-device-entity {
  margin-top: .8rem;
  padding: .8rem;
  border: 1px solid #dfe8d9;
  border-radius: .9rem;
  background: #f7f9f4;
}

.dark .dynamic-added-device-entity {
  border-color: #35563c;
  background: #142b1c;
}

.dynamic-added-device-entity label {
  display: grid;
  gap: .4rem;
  color: #506156;
  font-size: .72rem;
  font-weight: 850;
}

.dark .dynamic-added-device-entity label {
  color: #cbd9c5;
}

.dynamic-added-device-entity select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: .7rem .8rem;
  border: 1px solid #cbd9c5;
  border-radius: .85rem;
  outline: none;
  background: #fff;
  color: #101a13;
  font-size: .78rem;
  font-weight: 750;
}

.dynamic-added-device-entity select:focus {
  border-color: #294c35;
  box-shadow: 0 0 0 3px rgba(41, 76, 53, .12);
}

.dynamic-added-device-entity select:disabled {
  cursor: not-allowed;
  opacity: .7;
}

.dark .dynamic-added-device-entity select {
  border-color: #506156;
  background: #101a13;
  color: #f7f9f4;
}

.dynamic-added-device-entity small {
  color: #68766b;
  font-size: .64rem;
  font-weight: 650;
}

.dark .dynamic-added-device-entity small {
  color: #9dae9f;
}

.settings-added-entity-save {
  width: 100%;
  margin-top: 1rem;
}

.settings-fixed-entity-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #dfe8d9;
  border-radius: 1rem;
  background: #fff;
}

.settings-fixed-entity-panel.hidden {
  display: none !important;
}

.dark .settings-fixed-entity-panel {
  border-color: #35563c;
  background: #101a13;
}

.settings-fixed-entity-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.settings-fixed-entity-heading > div {
  min-width: 0;
}

.settings-fixed-entity-heading h5 {
  margin: 0;
  color: #101a13;
  font-size: .95rem;
  font-weight: 900;
}

.settings-fixed-entity-heading p {
  margin: .25rem 0 0;
  color: #68766b;
  font-size: .7rem;
  line-height: 1.5;
}

.dark .settings-fixed-entity-heading h5 {
  color: #f7f9f4;
}

.dark .settings-fixed-entity-heading p {
  color: #9dae9f;
}

.settings-fixed-entity-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.settings-fixed-entity-panel > [data-fixed-entity-mapping] {
  display: block;
}

.settings-fixed-entity-panel [data-fixed-entity-actions] {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .room-config-mode .room-config-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .room-config-mode .room-config-progress,
  .settings-fixed-entity-fields {
    grid-template-columns: 1fr;
  }

  .settings-fixed-entity-heading {
    flex-direction: column;
  }
}

/* =========================================================
   V1.30.0 INNOVATIVE VILLAGE EXPERIENCE SYSTEM
   Friendly eco-tech visual language shared by every page.
   ========================================================= */
:root {
  --iv-lime: #c0d530;
  --iv-lime-strong: #a8bf20;
  --iv-lime-soft: #f3f8d9;
  --iv-forest: #294c35;
  --iv-forest-strong: #173322;
  --iv-ink: #17221a;
  --iv-canvas: #f4f7f1;
  --iv-surface: rgba(255, 255, 255, .96);
  --iv-surface-soft: #f7f9f4;
  --iv-line: #dfe8d9;
  --iv-muted: #68766b;
  --iv-positive: #15935b;
  --iv-warning: #c47a16;
  --iv-danger: #d84646;
  --iv-radius-sm: .9rem;
  --iv-radius-md: 1.25rem;
  --iv-radius-lg: 1.75rem;
  --iv-shadow-sm: 0 8px 24px rgba(33, 62, 41, .06);
  --iv-shadow: 0 18px 48px rgba(33, 62, 41, .09);
  --iv-focus: 0 0 0 4px rgba(192, 213, 48, .24);
  --page-bg: var(--iv-canvas);
  --card-bg: var(--iv-surface);
  --soft-bg: var(--iv-surface-soft);
  --line: var(--iv-line);
  --text: var(--iv-ink);
  --muted: var(--iv-muted);
  --primary: var(--iv-forest);
  --shadow: var(--iv-shadow);
}

html.dark {
  --iv-ink: #f6f9f2;
  --iv-canvas: #0d1510;
  --iv-surface: rgba(21, 33, 24, .97);
  --iv-surface-soft: #132019;
  --iv-line: #2d4032;
  --iv-muted: #9dae9f;
  --page-bg: var(--iv-canvas);
  --card-bg: var(--iv-surface);
  --soft-bg: var(--iv-surface-soft);
  --line: var(--iv-line);
  --text: var(--iv-ink);
  --muted: var(--iv-muted);
  --primary: var(--iv-lime);
  --shadow: 0 20px 52px rgba(0, 0, 0, .28);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Noto Sans Thai", "Leelawadee UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(192, 213, 48, .14), transparent 27rem),
    radial-gradient(circle at 92% 18%, rgba(41, 76, 53, .08), transparent 32rem),
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 30rem),
    var(--iv-canvas) !important;
  color: var(--iv-ink);
}

html.dark body {
  background:
    radial-gradient(circle at 8% 4%, rgba(192, 213, 48, .1), transparent 27rem),
    radial-gradient(circle at 92% 18%, rgba(57, 103, 69, .13), transparent 30rem),
    var(--iv-canvas) !important;
}

::selection {
  background: rgba(192, 213, 48, .42);
  color: #142018;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--iv-lime-strong) !important;
  outline-offset: 3px;
}

/* Navigation */
.navbar-shell {
  border-bottom: 1px solid rgba(65, 89, 70, .14) !important;
  background: rgba(249, 251, 247, .9) !important;
  box-shadow: 0 10px 34px rgba(30, 56, 37, .07) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

html.dark .navbar-shell {
  border-bottom-color: rgba(192, 213, 48, .12) !important;
  background: rgba(13, 21, 16, .92) !important;
}

@media (min-width: 1024px) {
  :root { --navbar-height: calc(86px + env(safe-area-inset-top)); }

  .navbar-shell .navbar-row { min-height: 66px; }

  .navbar-shell .navbar-brand {
    width: 168px;
    max-width: 168px;
  }

  .navbar-shell .navbar-brand-logo {
    width: 164px;
    height: 58px;
    border: 1px solid rgba(115, 132, 46, .22);
    border-radius: 1rem;
    background: var(--iv-lime);
    box-shadow: 0 10px 24px rgba(63, 78, 23, .13);
  }

  .navbar-shell .navbar-desktop-tabs {
    gap: .25rem;
    padding: .32rem;
    border: 1px solid rgba(83, 105, 87, .1);
    border-radius: 1.15rem;
    background: rgba(231, 237, 226, .72);
  }

  html.dark .navbar-shell .navbar-desktop-tabs {
    border-color: rgba(192, 213, 48, .1);
    background: rgba(25, 39, 29, .82);
  }

  .navbar-shell .navbar-desktop-tabs .nav-desktop-link {
    position: relative;
    min-height: 40px;
    border: 0;
    border-radius: .85rem;
    padding: .55rem .78rem;
    background: transparent;
    color: #506156;
    box-shadow: none;
    font-size: .78rem;
    font-weight: 800;
  }

  .navbar-shell .navbar-desktop-tabs .nav-desktop-link:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, .78);
    color: var(--iv-forest);
    transform: translateY(-1px);
  }

  .navbar-shell .navbar-desktop-tabs .nav-desktop-link.is-active {
    border: 0;
    background: var(--iv-forest-strong);
    color: #fff;
    box-shadow: 0 8px 20px rgba(23, 51, 34, .19);
  }

  .navbar-shell .navbar-desktop-tabs .nav-desktop-link.is-active::after {
    position: absolute;
    right: .45rem;
    top: .42rem;
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: var(--iv-lime);
    content: "";
  }

  html.dark .navbar-shell .navbar-desktop-tabs .nav-desktop-link {
    border: 0;
    background: transparent;
    color: #b8c5ba;
  }

  html.dark .navbar-shell .navbar-desktop-tabs .nav-desktop-link:hover {
    background: #233229;
    color: #f7faef;
  }

  html.dark .navbar-shell .navbar-desktop-tabs .nav-desktop-link.is-active {
    border: 0;
    background: var(--iv-lime);
    color: #17221a;
  }

  html.dark .navbar-shell .navbar-desktop-tabs .nav-desktop-link.is-active::after {
    background: #17221a;
  }
}

.navbar-desktop-icon-btn,
.navbar-icon-btn {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface) !important;
  color: var(--iv-forest) !important;
  box-shadow: var(--iv-shadow-sm);
}

.navbar-desktop-icon-btn:hover,
.navbar-icon-btn:hover {
  border-color: rgba(168, 191, 32, .68) !important;
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest-strong) !important;
}

html.dark .navbar-desktop-icon-btn,
html.dark .navbar-icon-btn {
  border-color: var(--iv-line) !important;
  background: #16231a !important;
  color: var(--iv-lime) !important;
}

.navbar-profile-card {
  border-color: var(--iv-line) !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: none !important;
}

.navbar-profile-card:hover {
  border-color: rgba(168, 191, 32, .72) !important;
  background: #fff !important;
}

html.dark .navbar-profile-card {
  border-color: var(--iv-line) !important;
  background: #15221a !important;
}

.navbar-logout-btn,
.navbar-mobile-logout {
  border: 1px solid #f1caca !important;
  background: #fff8f7 !important;
  color: #b33a3a !important;
  box-shadow: none !important;
}

.navbar-logout-btn:hover,
.navbar-mobile-logout:hover {
  background: #fbeaea !important;
  color: #962d2d !important;
}

#mobileMenu,
.navbar-mobile-panel {
  border-top-color: var(--iv-line) !important;
  background: rgba(249, 251, 247, .98) !important;
}

html.dark #mobileMenu,
html.dark .navbar-mobile-panel { background: #101a13 !important; }

.navbar-mobile-profile {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
}

.nav-mobile-link {
  border: 1px solid transparent;
  border-radius: 1rem !important;
  color: var(--iv-forest) !important;
}

.nav-mobile-link:hover { background: var(--iv-lime-soft) !important; }

.nav-mobile-link.is-active {
  border-color: rgba(168, 191, 32, .36) !important;
  background: var(--iv-forest-strong) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(23, 51, 34, .15) !important;
}

html.dark .nav-mobile-link { color: #d9e2da !important; }
html.dark .nav-mobile-link.is-active { background: var(--iv-lime) !important; color: #17221a !important; }

/* Shared page shells and heroes */
.operations-page,
.page-wrap,
.app-container,
body > .max-w-5xl,
body > .max-w-4xl {
  max-width: 74rem;
}

.operations-page { margin-top: clamp(1.25rem, 3vw, 2.25rem); }

.operations-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(159, 180, 115, .28);
  border-radius: 2rem;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .98), rgba(245, 250, 230, .94)),
    var(--iv-surface);
  box-shadow: var(--iv-shadow);
}

.operations-hero::before {
  position: absolute;
  z-index: -1;
  right: -4rem;
  top: -5rem;
  width: 17rem;
  height: 17rem;
  border: 2.5rem solid rgba(192, 213, 48, .13);
  border-radius: 999px;
  content: "";
}

.operations-hero::after {
  position: absolute;
  z-index: -1;
  right: 2rem;
  bottom: 1.25rem;
  width: 4.5rem;
  height: .4rem;
  border-radius: 99px;
  background: var(--iv-lime);
  content: "";
}

html.dark .operations-hero {
  border-color: #344b38;
  background: linear-gradient(120deg, rgba(24, 39, 28, .98), rgba(29, 45, 30, .94));
}

.operations-title,
.device-page-title,
.dynamic-room-hero h1,
.page-wrap h1 {
  color: var(--iv-ink) !important;
  letter-spacing: -.035em;
}

.operations-title { max-width: 21ch; }

.operations-subtitle,
.dynamic-room-hero p,
.page-wrap > div > p {
  color: var(--iv-muted) !important;
  line-height: 1.7;
}

.system-members-eyebrow,
.network-eyebrow,
.dynamic-room-eyebrow,
.schedule-overview-kicker,
.room-config-stage-label strong {
  color: var(--iv-forest) !important;
  letter-spacing: .13em;
}

html.dark .system-members-eyebrow,
html.dark .network-eyebrow,
html.dark .dynamic-room-eyebrow,
html.dark .schedule-overview-kicker,
html.dark .room-config-stage-label strong { color: var(--iv-lime) !important; }

.operations-panel,
.app-card,
.login-card-theme,
.logs-card,
.schedule-card,
.rooms-directory-card,
.schedule-overview-card,
.dynamic-room-card,
.dashboard-dynamic-room-card,
.system-member-card,
.network-live-card,
.network-availability-card,
.network-quick-card,
.network-latency-card {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface) !important;
  box-shadow: var(--iv-shadow-sm) !important;
}

.operations-panel,
.app-card,
.logs-card { border-radius: var(--iv-radius-lg) !important; }

.panel-title,
.app-card h2,
.app-card h3,
.metric-value,
.rooms-directory-card h3,
.schedule-overview-card h3 {
  color: var(--iv-ink) !important;
}

.panel-heading-row {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--iv-line);
}

.status-pill {
  min-height: 36px;
  border-color: var(--iv-line);
  background: var(--iv-surface-soft);
  color: var(--iv-muted);
  letter-spacing: .01em;
}

.status-pill.is-online,
.status-pill.is-enabled {
  border-color: rgba(21, 147, 91, .28);
  background: rgba(21, 147, 91, .1);
  color: var(--iv-positive);
}

/* Dashboard and room cards */
.dashboard-page-wrap > .text-center:first-child,
.room-config-hero,
.dynamic-room-hero,
.device-page-wrap > .device-page-title {
  position: relative;
  padding: 1.25rem 1.4rem;
  border-left: 5px solid var(--iv-lime);
  border-radius: 0 1.3rem 1.3rem 0;
  background: linear-gradient(90deg, rgba(192, 213, 48, .1), transparent 72%);
}

.device-page-wrap > .device-page-title::after {
  display: block;
  margin-top: .5rem;
  color: var(--iv-muted);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: 0;
  content: "ควบคุมอุปกรณ์แบบเรียลไทม์ · Innovative Village";
}

html[lang="en"] .device-page-wrap > .device-page-title::after {
  content: "Live room controls · Innovative Village";
}

#dashboardRoomGrid > section,
.dashboard-dynamic-room-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--iv-line) !important;
  border-radius: 1.6rem !important;
  background: var(--iv-surface) !important;
  box-shadow: var(--iv-shadow-sm) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#dashboardRoomGrid > section::before,
.dashboard-dynamic-room-card::before,
.rooms-directory-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 99px;
  background: var(--iv-lime);
  content: "";
}

#dashboardRoomGrid > section:hover,
.dashboard-dynamic-room-card:hover,
.rooms-directory-card:hover {
  border-color: rgba(168, 191, 32, .55) !important;
  box-shadow: var(--iv-shadow) !important;
  transform: translateY(-3px);
}

#dashboardRoomGrid > section h2,
.dashboard-dynamic-room-heading h3 {
  color: var(--iv-forest) !important;
  font-size: 1.25rem;
  font-weight: 900;
}

html.dark #dashboardRoomGrid > section h2,
html.dark .dashboard-dynamic-room-heading h3 { color: var(--iv-lime) !important; }

#dashboardRoomGrid [class*="bg-gray-50"],
#dashboardRoomGrid [class*="bg-blue-50"],
.dashboard-dynamic-device-status,
.metric-card {
  border: 1px solid var(--iv-line) !important;
  border-radius: 1.1rem !important;
  background: var(--iv-surface-soft) !important;
}

#dashboardRoomGrid a,
.dashboard-dynamic-room-link {
  display: inline-flex !important;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  background: var(--iv-forest-strong);
  color: #fff !important;
  padding: .65rem 1rem;
  text-decoration: none !important;
  font-weight: 850;
}

#dashboardRoomGrid a:hover,
.dashboard-dynamic-room-link:hover { background: var(--iv-forest); }
html.dark #dashboardRoomGrid a,
html.dark .dashboard-dynamic-room-link { background: var(--iv-lime); color: #17221a !important; }

.rooms-directory-grid { gap: 1rem; }

.rooms-directory-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem !important;
}

.rooms-directory-icon {
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest) !important;
}

.rooms-directory-status {
  border-color: rgba(21, 147, 91, .25) !important;
  background: rgba(21, 147, 91, .09) !important;
  color: var(--iv-positive) !important;
}

.rooms-directory-enter,
.rooms-manage-button {
  border: 0 !important;
  background: var(--iv-forest-strong) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.rooms-directory-enter:hover,
.rooms-manage-button:hover { background: var(--iv-forest) !important; }
html.dark .rooms-directory-enter,
html.dark .rooms-manage-button { background: var(--iv-lime) !important; color: #17221a !important; }

/* Controls, forms, and clear actions */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.logs-zone-button {
  border-color: var(--iv-line) !important;
  border-radius: .95rem !important;
  background: var(--iv-surface-soft) !important;
  color: var(--iv-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.logs-zone-button:focus {
  border-color: var(--iv-lime-strong) !important;
  background: var(--iv-surface) !important;
  box-shadow: var(--iv-focus) !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea,
html.dark .logs-zone-button {
  border-color: var(--iv-line) !important;
  background: #111d16 !important;
  color: #f5f8f1 !important;
  box-shadow: none;
}

.schedule-save,
.holiday-add,
#applyFilter,
#loginButton,
#resetPasswordButton,
.settings-save-button,
.dynamic-manager-primary,
button.bg-blue-600,
a.bg-blue-600 {
  border: 1px solid rgba(136, 157, 25, .4) !important;
  border-radius: 1rem !important;
  background: var(--iv-lime) !important;
  color: #17221a !important;
  box-shadow: 0 10px 24px rgba(116, 135, 25, .18) !important;
  font-weight: 900 !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.schedule-save:hover,
.holiday-add:hover,
#applyFilter:hover,
#loginButton:hover,
#resetPasswordButton:hover,
.settings-save-button:hover,
.dynamic-manager-primary:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover {
  background: #cce24a !important;
  box-shadow: 0 14px 28px rgba(116, 135, 25, .23) !important;
  transform: translateY(-1px);
}

:where(.schedule-save, .holiday-add, #applyFilter, #loginButton, #resetPasswordButton, .settings-save-button, .dynamic-manager-primary):disabled {
  border-color: var(--iv-line) !important;
  background: #e3e9dd !important;
  color: #889189 !important;
  box-shadow: none !important;
  transform: none;
}

.schedule-master-switch-input:checked + .schedule-master-switch-track {
  background: var(--iv-lime) !important;
}

.schedule-master-switch.is-on .schedule-master-switch-state { color: var(--iv-positive) !important; }

.schedule-master-switch-input:focus-visible + .schedule-master-switch-track {
  outline-color: rgba(192, 213, 48, .45);
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--iv-lime-strong); }

/* Schedules and automation */
.schedule-overview-card,
.schedule-card {
  border-radius: 1.55rem !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.schedule-overview-card:hover,
.schedule-card:hover {
  border-color: rgba(168, 191, 32, .5) !important;
  box-shadow: var(--iv-shadow) !important;
}

.schedule-overview-card.is-active { border-color: rgba(21, 147, 91, .28) !important; }

.schedule-overview-status {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
  color: var(--iv-muted) !important;
}

.schedule-overview-card.is-active .schedule-overview-status {
  border-color: rgba(21, 147, 91, .26) !important;
  background: rgba(21, 147, 91, .1) !important;
  color: var(--iv-positive) !important;
}

.schedule-overview-time,
.schedule-overview-day,
.schedule-day,
.holiday-card {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
  color: var(--iv-ink) !important;
}

.schedule-overview-day.is-active,
.schedule-day:has(input:checked) {
  border-color: var(--iv-lime-strong) !important;
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest-strong) !important;
}

html.dark .schedule-overview-day.is-active,
html.dark .schedule-day:has(input:checked) {
  background: rgba(192, 213, 48, .15) !important;
  color: var(--iv-lime) !important;
}

.schedule-overview-edit {
  border: 0 !important;
  background: var(--iv-forest-strong) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.schedule-overview-edit:hover { background: var(--iv-forest) !important; }
html.dark .schedule-overview-edit { background: var(--iv-lime) !important; color: #17221a !important; }

.room-config-progress {
  gap: .65rem !important;
  border: 1px solid var(--iv-line);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, .58);
  padding: .65rem !important;
}

html.dark .room-config-progress { background: rgba(18, 30, 22, .74); }

.room-config-progress-item {
  border-radius: 1rem !important;
  background: var(--iv-surface-soft) !important;
  color: var(--iv-muted) !important;
}

.room-config-progress-item.is-current {
  background: var(--iv-forest-strong) !important;
  color: #fff !important;
}

.room-config-progress-item.is-done {
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest) !important;
}

.room-config-progress-item > span,
.room-config-stage-label > span {
  background: var(--iv-lime) !important;
  color: #17221a !important;
}

/* Settings, members, logs, and monitoring */
.settings-navbar-room-choice,
.settings-user-room-choice,
.settings-selected-user-identity,
.system-member-card,
.logs-table-wrap,
.logs-room-overview-card,
.network-live-card,
.network-availability-card,
.network-quick-card,
.network-latency-card {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
}

.settings-navbar-room-choice.is-selected,
.settings-user-room-choice.is-selected {
  border-color: rgba(168, 191, 32, .68) !important;
  background: var(--iv-lime-soft) !important;
}

.settings-navbar-room-mark,
.settings-user-room-mark,
.settings-selected-user-avatar {
  background: var(--iv-forest) !important;
  color: #fff !important;
}

.settings-navbar-room-choice.is-selected .settings-navbar-room-mark,
.settings-user-room-choice.is-selected .settings-user-room-mark {
  background: var(--iv-lime) !important;
  color: #17221a !important;
}

.metric-card {
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
}

.metric-card::after {
  position: absolute;
  right: -1rem;
  bottom: -1.5rem;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 99px;
  background: rgba(192, 213, 48, .12);
  content: "";
}

.logs-table-header {
  border-color: var(--iv-line) !important;
  background: #eaf0e5 !important;
  color: var(--iv-forest) !important;
}

html.dark .logs-table-header { background: #1a2a1f !important; color: var(--iv-lime) !important; }

.logs-table-body > li:hover,
#logListDesktop > li:hover { background: var(--iv-lime-soft) !important; }
html.dark .logs-table-body > li:hover,
html.dark #logListDesktop > li:hover { background: rgba(192, 213, 48, .07) !important; }

.range-button,
.preset-btn {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
  color: var(--iv-muted) !important;
}

.range-button.is-active,
.preset-btn.active {
  border-color: var(--iv-lime-strong) !important;
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest-strong) !important;
}

.network-pulse.is-online { background: var(--iv-positive) !important; }
.network-latency-line { stroke: var(--iv-forest) !important; }
.network-latency-area { fill: rgba(192, 213, 48, .15) !important; }
html.dark .network-latency-line { stroke: var(--iv-lime) !important; }

.system-member-create-disclosure,
.system-member-details {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
}

.system-member-create-icon,
.system-member-details-icon {
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest) !important;
}

/* Login and public states */
.login-page {
  background:
    radial-gradient(circle at 13% 10%, rgba(192, 213, 48, .22), transparent 28rem),
    radial-gradient(circle at 88% 88%, rgba(41, 76, 53, .12), transparent 32rem),
    var(--iv-canvas) !important;
}

.login-card-theme {
  border: 1px solid rgba(134, 157, 77, .25) !important;
  border-radius: 2.25rem !important;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(33, 62, 41, .16) !important;
}

.login-card-theme > section:first-child {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(192, 213, 48, .27), transparent 18rem),
    linear-gradient(145deg, #2d543a, #173322 66%, #10251a) !important;
}

.login-card-theme > section:first-child::after {
  position: absolute;
  right: -4.5rem;
  bottom: -4.5rem;
  width: 14rem;
  height: 14rem;
  border: 2rem solid rgba(192, 213, 48, .12);
  border-radius: 99rem;
  content: "";
}

.login-brand-logo,
.login-brand-logo-mobile {
  border: 1px solid rgba(255, 255, 255, .28);
  background: var(--iv-lime);
  box-shadow: 0 14px 30px rgba(9, 28, 16, .22);
}

.login-form-panel { background: rgba(255, 255, 255, .97) !important; }
html.dark .login-form-panel { background: #132019 !important; }

.login-page .text-blue-600,
.login-page .hover\:text-blue-600:hover { color: var(--iv-forest) !important; }
html.dark .login-page .text-blue-600,
html.dark .login-page .dark\:text-blue-400 { color: var(--iv-lime) !important; }

/* Re-map legacy blue utilities inside the application to the brand palette. */
body:not(.login-page) .text-blue-700,
body:not(.login-page) .text-blue-600,
body:not(.login-page) .text-blue-500 { color: var(--iv-forest) !important; }

body:not(.login-page) .bg-blue-50 { background: var(--iv-lime-soft) !important; }
body:not(.login-page) .border-blue-100,
body:not(.login-page) .border-blue-50 { border-color: var(--iv-line) !important; }

html.dark body:not(.login-page) .dark\:text-blue-400 { color: var(--iv-lime) !important; }
html.dark body:not(.login-page) .dark\:bg-slate-800 { background: var(--iv-surface-soft) !important; }
html.dark body:not(.login-page) .dark\:bg-slate-900 { background: var(--iv-surface) !important; }
html.dark body:not(.login-page) .dark\:border-slate-800,
html.dark body:not(.login-page) .dark\:border-slate-700 { border-color: var(--iv-line) !important; }

@media (max-width: 767px) {
  .operations-page,
  .page-wrap { padding-left: .85rem; padding-right: .85rem; }

  .operations-hero,
  .operations-panel,
  .app-card,
  .logs-card { border-radius: 1.4rem !important; }

  .operations-hero::before {
    right: -7rem;
    top: -7rem;
  }

  .operations-hero::after { right: 1.25rem; bottom: .9rem; width: 3rem; }

  .dashboard-page-wrap > .text-center:first-child,
  .room-config-hero,
  .dynamic-room-hero,
  .device-page-wrap > .device-page-title { padding: 1rem; }

  .device-page-wrap > .device-page-title::after { font-size: .72rem; }

  .panel-heading-row { padding-bottom: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* V1.30.2 final cascade guard: keep legacy dark-blue utilities on brand surfaces. */
html.dark body.dark\:bg-slate-950 {
  background:
    radial-gradient(circle at 8% 4%, rgba(192, 213, 48, .1), transparent 27rem),
    radial-gradient(circle at 92% 18%, rgba(57, 103, 69, .13), transparent 30rem),
    var(--iv-canvas) !important;
  background-color: var(--iv-canvas) !important;
}

html.dark .settings-selected-user-panel,
html.dark .settings-hub-panel,
html.dark .rooms-directory-panel,
html.dark .settings-navbar-room-card,
html.dark .settings-user-picker {
  border-color: var(--iv-line) !important;
  background: #152118 !important;
}

body .settings-selected-user-panel,
body .settings-navbar-room-card,
body .settings-user-picker {
  border-color: var(--iv-line) !important;
}

html:not(.dark) body .settings-selected-user-panel,
html:not(.dark) body .settings-navbar-room-card {
  background: var(--iv-surface) !important;
}

html:not(.dark) body .settings-user-picker {
  background: var(--iv-surface-soft) !important;
}

html.dark .settings-navbar-room-actions a {
  border-color: var(--iv-line) !important;
  background: #132019 !important;
  color: #d9e2da !important;
}

html.dark .settings-navbar-room-actions a.is-primary {
  border-color: rgba(192, 213, 48, .45) !important;
  background: var(--iv-lime) !important;
  color: #17221a !important;
}

html.dark .settings-user-room-choice.is-selected {
  border-color: rgba(168, 191, 32, .72) !important;
  background: #f3f8d9 !important;
}

html.dark .settings-user-room-choice.is-selected strong,
html.dark .settings-user-room-choice.is-selected small {
  color: #17221a !important;
}

html.dark .settings-user-room-choice.is-selected .settings-room-permission-toggle small {
  color: #667268 !important;
}

html.dark .settings-user-room-choice.is-selected .settings-room-permission-toggle.is-manage.is-selected,
html.dark .settings-user-room-choice.is-selected .settings-room-permission-toggle.is-manage.is-selected strong {
  color: #fff !important;
}

html.dark .settings-user-room-choice.is-selected .settings-room-permission-toggle.is-manage.is-selected small {
  color: #dce8df !important;
}

body .settings-user-room-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .settings-user-room-choice {
  grid-template-columns: 1fr;
  align-content: start;
  gap: .7rem;
  min-height: 148px;
  cursor: default;
}

body .settings-user-room-choice:hover { transform: none; }

@media (max-width: 760px) {
  body .settings-user-room-grid,
  body .settings-room-permission-options { grid-template-columns: 1fr; }
}

/* =========================================================
   V1.30.3 FULL FOREST SURFACE PASS
   Removes the remaining Slate/Navy cast from legacy utility
   classes, form controls, charts, tables, and page containers.
   ========================================================= */
html.dark {
  --iv-canvas: #08140d;
  --iv-surface: #112319;
  --iv-surface-soft: #17301f;
  --iv-line: #35563c;
  --iv-muted: #a8b6aa;
  --page-bg: var(--iv-canvas);
  --card-bg: var(--iv-surface);
  --soft-bg: var(--iv-surface-soft);
  --line: var(--iv-line);
  --muted: var(--iv-muted);
}

html.dark body,
html.dark body.dark\:bg-slate-950 {
  background:
    radial-gradient(circle at 8% 4%, rgba(192, 213, 48, .1), transparent 27rem),
    radial-gradient(circle at 92% 18%, rgba(57, 103, 69, .16), transparent 30rem),
    var(--iv-canvas) !important;
  background-color: var(--iv-canvas) !important;
}

html.dark body:not(.login-page) [class*="dark:bg-slate-950"],
html.dark body:not(.login-page) [class~="bg-slate-950"] {
  background-color: var(--iv-canvas) !important;
}

html.dark body:not(.login-page) [class*="dark:bg-slate-900"],
html.dark body:not(.login-page) [class~="bg-slate-900"] {
  background-color: #112319 !important;
}

html.dark body:not(.login-page) [class*="dark:bg-slate-800"],
html.dark body:not(.login-page) [class~="bg-slate-800"] {
  background-color: #17301f !important;
}

html.dark body:not(.login-page) [class*="dark:bg-slate-700"],
html.dark body:not(.login-page) [class~="bg-slate-700"] {
  background-color: #223f2a !important;
}

html.dark body:not(.login-page) [class*="dark:bg-slate-600"],
html.dark body:not(.login-page) [class~="bg-slate-600"] {
  background-color: #35563c !important;
}

html.dark body:not(.login-page) [class*="dark:border-slate-"],
html.dark body:not(.login-page) [class*="dark:divide-slate-"] > :not([hidden]) ~ :not([hidden]),
html.dark body:not(.login-page) [class*="border-slate-"] {
  border-color: var(--iv-line) !important;
  --tw-divide-color: var(--iv-line) !important;
}

html.dark .operations-hero {
  border-color: var(--iv-line) !important;
  background: linear-gradient(120deg, #16291c, #1d3523) !important;
}

html.dark :is(
  .operations-panel,
  .app-card,
  .logs-card,
  .rooms-directory-panel,
  .schedule-card,
  .settings-hub-panel,
  .system-members-shell,
  .pending-members-panel,
  .network-history-panel
) {
  border-color: var(--iv-line) !important;
  background: #112319 !important;
}

html.dark :is(
  .metric-card,
  .rooms-directory-card,
  .schedule-overview-card,
  .schedule-editor-card,
  .logs-room-overview,
  .logs-room-overview-card,
  .logs-room-summary-card,
  .logs-table-wrap,
  .system-member-card,
  .pending-member-card,
  .system-member-create-disclosure,
  .system-member-details,
  .network-live-card,
  .network-availability-card,
  .network-quick-card,
  .network-distribution-card,
  .network-timeline-card,
  .network-latency-card
) {
  border-color: var(--iv-line) !important;
  background: #142b1c !important;
  box-shadow: none !important;
}

html.dark :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .logs-date-shell,
  .logs-zone-button,
  .logs-zone-menu,
  .schedule-overview-time,
  .schedule-form-grid,
  .network-latency-chart,
  .monitor-timeline
) {
  border-color: var(--iv-line) !important;
  background-color: #0f2217 !important;
  color: #f6f9f2 !important;
}

html.dark .logs-table-header {
  border-color: var(--iv-line) !important;
  background: #1c3825 !important;
  color: var(--iv-lime) !important;
}

html.dark .network-chart-facts > span,
html.dark .network-ring-inner {
  border-color: var(--iv-line) !important;
  background: #0f2217 !important;
}

html.dark body.monitor-page {
  --network-surface: #142b1c;
  --network-surface-strong: #0f2217;
  --network-track: #35563c;
}

html.dark .network-chart-grid-line { stroke: #35563c !important; }

html.dark :is(.preset-btn, .range-button):not(.active):not(.is-active) {
  border-color: var(--iv-line) !important;
  background: #142b1c !important;
  color: #c5d0c6 !important;
}

/* =========================================================
   V1.31.0 DASHBOARD CLARITY, ROOM ICONS, CALENDAR & LOGS
   ========================================================= */

.dashboard-stat-hint,
.dashboard-chart-description {
  color: #68766b !important;
  line-height: 1.5;
}

.dashboard-chart-description {
  margin: .25rem 0 .45rem;
  font-size: .72rem;
  font-weight: 650;
}

html.dark .dashboard-stat-hint,
html.dark .dashboard-chart-description {
  color: #b8c5ba !important;
}

.dashboard-chart-card {
  border-color: rgba(65, 89, 70, .26) !important;
  background: linear-gradient(180deg, #fbfdf8, #f2f7ee) !important;
}

html.dark .dashboard-chart-card {
  border-color: #42664a !important;
  background: linear-gradient(180deg, #17301f, #102319) !important;
}

.rooms-directory-icon-wrap {
  position: relative;
  display: inline-grid;
}

.rooms-directory-icon {
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

.rooms-directory-icon-edit {
  position: absolute;
  right: -8px;
  bottom: -7px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--iv-forest) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(20, 43, 28, .2);
  font-size: .72rem;
  font-weight: 900;
}

.rooms-directory-icon-edit:hover {
  background: var(--iv-forest-strong) !important;
  transform: scale(1.08);
}

html.dark .rooms-directory-icon-edit {
  border-color: #142b1c;
  background: var(--iv-lime) !important;
  color: #17221a !important;
}

.room-icon-dialog {
  width: min(94vw, 560px);
  max-height: min(88vh, 720px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 1.5rem;
  background: transparent;
}

.room-icon-dialog::backdrop {
  background: rgba(7, 18, 11, .72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.room-icon-dialog-card {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--iv-line);
  border-radius: 1.5rem;
  background: #fbfdf8;
  box-shadow: 0 30px 70px rgba(10, 28, 16, .28);
}

html.dark .room-icon-dialog-card {
  border-color: #42664a;
  background: #142b1c;
  color: #f7f9f4;
}

.room-icon-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.room-icon-dialog-heading h2 {
  margin: .18rem 0 0;
  color: var(--iv-ink);
  font-size: 1.25rem;
  font-weight: 950;
}

html.dark .room-icon-dialog-heading h2 { color: #f7f9f4; }

.room-icon-dialog-close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--iv-line);
  border-radius: .8rem;
  background: var(--iv-surface-soft);
  color: var(--iv-ink);
  font-size: 1.4rem;
}

.room-icon-dialog-help {
  margin: 1rem 0;
  color: var(--iv-muted);
  font-size: .78rem;
  line-height: 1.55;
}

.room-icon-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}

.room-icon-option {
  display: grid;
  min-height: 62px;
  place-items: center;
  border: 1px solid var(--iv-line);
  border-radius: 1rem;
  background: var(--iv-surface-soft);
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 1.75rem;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.room-icon-option:hover {
  border-color: var(--iv-lime-strong);
  transform: translateY(-2px);
}

.room-icon-option.is-selected {
  border-color: var(--iv-lime-strong);
  background: var(--iv-lime-soft);
  box-shadow: 0 0 0 3px rgba(168, 191, 32, .18);
}

html.dark .room-icon-option { background: #102319; }
html.dark .room-icon-option.is-selected { background: rgba(192, 213, 48, .17); }

.room-icon-message {
  min-height: 1.25rem;
  margin: .75rem 0 0;
  color: #b42318;
  font-size: .72rem;
  font-weight: 750;
}

.room-icon-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: .7rem;
}

.room-icon-cancel,
.room-icon-save {
  min-height: 42px;
  padding: .65rem 1rem;
  border-radius: .85rem;
  font-weight: 850;
}

.room-icon-cancel {
  border: 1px solid var(--iv-line);
  background: var(--iv-surface-soft);
  color: var(--iv-ink);
}

.room-icon-save {
  border: 1px solid var(--iv-lime-strong);
  background: var(--iv-lime);
  color: #17221a;
}

.room-icon-save:disabled { cursor: wait; opacity: .58; }

.device-title-emoji {
  display: inline-block;
  margin-right: .22rem;
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  filter: drop-shadow(0 3px 5px rgba(19, 47, 28, .14));
}

/* Google Calendar-inspired weekly schedule overview. */
.schedule-detail-heading {
  margin: 1.35rem 0 .2rem;
  color: var(--iv-ink);
  font-size: .9rem;
  font-weight: 900;
}

html.dark .schedule-detail-heading { color: #f7f9f4; }

.schedule-weekly-calendar { margin-top: 1rem; }

.schedule-calendar-shell {
  overflow: hidden;
  border: 1px solid var(--iv-line);
  border-radius: 1.25rem;
  background: var(--iv-surface);
}

.schedule-calendar-scroll { overflow-x: auto; }

.schedule-calendar-grid { min-width: 980px; }

.schedule-calendar-header,
.schedule-calendar-body {
  display: grid;
  grid-template-columns: 74px repeat(7, minmax(116px, 1fr));
}

.schedule-calendar-header {
  position: sticky;
  top: 0;
  z-index: 4;
  border-bottom: 1px solid var(--iv-line);
  background: #f5f8f1;
}

html.dark .schedule-calendar-header { background: #172b1d; }

.schedule-calendar-timezone,
.schedule-calendar-day-heading {
  min-width: 0;
  padding: .7rem .45rem;
  border-right: 1px solid var(--iv-line);
  text-align: center;
}

.schedule-calendar-timezone {
  display: grid;
  place-items: center;
  color: var(--iv-muted);
  font-size: .66rem;
  font-weight: 800;
}

.schedule-calendar-day-heading strong,
.schedule-calendar-day-heading small {
  display: block;
}

.schedule-calendar-day-heading strong {
  color: var(--iv-ink);
  font-size: .8rem;
  font-weight: 900;
}

.schedule-calendar-day-heading small {
  margin-top: .14rem;
  color: var(--iv-muted);
  font-size: .58rem;
}

.schedule-calendar-day-heading.is-today {
  background: var(--iv-lime-soft);
}

.schedule-calendar-day-heading.is-today strong { color: var(--iv-forest-strong); }
html.dark .schedule-calendar-day-heading strong { color: #f7f9f4; }
html.dark .schedule-calendar-day-heading.is-today { background: rgba(192, 213, 48, .14); }
html.dark .schedule-calendar-day-heading.is-today strong { color: var(--iv-lime); }

.schedule-calendar-time-gutter,
.schedule-calendar-day-track {
  position: relative;
  min-height: 260px;
  border-right: 1px solid var(--iv-line);
  background: var(--iv-surface);
}

.schedule-calendar-time-gutter span {
  position: absolute;
  right: .65rem;
  color: var(--iv-muted);
  font-size: .6rem;
  font-weight: 750;
  transform: translateY(-50%);
}

.schedule-calendar-day-track.is-today {
  background: rgba(192, 213, 48, .045);
}

.schedule-calendar-hour-line {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(65, 89, 70, .17);
}

html.dark .schedule-calendar-hour-line { background: rgba(168, 182, 170, .16); }

.schedule-calendar-event {
  position: absolute;
  z-index: 2;
  display: flex;
  min-height: 38px;
  box-sizing: border-box;
  flex-direction: column;
  gap: .08rem;
  overflow: hidden;
  padding: .42rem .46rem;
  border: 1px solid rgba(41, 76, 53, .28);
  border-left: 4px solid var(--iv-forest);
  border-radius: .65rem;
  background: #e8f0cf;
  color: #17221a;
  box-shadow: 0 5px 12px rgba(33, 62, 41, .11);
  text-decoration: none;
}

.schedule-calendar-event:hover {
  z-index: 3;
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.schedule-calendar-event strong {
  overflow: hidden;
  font-size: .66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-calendar-event span { font-size: .59rem; font-weight: 800; }
.schedule-calendar-event small { font-size: .52rem; opacity: .78; }
.schedule-calendar-event.color-1 { border-left-color: #2563eb; background: #dbeafe; }
.schedule-calendar-event.color-2 { border-left-color: #7c3aed; background: #ede9fe; }
.schedule-calendar-event.color-3 { border-left-color: #d97706; background: #fef3c7; }
.schedule-calendar-event.color-4 { border-left-color: #db2777; background: #fce7f3; }

html.dark .schedule-calendar-event {
  border-color: #52735a;
  border-left-color: var(--iv-lime);
  background: #294c35;
  color: #f7f9f4;
}

html.dark .schedule-calendar-event.color-1 { border-left-color: #60a5fa; background: #1e3a5f; }
html.dark .schedule-calendar-event.color-2 { border-left-color: #a78bfa; background: #3c2e60; }
html.dark .schedule-calendar-event.color-3 { border-left-color: #fbbf24; background: #594016; }
html.dark .schedule-calendar-event.color-4 { border-left-color: #f472b6; background: #5b2744; }

.schedule-calendar-note {
  margin: 0;
  padding: .7rem .85rem;
  border-top: 1px solid var(--iv-line);
  color: var(--iv-muted);
  font-size: .65rem;
  font-weight: 700;
}

.schedule-calendar-empty {
  padding: 2rem 1rem;
  border: 1px dashed var(--iv-line);
  border-radius: 1.1rem;
  background: var(--iv-surface-soft);
  color: var(--iv-muted);
  font-size: .8rem;
  font-weight: 750;
  text-align: center;
}

/* Stock-chart inspired network graph. */
body.monitor-page .network-chart-heading p strong {
  color: var(--iv-forest);
  font-size: inherit;
}

html.dark body.monitor-page .network-chart-heading p strong { color: var(--iv-lime); }

body.monitor-page .network-latency-chart {
  background:
    linear-gradient(180deg, rgba(192, 213, 48, .07), transparent 72%),
    var(--network-surface-strong) !important;
}

body.monitor-page .network-latency-chart svg { aspect-ratio: 1000 / 310; }

body.monitor-page .network-chart-grid-line.is-vertical { opacity: .48; }

body.monitor-page .network-chart-x-label {
  fill: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
}

body.monitor-page .network-latency-line {
  stroke-width: 3.5;
  filter: drop-shadow(0 3px 5px rgba(86, 114, 29, .2));
}

body.monitor-page .network-latest-value-line {
  stroke: #16a34a;
  stroke-dasharray: 3 5;
  stroke-width: 1.4;
  opacity: .72;
  vector-effect: non-scaling-stroke;
}

body.monitor-page .network-latest-value-marker,
body.monitor-page .network-chart-cursor {
  fill: #fff;
  stroke: #16a34a;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

body.monitor-page .network-latest-value-badge { fill: #166534; }

body.monitor-page .network-latest-value-label {
  fill: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
}

body.monitor-page .network-chart-crosshair {
  stroke: #68766b;
  stroke-dasharray: 4 4;
  stroke-width: 1;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

body.monitor-page .network-chart-cursor {
  opacity: 0;
  pointer-events: none;
}

body.monitor-page .network-chart-crosshair.is-visible,
body.monitor-page .network-chart-cursor.is-visible { opacity: 1; }

html.dark body.monitor-page .network-latest-value-line,
html.dark body.monitor-page .network-latest-value-marker,
html.dark body.monitor-page .network-chart-cursor { stroke: var(--iv-lime); }
html.dark body.monitor-page .network-latest-value-badge { fill: #637517; }

/* Logs: one clean identity line and stronger count/device contrast. */
.logs-page .logs-secondary-line {
  margin: .18rem 0 0;
  color: #68766b !important;
}

html.dark .logs-page .logs-secondary-line { color: #a8b6aa !important; }

.logs-room-summary-card {
  min-height: 88px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.logs-room-summary-card:hover { transform: translateY(-1px); }

.logs-room-summary-card strong {
  min-width: 2.4ch;
  color: #244c31 !important;
  font-size: 1.7rem !important;
  font-weight: 950;
  text-align: right;
}

.logs-room-summary-card small {
  color: #59685d !important;
  font-weight: 750;
}

.logs-room-summary-card.is-selected {
  border-color: var(--iv-lime-strong) !important;
  background: var(--iv-lime-soft) !important;
}

html.dark .logs-room-summary-card strong { color: var(--iv-lime) !important; }
html.dark .logs-room-summary-card small { color: #c5d0c6 !important; }
html.dark .logs-room-summary-card.is-selected { background: rgba(192, 213, 48, .12) !important; }

.logs-page .log-device-badge {
  min-width: 5.5rem;
  border-width: 2px !important;
  color: #fff !important;
  letter-spacing: .01em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.logs-page .log-device-light { border-color: #fbbf24 !important; background: #a16207 !important; color: #fff !important; }
.logs-page .log-device-fan { border-color: #22d3ee !important; background: #0e7490 !important; color: #fff !important; }
.logs-page .log-device-air { border-color: #86efac !important; background: #166534 !important; color: #fff !important; }
.logs-page .log-device-perfume { border-color: #f9a8d4 !important; background: #be185d !important; color: #fff !important; }
.logs-page .log-device-default { border-color: #cbd5e1 !important; background: #475569 !important; color: #fff !important; }

/* Settings: selected Manage room must remain legible in every theme. */
.settings-room-permission-toggle.is-manage.is-selected,
.settings-user-room-choice.is-selected .settings-room-permission-toggle.is-manage.is-selected {
  border-color: #173322 !important;
  background: #244c31 !important;
  color: #fff !important;
}

.settings-room-permission-toggle.is-manage.is-selected strong,
.settings-user-room-choice.is-selected .settings-room-permission-toggle.is-manage.is-selected strong {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.settings-room-permission-toggle.is-manage.is-selected small,
.settings-user-room-choice.is-selected .settings-room-permission-toggle.is-manage.is-selected small {
  color: #e3efe6 !important;
}

.settings-room-permission-toggle.is-manage:not(.is-selected) strong {
  color: #17221a !important;
}

html.dark .settings-room-permission-toggle.is-manage:not(.is-selected) strong {
  color: #f7f9f4 !important;
}

/* Logout: clear danger action, with a deliberately dark-red hover state. */
.navbar-logout-btn,
.navbar-mobile-logout,
html.dark .navbar-logout-btn,
html.dark .navbar-mobile-logout {
  border: 1px solid #dc6b62 !important;
  background: #feeceb !important;
  color: #9f211b !important;
  font-weight: 900 !important;
}

.navbar-logout-btn:hover,
.navbar-mobile-logout:hover,
html.dark .navbar-logout-btn:hover,
html.dark .navbar-mobile-logout:hover {
  border-color: #681512 !important;
  background: #8f1d18 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(104, 21, 18, .24) !important;
}

@media (max-width: 600px) {
  .room-icon-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .room-icon-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   V1.32.0 ROOM PHOTOS, HORIZONTAL SCHEDULE & MOBILE NAV
   ========================================================= */

/* Room directory uses real images instead of emoji icons. */
.rooms-directory-icon-wrap {
  align-items: center;
  justify-items: center;
}

.rooms-directory-icon.rooms-directory-image {
  width: 72px;
  height: 72px;
  overflow: hidden;
  padding: 0;
  border: 2px solid rgba(168, 191, 32, .48);
  border-radius: 20px;
  background: #eef4e9 !important;
  box-shadow: 0 8px 18px rgba(22, 50, 32, .14);
}

.rooms-directory-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rooms-directory-icon-edit {
  right: -9px;
  bottom: -8px;
  width: 30px;
  height: 30px;
}

.rooms-directory-icon-edit svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.rooms-directory-status {
  border-color: #27a55d !important;
  background: #e4f7e9 !important;
  color: #0d6934 !important;
  font-weight: 950 !important;
  box-shadow: inset 0 0 0 1px rgba(13, 105, 52, .08);
}

html.dark .rooms-directory-status {
  border-color: #3fd47c !important;
  background: #103c25 !important;
  color: #8df0b3 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}

.room-image-editor {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--iv-line);
  border-radius: 1.15rem;
  background: var(--iv-surface-soft);
}

.room-image-preview-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(168, 191, 32, .55);
  border-radius: 1.15rem;
  background: #eef4e9;
  box-shadow: 0 10px 24px rgba(20, 43, 28, .12);
}

.room-image-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-image-editor-actions {
  display: grid;
  gap: .6rem;
}

.room-image-choose,
.room-image-reset {
  min-height: 42px;
  padding: .65rem .85rem;
  border-radius: .8rem;
  font-size: .76rem;
  font-weight: 900;
}

.room-image-choose {
  border: 1px solid var(--iv-lime-strong);
  background: var(--iv-lime);
  color: #17221a;
}

.room-image-reset {
  border: 1px solid var(--iv-line);
  background: var(--iv-surface);
  color: var(--iv-forest);
}

.room-image-editor-actions small {
  color: var(--iv-muted);
  font-size: .65rem;
  line-height: 1.45;
}

html.dark .room-image-editor {
  border-color: #42664a;
  background: #102319;
}

html.dark .room-image-reset {
  border-color: #42664a;
  background: #17301f;
  color: #dfe9e1;
}

/* Weekly schedule: days are rows and time runs horizontally. */
.schedule-calendar-shell-horizontal { background: var(--iv-surface) !important; }
.schedule-calendar-horizontal-grid { min-width: 960px; }

.schedule-horizontal-header,
.schedule-horizontal-row {
  display: grid;
  grid-template-columns: 108px minmax(820px, 1fr);
}

.schedule-horizontal-header {
  position: sticky;
  z-index: 5;
  top: 0;
  min-height: 56px;
  border-bottom: 1px solid var(--iv-line);
  background: #f1f6ed;
}

.schedule-horizontal-corner,
.schedule-horizontal-day {
  display: grid;
  align-content: center;
  padding: .65rem .8rem;
  border-right: 1px solid var(--iv-line);
}

.schedule-horizontal-corner {
  color: var(--iv-muted);
  font-size: .68rem;
  font-weight: 900;
  text-align: center;
}

.schedule-horizontal-time-axis,
.schedule-horizontal-track { position: relative; }

.schedule-horizontal-time-axis span {
  position: absolute;
  top: 50%;
  color: var(--iv-muted);
  font-size: .62rem;
  font-weight: 850;
  transform: translate(-50%, -50%);
}

.schedule-horizontal-row {
  min-height: 62px;
  border-bottom: 1px solid var(--iv-line);
}

.schedule-horizontal-row:last-child { border-bottom: 0; }

.schedule-horizontal-day {
  background: #f8faf5;
  text-align: center;
}

.schedule-horizontal-day strong {
  color: var(--iv-ink);
  font-size: .82rem;
  font-weight: 950;
}

.schedule-horizontal-day small {
  margin-top: .12rem;
  color: var(--iv-muted);
  font-size: .58rem;
  font-weight: 750;
}

.schedule-horizontal-row.is-today .schedule-horizontal-day {
  background: var(--iv-lime-soft);
}

.schedule-horizontal-row.is-today .schedule-horizontal-day strong {
  color: var(--iv-forest-strong);
}

.schedule-horizontal-track {
  overflow: hidden;
  background: var(--iv-surface);
}

.schedule-horizontal-row.is-today .schedule-horizontal-track {
  background: rgba(192, 213, 48, .055);
}

.schedule-horizontal-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(65, 89, 70, .18);
}

.schedule-horizontal-event {
  position: absolute;
  z-index: 2;
  display: flex;
  min-width: 60px;
  height: 34px;
  box-sizing: border-box;
  align-items: center;
  gap: .55rem;
  overflow: hidden;
  padding: .38rem .65rem;
  border: 1px solid #76902a;
  border-left: 5px solid #294c35;
  border-radius: .65rem;
  background: #e5efb7;
  color: #17221a;
  box-shadow: 0 4px 10px rgba(31, 65, 40, .12);
  text-decoration: none;
  white-space: nowrap;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.schedule-horizontal-event:hover {
  z-index: 3;
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 7px 15px rgba(31, 65, 40, .17);
}

.schedule-horizontal-event strong {
  overflow: hidden;
  font-size: .68rem;
  font-weight: 950;
  text-overflow: ellipsis;
}

.schedule-horizontal-event span { font-size: .6rem; font-weight: 850; }
.schedule-horizontal-event small { font-size: .55rem; font-weight: 750; opacity: .8; }
.schedule-horizontal-event.color-1 { border-color: #5a9968; border-left-color: #2e6842; background: #dcecdf; }
.schedule-horizontal-event.color-2 { border-color: #95a72e; border-left-color: #667719; background: #eef2c8; }
.schedule-horizontal-event.color-3 { border-color: #b48b38; border-left-color: #805b18; background: #f2e8c8; }
.schedule-horizontal-event.color-4 { border-color: #4f9187; border-left-color: #24675d; background: #d9eee8; }

.schedule-horizontal-empty {
  position: absolute;
  top: 50%;
  left: 1rem;
  color: var(--iv-muted);
  font-size: .65rem;
  font-weight: 750;
  transform: translateY(-50%);
}

html.dark .schedule-horizontal-header,
html.dark .schedule-horizontal-day { background: #142b1c; }
html.dark .schedule-horizontal-row.is-today .schedule-horizontal-day { background: #344719; }
html.dark .schedule-horizontal-day strong { color: #f7f9f4; }
html.dark .schedule-horizontal-row.is-today .schedule-horizontal-day strong { color: var(--iv-lime); }
html.dark .schedule-horizontal-track { background: #0f2217; }
html.dark .schedule-horizontal-row.is-today .schedule-horizontal-track { background: #142b1c; }
html.dark .schedule-horizontal-grid-line { background: rgba(168, 182, 170, .2); }

html.dark .schedule-horizontal-event {
  border-color: #73904a;
  border-left-color: var(--iv-lime);
  background: #294c35;
  color: #fff;
}

html.dark .schedule-horizontal-event.color-1 { border-color: #5d8f69; border-left-color: #7bd69b; background: #24523a; }
html.dark .schedule-horizontal-event.color-2 { border-color: #82943a; border-left-color: #c0d530; background: #46551c; }
html.dark .schedule-horizontal-event.color-3 { border-color: #a88039; border-left-color: #f0bd55; background: #5d471e; }
html.dark .schedule-horizontal-event.color-4 { border-color: #4d9186; border-left-color: #72d2c1; background: #22554e; }

/* Settings: keep the selected profile comfortably away from panel edges. */
.settings-selected-user-panel { padding: 1.15rem 1.25rem !important; }
.settings-selected-user-identity {
  padding: .9rem 1rem 1rem !important;
  border: 1px solid var(--iv-line) !important;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .62);
}

html.dark .settings-selected-user-identity {
  border-color: #42664a !important;
  background: #17301f;
}

/* Logs: action/status labels stay readable, including TURN_ON/TURN_OFF. */
.logs-page .log-action-badge {
  min-width: 6.6rem;
  border: 2px solid transparent !important;
  color: #fff !important;
  letter-spacing: .025em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 9px rgba(5, 20, 11, .18);
}

.logs-page .log-action-badge.is-on { border-color: #4ade80 !important; background: #126536 !important; }
.logs-page .log-action-badge.is-off { border-color: #fb7185 !important; background: #a61b2b !important; }
.logs-page .log-action-badge.is-temperature { border-color: #fde047 !important; background: #854d0e !important; }
.logs-page .log-action-badge.is-fan { border-color: #67e8f9 !important; background: #0e7490 !important; }
.logs-page .log-action-badge.is-mode { border-color: #a7f3d0 !important; background: #24675d !important; }
.logs-page .log-action-badge.is-swing { border-color: #f0abfc !important; background: #86198f !important; }
.logs-page .log-action-badge.is-neutral { border-color: #d1d5db !important; background: #475569 !important; }

/* Dark mobile navbar remains inside the Innovative Village palette. */
html.dark body #mobileMenu,
html.dark body .navbar-mobile-panel {
  border-top-color: #42664a !important;
  background: #0d1c13 !important;
  background-color: #0d1c13 !important;
}

html.dark body #mobileMenu .navbar-mobile-profile {
  border-color: #52735a !important;
  background: #17301f !important;
  background-color: #17301f !important;
}

html.dark body #mobileMenu .navbar-mobile-links .nav-mobile-link {
  border-color: #42664a !important;
  background: #142b1c !important;
  background-color: #142b1c !important;
  color: #edf4ee !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18) !important;
}

html.dark body #mobileMenu .navbar-mobile-links .nav-mobile-link .nav-mobile-text {
  color: #edf4ee !important;
}

html.dark body #mobileMenu .navbar-mobile-links .nav-mobile-link:hover,
html.dark body #mobileMenu .navbar-mobile-links .nav-mobile-link:active {
  border-color: #6f8d4a !important;
  background: #244c31 !important;
  background-color: #244c31 !important;
  color: #fff !important;
}

html.dark body #mobileMenu .nav-mobile-link.is-active,
html.dark body #mobileMenu .nav-mobile-link.is-active:hover,
html.dark body #mobileMenu .nav-mobile-link.is-active:active {
  border-color: #d5e557 !important;
  background: var(--iv-lime) !important;
  background-color: var(--iv-lime) !important;
  color: #101a13 !important;
}

html.dark body #mobileMenu .nav-mobile-link.is-active .nav-mobile-text {
  color: #101a13 !important;
}

html.dark body .navbar-mobile-actions .navbar-icon-btn {
  border-color: #42664a !important;
  background: #17301f !important;
  color: var(--iv-lime) !important;
}

/* Logout is neutral until pointed at, then becomes an unmistakable red action. */
.navbar-logout-btn:hover,
.navbar-mobile-logout:hover,
#mobileMenu .navbar-mobile-logout:hover,
html.dark .navbar-logout-btn:hover,
html.dark #mobileMenu .navbar-mobile-logout:hover {
  border-color: #7a1713 !important;
  background: #c62b24 !important;
  background-color: #c62b24 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(122, 23, 19, .3) !important;
}

@media (max-width: 600px) {
  .room-image-editor { grid-template-columns: 104px minmax(0, 1fr); }
  .settings-selected-user-panel { padding: .85rem !important; }
  .settings-selected-user-identity { padding: .8rem !important; }
}

/* =========================================================
   V1.33.0 TUYA-STYLE DEVICE POWER SWITCHES
   One clear control mirrors the current Home Assistant state.
   ========================================================= */

.device-power-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  margin: .55rem 0 0;
  color: #68766b;
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1.3;
}

.device-power-status::before {
  width: .68rem;
  height: .68rem;
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #89958b;
  box-shadow: 0 0 0 3px rgba(104, 118, 107, .16);
  content: "";
}

.device-power-status.is-on {
  color: #14783e;
}

.device-power-status.is-on::before {
  background: #20bd63;
  box-shadow: 0 0 0 3px rgba(32, 189, 99, .18), 0 0 12px rgba(32, 189, 99, .28);
}

.device-page-wrap .device-actions {
  display: block !important;
  width: 100%;
}

.device-power-toggle {
  display: flex !important;
  width: 100% !important;
  min-height: 68px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .78rem .9rem .78rem 1.05rem !important;
  border: 2px solid #9ba89d !important;
  border-radius: 1.1rem !important;
  background: #f4f7f1 !important;
  color: #223228 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 5px 14px rgba(26, 58, 35, .09) !important;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.device-power-toggle:hover {
  border-color: #657f3c !important;
  background: #eef4e5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 8px 18px rgba(26, 58, 35, .13) !important;
  transform: translateY(-1px);
}

.device-power-toggle:focus-visible {
  outline: 3px solid rgba(192, 213, 48, .68);
  outline-offset: 3px;
}

.device-power-toggle-copy {
  display: grid;
  min-width: 0;
  gap: .12rem;
}

.device-power-toggle-label {
  color: #344039;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.2;
}

.device-power-toggle-hint {
  color: #68766b;
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.35;
}

.device-power-toggle-track {
  position: relative;
  width: 68px;
  height: 38px;
  flex: 0 0 68px;
  border: 1px solid #a5afa7;
  border-radius: 999px;
  background: #cbd2cc;
  box-shadow: inset 0 2px 5px rgba(19, 38, 25, .14);
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.device-power-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(26, 55, 34, .12);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(12, 30, 18, .24);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .22s ease;
}

.device-power-toggle.is-on {
  border-color: #91aa18 !important;
  background: #eff6cc !important;
  color: #17281c !important;
}

.device-power-toggle.is-on .device-power-toggle-label {
  color: #18683a;
}

.device-power-toggle.is-on .device-power-toggle-hint {
  color: #48612d;
}

.device-power-toggle.is-on .device-power-toggle-track {
  border-color: #9eb41d;
  background: var(--iv-lime);
  box-shadow: inset 0 2px 5px rgba(51, 70, 12, .18), 0 0 0 4px rgba(192, 213, 48, .14);
}

.device-power-toggle.is-on .device-power-toggle-knob {
  background: #173d26;
  transform: translateX(30px);
}

.device-power-toggle:disabled {
  cursor: not-allowed !important;
  filter: grayscale(.25);
  opacity: .55 !important;
  transform: none !important;
}

.device-power-toggle.is-pending .device-power-toggle-track {
  animation: device-power-pulse 1s ease-in-out infinite;
}

@keyframes device-power-pulse {
  50% { box-shadow: 0 0 0 7px rgba(192, 213, 48, .18); }
}

.dynamic-device-actions.has-power-toggle {
  grid-template-columns: minmax(0, 1fr);
}

.dynamic-device-actions .device-power-toggle {
  min-height: 62px;
  padding: .68rem .75rem .68rem .9rem !important;
  color: #223228 !important;
  font-size: inherit;
}

.dynamic-device-actions .device-power-toggle.is-on {
  color: #17281c !important;
}

.dynamic-device-current strong.is-off {
  color: #68766b;
}

html.dark .device-power-status.is-off {
  color: #bdc8bf;
}

html.dark .device-power-status::before {
  border-color: #142b1c;
  background: #87958a;
}

html.dark .device-power-status.is-on {
  color: #73db99;
}

html.dark .device-power-toggle,
html.dark .dynamic-device-actions .device-power-toggle {
  border-color: #526659 !important;
  background: #17271d !important;
  color: #edf4ee !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 6px 16px rgba(0, 0, 0, .2) !important;
}

html.dark .device-power-toggle:hover,
html.dark .dynamic-device-actions .device-power-toggle:hover {
  border-color: #7a9441 !important;
  background: #1d3424 !important;
}

html.dark .device-power-toggle-label {
  color: #f2f6f2;
}

html.dark .device-power-toggle-hint {
  color: #aebbb0;
}

html.dark .device-power-toggle-track {
  border-color: #68756b;
  background: #6f7d72;
}

html.dark .device-power-toggle.is-on,
html.dark .dynamic-device-actions .device-power-toggle.is-on {
  border-color: #a9c425 !important;
  background: #203b28 !important;
  color: #fff !important;
}

html.dark .device-power-toggle.is-on .device-power-toggle-label {
  color: #dbea67;
}

html.dark .device-power-toggle.is-on .device-power-toggle-hint {
  color: #c5d4c8;
}

html.dark .device-power-toggle.is-on .device-power-toggle-track {
  border-color: #d0e254;
  background: var(--iv-lime);
}

html.dark .device-power-toggle.is-on .device-power-toggle-knob {
  background: #12271a;
}

html.dark .dynamic-device-current strong.is-off {
  color: #bdc8bf;
}

@media (max-width: 600px) {
  .device-power-toggle {
    min-height: 62px;
    padding: .68rem .7rem .68rem .9rem !important;
  }

  .device-power-toggle-track {
    width: 60px;
    height: 34px;
    flex-basis: 60px;
  }

  .device-power-toggle-knob {
    width: 26px;
    height: 26px;
  }

  .device-power-toggle.is-on .device-power-toggle-knob {
    transform: translateX(26px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-power-toggle,
  .device-power-toggle-track,
  .device-power-toggle-knob {
    transition: none;
  }

  .device-power-toggle.is-pending .device-power-toggle-track {
    animation: none;
  }
}

/* =========================================================
   V1.34.0 COMPACT DEVICE ROWS + EDITABLE DEVICE IMAGES
   ========================================================= */

.device-control-stack {
  display: grid;
  gap: .85rem;
}

.device-control-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  min-height: 116px;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 2px solid #a7b3a9;
  border-radius: 1.75rem;
  background: rgba(251, 253, 248, .96);
  box-shadow: 0 8px 22px rgba(22, 50, 32, .08);
}

.device-control-row-air {
  border-color: #b7c2b8;
  background: #f5f8f2;
}

.device-control-icon-button {
  position: relative;
  display: grid;
  width: 82px;
  height: 82px;
  overflow: visible;
  place-items: center;
  padding: 0;
  border: 2px solid #d7dfd5;
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: 0 6px 16px rgba(22, 50, 32, .1);
}

.device-control-icon-button:disabled {
  cursor: default;
  opacity: 1;
}

.device-control-icon-button.is-editable {
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.device-control-icon-button.is-editable:hover {
  border-color: var(--iv-lime-strong);
  box-shadow: 0 8px 20px rgba(104, 126, 29, .2);
  transform: translateY(-2px);
}

.device-control-icon-button.is-editable:focus-visible {
  outline: 3px solid rgba(192, 213, 48, .65);
  outline-offset: 3px;
}

.device-control-icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(1.35rem - 3px);
}

.device-control-icon-edit {
  position: absolute;
  right: -8px;
  bottom: -7px;
  display: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--iv-lime);
  color: #17221a;
  box-shadow: 0 5px 12px rgba(20, 43, 28, .22);
  font-size: .78rem;
  font-weight: 950;
}

.device-control-icon-button.is-editable .device-control-icon-edit {
  display: grid;
}

.device-control-copy {
  min-width: 0;
}

.device-control-copy h2,
.device-control-copy h3 {
  margin: 0;
  color: #17221a;
  font-size: clamp(1.12rem, 2.3vw, 1.38rem);
  font-weight: 950;
  line-height: 1.28;
}

.device-control-row .device-power-status {
  justify-content: flex-start;
  margin-top: .42rem;
  font-size: clamp(1.18rem, 2.6vw, 1.48rem);
}

.device-control-row .device-power-status::before {
  width: .76rem;
  height: .76rem;
}

.device-control-row .device-actions,
.device-page-wrap .device-control-row .device-actions {
  width: auto !important;
  margin: 0 !important;
}

.device-control-row .device-power-toggle,
.device-control-row .device-power-toggle:hover,
.device-control-row .device-power-toggle.is-on,
html.dark .device-control-row .device-power-toggle,
html.dark .device-control-row .device-power-toggle:hover,
html.dark .device-control-row .device-power-toggle.is-on {
  width: 82px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.device-control-row .device-power-toggle-copy {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.device-control-row .device-power-toggle-track {
  width: 82px;
  height: 46px;
  flex-basis: 82px;
  border: 2px solid #a6b0a8;
  background: #cfd5d0;
}

.device-control-row .device-power-toggle-knob {
  top: 3px;
  left: 3px;
  width: 36px;
  height: 36px;
  border-color: rgba(26, 55, 34, .18);
}

.device-control-row .device-power-toggle.is-on .device-power-toggle-track {
  border-color: #94a919;
  background: var(--iv-lime);
}

.device-control-row .device-power-toggle.is-on .device-power-toggle-knob {
  background: #fff;
  transform: translateX(36px);
}

html.dark .device-control-row {
  border-color: #496650;
  background: #14291b;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

html.dark .device-control-row-air {
  border-color: #527159;
  background: #172d1e;
}

html.dark .device-control-icon-button {
  border-color: #58705e;
  background: #eef4e9;
}

html.dark .device-control-copy h2,
html.dark .device-control-copy h3 {
  color: #f7faf5;
}

html.dark .device-control-row .device-power-toggle-track {
  border-color: #738077;
  background: #647169;
}

html.dark .device-control-row .device-power-toggle.is-on .device-power-toggle-track {
  border-color: #d2e355;
  background: var(--iv-lime);
}

/* ================================================================
   V1.35.0 SENSOR SIMULATION + REAL HOME ASSISTANT DEVICES
   ================================================================ */
.sensor-simulation-panel {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid #9eaf60;
  border-radius: 1.75rem;
  background: linear-gradient(145deg, #fbfdf7, #f0f5e8);
  box-shadow: 0 10px 26px rgba(22, 50, 32, .09);
}

.sensor-simulation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sensor-simulation-heading h2 {
  margin: .2rem 0 .25rem;
  color: var(--iv-ink);
  font-size: clamp(1.08rem, 2.5vw, 1.35rem);
  font-weight: 950;
}

.sensor-simulation-heading > div > p:last-child {
  max-width: 45rem;
  margin: 0;
  color: var(--iv-muted);
  font-size: .78rem;
  line-height: 1.55;
}

.sensor-simulation-badge {
  flex: 0 0 auto;
  padding: .45rem .72rem;
  border: 1px solid #a9b3ab;
  border-radius: 999px;
  background: #e7ebe7;
  color: #59655b;
  font-size: .72rem;
  font-weight: 900;
}

.sensor-simulation-badge.is-enabled {
  border-color: #1e9e50;
  background: #dcf6e4;
  color: #09652e;
  box-shadow: 0 0 0 4px rgba(32, 189, 99, .1);
}

.sensor-simulation-badge.is-real {
  border-color: #e58a17;
  background: #fff0d1;
  color: #914400;
  box-shadow: 0 0 0 4px rgba(229, 138, 23, .1);
}

.sensor-simulation-controls {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr);
  gap: .8rem;
  margin-top: 1.1rem;
}

.sensor-simulation-controls.is-motion-only {
  grid-template-columns: minmax(260px, 1fr);
}

.sensor-simulation-mode {
  min-inline-size: 0;
  margin: .9rem 0 0;
  padding: 0;
  border: 0;
}

.sensor-simulation-mode legend {
  margin-bottom: .5rem;
  color: var(--iv-ink);
  font-size: .78rem;
  font-weight: 900;
}

.sensor-simulation-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.sensor-simulation-mode-option {
  display: flex;
  min-width: 0;
  min-height: 78px;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .95rem;
  border: 1px solid var(--iv-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .74);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sensor-simulation-mode-option:has(input:checked) {
  border-color: var(--iv-lime-strong);
  background: #f4f9d8;
  box-shadow: 0 0 0 3px rgba(192, 213, 48, .16);
}

.sensor-simulation-mode-option.is-real:has(input:checked) {
  border-color: #e58a17;
  background: #fff4dc;
  box-shadow: 0 0 0 3px rgba(229, 138, 23, .14);
}

.sensor-simulation-mode-option input {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  margin-top: .12rem;
  accent-color: var(--iv-lime-strong);
}

.sensor-simulation-mode-option.is-real input {
  accent-color: #cf6d00;
}

.sensor-simulation-mode-option span {
  display: grid;
  min-width: 0;
  gap: .2rem;
}

.sensor-simulation-mode-option strong {
  color: var(--iv-ink);
  font-size: .82rem;
  line-height: 1.35;
}

.sensor-simulation-mode-option small {
  color: var(--iv-muted);
  font-size: .68rem;
  line-height: 1.5;
}

.sensor-simulation-mapping-summary,
.sensor-simulation-real-warning {
  display: none;
  margin: .62rem 0 0;
  font-size: .69rem;
  font-weight: 750;
  line-height: 1.5;
}

.sensor-simulation-mode.is-real-selected .sensor-simulation-mapping-summary,
.sensor-simulation-mode.is-real-selected .sensor-simulation-real-warning {
  display: block;
}

.sensor-simulation-mapping-summary {
  color: #176236;
}

.sensor-simulation-mapping-summary.is-missing,
.sensor-simulation-real-warning {
  color: #9a4c00;
}

.sensor-simulation-field,
.sensor-simulation-motion {
  min-height: 76px;
  padding: .85rem 1rem;
  border: 1px solid var(--iv-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .78);
}

.sensor-simulation-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--iv-ink);
  font-size: .8rem;
  font-weight: 850;
}

.sensor-temperature-input {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.sensor-temperature-input input {
  width: 82px;
  padding: .58rem .65rem;
  border: 1px solid #91a095;
  border-radius: .75rem;
  background: #fff;
  color: #17221a;
  font-size: 1rem;
  font-weight: 900;
}

.sensor-simulation-motion {
  display: flex;
  align-items: center;
  gap: .8rem;
  cursor: pointer;
}

.sensor-simulation-motion input {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  accent-color: var(--iv-lime-strong);
}

.sensor-simulation-motion span {
  display: grid;
  gap: .15rem;
}

.sensor-simulation-motion strong {
  color: var(--iv-ink);
  font-size: .88rem;
}

.sensor-simulation-motion small {
  color: var(--iv-muted);
  font-size: .7rem;
}

.sensor-simulation-message {
  min-height: 1.2rem;
  margin: .72rem 0 0;
  color: #256036;
  font-size: .72rem;
  font-weight: 750;
}

.sensor-simulation-message.is-error {
  color: #b42318;
}

.sensor-simulation-actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: .25rem;
}

.sensor-simulation-start,
.sensor-simulation-stop {
  min-height: 44px;
  padding: .68rem 1rem;
  border-radius: .85rem;
  font-size: .78rem;
  font-weight: 900;
}

.sensor-simulation-start {
  border: 1px solid var(--iv-lime-strong);
  background: var(--iv-lime);
  color: #17221a;
}

.sensor-simulation-stop {
  border: 1px solid #c8665e;
  background: #fff2f1;
  color: #9f211b;
}

.sensor-simulation-start:disabled,
.sensor-simulation-stop:disabled {
  cursor: not-allowed;
  filter: grayscale(.25);
  opacity: .52;
}

html.dark .sensor-simulation-panel {
  border-color: #58705e;
  background: linear-gradient(145deg, #142b1c, #102219);
}

html.dark .sensor-simulation-heading h2,
html.dark .sensor-simulation-field,
html.dark .sensor-simulation-motion strong,
html.dark .sensor-simulation-mode legend,
html.dark .sensor-simulation-mode-option strong {
  color: #f7faf5;
}

html.dark .sensor-simulation-heading > div > p:last-child,
html.dark .sensor-simulation-motion small,
html.dark .sensor-simulation-mode-option small {
  color: #b8c5ba;
}

html.dark .sensor-simulation-field,
html.dark .sensor-simulation-motion,
html.dark .sensor-simulation-mode-option {
  border-color: #405d47;
  background: #172f20;
}

html.dark .sensor-simulation-mode-option:has(input:checked) {
  border-color: #b9d137;
  background: #2d3d1c;
}

html.dark .sensor-simulation-mode-option.is-real:has(input:checked) {
  border-color: #f2a63b;
  background: #432c13;
}

html.dark .sensor-temperature-input input {
  border-color: #607366;
  background: #102219;
  color: #fff;
}

html.dark .sensor-simulation-badge {
  border-color: #657369;
  background: #233529;
  color: #cbd5cc;
}

html.dark .sensor-simulation-badge.is-enabled {
  border-color: #3fd47c;
  background: #103c25;
  color: #8df0b3;
}

html.dark .sensor-simulation-badge.is-real {
  border-color: #f2a63b;
  background: #482d0d;
  color: #ffd58e;
}

html.dark .sensor-simulation-mapping-summary {
  color: #9ce8b4;
}

html.dark .sensor-simulation-mapping-summary.is-missing,
html.dark .sensor-simulation-real-warning {
  color: #ffc36d;
}

html.dark .sensor-simulation-stop {
  border-color: #d46f66;
  background: #4b211e;
  color: #ffd9d5;
}

@media (max-width: 600px) {
  .device-control-row {
    grid-template-columns: 66px minmax(0, 1fr) auto;
    min-height: 98px;
    gap: .75rem;
    padding: .82rem .88rem;
    border-radius: 1.45rem;
  }

  .device-control-icon-button {
    width: 66px;
    height: 66px;
    border-radius: 1.05rem;
  }

  .device-control-icon-image {
    border-radius: calc(1.05rem - 3px);
  }

  .device-control-row .device-power-toggle,
  .device-control-row .device-power-toggle:hover,
  .device-control-row .device-power-toggle.is-on,
  html.dark .device-control-row .device-power-toggle,
  html.dark .device-control-row .device-power-toggle:hover,
  html.dark .device-control-row .device-power-toggle.is-on {
    width: 66px !important;
    min-height: 40px !important;
  }

  .device-control-row .device-power-toggle-track {
    width: 66px;
    height: 38px;
    flex-basis: 66px;
  }

  .device-control-row .device-power-toggle-knob {
    width: 28px;
    height: 28px;
  }

  .device-control-row .device-power-toggle.is-on .device-power-toggle-knob {
    transform: translateX(28px);
  }

  .sensor-simulation-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .sensor-simulation-badge {
    align-self: flex-start;
  }

  .sensor-simulation-controls {
    grid-template-columns: 1fr;
  }

  .sensor-simulation-mode-options {
    grid-template-columns: 1fr;
  }

  .sensor-simulation-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sensor-simulation-start {
    grid-row: 1;
  }
}

/* ================================================================
   V1.36.0 ROOM SENSOR ROWS + SIMPLIFIED REAL-DEVICE SIMULATION
   ================================================================ */
.room-sensor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.room-sensor-row {
  grid-template-columns: 82px minmax(0, 1fr);
  min-width: 0;
}

.room-sensor-icon {
  color: #2c5838;
  background: #f1f6df;
  box-shadow: inset 0 0 0 1px rgba(137, 158, 51, .12), 0 6px 16px rgba(22, 50, 32, .08);
}

.room-sensor-icon svg {
  width: 42px;
  height: 42px;
}

.room-sensor-copy {
  display: grid;
  align-content: center;
  gap: .34rem;
}

.room-sensor-value {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
  margin: 0;
  color: #17221a;
  font-size: clamp(1.16rem, 2.4vw, 1.48rem);
  font-weight: 950;
  line-height: 1.3;
}

.room-temperature-value {
  color: #385d18;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
}

.room-motion-value::before {
  width: .78rem;
  height: .78rem;
  flex: 0 0 .78rem;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: #89958b;
  box-shadow: 0 0 0 2px rgba(83, 101, 88, .16);
  content: "";
}

.room-motion-value.is-clear {
  color: #18723b;
}

.room-motion-value.is-clear::before {
  background: #21c563;
  box-shadow: 0 0 0 3px rgba(33, 197, 99, .14);
}

.room-motion-value.is-detected {
  color: #a94c09;
}

.room-motion-value.is-detected::before {
  background: #ff7a16;
  box-shadow: 0 0 0 3px rgba(255, 122, 22, .16);
  animation: room-motion-pulse 1.3s ease-in-out infinite;
}

@keyframes room-motion-pulse {
  50% { box-shadow: 0 0 0 7px rgba(255, 122, 22, .08); }
}

.air-remote-panel {
  border-color: #a7b3a9 !important;
  background: #f8fbf4 !important;
}

.air-remote-panel .bg-blue-50,
.air-remote-panel .bg-gray-50 {
  border-color: #d3ddbd !important;
  background: #f0f5e6 !important;
}

.air-remote-panel .text-blue-700,
.air-remote-panel .text-sky-700,
.air-remote-panel .text-purple-700,
.air-remote-panel .text-amber-700 {
  color: #476b1a !important;
}

.sensor-simulation-master {
  display: flex;
  min-width: 0;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border: 1px solid #d19645;
  border-radius: 1rem;
  background: #fff7e8;
}

.sensor-simulation-master > span {
  display: grid;
  min-width: 0;
  gap: .2rem;
}

.sensor-simulation-master strong {
  color: #542f08;
  font-size: .86rem;
  font-weight: 950;
}

.sensor-simulation-master small {
  color: #765126;
  font-size: .7rem;
  line-height: 1.45;
}

.sensor-simulation-switch {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .55rem;
  padding: .42rem .48rem .42rem .7rem;
  border: 1px solid #9fa9a1;
  border-radius: 999px;
  background: #f8faf8;
  color: #5e6960;
  cursor: pointer;
  font: inherit;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.sensor-simulation-switch-label {
  min-width: 2rem;
  font-size: .72rem;
  font-weight: 950;
  text-align: center;
}

.sensor-simulation-switch-track {
  position: relative;
  display: block;
  width: 64px;
  height: 36px;
  flex: 0 0 64px;
  border: 2px solid #a2ada5;
  border-radius: 999px;
  background: #ccd2cd;
  box-shadow: inset 0 2px 5px rgba(19, 38, 25, .14);
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.sensor-simulation-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(26, 55, 34, .16);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(12, 30, 18, .24);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.sensor-simulation-switch.is-on {
  border-color: #a3b827;
  background: #eef6c9;
  color: #31570f;
  box-shadow: 0 0 0 4px rgba(192, 213, 48, .12);
}

.sensor-simulation-switch.is-on .sensor-simulation-switch-track {
  border-color: #94a919;
  background: var(--iv-lime);
}

.sensor-simulation-switch.is-on .sensor-simulation-switch-knob {
  transform: translateX(28px);
}

.sensor-simulation-switch:focus-visible {
  outline: 3px solid rgba(192, 213, 48, .62);
  outline-offset: 3px;
}

.sensor-simulation-mapping-summary,
.sensor-simulation-real-warning {
  display: block;
}

.sensor-simulation-mapping-summary {
  margin-top: .8rem;
}

.sensor-simulation-actions {
  display: grid;
  grid-template-columns: minmax(180px, 320px);
  justify-content: end;
}

.sensor-simulation-start {
  width: 100%;
}

html.dark .room-sensor-icon {
  border-color: #677c6c;
  background: #eef4e9;
  color: #214a2d;
}

html.dark .room-sensor-value {
  color: #f5f8f4;
}

html.dark .room-temperature-value {
  color: #d8e95b;
}

html.dark .room-motion-value.is-clear {
  color: #83e7a8;
}

html.dark .room-motion-value.is-detected {
  color: #ffbd6f;
}

html.dark .air-remote-panel {
  border-color: #496650 !important;
  background: #14291b !important;
}

html.dark .air-remote-panel .bg-blue-50,
html.dark .air-remote-panel .bg-gray-50,
html.dark .air-remote-panel .dark\:bg-slate-800 {
  border-color: #496650 !important;
  background: #102219 !important;
}

html.dark .air-remote-panel .text-blue-700,
html.dark .air-remote-panel .dark\:text-blue-400,
html.dark .air-remote-panel .dark\:text-blue-300,
html.dark .air-remote-panel .dark\:text-sky-500,
html.dark .air-remote-panel .dark\:text-purple-500,
html.dark .air-remote-panel .dark\:text-amber-500 {
  color: #d8e95b !important;
}

html.dark .sensor-simulation-master {
  border-color: #b97d34;
  background: #35250f;
}

html.dark .sensor-simulation-master strong {
  color: #ffe2aa;
}

html.dark .sensor-simulation-master small {
  color: #dfc79b;
}

html.dark .sensor-simulation-switch {
  border-color: #657369;
  background: #17271d;
  color: #d8e0d9;
}

html.dark .sensor-simulation-switch.is-on {
  border-color: #c8dc4c;
  background: #2b3c1b;
  color: #e9f48d;
}

@media (max-width: 760px) {
  .room-sensor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .room-sensor-row {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .room-sensor-icon svg {
    width: 34px;
    height: 34px;
  }

  .room-sensor-value {
    font-size: 1rem;
  }

  .room-temperature-value {
    font-size: 1.42rem;
  }

  .sensor-simulation-master {
    align-items: flex-start;
  }

  .sensor-simulation-switch {
    align-self: center;
    padding-left: .52rem;
  }

  .sensor-simulation-switch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .sensor-simulation-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-motion-value.is-detected::before {
    animation: none;
  }

  .sensor-simulation-switch,
  .sensor-simulation-switch-track,
  .sensor-simulation-switch-knob {
    transition: none;
  }
}

/* ================================================================
   V1.37.0 USER ROOMS + COMPACT AC REMOTE AND SENSOR TEST CONTROLS
   ================================================================ */
.rooms-empty-state {
  grid-column: 1 / -1;
  display: grid;
  min-height: 190px;
  place-items: center;
  gap: .35rem;
  padding: 1.5rem;
  border: 2px dashed #afbea9;
  border-radius: 1.5rem;
  background: #f5f8ef;
  color: #56655a;
  text-align: center;
}

#roomsHeroActions.hidden,
.rooms-manage-button.hidden {
  display: none !important;
}

.rooms-empty-state-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 1.15rem;
  background: #eaf1d8;
  color: #668036;
}

.rooms-empty-state-icon svg {
  width: 38px;
  height: 38px;
}

.rooms-empty-state > span:last-child {
  display: grid;
  gap: .28rem;
}

.rooms-empty-state strong {
  color: #193023;
  font-size: 1rem;
  font-weight: 950;
}

.rooms-empty-state small {
  max-width: 34rem;
  font-size: .75rem;
  line-height: 1.55;
}

.room-compact-panel {
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 2px solid #a7b3a9;
  border-radius: 1.75rem;
  background: #f8fbf4;
  box-shadow: 0 10px 26px rgba(22, 50, 32, .09);
}

.room-compact-heading,
.sensor-simulation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.room-compact-heading h2,
.sensor-simulation-heading h2 {
  margin: .18rem 0 .2rem;
  color: #17221a;
  font-size: clamp(1.18rem, 2.6vw, 1.5rem);
  font-weight: 950;
  line-height: 1.25;
}

.room-compact-heading > div > p:last-child,
.sensor-simulation-heading > div > p:last-child {
  max-width: 44rem;
  margin: 0;
  color: #657168;
  font-size: .76rem;
  line-height: 1.5;
}

.room-control-stack {
  display: grid;
  gap: .72rem;
}

.room-control-row,
.sensor-simulation-panel .sensor-simulation-master,
.sensor-simulation-panel .sensor-simulation-motion {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 96px;
  box-sizing: border-box;
  align-items: center;
  gap: .9rem;
  margin: 0;
  padding: .78rem .9rem;
  border: 2px solid #b0bcb2;
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 6px 16px rgba(22, 50, 32, .06);
}

.room-control-icon {
  display: grid !important;
  width: 68px;
  height: 68px;
  box-sizing: border-box;
  place-items: center;
  border: 2px solid #d5ded3;
  border-radius: 1.1rem;
  background: #f1f6df;
  color: #2d5a39;
}

.room-control-icon svg {
  width: 36px;
  height: 36px;
}

.room-control-copy {
  display: grid !important;
  min-width: 0;
  gap: .3rem !important;
}

.room-control-copy h3,
.room-control-title {
  margin: 0;
  color: #17221a;
  font-size: clamp(.98rem, 2.2vw, 1.18rem);
  font-weight: 950;
  line-height: 1.25;
}

.room-control-value {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .7rem;
  margin: 0;
}

.room-control-value strong {
  color: #3f681b;
  font-size: clamp(1.16rem, 2.4vw, 1.42rem);
  font-weight: 950;
  line-height: 1.2;
}

.room-control-copy small,
.room-control-value small {
  color: #67736a;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
}

.room-control-actions {
  display: flex !important;
  width: auto !important;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin: 0 !important;
}

.air-temperature-stepper button,
.air-remote-cycle {
  min-height: 46px;
  border: 2px solid #a7b3a9;
  border-radius: .9rem;
  background: #edf2e9;
  color: #263d2d;
  box-shadow: 0 4px 10px rgba(22, 50, 32, .08);
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.air-temperature-stepper button {
  width: 48px;
  padding: 0;
  font-size: 1.55rem;
}

.air-temperature-stepper button.is-primary,
.air-remote-cycle:hover {
  border-color: #9eb31e;
  background: var(--iv-lime);
  color: #17221a;
}

.air-temperature-stepper button:hover,
.air-remote-cycle:hover {
  transform: translateY(-1px);
}

.air-remote-cycle {
  min-width: 106px;
  padding: .62rem .82rem;
  font-size: .78rem;
}

.air-remote-cycle span {
  margin-left: .28rem;
  font-size: 1rem;
}

.sensor-simulation-panel {
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border-width: 2px;
  border-color: #a7b3a9;
  background: #f8fbf4;
}

.sensor-simulation-controls,
.sensor-simulation-controls.is-motion-only {
  display: grid;
  grid-template-columns: 1fr;
  gap: .72rem;
  margin-top: 0;
}

.sensor-simulation-panel .sensor-simulation-master {
  border-color: #b5c290;
  background: #f6f9e8;
}

.sensor-simulation-icon {
  color: #3c6424;
  background: #eef4d9;
}

.sensor-simulation-switch {
  display: block;
  width: 82px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.sensor-simulation-switch:hover,
.sensor-simulation-switch.is-on {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sensor-simulation-switch-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sensor-simulation-switch-track,
.sensor-inline-switch-track {
  position: relative;
  display: block !important;
  width: 82px;
  height: 46px;
  box-sizing: border-box;
  border: 2px solid #a6b0a8;
  border-radius: 999px;
  background: #cfd5d0;
  box-shadow: inset 0 2px 5px rgba(19, 38, 25, .14);
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.sensor-simulation-switch-knob,
.sensor-inline-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  display: block !important;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(26, 55, 34, .18);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(12, 30, 18, .24);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.sensor-simulation-switch.is-on .sensor-simulation-switch-track,
.sensor-inline-switch input:checked + .sensor-inline-switch-track {
  border-color: #94a919;
  background: var(--iv-lime);
  box-shadow: inset 0 2px 5px rgba(51, 70, 12, .18), 0 0 0 4px rgba(192, 213, 48, .14);
}

.sensor-simulation-switch.is-on .sensor-simulation-switch-knob,
.sensor-inline-switch input:checked + .sensor-inline-switch-track .sensor-inline-switch-knob {
  transform: translateX(36px);
}

.sensor-simulation-panel .sensor-simulation-motion {
  cursor: pointer;
}

.sensor-inline-switch {
  position: relative;
  display: block !important;
  width: 82px;
  height: 46px;
}

.sensor-inline-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.sensor-inline-switch input:focus-visible + .sensor-inline-switch-track {
  outline: 3px solid rgba(192, 213, 48, .62);
  outline-offset: 3px;
}

#simulationMotionState.is-on {
  color: #16733b;
  font-weight: 900;
}

.sensor-temperature-input input {
  width: 92px;
  min-height: 46px;
  box-sizing: border-box;
  padding: .5rem .62rem;
  border: 2px solid #9faa9f;
  border-radius: .85rem;
  background: #fff;
  color: #17221a;
  font-size: 1rem;
  font-weight: 950;
  text-align: center;
}

.sensor-temperature-input small {
  color: #3c4d40;
  font-size: .76rem;
  font-weight: 900;
}

.sensor-simulation-note {
  display: grid;
  gap: .25rem;
  margin-top: .72rem;
  padding: .7rem .82rem;
  border: 1px solid #dfc18e;
  border-radius: .9rem;
  background: #fff8ea;
}

.sensor-simulation-mapping-summary,
.sensor-simulation-real-warning {
  margin: 0;
  font-size: .68rem;
  line-height: 1.45;
}

.sensor-simulation-actions {
  display: grid;
  grid-template-columns: minmax(180px, 300px);
  justify-content: end;
  margin-top: .25rem;
}

.sensor-simulation-start {
  width: 100%;
  min-height: 48px;
  border-radius: .95rem;
  box-shadow: 0 5px 14px rgba(103, 128, 25, .14);
}

html.dark .rooms-empty-state {
  border-color: #536c59;
  background: #11251a;
  color: #b8c5ba;
}

html.dark .rooms-empty-state-icon {
  background: #203722;
  color: #d8e95b;
}

html.dark .rooms-empty-state strong {
  color: #f4f8f3;
}

html.dark .room-compact-panel,
html.dark .sensor-simulation-panel {
  border-color: #496650;
  background: #14291b;
}

html.dark .room-compact-heading h2,
html.dark .sensor-simulation-heading h2,
html.dark .room-control-copy h3,
html.dark .room-control-title {
  color: #f7faf5;
}

html.dark .room-compact-heading > div > p:last-child,
html.dark .sensor-simulation-heading > div > p:last-child,
html.dark .room-control-copy small,
html.dark .room-control-value small {
  color: #b8c5ba;
}

html.dark .room-control-row,
html.dark .sensor-simulation-panel .sensor-simulation-master,
html.dark .sensor-simulation-panel .sensor-simulation-motion {
  border-color: #4b6752;
  background: #102219;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .2);
}

html.dark .sensor-simulation-panel .sensor-simulation-master {
  border-color: #657841;
  background: #182b1b;
}

html.dark .room-control-icon {
  border-color: #607365;
  background: #eef4e9;
  color: #214a2d;
}

html.dark .room-control-value strong {
  color: #d8e95b;
}

html.dark .air-temperature-stepper button,
html.dark .air-remote-cycle {
  border-color: #5e7163;
  background: #1a3121;
  color: #f2f6f2;
}

html.dark .air-temperature-stepper button.is-primary,
html.dark .air-remote-cycle:hover {
  border-color: #cfe24f;
  background: var(--iv-lime);
  color: #17221a;
}

html.dark .sensor-simulation-switch,
html.dark .sensor-simulation-switch.is-on {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.dark .sensor-simulation-switch-track,
html.dark .sensor-inline-switch-track {
  border-color: #738077;
  background: #647169;
}

html.dark .sensor-simulation-switch.is-on .sensor-simulation-switch-track,
html.dark .sensor-inline-switch input:checked + .sensor-inline-switch-track {
  border-color: #d2e355;
  background: var(--iv-lime);
}

html.dark .sensor-temperature-input input {
  border-color: #607366;
  background: #172f20;
  color: #fff;
}

html.dark .sensor-temperature-input small {
  color: #d8e0d9;
}

html.dark #simulationMotionState.is-on {
  color: #83e7a8;
}

html.dark .sensor-simulation-note {
  border-color: #8d672f;
  background: #30240f;
}

@media (max-width: 600px) {
  .room-compact-panel {
    padding: .82rem;
    border-radius: 1.45rem;
  }

  .room-control-row,
  .sensor-simulation-panel .sensor-simulation-master,
  .sensor-simulation-panel .sensor-simulation-motion {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    min-height: 86px;
    gap: .65rem;
    padding: .68rem .7rem;
    border-radius: 1.2rem;
  }

  .room-control-icon {
    width: 58px;
    height: 58px;
    border-radius: .95rem;
  }

  .room-control-icon svg {
    width: 31px;
    height: 31px;
  }

  .air-temperature-stepper button {
    width: 42px;
    min-height: 42px;
  }

  .air-remote-cycle {
    min-width: 82px;
    min-height: 42px;
    padding: .5rem .62rem;
  }

  .sensor-simulation-switch,
  .sensor-inline-switch,
  .sensor-simulation-switch-track,
  .sensor-inline-switch-track {
    width: 66px;
  }

  .sensor-simulation-switch-track,
  .sensor-inline-switch-track {
    height: 38px;
  }

  .sensor-inline-switch {
    height: 38px;
  }

  .sensor-simulation-switch-knob,
  .sensor-inline-switch-knob {
    width: 28px;
    height: 28px;
  }

  .sensor-simulation-switch.is-on .sensor-simulation-switch-knob,
  .sensor-inline-switch input:checked + .sensor-inline-switch-track .sensor-inline-switch-knob {
    transform: translateX(28px);
  }

  .sensor-temperature-input input {
    width: 76px;
    min-height: 42px;
  }

  .sensor-simulation-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .room-control-copy small,
  .room-control-value small {
    display: none;
  }

  .air-temperature-stepper {
    gap: .32rem;
  }

  .air-temperature-stepper button {
    width: 38px;
  }

  .air-remote-cycle {
    min-width: 72px;
    padding-inline: .48rem;
  }
}

/* =========================================================
   V1.38.0 CUSTOM ROOMS USE THE SAME COMPACT DEVICE ROWS
   ========================================================= */

body[data-generic-room="true"] .device-page-wrap {
  max-width: 78rem;
}

.dynamic-device-grid.device-control-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

.dynamic-device-shell {
  min-width: 0;
  transition: opacity .16s ease;
}

.dynamic-device-shell.is-busy,
.dynamic-device-shell.is-disabled {
  opacity: .68;
}

.dynamic-device-shell.is-unmapped .dynamic-device-control-row {
  border-style: dashed;
  border-color: #cf8b27;
}

.dynamic-device-control-row {
  width: 100%;
}

.dynamic-device-image-button img {
  background: #f3f8d9;
}

.dynamic-device-actions,
.dynamic-device-actions.has-power-toggle {
  display: flex;
  width: auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: .42rem;
  margin: 0;
}

.dynamic-device-actions.hidden {
  display: none;
}

.dynamic-device-control-row .dynamic-device-actions > button:not(.device-power-toggle) {
  min-width: 64px;
  min-height: 42px;
  border-radius: .8rem;
  padding: .55rem .7rem;
  font-size: .74rem;
}

.dynamic-device-shell > .dynamic-device-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .7rem;
  margin: .55rem 1.05rem 0;
  padding: .8rem;
  border: 1px solid #dce5dc;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .78);
}

.dynamic-device-shell > .dynamic-device-settings.hidden {
  display: none;
}

.dynamic-device-shell > .dynamic-device-message {
  min-height: 0;
  margin: .4rem 1.1rem 0;
  padding: 0;
  color: #5f7062;
  text-align: left;
}

.dynamic-device-shell > .dynamic-device-message.hidden {
  display: none;
}

.dynamic-device-control-row .device-power-status.is-unavailable {
  color: #6c786e;
  font-size: clamp(.88rem, 2vw, 1.02rem);
}

.dynamic-device-control-row .device-power-status.is-unavailable::before {
  background: #8a958c;
}

html.dark .dynamic-device-shell.is-unmapped .dynamic-device-control-row {
  border-color: #efac46;
}

html.dark .dynamic-device-image-button img {
  background: #eef4e9;
}

html.dark .dynamic-device-shell > .dynamic-device-settings {
  border-color: #405d47;
  background: #102219;
}

html.dark .dynamic-device-shell > .dynamic-device-message,
html.dark .dynamic-device-control-row .device-power-status.is-unavailable {
  color: #b8c5ba;
}

@media (max-width: 600px) {
  .dynamic-device-control-row .dynamic-device-actions > button:not(.device-power-toggle) {
    min-width: 48px;
    min-height: 38px;
    padding: .45rem .5rem;
    font-size: .66rem;
  }

  .dynamic-device-shell > .dynamic-device-settings {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: .55rem;
  }
}

/* =========================================================
   V1.38.1 ROOM HERO RESTORE + LOG BADGE CONTRAST
   ========================================================= */

/* Keep the original Smart Room identity card above compact custom-room rows. */
body[data-generic-room="true"] .dynamic-room-hero {
  margin-bottom: 1.25rem;
}

/* Status, Type and Result use the same high-contrast outlined badge language. */
html body.logs-page .log-action-badge,
html.dark body.logs-page .log-action-badge,
html body.logs-page .log-type-badge,
html.dark body.logs-page .log-type-badge,
html body.logs-page .log-result-badge,
html.dark body.logs-page .log-result-badge {
  min-width: 6.25rem;
  border-width: 2px !important;
  border-style: solid !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  letter-spacing: .015em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .32);
  box-shadow: 0 3px 9px rgba(5, 20, 11, .18);
}

html body.logs-page .log-type-badge.is-auto,
html.dark body.logs-page .log-type-badge.is-auto {
  border-color: #93c5fd !important;
  background: #1d4ed8 !important;
}

html body.logs-page .log-type-badge.is-manual,
html.dark body.logs-page .log-type-badge.is-manual {
  border-color: #fdba74 !important;
  background: #c2410c !important;
}

html body.logs-page .log-result-badge.is-success,
html.dark body.logs-page .log-result-badge.is-success {
  border-color: #4ade80 !important;
  background: #15803d !important;
}

html body.logs-page .log-result-badge.is-failed,
html.dark body.logs-page .log-result-badge.is-failed {
  border-color: #fb7185 !important;
  background: #b91c1c !important;
}

html body.logs-page .log-result-badge.is-pending,
html.dark body.logs-page .log-result-badge.is-pending {
  border-color: #fcd34d !important;
  background: #a16207 !important;
}

@media (max-width: 600px) {
  html body.logs-page .log-action-badge,
  html body.logs-page .log-type-badge,
  html body.logs-page .log-result-badge {
    min-width: 5.5rem;
  }
}

/* =========================================================
   V1.38.2 UNIFIED PAGE HEROES + DARK STATUS OUTLINES
   ========================================================= */

/* Dashboard, Network Health and Logs now share the Schedules hero language. */
.page-title-hero {
  margin-bottom: 1.5rem;
}

.page-title-hero .operations-title-row {
  position: relative;
  z-index: 1;
  min-height: 6.5rem;
  align-items: center;
}

.page-title-hero .system-members-eyebrow,
.page-title-hero .network-eyebrow {
  margin: 0 0 .55rem !important;
}

.page-title-hero .operations-title {
  margin: 0;
}

.page-title-hero .status-pill {
  position: relative;
  z-index: 2;
  min-width: 5.5rem;
}

.network-overview-content {
  margin-top: 0;
}

.network-page-hero + .network-overview-content {
  margin-top: 1.25rem;
}

.network-overview-content .network-overview-grid {
  margin-top: 0;
}

/* Preserve each status colour after the shared border-width rule in Dark Mode. */
html body.logs-page .log-action-badge.is-on,
html.dark body.logs-page .log-action-badge.is-on {
  border-color: #4ade80 !important;
}

html body.logs-page .log-action-badge.is-off,
html.dark body.logs-page .log-action-badge.is-off {
  border-color: #fb7185 !important;
}

html body.logs-page .log-action-badge.is-temperature,
html.dark body.logs-page .log-action-badge.is-temperature {
  border-color: #fde047 !important;
}

html body.logs-page .log-action-badge.is-fan,
html.dark body.logs-page .log-action-badge.is-fan {
  border-color: #67e8f9 !important;
}

html body.logs-page .log-action-badge.is-mode,
html.dark body.logs-page .log-action-badge.is-mode {
  border-color: #a7f3d0 !important;
}

html body.logs-page .log-action-badge.is-swing,
html.dark body.logs-page .log-action-badge.is-swing {
  border-color: #f0abfc !important;
}

html body.logs-page .log-action-badge.is-neutral,
html.dark body.logs-page .log-action-badge.is-neutral {
  border-color: #d1d5db !important;
}

@media (max-width: 767px) {
  .page-title-hero .operations-title-row {
    min-height: 0;
  }

  .page-title-hero .status-pill {
    align-self: flex-start;
  }
}

/* =========================================================
   V1.38.3 RESPONSIVE HERO ALIGNMENT + TYPE SCALE
   ========================================================= */

/* The three overview pages follow the same title hierarchy at every width. */
.page-title-hero .operations-title-row > div {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.page-title-hero .system-members-eyebrow,
.page-title-hero .network-eyebrow {
  font-size: .7rem !important;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .16em !important;
}

body.dashboard-page .page-title-hero .operations-title,
body.monitor-page .page-title-hero .operations-title,
body.logs-page .page-title-hero .operations-title {
  font-size: clamp(1.7rem, 4vw, 2.35rem) !important;
  font-weight: 900;
  line-height: 1.12;
}

body.dashboard-page .page-title-hero .operations-subtitle,
body.monitor-page .page-title-hero .operations-subtitle,
body.logs-page .page-title-hero .operations-subtitle {
  max-width: 48rem;
  margin-top: .45rem;
  font-size: .95rem !important;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.page-title-hero .status-pill {
  font-size: .8rem;
}

@media (max-width: 767px) {
  body.dashboard-page .dashboard-page-wrap,
  body.monitor-page .network-monitor-layout,
  body.logs-page .page-wrap {
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem !important;
    padding-right: .85rem !important;
    padding-left: .85rem !important;
  }

  .page-title-hero {
    margin-bottom: 1.25rem;
    padding: 1rem !important;
  }

  .page-title-hero .operations-title-row {
    align-items: stretch;
    gap: .85rem;
  }

  .page-title-hero .status-pill {
    width: 100%;
    min-width: 0;
    align-self: stretch;
  }
}

@media (max-width: 640px) {
  body.dashboard-page .page-title-hero .operations-title,
  body.monitor-page .page-title-hero .operations-title,
  body.logs-page .page-title-hero .operations-title {
    font-size: 1.65rem !important;
    line-height: 1.2;
  }

  body.dashboard-page .page-title-hero .operations-subtitle,
  body.monitor-page .page-title-hero .operations-subtitle,
  body.logs-page .page-title-hero .operations-subtitle {
    margin-top: .35rem;
    font-size: .82rem !important;
    line-height: 1.5;
  }

  .page-title-hero .system-members-eyebrow,
  .page-title-hero .network-eyebrow {
    margin-bottom: .4rem !important;
    font-size: .66rem !important;
    line-height: 1.35;
  }

  .page-title-hero .status-pill {
    min-height: 36px;
    font-size: .78rem;
  }
}

/* =========================================================
   V1.38.4 BILINGUAL PAGE EYEBROWS + NAVBAR CASING
   ========================================================= */

#navMembersLinkMobile .nav-mobile-text,
#navMembersLink {
  text-transform: none !important;
}

/* =========================================================
   V1.39.0 ROOM DEVICE ORDER CONTROLS
   ========================================================= */

.dynamic-device-right-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
}

.dynamic-device-order-controls {
  display: grid;
  flex: 0 0 auto;
  grid-template-rows: repeat(2, 36px);
  gap: .35rem;
}

.dynamic-device-order-button {
  position: relative;
  display: grid;
  width: 40px;
  min-width: 40px !important;
  min-height: 36px !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid #9ba99d !important;
  border-radius: .72rem !important;
  background: #f4f7f1 !important;
  color: #294c35 !important;
  box-shadow: 0 4px 10px rgba(22, 50, 32, .09);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dynamic-device-order-button::before {
  width: 10px;
  height: 10px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
  content: "";
}

.dynamic-device-order-button.is-up::before {
  transform: translateY(2px) rotate(45deg);
}

.dynamic-device-order-button.is-down::before {
  transform: translateY(-2px) rotate(225deg);
}

.dynamic-device-order-button:hover:not(:disabled) {
  border-color: #8ca414 !important;
  background: #f0f7c8 !important;
  box-shadow: 0 6px 14px rgba(69, 91, 17, .16);
  transform: translateY(-1px);
}

.dynamic-device-order-button:focus-visible {
  outline: 3px solid rgba(192, 213, 48, .62);
  outline-offset: 2px;
}

.dynamic-device-order-button:disabled {
  cursor: not-allowed;
  opacity: .32 !important;
  box-shadow: none;
}

.dynamic-device-grid.is-reordering .dynamic-device-order-button {
  cursor: progress;
}

html.dark .dynamic-device-order-button {
  border-color: #5b7160 !important;
  background: #102219 !important;
  color: #d6e75d !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .2);
}

html.dark .dynamic-device-order-button:hover:not(:disabled) {
  border-color: #b9d22c !important;
  background: #203b28 !important;
}

@media (max-width: 600px) {
  .dynamic-device-right-controls {
    gap: .42rem;
  }

  .dynamic-device-order-controls {
    grid-template-rows: repeat(2, 31px);
    gap: .28rem;
  }

  .dynamic-device-order-button {
    width: 34px;
    min-width: 34px !important;
    min-height: 31px !important;
    border-radius: .6rem !important;
  }

  .dynamic-device-order-button::before {
    width: 8px;
    height: 8px;
    border-width: 2px 0 0 2px;
  }
}

/* V1.39.1 final cascade guard: keep edit arrows compact and side-by-side. */
.dynamic-device-order-controls {
  grid-template-columns: repeat(2, 40px);
  grid-template-rows: 36px;
}

@media (max-width: 600px) {
  .dynamic-device-order-controls {
    grid-template-columns: repeat(2, 34px);
    grid-template-rows: 31px;
  }
}

/* =========================================================
   V1.40.0 TWO-COLUMN CUSTOM ROOM DEVICE LAYOUT
   ========================================================= */

body[data-generic-room="true"] .dynamic-device-grid.device-control-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.dynamic-device-shell.is-layout-full {
  grid-column: 1 / -1;
}

.dynamic-device-shell.is-layout-half {
  grid-column: span 1;
}

.dynamic-device-arrange-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
}

.dynamic-device-layout-controls {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 40px);
  grid-template-rows: 36px;
  gap: .35rem;
}

.dynamic-device-layout-button {
  display: grid;
  width: 40px;
  min-width: 40px;
  min-height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid #9ba99d;
  border-radius: .72rem;
  background: #f4f7f1;
  color: #294c35;
  box-shadow: 0 4px 10px rgba(22, 50, 32, .09);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dynamic-device-layout-button:hover:not(:disabled) {
  border-color: #8ca414;
  background: #f0f7c8;
  box-shadow: 0 6px 14px rgba(69, 91, 17, .16);
  transform: translateY(-1px);
}

.dynamic-device-layout-button.is-active {
  border-color: #8ca414;
  background: var(--iv-lime);
  color: #173d26;
  box-shadow: 0 0 0 3px rgba(192, 213, 48, .16);
}

.dynamic-device-layout-button:focus-visible {
  outline: 3px solid rgba(192, 213, 48, .62);
  outline-offset: 2px;
}

.dynamic-device-layout-button:disabled {
  cursor: progress;
  opacity: .42;
}

.dynamic-device-layout-icon {
  position: relative;
  display: block;
  width: 19px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.dynamic-device-layout-icon.is-half::after {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: calc(50% - 1px);
  width: 2px;
  background: currentColor;
  content: "";
}

/* Earlier/later follows the grid's left-to-right reading order. */
.dynamic-device-order-button.is-previous::before {
  transform: translateX(2px) rotate(-45deg);
}

.dynamic-device-order-button.is-next::before {
  transform: translateX(-2px) rotate(135deg);
}

.dynamic-device-shell.is-layout-half > .dynamic-device-settings {
  grid-template-columns: minmax(0, 1fr);
}

html.dark .dynamic-device-layout-button {
  border-color: #5b7160;
  background: #102219;
  color: #d6e75d;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .2);
}

html.dark .dynamic-device-layout-button:hover:not(:disabled),
html.dark .dynamic-device-layout-button.is-active {
  border-color: #b9d22c;
  background: var(--iv-lime);
  color: #112719;
}

@media (min-width: 1051px) {
  .dynamic-device-shell.is-layout-half.is-drop-before::before {
    top: 1rem;
    right: auto;
    bottom: 1rem;
    left: -.48rem;
    width: 5px;
    height: auto;
  }

  .dynamic-device-shell.is-layout-half.is-drop-after::after {
    top: 1rem;
    right: -.48rem;
    bottom: 1rem;
    left: auto;
    width: 5px;
    height: auto;
  }
}

@media (max-width: 1050px) {
  body[data-generic-room="true"] .dynamic-device-grid.device-control-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .dynamic-device-shell.is-layout-full,
  .dynamic-device-shell.is-layout-half {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .dynamic-device-shell.is-arrange-mode .dynamic-device-control-row {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .dynamic-device-shell.is-arrange-mode .dynamic-device-right-controls {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dynamic-device-arrange-tools {
    width: 100%;
  }

  .dynamic-device-layout-controls {
    grid-template-columns: repeat(2, 34px);
    grid-template-rows: 31px;
    gap: .28rem;
  }

  .dynamic-device-layout-button {
    width: 34px;
    min-width: 34px;
    min-height: 31px;
    border-radius: .6rem;
  }

  .dynamic-device-layout-icon {
    width: 16px;
    height: 11px;
  }
}

/* =========================================================
   V1.40.6 SUPER ADMIN DASHBOARD STATISTICS RESET
   ========================================================= */

.dashboard-stats-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-stats-header > div {
  min-width: 0;
}

.dashboard-reset-stats-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 42px;
  padding: .65rem 1rem;
  border: 1.5px solid #e7a7a7;
  border-radius: 999px;
  background: #fff8f8;
  color: #a93232;
  font-size: .875rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.dashboard-reset-stats-button.hidden {
  display: none !important;
}

.dashboard-reset-stats-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-reset-stats-button:hover:not(:disabled) {
  border-color: #cf6161;
  background: #fff0f0;
  color: #8f2424;
  transform: translateY(-1px);
}

.dashboard-reset-stats-button:focus-visible {
  outline: 3px solid rgba(207, 97, 97, .3);
  outline-offset: 3px;
}

.dashboard-reset-stats-button:disabled {
  cursor: progress;
  opacity: .62;
  transform: none;
}

html.dark .dashboard-reset-stats-button {
  border-color: #834343;
  background: #2b1719;
  color: #ffb4b4;
}

html.dark .dashboard-reset-stats-button:hover:not(:disabled) {
  border-color: #c96565;
  background: #3a1c1f;
  color: #ffd0d0;
}

.dashboard-reset-dialog {
  width: min(620px, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 1.75rem;
  background: transparent;
  color: #142219;
  overflow: visible;
}

.dashboard-reset-dialog::backdrop {
  background: rgba(4, 15, 9, .66);
  backdrop-filter: blur(5px);
}

.dashboard-reset-dialog-card {
  padding: 1.4rem;
  border: 1.5px solid #d7e2d4;
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: 0 28px 80px rgba(4, 20, 10, .28);
}

.dashboard-reset-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-reset-dialog-heading p {
  margin: 0 0 .35rem;
  color: #5b7820;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dashboard-reset-dialog-heading h2 {
  margin: 0;
  color: #102017;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.2;
}

.dashboard-reset-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid #dbe4d8;
  border-radius: 999px;
  background: #f5f8f3;
  color: #35483a;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.dashboard-reset-dialog-description {
  margin: .8rem 0 1.1rem;
  color: #657268;
  font-size: .94rem;
  line-height: 1.55;
}

.dashboard-reset-options {
  display: grid;
  gap: .75rem;
}

.dashboard-reset-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem;
  border: 1.5px solid #d9e4d6;
  border-radius: 1.15rem;
  background: #f8fbf5;
  cursor: pointer;
}

.dashboard-reset-option:has(input:checked) {
  border-color: #9db51f;
  background: #f4f8d9;
  box-shadow: inset 0 0 0 1px rgba(157, 181, 31, .12);
}

.dashboard-reset-option.is-device-reset:has(input:checked) {
  border-color: #d98b8b;
  background: #fff4f4;
  box-shadow: inset 0 0 0 1px rgba(217, 139, 139, .12);
}

.dashboard-reset-option input {
  width: 20px;
  height: 20px;
  margin: .12rem 0 0;
  accent-color: #91aa16;
}

.dashboard-reset-option.is-device-reset input {
  accent-color: #b53e3e;
}

.dashboard-reset-option span {
  min-width: 0;
}

.dashboard-reset-option strong,
.dashboard-reset-option small {
  display: block;
}

.dashboard-reset-option strong {
  color: #17251b;
  font-size: 1rem;
  font-weight: 850;
}

.dashboard-reset-option small {
  margin-top: .28rem;
  color: #6b776e;
  font-size: .82rem;
  line-height: 1.48;
}

.dashboard-reset-validation {
  margin: .8rem 0 0;
  color: #b4232c;
  font-size: .85rem;
  font-weight: 750;
}

.dashboard-reset-dialog-actions {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: .75rem;
  margin-top: 1.2rem;
}

.dashboard-reset-cancel-button,
.dashboard-reset-confirm-button {
  min-height: 46px;
  padding: .72rem 1rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 850;
  cursor: pointer;
}

.dashboard-reset-cancel-button {
  border: 1.5px solid #ced9cb;
  background: #fff;
  color: #34463a;
}

.dashboard-reset-confirm-button {
  border: 1.5px solid #b13138;
  background: #b13138;
  color: #fff;
}

.dashboard-reset-confirm-button:hover:not(:disabled) {
  border-color: #8e242a;
  background: #8e242a;
}

.dashboard-reset-dialog button:focus-visible,
.dashboard-reset-option:focus-within {
  outline: 3px solid rgba(192, 213, 48, .38);
  outline-offset: 2px;
}

.dashboard-reset-dialog button:disabled,
.dashboard-reset-option input:disabled {
  cursor: progress;
  opacity: .58;
}

html.dark .dashboard-reset-dialog-card {
  border-color: #4e6855;
  background: #102219;
  color: #edf4e9;
}

html.dark .dashboard-reset-dialog-heading h2,
html.dark .dashboard-reset-option strong {
  color: #f4f8f1;
}

html.dark .dashboard-reset-dialog-heading p {
  color: #d0e94a;
}

html.dark .dashboard-reset-dialog-description,
html.dark .dashboard-reset-option small {
  color: #acb9ae;
}

html.dark .dashboard-reset-dialog-close,
html.dark .dashboard-reset-cancel-button {
  border-color: #536b59;
  background: #152c1f;
  color: #eaf1e7;
}

html.dark .dashboard-reset-option {
  border-color: #415a48;
  background: #13281c;
}

html.dark .dashboard-reset-option:has(input:checked) {
  border-color: #a9c126;
  background: #263415;
}

html.dark .dashboard-reset-option.is-device-reset:has(input:checked) {
  border-color: #b95e62;
  background: #321b1e;
}

@media (max-width: 640px) {
  .dashboard-stats-header {
    flex-direction: column;
  }

  .dashboard-reset-stats-button {
    width: 100%;
  }

  .dashboard-reset-dialog {
    width: min(100% - 1rem, 620px);
  }

  .dashboard-reset-dialog-card {
    padding: 1.1rem;
    border-radius: 1.35rem;
  }

  .dashboard-reset-dialog-actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   V1.40.7 MINIMAL SMART-OFFICE DASHBOARD + TOILET MOTION ONLY
   ========================================================= */

.room-sensor-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.smarttoilet-page .room-sensor-grid-single .room-sensor-row {
  width: 100%;
}

body.dashboard-page .dashboard-page-wrap {
  padding-bottom: 2.5rem;
}

body.dashboard-page .dashboard-hero {
  overflow: visible;
  padding: 1.35rem 1.5rem !important;
  border: 0 !important;
  border-left: 6px solid var(--iv-lime) !important;
  border-radius: 0 1.45rem 1.45rem 0 !important;
  background: linear-gradient(90deg, rgba(192, 213, 48, .12), transparent 76%) !important;
  box-shadow: none !important;
}

body.dashboard-page .dashboard-hero::before,
body.dashboard-page .dashboard-hero::after {
  display: none;
  content: none;
}

body.dashboard-page .dashboard-hero .operations-title-row {
  min-height: 0;
  align-items: center;
}

body.dashboard-page .dashboard-hero .operations-title {
  font-size: clamp(1.9rem, 4vw, 2.65rem) !important;
}

.dashboard-overview-panel {
  padding: clamp(1rem, 2.6vw, 1.55rem);
  border: 2px solid #a7b3a9;
  border-radius: 1.75rem;
  background: rgba(251, 253, 248, .97);
  box-shadow: 0 8px 22px rgba(22, 50, 32, .08);
}

.dashboard-overview-panel.hidden {
  display: none !important;
}

.dashboard-stats-header {
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d8e0d8;
}

.dashboard-stats-header .system-members-eyebrow,
.dashboard-room-heading .system-members-eyebrow {
  margin: 0 0 .32rem !important;
  color: #47622a !important;
  font-size: .65rem !important;
  font-weight: 900;
  letter-spacing: .15em !important;
}

.dashboard-stats-header h2,
.dashboard-room-heading h2 {
  margin: 0;
  color: #17221a;
  font-size: clamp(1.12rem, 2.2vw, 1.36rem);
  font-weight: 950;
  line-height: 1.25;
}

.dashboard-stats-header > div > p:last-child {
  margin: .3rem 0 0;
  color: #68766b;
  font-size: .78rem;
  line-height: 1.5;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.dashboard-metric-card {
  display: grid;
  min-width: 0;
  min-height: 128px;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding: .95rem;
  border: 1.5px solid #cbd6cd;
  border-radius: 1.35rem;
  background: #fff;
}

.dashboard-metric-icon,
.dashboard-chart-icon,
.dashboard-room-device-icon,
.dashboard-room-sensor-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid #d4ded2;
  background: #f1f6df;
  color: #2c5838;
}

.dashboard-metric-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
}

.dashboard-metric-icon svg {
  width: 28px;
  height: 28px;
}

.dashboard-metric-copy {
  min-width: 0;
}

.dashboard-metric-label,
.dashboard-metric-hint,
.dashboard-room-device p,
.dashboard-room-sensor p,
.dashboard-room-updated {
  margin: 0;
  color: #68766b;
}

.dashboard-metric-label {
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.35;
}

.dashboard-metric-value {
  margin: .18rem 0 0;
  color: #244f31;
  font-size: clamp(1.55rem, 3vw, 1.95rem);
  font-weight: 950;
  line-height: 1.12;
}

.dashboard-metric-hint {
  margin-top: .35rem;
  font-size: .67rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin-top: .85rem;
}

.dashboard-chart-card {
  min-width: 0;
  padding: 1rem;
  border: 1.5px solid #cbd6cd !important;
  border-radius: 1.35rem;
  background: #fff !important;
  box-shadow: none;
}

.dashboard-chart-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: .72rem;
  min-height: 48px;
  margin-bottom: .65rem;
}

.dashboard-chart-icon {
  width: 44px;
  height: 44px;
  border-radius: .85rem;
}

.dashboard-chart-icon svg {
  width: 23px;
  height: 23px;
}

.dashboard-chart-heading h3 {
  margin: 0;
  color: #17221a;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.35;
}

.dashboard-chart-description {
  margin: .18rem 0 0;
  font-size: .68rem;
  line-height: 1.4;
}

.dashboard-chart-frame {
  position: relative;
  width: 100%;
  height: clamp(210px, 22vw, 260px);
  min-height: 0;
}

.dashboard-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

body.dashboard-page #dashboardRoomGrid > .dashboard-room-card,
body.dashboard-page .dashboard-dynamic-room-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  gap: .85rem;
  padding: 1.1rem;
  border: 2px solid #a7b3a9 !important;
  border-radius: 1.75rem !important;
  background: rgba(251, 253, 248, .97) !important;
  box-shadow: 0 8px 22px rgba(22, 50, 32, .08) !important;
}

body.dashboard-page #dashboardRoomGrid > .dashboard-room-card::before,
body.dashboard-page .dashboard-dynamic-room-card::before {
  display: none;
  content: none;
}

body.dashboard-page #dashboardRoomGrid > .dashboard-room-card:hover,
body.dashboard-page .dashboard-dynamic-room-card:hover {
  border-color: #91a66d !important;
  box-shadow: 0 10px 24px rgba(22, 50, 32, .1) !important;
  transform: none;
}

.dashboard-room-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: .72rem;
  border-bottom: 1px solid #d8e0d8;
}

body.dashboard-page #dashboardRoomGrid > section .dashboard-room-heading h2 {
  color: #17221a !important;
}

.dashboard-room-device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.dashboard-room-device,
.dashboard-room-sensor {
  display: grid;
  min-width: 0;
  align-items: center;
  border: 1.5px solid #d2dbd1;
  background: #fff;
}

.dashboard-room-device {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .58rem;
  min-height: 72px;
  padding: .55rem;
  border-radius: 1rem;
}

.dashboard-room-device-icon {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: .82rem;
}

.dashboard-room-device-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-room-device p,
.dashboard-room-sensor p {
  font-size: .7rem;
  font-weight: 720;
  line-height: 1.3;
}

.dashboard-device-state,
.dashboard-room-sensor strong {
  display: block;
  margin-top: .18rem;
  color: #5f6d62;
  font-size: .94rem;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dashboard-device-state.is-on {
  color: #15935b;
}

.dashboard-device-state.is-off {
  color: #b13a3a;
}

.dashboard-room-sensor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.dashboard-room-sensor-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-room-sensor {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: .62rem;
  min-height: 68px;
  padding: .62rem;
  border-radius: 1rem;
}

.dashboard-room-sensor-icon {
  width: 40px;
  height: 40px;
  border-radius: .8rem;
}

.dashboard-room-sensor-icon svg {
  width: 22px;
  height: 22px;
}

.dashboard-sensor-value.is-normal,
.dashboard-occupancy-state.is-clear {
  color: #287044;
}

.dashboard-sensor-value.is-warm,
.dashboard-occupancy-state.is-detected {
  color: #b55a12;
}

.dashboard-sensor-value.is-muted {
  color: #7c8880;
}

.dashboard-room-updated {
  font-size: .68rem;
  line-height: 1.4;
}

body.dashboard-page #dashboardRoomGrid .dashboard-room-link,
body.dashboard-page #dashboardRoomGrid .dashboard-dynamic-room-link {
  min-height: 40px;
  margin-top: auto;
  padding: .58rem .85rem;
  border: 1.5px solid #7c9561 !important;
  border-radius: 999px;
  background: transparent !important;
  color: #2b5838 !important;
  font-size: .76rem;
  font-weight: 850;
}

body.dashboard-page #dashboardRoomGrid .dashboard-room-link:hover,
body.dashboard-page #dashboardRoomGrid .dashboard-dynamic-room-link:hover {
  border-color: #294c35 !important;
  background: #eef4df !important;
}

body.dashboard-page .dashboard-dynamic-device-status {
  border: 1.5px solid #d2dbd1 !important;
  border-radius: 1rem !important;
  background: #fff !important;
}

html.dark body.dashboard-page .dashboard-hero {
  background: linear-gradient(90deg, rgba(192, 213, 48, .12), transparent 76%) !important;
}

html.dark .dashboard-overview-panel,
html.dark body.dashboard-page #dashboardRoomGrid > .dashboard-room-card,
html.dark body.dashboard-page .dashboard-dynamic-room-card {
  border-color: #496650 !important;
  background: #14291b !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}

html.dark .dashboard-stats-header,
html.dark .dashboard-room-heading {
  border-bottom-color: #496650;
}

html.dark .dashboard-stats-header .system-members-eyebrow,
html.dark .dashboard-room-heading .system-members-eyebrow {
  color: var(--iv-lime) !important;
}

html.dark .dashboard-stats-header h2,
html.dark .dashboard-room-heading h2,
html.dark .dashboard-chart-heading h3 {
  color: #f7faf5;
}

html.dark .dashboard-stats-header > div > p:last-child,
html.dark .dashboard-metric-label,
html.dark .dashboard-metric-hint,
html.dark .dashboard-room-device p,
html.dark .dashboard-room-sensor p,
html.dark .dashboard-room-updated,
html.dark .dashboard-chart-description {
  color: #b8c5ba !important;
}

html.dark .dashboard-metric-card,
html.dark .dashboard-chart-card,
html.dark .dashboard-room-device,
html.dark .dashboard-room-sensor,
html.dark body.dashboard-page .dashboard-dynamic-device-status {
  border-color: #496650 !important;
  background: #102219 !important;
}

html.dark .dashboard-metric-icon,
html.dark .dashboard-chart-icon,
html.dark .dashboard-room-device-icon,
html.dark .dashboard-room-sensor-icon {
  border-color: #58705e;
  background: #eef4e9;
  color: #214a2d;
}

html.dark .dashboard-metric-value,
html.dark .dashboard-room-sensor strong {
  color: #f5f8f4;
}

html.dark .dashboard-device-state.is-on,
html.dark .dashboard-sensor-value.is-normal,
html.dark .dashboard-occupancy-state.is-clear {
  color: #83e7a8;
}

html.dark .dashboard-device-state.is-off {
  color: #ff9a9a;
}

html.dark .dashboard-sensor-value.is-warm,
html.dark .dashboard-occupancy-state.is-detected {
  color: #ffbd6f;
}

html.dark body.dashboard-page #dashboardRoomGrid .dashboard-room-link,
html.dark body.dashboard-page #dashboardRoomGrid .dashboard-dynamic-room-link {
  border-color: #9db85e !important;
  background: transparent !important;
  color: #dced73 !important;
}

html.dark body.dashboard-page #dashboardRoomGrid .dashboard-room-link:hover,
html.dark body.dashboard-page #dashboardRoomGrid .dashboard-dynamic-room-link:hover {
  background: #20351f !important;
}

@media (max-width: 900px) {
  .dashboard-chart-grid,
  .dashboard-room-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-chart-frame {
    height: 250px;
  }
}

@media (max-width: 720px) {
  .dashboard-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-metric-card {
    min-height: 104px;
  }
}

@media (max-width: 640px) {
  body.dashboard-page .dashboard-hero {
    padding: 1rem !important;
  }

  .dashboard-overview-panel,
  body.dashboard-page #dashboardRoomGrid > .dashboard-room-card,
  body.dashboard-page .dashboard-dynamic-room-card {
    padding: .85rem;
    border-radius: 1.35rem !important;
  }

  .dashboard-stats-header {
    align-items: stretch;
  }

  .dashboard-room-device-grid,
  .dashboard-room-sensor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-room-device {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 76px;
  }

  .dashboard-room-device-icon {
    width: 48px;
    height: 48px;
  }

  .dashboard-chart-frame {
    height: 225px;
  }
}

/* =========================================================
   V1.40.8 CLEAN, CONSISTENT PAGE HEROES
   ========================================================= */

/* Status belongs in page content, not beside the page title. */
.operations-hero::after {
  display: none !important;
  content: none !important;
}

/* Restore Dashboard to the same shared hero surface as every directory page. */
body.dashboard-page .dashboard-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  border: 1px solid rgba(159, 180, 115, .28) !important;
  border-radius: 2rem !important;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .98), rgba(245, 250, 230, .94)),
    var(--iv-surface) !important;
  box-shadow: var(--iv-shadow) !important;
}

body.dashboard-page .dashboard-hero::before {
  display: block !important;
  content: "" !important;
}

body.dashboard-page .dashboard-hero .operations-title-row {
  min-height: 0;
  align-items: flex-start;
}

body.dashboard-page .dashboard-hero .operations-title {
  font-size: clamp(1.7rem, 4vw, 2.35rem) !important;
}

.system-members-summary-panel .metric-grid {
  margin-top: 0;
}

.logs-page-wrap > .logs-card {
  margin-top: 1.25rem;
}

html.dark body.dashboard-page .dashboard-hero {
  border-color: var(--iv-line) !important;
  background: linear-gradient(120deg, #16291c, #1d3523) !important;
}

@media (max-width: 767px) {
  body.dashboard-page .dashboard-hero {
    border-radius: 1.4rem !important;
  }
}

/* =========================================================
   V1.40.9 GLOBAL MINIMAL UI SYSTEM
   One quiet visual language for every page, form and action.
   ========================================================= */

:root {
  --iv-line-strong: #ccd9c8;
  --iv-control-bg: #fbfcf9;
  --iv-control-hover: #f1f6e9;
  --iv-radius-sm: .85rem;
  --iv-radius-md: 1.15rem;
  --iv-radius-lg: 1.55rem;
  --iv-shadow-sm: 0 4px 14px rgba(24, 51, 32, .055);
  --iv-shadow: 0 9px 28px rgba(24, 51, 32, .075);
  --iv-focus: 0 0 0 3px rgba(168, 191, 32, .2);
}

html.dark {
  --iv-line-strong: #48604e;
  --iv-control-bg: #112019;
  --iv-control-hover: #1b3021;
  --iv-shadow-sm: 0 4px 14px rgba(0, 0, 0, .18);
  --iv-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

body:not(.iv-preview-page) {
  background: linear-gradient(180deg, #f8faf6 0, #f1f5ee 100%) fixed !important;
}

html.dark body:not(.iv-preview-page) {
  background: linear-gradient(180deg, #0f1912 0, #0b130e 100%) fixed !important;
}

/* Flat, matching page headers. Decorative rings, bars and side stripes are removed. */
.operations-hero,
body.dashboard-page .dashboard-hero,
.device-page-wrap > .device-page-title,
.dynamic-room-hero,
.room-config-hero,
.profile-page .page-wrap > div:first-child {
  border: 1px solid var(--iv-line) !important;
  border-left-width: 1px !important;
  border-radius: var(--iv-radius-lg) !important;
  background: var(--iv-surface) !important;
  box-shadow: var(--iv-shadow-sm) !important;
}

.operations-hero,
body.dashboard-page .dashboard-hero {
  padding: clamp(1.15rem, 2.8vw, 1.75rem) !important;
}

.device-page-wrap > .device-page-title,
.dynamic-room-hero,
.room-config-hero,
.profile-page .page-wrap > div:first-child {
  padding: clamp(1rem, 2.4vw, 1.4rem) !important;
}

.operations-hero::before,
.operations-hero::after,
body.dashboard-page .dashboard-hero::before,
body.dashboard-page .dashboard-hero::after,
.metric-card::after,
#dashboardRoomGrid > section::before,
.dashboard-dynamic-room-card::before,
.rooms-directory-card::before {
  display: none !important;
  content: none !important;
}

.operations-title,
.device-page-title,
.dynamic-room-hero h1,
.profile-page .page-wrap h1 {
  font-size: clamp(1.65rem, 3.8vw, 2.25rem) !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  letter-spacing: -.035em !important;
}

.operations-subtitle,
.dynamic-room-hero > p:last-child,
.profile-page .page-wrap > div:first-child > p {
  max-width: 68ch;
  margin-top: .45rem !important;
  font-size: clamp(.8rem, 1.6vw, .92rem) !important;
  line-height: 1.62 !important;
}

.system-members-eyebrow,
.network-eyebrow,
.dynamic-room-eyebrow,
.schedule-overview-kicker {
  margin-bottom: .42rem !important;
  font-size: .68rem !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
}

/* Shared surfaces: thin borders, calm corners and almost-flat elevation. */
:is(
  .operations-panel,
  .app-card,
  .logs-card,
  .dashboard-overview-panel,
  .dashboard-room-card,
  .dashboard-dynamic-room-card,
  .dashboard-chart-card,
  .dashboard-metric-card,
  .rooms-directory-card,
  .schedule-card,
  .schedule-overview-card,
  .schedule-calendar-shell,
  .dynamic-manager-shell,
  .dynamic-manager-panel,
  .dynamic-manager-item,
  .dynamic-automation-card,
  .dynamic-automation-general-panel,
  .dynamic-automation-device-panel,
  .settings-hub-panel,
  .settings-navbar-room-card,
  .settings-selected-user-panel,
  .settings-user-picker,
  .system-members-shell,
  .system-members-summary-panel,
  .pending-members-panel,
  .pending-member-card,
  .system-member-card,
  .network-live-card,
  .network-availability-card,
  .network-quick-card,
  .network-latency-card,
  .room-compact-panel,
  .sensor-simulation-panel,
  .device-control-row,
  .dynamic-device-settings,
  .room-icon-dialog-card,
  .dashboard-reset-dialog-card
) {
  border-width: 1px !important;
  border-color: var(--iv-line) !important;
  border-radius: var(--iv-radius-lg) !important;
  background-color: var(--iv-surface) !important;
  background-image: none !important;
  box-shadow: var(--iv-shadow-sm) !important;
}

:is(
  .metric-card,
  .dashboard-room-device,
  .dashboard-room-sensor,
  .logs-room-overview-card,
  .logs-room-summary-card,
  .settings-navbar-room-choice,
  .settings-user-room-choice,
  .system-member-create-disclosure,
  .system-member-details,
  .system-member-readonly-value,
  .system-role-locked,
  .dynamic-device-shell > .dynamic-device-settings,
  .room-image-editor,
  .sensor-simulation-master,
  .sensor-simulation-motion,
  .room-control-row
) {
  border-width: 1px !important;
  border-color: var(--iv-line) !important;
  border-radius: var(--iv-radius-md) !important;
  background: var(--iv-surface-soft) !important;
  box-shadow: none !important;
}

:is(
  #dashboardRoomGrid > section,
  .dashboard-dynamic-room-card,
  .rooms-directory-card,
  .schedule-card,
  .schedule-overview-card,
  .system-member-card,
  .settings-navbar-room-card,
  .settings-user-room-choice
):hover {
  border-color: var(--iv-line-strong) !important;
  box-shadow: var(--iv-shadow-sm) !important;
  transform: none !important;
}

.panel-heading-row,
.dashboard-stats-header,
.dashboard-room-heading,
.system-member-actions {
  border-color: var(--iv-line) !important;
}

.panel-title,
.dashboard-stats-header h2,
.dashboard-room-heading h2,
.dynamic-manager-heading h3,
.dynamic-manager-panel-title h4,
.settings-navbar-room-head h3,
.pending-members-heading h2,
.pending-members-heading h4 {
  color: var(--iv-ink) !important;
  font-weight: 875 !important;
  letter-spacing: -.02em;
}

/* Inputs and selectors use the same quiet control surface everywhere. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea,
.logs-zone-button,
.system-member-readonly-value {
  min-height: 44px;
  border: 1px solid var(--iv-line-strong) !important;
  border-radius: .9rem !important;
  background: var(--iv-control-bg) !important;
  color: var(--iv-ink) !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.logs-zone-button:focus {
  border-color: var(--iv-lime-strong) !important;
  background: var(--iv-surface) !important;
  box-shadow: var(--iv-focus) !important;
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  background: #eef2eb !important;
  color: #78847b !important;
  cursor: not-allowed;
}

html.dark input[readonly],
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
  background: #17241b !important;
  color: #91a095 !important;
}

/* Every clickable action shares pill geometry and a restrained interaction. */
button {
  -webkit-tap-highlight-color: transparent;
}

:where(button:not([role="switch"]):not(.device-control-icon-button):not(.profile-avatar-picker):not(.room-icon-option):not(.logs-zone-button)),
:where(
  .rooms-manage-button,
  .rooms-directory-enter,
  .schedule-overview-edit,
  .settings-navbar-room-actions a,
  .settings-room-card > a,
  .dashboard-room-link,
  .dashboard-dynamic-room-link,
  .not-found-page a[href="index.html"],
  .reset-password-page a[href="index.html"]
) {
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease, opacity .16s ease !important;
}

:is(
  .schedule-save,
  .holiday-add,
  .dynamic-primary-button,
  .dynamic-on-button,
  .system-member-create-actions button,
  .member-username-save,
  .member-role-save,
  .pending-approve,
  .room-icon-save,
  .sensor-simulation-start,
  .rooms-manage-button,
  .rooms-directory-enter,
  .schedule-overview-edit,
  .settings-navbar-room-actions a.is-primary,
  .settings-room-card > a,
  .dashboard-room-link,
  .dashboard-dynamic-room-link,
  #applyFilter,
  #loginButton,
  #registerButton,
  #forgotPasswordButton,
  #btnSaveHaEntities,
  button.bg-blue-600,
  a.bg-blue-600,
  #resetPasswordSubmit,
  .profile-page #profileForm button[type="submit"],
  .not-found-page a[href="index.html"]
) {
  min-height: 42px;
  border: 1px solid var(--iv-forest-strong) !important;
  background: var(--iv-forest-strong) !important;
  color: #fff !important;
  box-shadow: none !important;
}

:is(
  .schedule-save,
  .holiday-add,
  .dynamic-primary-button,
  .dynamic-on-button,
  .system-member-create-actions button,
  .member-username-save,
  .member-role-save,
  .pending-approve,
  .room-icon-save,
  .sensor-simulation-start,
  .rooms-manage-button,
  .rooms-directory-enter,
  .schedule-overview-edit,
  .settings-navbar-room-actions a.is-primary,
  .settings-room-card > a,
  .dashboard-room-link,
  .dashboard-dynamic-room-link,
  #applyFilter,
  #loginButton,
  #registerButton,
  #forgotPasswordButton,
  #btnSaveHaEntities,
  button.bg-blue-600,
  a.bg-blue-600,
  #resetPasswordSubmit,
  .profile-page #profileForm button[type="submit"],
  .not-found-page a[href="index.html"]
):hover:not(:disabled) {
  border-color: var(--iv-forest) !important;
  background: var(--iv-forest) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

:is(
  .dynamic-secondary-button,
  .dynamic-off-button,
  .room-image-choose,
  .room-image-reset,
  .room-icon-cancel,
  .range-button,
  .preset-btn,
  .air-remote-cycle,
  .air-temperature-stepper button,
  .dynamic-room-arrange-button,
  .dynamic-device-order-button,
  .dynamic-device-layout-button,
  .dashboard-reset-cancel-button,
  .settings-navbar-room-actions a:not(.is-primary),
  #showForgotPasswordBtn,
  #showRegisterBtn,
  #showLoginBtn,
  #forgotBackToLoginBtn,
  #homeAssistantLoginBtn,
  .reset-password-page a[href="index.html"]
) {
  border: 1px solid var(--iv-line-strong) !important;
  background: var(--iv-control-bg) !important;
  color: var(--iv-forest) !important;
  box-shadow: none !important;
}

:is(
  .dynamic-secondary-button,
  .dynamic-off-button,
  .room-image-choose,
  .room-image-reset,
  .room-icon-cancel,
  .range-button,
  .preset-btn,
  .air-remote-cycle,
  .air-temperature-stepper button,
  .dynamic-room-arrange-button,
  .dynamic-device-order-button,
  .dynamic-device-layout-button,
  .dashboard-reset-cancel-button,
  .settings-navbar-room-actions a:not(.is-primary),
  #showForgotPasswordBtn,
  #showRegisterBtn,
  #showLoginBtn,
  #forgotBackToLoginBtn,
  #homeAssistantLoginBtn,
  .reset-password-page a[href="index.html"]
):hover:not(:disabled) {
  border-color: #aebca9 !important;
  background: var(--iv-control-hover) !important;
  color: var(--iv-forest-strong) !important;
  transform: translateY(-1px);
}

.range-button.is-active,
.preset-btn.active,
.dynamic-device-layout-button.is-active {
  border-color: var(--iv-lime-strong) !important;
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest-strong) !important;
}

:is(
  .dynamic-danger-button,
  .member-delete,
  .pending-reject,
  .profile-page #btnDeletePhoto,
  .dashboard-reset-stats-button,
  .navbar-logout-btn,
  .navbar-mobile-logout
) {
  border: 1px solid #efbaba !important;
  background: #fff7f6 !important;
  color: #b13a3a !important;
  box-shadow: none !important;
}

:is(
  .dynamic-danger-button,
  .member-delete,
  .pending-reject,
  .profile-page #btnDeletePhoto,
  .dashboard-reset-stats-button,
  .navbar-logout-btn,
  .navbar-mobile-logout
):hover:not(:disabled) {
  border-color: #df9191 !important;
  background: #fdebea !important;
  color: #922d2d !important;
  transform: translateY(-1px);
}

.dashboard-reset-confirm-button {
  border: 1px solid #ad363b !important;
  background: #ad363b !important;
  color: #fff !important;
  box-shadow: none !important;
}

.member-reset-password {
  border: 1px solid #e6c78f !important;
  background: #fff9ed !important;
  color: #9b5b08 !important;
  box-shadow: none !important;
}

:is(button, a)[disabled],
:is(button, a)[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .5 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Room controls keep their familiar layout with less visual weight. */
.device-control-row,
.room-control-row,
.sensor-simulation-panel .sensor-simulation-master,
.sensor-simulation-panel .sensor-simulation-motion {
  border-width: 1px !important;
  border-color: var(--iv-line-strong) !important;
  background: var(--iv-surface) !important;
  box-shadow: var(--iv-shadow-sm) !important;
}

.device-control-icon-button,
.room-control-icon,
.dashboard-metric-icon,
.dashboard-chart-icon,
.dashboard-room-device-icon,
.dashboard-room-sensor-icon {
  border-width: 1px !important;
  border-color: var(--iv-line) !important;
  box-shadow: none !important;
}

.device-control-icon-button.is-editable:hover {
  border-color: var(--iv-lime-strong) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.device-control-icon-edit,
.rooms-directory-icon-edit {
  border-width: 1px !important;
  box-shadow: none !important;
}

.device-control-row .device-power-toggle-track,
.sensor-simulation-switch-track,
.sensor-inline-switch-track,
.settings-navbar-switch-track,
.schedule-master-switch-track {
  border-width: 1px !important;
  box-shadow: inset 0 1px 2px rgba(20, 39, 25, .1) !important;
}

.device-control-row .device-power-toggle-knob,
.sensor-simulation-switch-knob,
.sensor-inline-switch-knob,
.settings-navbar-switch-track::after,
.schedule-master-switch-track::after {
  box-shadow: 0 1px 4px rgba(12, 30, 18, .18) !important;
}

.device-power-status::before,
.room-sensor-value::before {
  box-shadow: 0 0 0 2px rgba(104, 118, 107, .13) !important;
}

.device-power-status.is-on::before,
.room-motion-value.is-detected::before {
  box-shadow: 0 0 0 2px rgba(32, 189, 99, .16) !important;
}

/* Tables, badges and dialogs follow the same flat language. */
.logs-table-wrap,
.logs-zone-menu {
  border: 1px solid var(--iv-line) !important;
  border-radius: var(--iv-radius-md) !important;
  background: var(--iv-surface) !important;
  box-shadow: var(--iv-shadow-sm) !important;
}

.logs-table-header {
  border-bottom: 1px solid var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
}

.logs-zone-option {
  border-radius: .7rem !important;
  background: transparent !important;
  color: var(--iv-ink) !important;
  box-shadow: none !important;
}

.logs-zone-option:hover,
.logs-zone-option.is-selected {
  background: var(--iv-lime-soft) !important;
  color: var(--iv-forest-strong) !important;
}

:is(
  .status-pill,
  .dynamic-manager-badge,
  .dynamic-status-pill,
  .dynamic-domain-pill,
  .schedule-overview-status,
  .pending-members-count,
  .system-role-badge,
  .system-current-user-badge,
  .system-smtp-status,
  .settings-selected-user-count,
  .sensor-simulation-badge,
  .log-device-badge,
  .log-action-badge,
  .log-type-badge,
  .log-result-badge
) {
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.room-icon-dialog-card,
.dashboard-reset-dialog-card,
.reset-password-page main,
.not-found-page > div:not(.fixed) {
  border: 1px solid var(--iv-line) !important;
  border-radius: var(--iv-radius-lg) !important;
  background: var(--iv-surface) !important;
  color: var(--iv-ink) !important;
  box-shadow: var(--iv-shadow) !important;
}

.room-icon-dialog-close,
.dashboard-reset-dialog-close {
  border: 1px solid var(--iv-line) !important;
  background: var(--iv-control-bg) !important;
  color: var(--iv-ink) !important;
  box-shadow: none !important;
}

.dashboard-reset-option {
  border-width: 1px !important;
  box-shadow: none !important;
}

/* Login and public screens keep the brand, without oversized elevation. */
.login-page {
  background: linear-gradient(160deg, #f8faf6 0, #eef4e9 100%) !important;
}

.login-page main > .pointer-events-none {
  display: none !important;
}

.login-card-theme {
  border: 1px solid var(--iv-line-strong) !important;
  border-radius: 1.75rem !important;
  box-shadow: var(--iv-shadow) !important;
}

.login-card-theme > section:first-child {
  background: linear-gradient(150deg, #294c35, #173322) !important;
}

.login-card-theme > section:first-child::after {
  display: none !important;
  content: none !important;
}

.login-register-panel {
  border: 1px solid var(--iv-line) !important;
  border-radius: var(--iv-radius-md) !important;
  background: var(--iv-surface-soft) !important;
  box-shadow: none !important;
}

.profile-avatar-picker,
.profile-avatar-picker img {
  box-shadow: none !important;
}

.navbar-shell {
  border-bottom: 1px solid var(--iv-line) !important;
  box-shadow: 0 3px 14px rgba(24, 51, 32, .055) !important;
}

.navbar-shell .navbar-desktop-tabs,
.navbar-profile-card,
.navbar-desktop-icon-btn,
.navbar-icon-btn {
  box-shadow: none !important;
}

.navbar-shell .navbar-desktop-tabs .nav-desktop-link.is-active {
  box-shadow: none !important;
}

.navbar-shell .navbar-desktop-tabs .nav-desktop-link.is-active::after {
  display: none !important;
  content: none !important;
}

html.dark :is(
  .operations-hero,
  body.dashboard-page .dashboard-hero,
  .device-page-wrap > .device-page-title,
  .dynamic-room-hero,
  .room-config-hero,
  .profile-page .page-wrap > div:first-child,
  .operations-panel,
  .app-card,
  .logs-card,
  .dashboard-overview-panel,
  .dashboard-room-card,
  .dashboard-dynamic-room-card,
  .dashboard-chart-card,
  .dashboard-metric-card,
  .rooms-directory-card,
  .schedule-card,
  .schedule-overview-card,
  .dynamic-manager-shell,
  .dynamic-manager-panel,
  .dynamic-manager-item,
  .settings-hub-panel,
  .system-members-shell,
  .pending-members-panel,
  .system-member-card,
  .network-live-card,
  .network-availability-card,
  .network-quick-card,
  .network-latency-card,
  .room-compact-panel,
  .sensor-simulation-panel,
  .device-control-row
) {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface) !important;
  background-image: none !important;
}

html.dark :is(
  .metric-card,
  .dashboard-room-device,
  .dashboard-room-sensor,
  .logs-room-overview-card,
  .logs-room-summary-card,
  .settings-navbar-room-card,
  .settings-user-picker,
  .settings-selected-user-panel,
  .settings-user-room-choice,
  .pending-member-card,
  .system-member-create-disclosure,
  .system-member-details,
  .system-member-readonly-value,
  .system-role-locked,
  .dynamic-device-shell > .dynamic-device-settings,
  .room-image-editor,
  .sensor-simulation-master,
  .sensor-simulation-motion,
  .room-control-row
) {
  border-color: var(--iv-line) !important;
  background: var(--iv-surface-soft) !important;
}

html.dark :is(
  .schedule-save,
  .holiday-add,
  .dynamic-primary-button,
  .dynamic-on-button,
  .system-member-create-actions button,
  .member-username-save,
  .member-role-save,
  .pending-approve,
  .room-icon-save,
  .sensor-simulation-start,
  .rooms-manage-button,
  .rooms-directory-enter,
  .schedule-overview-edit,
  .settings-navbar-room-actions a.is-primary,
  .settings-room-card > a,
  .dashboard-room-link,
  .dashboard-dynamic-room-link,
  #applyFilter,
  #loginButton,
  #registerButton,
  #forgotPasswordButton,
  #btnSaveHaEntities,
  button.bg-blue-600,
  a.bg-blue-600,
  #resetPasswordSubmit,
  .profile-page #profileForm button[type="submit"],
  .not-found-page a[href="index.html"]
) {
  border-color: var(--iv-lime) !important;
  background: var(--iv-lime) !important;
  color: #17221a !important;
}

html.dark :is(
  .dynamic-secondary-button,
  .room-image-choose,
  .room-image-reset,
  .room-icon-cancel,
  .range-button,
  .preset-btn,
  .air-remote-cycle,
  .air-temperature-stepper button,
  .dynamic-room-arrange-button,
  .dynamic-device-order-button,
  .dynamic-device-layout-button,
  .dashboard-reset-cancel-button,
  .settings-navbar-room-actions a:not(.is-primary),
  #showForgotPasswordBtn,
  #showRegisterBtn,
  #showLoginBtn,
  #forgotBackToLoginBtn,
  #homeAssistantLoginBtn,
  .reset-password-page a[href="index.html"]
) {
  border-color: var(--iv-line-strong) !important;
  background: var(--iv-control-bg) !important;
  color: #d9e6db !important;
}

html.dark :is(
  .dynamic-danger-button,
  .member-delete,
  .pending-reject,
  .profile-page #btnDeletePhoto,
  .dashboard-reset-stats-button,
  .navbar-logout-btn,
  .navbar-mobile-logout
) {
  border-color: #774648 !important;
  background: #2b191b !important;
  color: #ffaaaa !important;
}

html.dark .member-reset-password {
  border-color: #70582c !important;
  background: #2c2415 !important;
  color: #f4c976 !important;
}

html.dark :is(
  .schedule-save,
  .dynamic-primary-button,
  .dynamic-on-button,
  .room-icon-save,
  .sensor-simulation-start,
  .rooms-manage-button,
  .rooms-directory-enter,
  .schedule-overview-edit,
  .dashboard-room-link,
  .dashboard-dynamic-room-link,
  #applyFilter,
  #loginButton,
  #registerButton,
  #forgotPasswordButton,
  #btnSaveHaEntities,
  #resetPasswordSubmit
):hover:not(:disabled) {
  border-color: #d1e454 !important;
  background: #d1e454 !important;
  color: #17221a !important;
}

@media (max-width: 640px) {
  .operations-page,
  .page-wrap {
    margin-top: 1rem !important;
  }

  .operations-hero,
  body.dashboard-page .dashboard-hero,
  .device-page-wrap > .device-page-title,
  .dynamic-room-hero,
  .room-config-hero,
  .profile-page .page-wrap > div:first-child {
    padding: 1rem !important;
    border-radius: 1.2rem !important;
  }

  :is(
    .operations-panel,
    .app-card,
    .logs-card,
    .dashboard-overview-panel,
    .rooms-directory-card,
    .schedule-card,
    .settings-hub-panel,
    .system-members-shell,
    .room-compact-panel,
    .sensor-simulation-panel
  ) {
    border-radius: 1.2rem !important;
  }

  .settings-hub-actions,
  .system-member-create-actions,
  .dashboard-reset-dialog-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .settings-hub-actions .schedule-save,
  .system-member-create-actions button,
  .dashboard-reset-dialog-actions button,
  .profile-page #profileForm button[type="submit"] {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(button, a, input, select, textarea, .device-control-row, .schedule-card, .rooms-directory-card) {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}