@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  --bg: #f4f7f3;
  --surface: #ffffff;
  --surface-soft: #f8faf7;
  --ink: #17251d;
  --muted: #768078;
  --line: #e5eae4;
  --green: #1b6c4a;
  --green-2: #2b8b62;
  --green-soft: #e5f3eb;
  --teal: #16989b;
  --teal-soft: #e4f5f5;
  --blue: #347db8;
  --blue-soft: #e7f1f8;
  --amber: #e69a36;
  --amber-soft: #fff2dd;
  --red: #d95b59;
  --red-soft: #fdebea;
  --shadow: 0 10px 30px rgba(32, 61, 43, .06);
  --shadow-lg: 0 24px 70px rgba(25, 44, 32, .2);
  --radius: 18px;
  --font: 'Noto Sans Thai', 'Leelawadee UI', Tahoma, sans-serif;
  --font-number: 'Manrope', var(--font);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(43, 139, 98, .18); outline-offset: 2px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-symbols { position: absolute; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 242px; display: flex; flex-direction: column; padding: 27px 20px 20px; background: var(--surface); border-right: 1px solid var(--line); }
.brand, .mobile-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-number); font-size: 20px; letter-spacing: -.7px; }
.brand { padding: 0 10px 31px; }
.brand strong, .mobile-brand strong { color: var(--green); font-weight: 800; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; border-radius: 11px 11px 11px 4px; background: linear-gradient(145deg, var(--green-2), var(--green)); box-shadow: 0 7px 16px rgba(27, 108, 74, .2); }
.brand-mark svg { width: 21px; height: 21px; stroke-width: 2; }
.side-nav { display: grid; gap: 6px; }
.nav-link { position: relative; border: 0; background: none; display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 0 13px; border-radius: 11px; color: #748078; font-weight: 600; cursor: pointer; transition: .2s ease; }
.nav-link:hover { color: var(--green); background: #f5f8f4; }
.nav-link.active { color: var(--green); background: var(--green-soft); font-weight: 700; }
.nav-link svg { width: 19px; height: 19px; }
.nav-count { margin-left: auto; min-width: 25px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 7px; color: var(--green); background: #fff; font: 700 11px var(--font-number); }
.alert-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.sidebar-bottom { margin-top: auto; }
.system-health { margin-bottom: 13px; padding: 14px; display: flex; align-items: center; gap: 11px; border-radius: 13px; background: var(--surface-soft); border: 1px solid var(--line); }
.health-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--green); border-radius: 10px; background: var(--green-soft); }
.health-icon svg { width: 17px; }
.system-health div:last-child { display: grid; gap: 3px; }
.system-health span, .system-health strong { font-size: 11px; }
.system-health span { color: var(--muted); }
.system-health strong { display: flex; align-items: center; gap: 5px; color: var(--green); }
.system-health strong i { width: 6px; height: 6px; background: #3aae72; border-radius: 50%; }
.profile-card { width: 100%; padding: 12px 8px; border: 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: none; cursor: pointer; text-align: left; }
.avatar { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #476b55, #214732); font: 700 11px var(--font-number); }
.profile-card > span:nth-child(2) { flex: 1; display: grid; }
.profile-card strong { font-size: 12px; }
.profile-card small { color: var(--muted); font-size: 10px; }
.profile-card svg { width: 16px; color: #a2aaa4; }

.main-content { min-height: 100vh; margin-left: 242px; padding: 0 34px 46px; }
.topbar { min-height: 89px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.mobile-brand { display: none; }
.page-heading { flex: 1; }
.page-heading p, .welcome-row p, .panel-kicker { margin: 0; color: var(--muted); }
.page-heading p { font-size: 11px; }
.page-heading h1 { margin: 2px 0 0; font-size: 21px; letter-spacing: -.4px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; color: #68736b; background: var(--surface); cursor: pointer; transition: .2s; }
.icon-button:hover { color: var(--green); border-color: #c8d9ce; }
.icon-button.small { width: 34px; height: 34px; border-radius: 9px; }
.icon-button.small svg { width: 17px; }
.notification-button { position: relative; }
.notification-button span { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); border: 1.5px solid #fff; }
.primary-button, .secondary-button { min-height: 42px; border-radius: 11px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; font-weight: 600; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; }
.primary-button { color: #fff; background: var(--green); box-shadow: 0 7px 16px rgba(27, 108, 74, .16); }
.primary-button:hover { background: #155e3f; box-shadow: 0 9px 20px rgba(27, 108, 74, .23); transform: translateY(-1px); }
.primary-button svg, .secondary-button svg { width: 17px; }
.secondary-button { color: #566159; background: #fff; border: 1px solid var(--line); }
.secondary-button:hover { color: var(--green); border-color: #bdd1c3; }
.page { display: none; animation: pageIn .28s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.welcome-row { min-height: 93px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.welcome-row h2 { margin: 0 0 3px; font-size: 18px; }
.welcome-row p { font-size: 12px; }
.live-status { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font: 800 10px var(--font-number); letter-spacing: .7px; }
.live-status > span { width: 7px; height: 7px; border-radius: 50%; background: #36ab70; box-shadow: 0 0 0 5px rgba(54,171,112,.12); animation: pulse 2s infinite; }
.live-status small { padding-left: 5px; color: var(--muted); font: 400 10px var(--font); letter-spacing: 0; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(54,171,112,0); } }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.metric-card { min-width: 0; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.metric-top { min-height: 34px; display: flex; justify-content: space-between; align-items: flex-start; }
.metric-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; }
.metric-icon svg { width: 18px; }
.moisture-card .metric-icon { color: var(--blue); background: var(--blue-soft); }
.temperature-card .metric-icon { color: #e4774a; background: #fcece5; }
.battery-card .metric-icon { color: var(--green-2); background: var(--green-soft); }
.pm-card .metric-icon { color: var(--teal); background: var(--teal-soft); }
.trend, .status-label { height: 23px; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 7px; font: 700 9px var(--font-number); }
.trend svg { width: 11px; }
.trend.up { color: var(--green); background: var(--green-soft); }
.trend.down { color: #ba6848; background: #fcece5; }
.status-label.good { color: #158386; background: var(--teal-soft); }
.status-label.warning { color: #b57624; background: var(--amber-soft); }
.metric-card > p { margin: 15px 0 2px; color: #6c776f; font-size: 11px; font-weight: 500; }
.metric-value { display: flex; align-items: baseline; gap: 4px; }
.metric-value strong { font: 800 29px var(--font-number); letter-spacing: -1.4px; }
.metric-value span { color: #6f7b72; font: 600 11px var(--font-number); }
.metric-card > small { display: block; margin-top: 9px; color: #9aa29c; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-track { height: 5px; margin-top: 11px; border-radius: 10px; background: #edf0ed; overflow: hidden; }
.progress-track i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--blue); }
.battery-card .progress-track i { background: var(--green-2); }
.spark-bars { height: 9px; margin-top: 7px; display: flex; align-items: end; gap: 3px; }
.spark-bars i { flex: 1; border-radius: 2px; background: #f0c6b4; }
.spark-bars i:nth-child(1) { height: 40%; }.spark-bars i:nth-child(2) { height: 55%; }.spark-bars i:nth-child(3) { height: 70%; }.spark-bars i:nth-child(4) { height: 50%; }.spark-bars i:nth-child(5) { height: 75%; }.spark-bars i:nth-child(6) { height: 90%; }.spark-bars i:nth-child(7) { height: 65%; }.spark-bars i:nth-child(8) { height: 45%; }.spark-bars i:nth-child(9) { height: 60%; }.spark-bars i:nth-child(10) { height: 50%; background: #e4774a; }
.air-scale { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-top: 11px; height: 5px; }
.air-scale i { border-radius: 5px; }.air-scale i:nth-child(1){background:#3eaf84}.air-scale i:nth-child(2){background:#edc453}.air-scale i:nth-child(3){background:#e9904a}.air-scale i:nth-child(4){background:#d95b59}
.air-scale span { position: absolute; left: var(--position); top: -4px; width: 3px; height: 13px; border: 2px solid #fff; border-radius: 5px; background: #1e4e3a; box-shadow: 0 1px 4px #54665a; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.75fr); gap: 14px; margin-top: 14px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-header { min-height: 70px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #edf0ed; }
.panel-kicker { margin-bottom: 2px; color: #9aa29c; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.panel h3 { margin: 0; font-size: 14px; }
.text-button { padding: 5px 0; display: inline-flex; align-items: center; gap: 5px; border: 0; color: var(--green); background: none; font-size: 10px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.text-button svg { width: 13px; }
.map-summary { position: absolute; z-index: 2; margin: 13px 0 0 17px; display: flex; gap: 9px; }
.map-summary span, .map-legend span { display: flex; align-items: center; gap: 5px; color: #69736c; font-size: 9px; }
.map-summary b { font: 700 9px var(--font-number); }
.map-summary i, .map-legend i { width: 7px; height: 7px; border-radius: 50%; }
i.online { background: #39aa71; } i.warning { background: var(--amber); } i.offline { background: #aeb5b0; }
.map-panel { position: relative; overflow: hidden; }
.thailand-map { position: relative; background-color: #f5f9f6; overflow: hidden; }
.thailand-map::before { content: ''; position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(89,124,100,.09) 1px, transparent 1px), linear-gradient(90deg,rgba(89,124,100,.09) 1px,transparent 1px); background-size: 29px 29px; }
.compact-map { height: 277px; }
.map-svg { position: absolute; inset: 9px 15% 7px; width: 70%; height: calc(100% - 16px); overflow: visible; }
.map-land { fill: #dfece3; stroke: #adc9b6; stroke-width: 1.2; filter: drop-shadow(0 6px 8px rgba(70,105,80,.09)); }
.map-region-line { fill: none; stroke: #bfd2c4; stroke-width: .65; }
.map-site { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.map-site:hover, .map-site.active { transform: scale(1.22); }
.map-site .pulse-ring { fill: currentColor; opacity: .15; animation: mapPulse 2.4s infinite; }
.map-site .pin-dot { fill: currentColor; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(24,62,38,.25)); }
.map-site.online { color: #2ba36b; }.map-site.warning { color: #e69a36; }.map-site.offline { color: #9ba49e; }
@keyframes mapPulse { 50% { r: 8; opacity: 0; } }
.map-tooltip { position: absolute; z-index: 5; min-width: 145px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.97); box-shadow: 0 10px 30px rgba(38,64,46,.16); pointer-events: none; transform: translate(-50%,-110%); animation: tipIn .18s ease; }
.map-tooltip strong { display: block; margin-bottom: 3px; font-size: 10px; }.map-tooltip span { color: var(--muted); font-size: 9px; }.map-tooltip b { color: var(--green); }
@keyframes tipIn { from { opacity: 0; transform: translate(-50%,-100%); } }
.activity-panel { overflow: hidden; }
.activity-list { padding: 3px 17px 0; }
.activity-item { position: relative; display: grid; grid-template-columns: 31px 1fr auto; align-items: start; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eff1ef; }
.activity-item:last-child { border: 0; }
.activity-item > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; }
.activity-item > span svg { width: 15px; }
.activity-item.warning > span { color: #b77927; background: var(--amber-soft); }.activity-item.info > span { color: var(--blue); background: var(--blue-soft); }.activity-item.success > span { color: var(--green); background: var(--green-soft); }
.activity-item div { min-width: 0; }
.activity-item strong { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-item p { margin: 3px 0 0; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-item time { padding-top: 2px; color: #a1a8a3; font: 500 8px var(--font-number); white-space: nowrap; }
.activity-more { width: 100%; height: 39px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-top: 1px solid var(--line); color: var(--green); background: #fbfcfb; font-size: 9px; font-weight: 600; cursor: pointer; }
.activity-more svg { width: 12px; }
.device-preview-panel { margin-top: 14px; overflow: hidden; }
.device-header-actions { display: flex; align-items: center; gap: 16px; }
.search-box { height: 36px; width: 190px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfa; }
.search-box:focus-within { border-color: #9dc3aa; box-shadow: 0 0 0 3px rgba(43,139,98,.08); }
.search-box svg { flex: 0 0 auto; width: 14px; color: #9ba39d; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.search-box input::placeholder { color: #a3aaa5; }
.device-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { height: 36px; padding: 0 17px; color: #929a94; background: #fafbfa; border-bottom: 1px solid var(--line); font-size: 8px; font-weight: 600; text-align: left; white-space: nowrap; }
td { height: 55px; padding: 0 17px; border-bottom: 1px solid #eff1ef; color: #657168; font-size: 9px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #fcfdfc; }
.device-name { display: flex; align-items: center; gap: 9px; }
.device-name > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-soft); }
.device-name svg { width: 15px; }
.device-name div { display: grid; }
.device-name strong { color: var(--ink); font-size: 10px; }.device-name small { color: #9ba29d; font: 500 8px var(--font-number); }
.value-pair { color: var(--ink); font: 600 9px var(--font-number); }.value-pair span { margin-left: 7px; color: #919992; font-weight: 500; }
.battery-cell { display: flex; align-items: center; gap: 7px; color: var(--ink); font: 600 9px var(--font-number); }
.battery-mini { width: 31px; height: 5px; overflow: hidden; border-radius: 4px; background: #e9ece9; }.battery-mini i { display:block; height:100%; width:var(--battery); background:var(--green-2); border-radius:inherit; }.battery-cell.low .battery-mini i { background: var(--amber); }.battery-cell.low { color: #b77c2e; }
.device-status { display: inline-flex; align-items: center; gap: 5px; }.device-status i { width: 6px; height: 6px; border-radius:50%; }.device-status.online { color:var(--green); }.device-status.warning { color:#b87929; }.device-status.offline { color:#8d9690; }
.row-menu { width: 27px; height: 27px; display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:#9ba39d;cursor:pointer}.row-menu:hover{background:#f2f5f2;color:var(--green)}.row-menu svg{width:15px}

/* Map page */
.page-toolbar { min-height: 79px; display: flex; align-items: center; gap: 12px; }
.search-box.large { width: min(360px, 40%); height: 41px; background: #fff; border-radius: 11px; }
.search-box.large input { font-size: 11px; }
.filter-chips { display: flex; gap: 7px; }
.chip { height: 35px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: #737d76; background: #fff; font-size: 10px; cursor: pointer; }
.chip span { margin-left: 4px; font: 700 9px var(--font-number); }
.chip:hover, .chip.active { color: var(--green); background: var(--green-soft); border-color: #cee2d5; }
.full-map-layout { height: calc(100vh - 187px); min-height: 560px; display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 14px; }
.full-map-panel { position: relative; overflow: hidden; }
.full-map { height: 100%; }
.full-map .map-svg { inset: 3% 14%; width: 72%; height: 94%; }
.map-legend { position: absolute; left: 18px; bottom: 17px; display: flex; gap: 15px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.93); box-shadow: var(--shadow); }
.site-list-panel { min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.site-list-heading { height: 70px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.site-list-heading h3 { margin: 0; font-size: 14px; }
.site-list { height: calc(100% - 70px); overflow-y: auto; padding: 7px; }
.site-card { width: 100%; padding: 12px 11px; display: block; border: 1px solid transparent; border-bottom-color: #edf0ed; border-radius: 11px; background: #fff; cursor: pointer; text-align: left; transition: .2s; }
.site-card:hover, .site-card.active { border-color: #cee2d5; background: #f6faf7; }
.site-card-top { display: flex; align-items: center; gap: 8px; }
.site-card-top > i { width: 8px; height: 8px; border-radius: 50%; }
.site-card-top strong { flex: 1; font-size: 11px; }
.site-card-top span { color: #9aa29c; font-size: 8px; }
.site-card > p { margin: 3px 0 10px 16px; color: var(--muted); font-size: 9px; }
.site-reading-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.site-reading-grid span { padding: 7px 4px; display: grid; place-items: center; gap: 1px; border-radius: 7px; background: #f7f9f7; color: #919992; font-size: 7px; }
.site-reading-grid b { color: #435249; font: 700 9px var(--font-number); }
.empty-state { padding: 50px 15px; color: var(--muted); text-align: center; }.empty-state svg { width: 32px; height: 32px; margin-bottom: 8px; color:#adb5af; }

/* Devices page */
.device-toolbar .large { flex: 1; max-width: 370px; }
.select-control { height: 41px; min-width: 140px; padding: 0 34px 0 12px; color: #59655d; background: #fff; border: 1px solid var(--line); border-radius: 11px; font-size: 10px; }
.device-stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
.device-stat-row article { min-height: 82px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.mini-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; }.mini-icon svg { width: 18px; }.mini-icon.green { color:var(--green);background:var(--green-soft)}.mini-icon.teal{color:var(--teal);background:var(--teal-soft)}.mini-icon.amber{color:#bf7d28;background:var(--amber-soft)}.mini-icon.gray{color:#7e8982;background:#edf0ed}
.device-stat-row div { display: grid; }.device-stat-row small { color:var(--muted);font-size:9px}.device-stat-row strong { font:800 21px var(--font-number); }
.all-devices-panel { overflow: hidden; }
.all-devices-panel .device-table-wrap { max-height: calc(100vh - 310px); overflow: auto; }
.all-devices-panel thead { position: sticky; top:0; z-index:1; }

/* Alerts */
.alert-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 14px; }
.alert-summary-card { padding:18px;display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.alert-summary-card > span { width:40px;height:40px;display:grid;place-items:center;border-radius:11px}.alert-summary-card svg{width:18px}.alert-summary-card div{display:grid}.alert-summary-card small{color:var(--muted);font-size:9px}.alert-summary-card strong{font:800 21px var(--font-number)}
.alert-summary-card.critical>span{color:var(--red);background:var(--red-soft)}.alert-summary-card.caution>span{color:#bd7d2c;background:var(--amber-soft)}.alert-summary-card.resolved>span{color:var(--green);background:var(--green-soft)}
.alerts-panel{overflow:hidden}.alerts-list{padding:0 18px}.alert-row{display:grid;grid-template-columns:39px 1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);transition:.2s}.alert-row:last-child{border-bottom:0}.alert-row.read{opacity:.55}.alert-row>span{width:39px;height:39px;display:grid;place-items:center;border-radius:11px}.alert-row>span svg{width:17px}.alert-row.critical>span{color:var(--red);background:var(--red-soft)}.alert-row.warning>span{color:#b97a29;background:var(--amber-soft)}.alert-row.info>span{color:var(--blue);background:var(--blue-soft)}.alert-row.success>span{color:var(--green);background:var(--green-soft)}.alert-row h4{margin:0 0 3px;font-size:11px}.alert-row p{margin:0;color:var(--muted);font-size:9px}.alert-row time{color:#9ba39d;font:500 9px var(--font-number)}

/* Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 20px; display: grid; place-items: center; background: rgba(16,32,23,.52); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: .2s; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal { width: min(570px,100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg); transform: translateY(12px) scale(.99); transition: .25s ease; }
.modal-backdrop.open .modal { transform: none; }
.modal-header { min-height: 78px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom:1px solid var(--line); }
.modal-header > div { display:flex;align-items:center;gap:11px}.modal-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;color:var(--green);background:var(--green-soft)}.modal-icon svg{width:18px}.modal-header p{margin:0;color:var(--muted);font-size:9px}.modal-header h2{margin:1px 0 0;font-size:15px}
.modal form { padding: 19px 20px 20px; }
.form-step { display:flex;align-items:center;gap:9px;margin-bottom:13px}.form-step.second{margin-top:20px}.form-step>span{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;color:#fff;background:var(--green);font:700 9px var(--font-number)}.form-step div{display:grid}.form-step strong{font-size:11px}.form-step small{color:var(--muted);font-size:8px}
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-field{display:grid;gap:5px}.form-field.full{grid-column:1/-1}.form-field>span{font-size:9px;font-weight:600}.form-field b{color:var(--red)}.form-field input,.form-field select{width:100%;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fbfcfb;outline:0;font-size:10px}.form-field input:focus,.form-field select:focus{border-color:#90bca0;box-shadow:0 0 0 3px rgba(43,139,98,.08)}.form-field small{color:#9ba39d;font-size:8px}.input-with-icon{position:relative}.input-with-icon svg{position:absolute;left:11px;top:11px;width:16px;color:#8f9992}.input-with-icon input{padding-left:34px}
.checkbox-field{margin-top:17px;padding:12px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;background:#f8faf8;cursor:pointer}.checkbox-field>input{position:absolute;opacity:0}.checkbox-field>span{width:20px;height:20px;display:grid;place-items:center;border:1px solid #cdd5cf;border-radius:6px;background:#fff}.checkbox-field i{width:100%;height:100%;display:none;place-items:center;border-radius:5px;color:#fff;background:var(--green)}.checkbox-field svg{width:13px}.checkbox-field input:checked+span i{display:grid}.checkbox-field div{display:grid}.checkbox-field strong{font-size:9px}.checkbox-field small{color:var(--muted);font-size:8px}.form-actions{margin:20px -20px -20px;padding:14px 20px;display:flex;justify-content:flex-end;gap:9px;border-top:1px solid var(--line)}
.toast { position:fixed;z-index:120;right:22px;bottom:22px;min-width:280px;padding:13px 16px;display:flex;align-items:center;gap:10px;border:1px solid #cde5d5;border-radius:13px;background:#fff;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(15px);transition:.25s}.toast.show{opacity:1;visibility:visible;transform:none}.toast>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:#fff;background:var(--green)}.toast svg{width:16px}.toast div{display:grid}.toast strong{font-size:10px}.toast small{color:var(--muted);font-size:8px}
.bottom-nav { display: none; }

@media (max-width: 1120px) {
  .main-content { padding-left: 22px; padding-right: 22px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .activity-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 20px; }
  .full-map-layout { grid-template-columns: minmax(0,1fr) 300px; }
}

@media (max-width: 800px) {
  body { background:#f6f8f5; }
  .sidebar { display:none; }
  .main-content { margin-left:0; padding:0 16px 96px; }
  .topbar { min-height:70px; position:sticky;top:0;z-index:15;margin:0 -16px;padding:0 16px;background:rgba(246,248,245,.94);backdrop-filter:blur(12px); }
  .mobile-brand { display:flex; flex:1; font-size:18px; }
  .mobile-brand .brand-mark { width:33px;height:33px; }
  .page-heading { display:none; }
  .topbar-actions .primary-button { display:none; }
  .notification-button { width:39px;height:39px; }
  .bottom-nav { position:fixed;z-index:40;left:0;right:0;bottom:0;height:76px;padding:7px 11px max(7px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(30,59,40,.07);backdrop-filter:blur(14px); }
  .bottom-nav .nav-link { min-height:54px;padding:5px 0;display:flex;flex-direction:column;justify-content:center;gap:3px;border-radius:10px;font-size:9px; }
  .bottom-nav .nav-link.active { background:transparent; }
  .bottom-nav .nav-link.active::after { content:'';position:absolute;bottom:1px;width:18px;height:2px;border-radius:2px;background:var(--green); }
  .bottom-nav .nav-link i { position:absolute;top:9px;right:25%;width:6px;height:6px;border-radius:50%;background:var(--red);border:1px solid #fff; }
  .bottom-nav .nav-add { overflow:visible; }
  .bottom-nav .nav-add > span { position:absolute;top:-21px;width:50px;height:50px;display:grid;place-items:center;border:5px solid #f6f8f5;border-radius:16px;color:#fff;background:var(--green);box-shadow:0 8px 17px rgba(27,108,74,.23); }
  .bottom-nav .nav-add svg { width:21px;height:21px; }
  .welcome-row { min-height:94px; }
  .welcome-row h2 { font-size:17px; }.welcome-row p { font-size:10px; }
  .live-status small { display:none; }
  .metric-grid { gap:10px; }
  .metric-card { padding:15px 14px 13px;border-radius:15px; }
  .metric-card>p{margin-top:12px}.metric-value strong{font-size:25px}.metric-card>small{font-size:8px}
  .dashboard-grid { margin-top:10px;gap:10px; }
  .panel { border-radius:15px; }.panel-header{padding:13px 15px;min-height:64px}
  .compact-map { height:285px; }.map-svg{inset:8px 8%;width:84%;}
  .activity-list { grid-template-columns:1fr; }
  .activity-item:nth-child(n+4){display:none}
  .device-preview-panel { margin-top:10px; }
  .device-header-actions .search-box { display:none; }
  .device-table-wrap table { min-width:610px; }
  .device-preview-panel th:nth-child(3),.device-preview-panel td:nth-child(3){display:none}
  .page-toolbar { min-height:auto; padding:16px 0 12px; flex-wrap:wrap; }
  .search-box.large { width:100%;max-width:none; }
  .filter-chips{width:100%;overflow-x:auto;padding-bottom:2px}.chip{flex:0 0 auto}
  .full-map-layout{height:auto;min-height:0;display:flex;flex-direction:column;}
  .full-map-panel{height:440px}.full-map .map-svg{inset:2% 7%;width:86%;height:96%}
  .site-list-panel{height:auto}.site-list{height:auto;max-height:none}.site-list-heading{height:63px}.site-card{padding:13px 11px}
  .device-toolbar .select-control{flex:1}.device-toolbar>.primary-button{flex:1}
  .device-stat-row{grid-template-columns:repeat(2,1fr);gap:9px}.device-stat-row article{min-height:72px;padding:12px}.mini-icon{width:35px;height:35px}
  .all-devices-panel .device-table-wrap{max-height:none}.all-devices-panel table{min-width:850px}
  .alert-summary{grid-template-columns:1fr 1fr;margin-top:16px;gap:9px}.alert-summary-card:last-child{grid-column:1/-1}.alert-summary-card{padding:13px}.alerts-list{padding:0 14px}.alert-row{grid-template-columns:36px 1fr;gap:10px}.alert-row time{grid-column:2}
  .modal-backdrop{padding:0;align-items:end}.modal{width:100%;max-height:92vh;border-radius:22px 22px 0 0}.modal-header{position:sticky;top:0;z-index:2;background:#fff}.toast{left:16px;right:16px;bottom:91px;min-width:0}
}

@media (max-width: 420px) {
  .main-content { padding-left:13px;padding-right:13px; }
  .topbar { margin-left:-13px;margin-right:-13px;padding:0 13px; }
  .welcome-row { align-items:flex-start;padding-top:18px; }.live-status{padding-top:5px}
  .metric-grid { grid-template-columns:1fr 1fr; }
  .metric-top { min-height:31px; }.metric-icon{width:32px;height:32px}.trend,.status-label{font-size:8px;padding:0 5px}
  .metric-value strong{font-size:23px}.metric-value span{font-size:9px}.metric-card>small{font-size:7px}.spark-bars{margin-top:9px}
  .map-summary { flex-direction:column;gap:4px; }.compact-map{height:265px}
  .text-button{font-size:9px}.device-preview-panel table{min-width:550px}
  .full-map-panel{height:390px}.map-legend{left:10px;bottom:10px;gap:9px}
  .device-stat-row article{gap:8px}.device-stat-row strong{font-size:18px}.device-stat-row small{font-size:8px}
  .form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.modal form{padding:17px 16px}.modal-header{padding-left:16px;padding-right:16px}.form-actions{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.form-actions button{flex:1}
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; } }

/* Interactive Leaflet map — Google-like map experience */
.thailand-map.leaflet-container {
  isolation: isolate;
  width: 100%;
  background: #dce9e4;
  font-family: var(--font);
  cursor: grab;
}
.thailand-map.leaflet-container:active { cursor: grabbing; }
.thailand-map.leaflet-container::before { content: none; }
.map-panel .leaflet-container { z-index: 1; }
.map-panel .map-summary { z-index: 500; padding: 7px 10px; border: 1px solid rgba(222,229,223,.9); border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: 0 5px 16px rgba(32,61,43,.09); backdrop-filter: blur(8px); }
.leaflet-tile-pane { filter: saturate(.78) contrast(.94) brightness(1.035); }
.leaflet-control-zoom { overflow: hidden; border: 0 !important; border-radius: 11px !important; box-shadow: 0 5px 18px rgba(29,52,36,.15) !important; }
.leaflet-control-zoom a { width: 34px !important; height: 34px !important; line-height: 32px !important; color: #425248 !important; border-color: var(--line) !important; font-family: var(--font-number) !important; }
.leaflet-control-zoom a:hover { color: var(--green) !important; background: #f4faf6 !important; }
.leaflet-control-attribution { padding: 2px 6px !important; color: #7e8a82 !important; background: rgba(255,255,255,.78) !important; font-size: 8px !important; backdrop-filter: blur(5px); }
.leaflet-control-attribution a { color: var(--green) !important; }
.site-marker-wrap { background: transparent; border: 0; }
.site-marker { position: relative; width: 30px; height: 38px; display: grid; place-items: center; transform: translateY(-4px); }
.site-marker::before { content: ''; position: absolute; top: 4px; width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50% 50% 50% 9px; background: #2ba36b; box-shadow: 0 5px 14px rgba(27,59,38,.28); transform: rotate(-45deg); }
.site-marker::after { content: ''; position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.26); }
.site-marker > i { position: absolute; top: -1px; width: 38px; height: 38px; border-radius: 50%; background: rgba(43,163,107,.22); animation: leafletMarkerPulse 2.3s infinite; }
.site-marker.warning::before { background: var(--amber); }
.site-marker.warning > i { background: rgba(230,154,54,.23); }
.site-marker.offline::before { background: #929d96; }
.site-marker.offline > i { display: none; }
.site-marker.selected { transform: translateY(-7px) scale(1.16); filter: drop-shadow(0 4px 6px rgba(27,80,47,.18)); }
@keyframes leafletMarkerPulse { 70%,100% { transform: scale(1.4); opacity: 0; } }
.leaflet-popup-content-wrapper { overflow: hidden; padding: 0; border: 1px solid rgba(221,228,222,.95); border-radius: 15px; box-shadow: 0 16px 40px rgba(25,48,32,.18); }
.leaflet-popup-content { width: 220px !important; margin: 0 !important; }
.leaflet-popup-tip { box-shadow: 3px 3px 6px rgba(25,48,32,.08); }
.map-popup { background: #fff; }
.map-popup-head { padding: 13px 14px 11px; display: flex; align-items: flex-start; gap: 9px; border-bottom: 1px solid var(--line); }
.map-popup-head > span { width: 9px; height: 9px; margin-top: 4px; flex: 0 0 auto; border-radius: 50%; background: #2ba36b; box-shadow: 0 0 0 4px var(--green-soft); }
.map-popup-head > span.warning { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.map-popup-head > span.offline { background: #929d96; box-shadow: 0 0 0 4px #edf0ed; }
.map-popup-head div { min-width: 0; }
.map-popup-head strong { display: block; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.map-popup-head small { color: var(--muted); font-size: 8px; }
.map-popup-readings { padding: 10px; display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.map-popup-readings span { min-width: 0; padding: 7px 8px; display: grid; gap: 1px; border-radius: 8px; background: #f6f8f6; color: #8b958e; font-size: 7px; }
.map-popup-readings b { color: #36483c; font: 700 10px var(--font-number); }
.map-popup-foot { padding: 8px 12px; display: flex; justify-content: space-between; color: #929b95; background: #fbfcfb; border-top: 1px solid var(--line); font-size: 8px; }
.map-popup-foot b { color: var(--green); }
.leaflet-popup-close-button { top: 7px !important; right: 7px !important; width: 22px !important; height: 22px !important; display: grid !important; place-items: center; border-radius: 7px; color: #8d9790 !important; background: rgba(255,255,255,.9) !important; font: 18px/1 var(--font-number) !important; }
.map-loading { position: absolute; inset: 0; z-index: 600; display: grid; place-items: center; color: var(--muted); background: #eef4f0; font-size: 10px; }

@media (max-width: 800px) {
  .map-panel .map-summary { margin: 10px 0 0 10px; }
  .leaflet-control-zoom a { width: 32px !important; height: 32px !important; line-height: 30px !important; }
  .leaflet-popup-content { width: 205px !important; }
}

/* Authentication state and account menu */
[hidden] { display: none !important; }
.auth-pending { overflow: hidden; }
.auth-pending .app-shell { visibility: hidden; }
.auth-pending::before { content: ''; position: fixed; z-index: 999; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border: 3px solid #dce7df; border-top-color: var(--green); border-radius: 50%; animation: authSpin .75s linear infinite; }
@keyframes authSpin { to { transform: rotate(360deg); } }
.mobile-profile-button { display: none; width: 38px; height: 38px; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#476b55,#214732); box-shadow: 0 3px 10px rgba(30,67,44,.16); font: 700 10px var(--font-number); cursor: pointer; }
.account-menu { position: fixed; z-index: 80; left: 16px; bottom: 72px; width: 218px; padding: 9px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.98); box-shadow: 0 18px 50px rgba(24,48,31,.18); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: bottom left; transition: .18s ease; }
.account-menu.open { opacity: 1; visibility: visible; transform: none; }
.account-menu-head { padding: 8px 7px 11px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.avatar.large { width: 38px; height: 38px; }
.account-menu-head div { min-width: 0; display: grid; }
.account-menu-head strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-head small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.account-organisation { margin: 7px 0; padding: 8px; display: grid; border-radius: 9px; background: #f6f8f6; }
.account-organisation span { color: #929b95; font-size: 7px; }
.account-organisation strong { overflow: hidden; margin-top: 1px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-organisation small { color: var(--green); font-size: 8px; }
.account-logout { width: 100%; min-height: 37px; padding: 0 9px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 9px; color: #b24b48; background: transparent; font-size: 9px; font-weight: 600; cursor: pointer; }
.account-logout:hover { background: var(--red-soft); }
.account-logout:disabled { opacity: .55; cursor: wait; }
.account-logout svg { width: 16px; }
.auth-error-screen { position: fixed; inset: 0; z-index: 200; padding: 25px; display: grid; place-items: center; background: var(--bg); }
.auth-error-screen > div { max-width: 390px; text-align: center; }
.auth-error-screen > div > span { width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 15px; color: var(--amber); background: var(--amber-soft); }
.auth-error-screen svg { width: 24px; height: 24px; }
.auth-error-screen h1 { margin: 0 0 5px; font-size: 19px; }
.auth-error-screen p { margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.auth-error-screen button { min-height: 41px; padding: 0 18px; border: 0; border-radius: 10px; color: #fff; background: var(--green); font-weight: 600; cursor: pointer; }
.profile-card[aria-expanded=true] { background: #f4f8f5; }

@media (max-width: 800px) {
  .mobile-profile-button { display: grid; place-items: center; }
  .account-menu { left: auto; right: 12px; top: 62px; bottom: auto; width: 230px; transform-origin: top right; }
}

/* Leaflet Thailand controls */
.map-reset-control { width: 37px; height: 37px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 11px; color: var(--green); background: rgba(255,255,255,.96); box-shadow: 0 5px 18px rgba(29,52,36,.16); font: 800 10px var(--font-number); cursor: pointer; transition: .2s ease; }
.map-reset-control:hover { color: #fff; background: var(--green); transform: translateY(-1px); }
.leaflet-control-scale-line { border-color: rgba(45,71,54,.45) !important; border-top: 0 !important; color: #526159 !important; background: rgba(255,255,255,.75) !important; font: 600 8px var(--font-number) !important; backdrop-filter: blur(5px); }
.leaflet-container .leaflet-marker-pane { z-index: 610; }
.leaflet-container .leaflet-popup-pane { z-index: 710; }
.full-map-panel .leaflet-bottom.leaflet-left { margin-bottom: 43px; }

@media (max-width: 800px) {
  .map-reset-control { width: 34px; height: 34px; }
  .full-map-panel .leaflet-bottom.leaflet-left { margin-bottom: 41px; }
}