*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f3f4f6;color:#111827}.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#111827,#374151)}.login-card{width:360px;background:white;border-radius:22px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.login-card h1{margin:0 0 6px}.login-card p{margin-top:0;color:#6b7280}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}.input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:12px;background:#fff;font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:10px 14px;background:#111827;color:#fff;text-decoration:none;font-weight:700;cursor:pointer}.btn.secondary{background:#e5e7eb;color:#111827}.btn.danger{background:#dc2626}.btn.warn{background:#f59e0b;color:#111827}.btn.small{font-size:12px;padding:7px 10px;border-radius:10px}.error{background:#fee2e2;color:#991b1b;border-radius:12px;padding:10px;margin-bottom:12px}.topbar{height:66px;background:white;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:5}.layout{display:flex}.sidebar{width:250px;min-height:calc(100vh - 66px);background:#111827;color:#fff;padding:18px}.sidebar a{display:block;color:#d1d5db;text-decoration:none;padding:12px 14px;border-radius:12px;margin-bottom:6px}.sidebar a:hover,.sidebar a.active{background:#1f2937;color:#fff}.main{flex:1;padding:24px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:white;border:1px solid #e5e7eb;border-radius:20px;padding:18px;box-shadow:0 6px 20px rgba(17,24,39,.04);margin-bottom:18px}.stat .num{font-size:30px;font-weight:800}.stat .label{color:#6b7280;font-size:13px}.table{width:100%;border-collapse:collapse;background:white;border-radius:16px;overflow:hidden}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid #e5e7eb;font-size:14px}.table th{background:#f9fafb;font-size:12px;text-transform:uppercase;color:#6b7280}.badge{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800}.badge.online{background:#dcfce7;color:#166534}.badge.offline{background:#fee2e2;color:#991b1b}.badge.warning{background:#fef3c7;color:#92400e}.badge.disabled{background:#e5e7eb;color:#374151}.forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.muted{color:#6b7280}.token-box{background:#ecfdf5;border:1px solid #86efac;color:#14532d;padding:14px;border-radius:14px;word-break:break-all;margin-bottom:18px}.footer-note{font-size:12px;color:#6b7280;margin-top:20px}@media(max-width:1000px){.grid,.forms{grid-template-columns:1fr}.sidebar{display:none}.main{padding:14px}}

/* eVhod QR fault reports + display settings */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{margin:0}.section-head p{margin:6px 0 0}.mini-stat{display:flex;align-items:center;gap:8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;padding:10px 14px}.mini-stat strong{font-size:24px}.mini-stat span{font-size:12px;color:#6b7280;font-weight:800;text-transform:uppercase}.inline-form{display:flex;gap:8px;align-items:center}.status-select{width:auto;min-width:130px;padding:8px 10px;border-radius:12px;border:1px solid #d1d5db;font-weight:800}.status-new{background:#fef3c7;color:#92400e}.status-in_progress{background:#dbeafe;color:#1d4ed8}.status-resolved{background:#dcfce7;color:#166534}.status-rejected{background:#fee2e2;color:#991b1b}.settings-list{display:grid;gap:14px;margin-top:16px}.settings-card{border:1px solid #e5e7eb;border-radius:18px;background:#fff;overflow:hidden}.settings-card summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;cursor:pointer;background:#f9fafb}.settings-card summary::-webkit-details-marker{display:none}.settings-form{padding:18px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-grid .full{grid-column:1/-1}.module-box{border:1px solid #e5e7eb;border-radius:18px;padding:14px;margin:14px 0;background:#fcfcfd}.module-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.module-title label{margin:0;font-size:15px}.module-title input[type="checkbox"]{width:18px;height:18px;vertical-align:middle;margin-right:7px}.position-input{width:72px;padding:8px 10px;border:1px solid #d1d5db;border-radius:12px;text-align:center;font-weight:800}.table a{white-space:nowrap}@media(max-width:1000px){.settings-grid{grid-template-columns:1fr}.inline-form{align-items:stretch;flex-direction:column}.status-select{width:100%}.section-head{align-items:flex-start;flex-direction:column}}

/* Dashboard autocomplete suggestions */
.autocomplete-wrap {
  position: relative;
}

.autocomplete-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  padding: 6px;
}

.autocomplete-item,
.autocomplete-empty {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: #111827;
  display: block;
}

.autocomplete-empty {
  cursor: default;
  color: #64748b;
}

.autocomplete-item:hover {
  background: #f1f5f9;
}

.autocomplete-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.autocomplete-item span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.3;
}

.inline-autocomplete-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-autocomplete-actions .input {
  flex: 1;
  min-width: 0;
}

.inline-autocomplete-actions .btn {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .inline-autocomplete-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Production health/ticketing additions */
.input.compact{width:160px;min-width:140px;padding:7px 10px;border-radius:10px;font-size:12px}.table td .badge{margin-bottom:5px}.table td form[style*="display:inline"]{margin:0 3px 5px 0}.badge.running{background:#dbeafe;color:#1d4ed8}.badge.failed{background:#fee2e2;color:#991b1b}.badge.done{background:#dcfce7;color:#166534}@media(max-width:1200px){.table{display:block;overflow-x:auto;white-space:nowrap}.input.compact{width:100%}}

/* Dashboard polish: fixed navigation, smoother cards and AJAX states */
:root{
  --evh-bg:#eef2f7;
  --evh-card:#ffffff;
  --evh-text:#0f172a;
  --evh-muted:#64748b;
  --evh-border:rgba(148,163,184,.28);
  --evh-primary:#2563eb;
  --evh-primary-dark:#1d4ed8;
  --evh-sidebar:#0f172a;
  --evh-shadow:0 18px 55px rgba(15,23,42,.08);
  --evh-soft-shadow:0 8px 24px rgba(15,23,42,.06);
}
html{scroll-behavior:smooth;scroll-padding-top:90px}body{background:radial-gradient(circle at top left,rgba(37,99,235,.10),transparent 30%),linear-gradient(180deg,#f8fafc 0%,var(--evh-bg) 100%);color:var(--evh-text)}
.topbar{height:72px;border-bottom:1px solid rgba(148,163,184,.25);background:rgba(255,255,255,.88);backdrop-filter:blur(18px);z-index:80;box-shadow:0 8px 30px rgba(15,23,42,.05)}
.topbar strong{font-size:18px;letter-spacing:-.02em}.layout{align-items:flex-start}.sidebar{position:sticky;top:72px;align-self:flex-start;width:276px;height:calc(100vh - 72px);min-height:0;overflow-y:auto;padding:18px 14px;background:linear-gradient(180deg,#0f172a 0%,#111827 100%);box-shadow:16px 0 40px rgba(15,23,42,.08)}
.sidebar a{position:relative;display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid transparent;border-radius:14px;color:#cbd5e1;font-weight:800;letter-spacing:-.01em;transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease}.sidebar a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}.sidebar a.active{background:linear-gradient(135deg,var(--evh-primary),var(--evh-primary-dark));color:#fff;border-color:rgba(255,255,255,.16);box-shadow:0 14px 30px rgba(37,99,235,.28)}
.sidebar a::before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.55}.sidebar a.active::before{opacity:1;box-shadow:0 0 0 5px rgba(255,255,255,.14)}
.main{width:100%;max-width:1560px;margin:0 auto;padding:28px}.card,.settings-card{border:1px solid var(--evh-border);box-shadow:var(--evh-soft-shadow)}.card{border-radius:24px}.card h2{margin-top:0;letter-spacing:-.025em}.grid{gap:18px;margin-bottom:18px}.stat{position:relative;overflow:hidden;padding:22px}.stat::after{content:"";position:absolute;right:-35px;top:-35px;width:110px;height:110px;border-radius:999px;background:rgba(37,99,235,.08)}.stat .num{font-size:36px;line-height:1;letter-spacing:-.04em}.stat .label{margin-top:7px;font-weight:800;color:var(--evh-muted)}.stat:nth-child(2)::after{background:rgba(22,163,74,.10)}.stat:nth-child(3)::after{background:rgba(245,158,11,.12)}.stat:nth-child(4)::after{background:rgba(124,58,237,.10)}
.table{border:1px solid rgba(226,232,240,.9);border-radius:18px}.table th{position:sticky;top:72px;z-index:2;background:#f8fafc;color:#64748b;letter-spacing:.04em}.table tr{transition:background .15s ease}.table tbody tr:hover{background:#f8fafc}.table td{vertical-align:top}.badge{align-items:center;gap:5px;border:1px solid rgba(255,255,255,.55)}.btn{gap:7px;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.13)}.btn:disabled{cursor:not-allowed;opacity:.62;transform:none;box-shadow:none}.btn.is-loading{position:relative;color:transparent!important}.btn.is-loading::after{content:"";width:14px;height:14px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;color:#fff;position:absolute;animation:evh-spin .75s linear infinite}.btn.secondary.is-loading::after{color:#111827}@keyframes evh-spin{to{transform:rotate(360deg)}}
.input,select,textarea{border-color:#cbd5e1;transition:border-color .16s ease,box-shadow .16s ease;background:#fff}.input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(37,99,235,.72);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.settings-card{border-radius:22px;background:#fff;box-shadow:var(--evh-soft-shadow)}.settings-card summary{background:linear-gradient(180deg,#fff,#f8fafc);position:sticky;top:72px;z-index:4}.settings-card[open] summary{border-bottom:1px solid var(--evh-border)}.settings-form{background:#fff}.module-box{background:linear-gradient(180deg,#fff,#fbfdff);border-color:rgba(148,163,184,.25)}.location-box{border-color:rgba(37,99,235,.20);background:linear-gradient(135deg,rgba(37,99,235,.07),#fff 58%)}.position-input{background:#f8fafc}.footer-note{padding:12px 2px}.section-head{padding-bottom:4px}.mini-stat{background:#fff;box-shadow:var(--evh-soft-shadow)}
.autocomplete-menu{z-index:120;border-radius:16px}.inline-form{flex-wrap:wrap}.dashboard-toast-wrap{position:fixed;right:22px;bottom:22px;z-index:200;display:grid;gap:10px;max-width:min(430px,calc(100vw - 28px))}.dashboard-toast{border-radius:16px;padding:13px 15px;background:#0f172a;color:#fff;box-shadow:0 20px 55px rgba(15,23,42,.25);font-weight:800;line-height:1.35;animation:evh-toast-in .2s ease-out}.dashboard-toast.success{background:#166534}.dashboard-toast.error{background:#991b1b}.dashboard-toast.info{background:#1d4ed8}.dashboard-toast code{display:block;margin-top:7px;padding:8px;border-radius:10px;background:rgba(255,255,255,.13);word-break:break-all;color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}.dashboard-toast.is-hiding{animation:evh-toast-out .18s ease-in forwards}@keyframes evh-toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes evh-toast-out{to{opacity:0;transform:translateY(6px) scale(.98)}}
.is-ajax-saved{animation:evh-saved-flash 1.2s ease-out}@keyframes evh-saved-flash{0%{box-shadow:0 0 0 0 rgba(34,197,94,.34)}100%{box-shadow:var(--evh-soft-shadow)}}section[id]{scroll-margin-top:96px}.main-refreshing{opacity:.72;pointer-events:none;transition:opacity .16s ease}
@media(max-width:1200px){.sidebar{width:232px}.main{padding:20px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.table th{top:72px}}
@media(max-width:1000px){.topbar{height:auto;min-height:64px;gap:12px;flex-wrap:wrap;padding:12px 14px}.layout{display:block}.sidebar{position:sticky;top:0;width:100%;height:auto;min-height:0;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:10px;background:rgba(15,23,42,.96);z-index:70}.sidebar a{white-space:nowrap;margin:0}.main{padding:14px}.grid,.forms{grid-template-columns:1fr}.settings-card summary{top:54px}.table th{top:54px}}
@media(max-width:640px){.stat .num{font-size:30px}.card{border-radius:18px;padding:14px}.settings-form{padding:14px}.module-title{align-items:flex-start;flex-direction:column}.position-input{width:100%}.dashboard-toast-wrap{right:14px;bottom:14px}.btn{width:100%}.table td form[style*="display:inline"]{display:block!important}.table td form[style*="display:inline"] .btn{margin-bottom:6px}}

/* Fix 2026-06-04: dashboard table headers must not float over table content */
.table th{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(226,232,240,.95);
  border-radius:18px;
  background:#fff;
}

.table-scroll .table{
  display:table!important;
  border:0;
  border-radius:0;
  margin:0;
  width:100%;
  white-space:normal!important;
  overflow:visible!important;
}

.devices-card{
  overflow:visible;
  margin-bottom:18px;
}

.device-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));
  align-items:start;
  gap:14px;
}

.device-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.device-card:hover{
  transform:translateY(-2px);
  border-color:#cbd5e1;
  box-shadow:0 14px 32px rgba(15,23,42,.09);
}

.device-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:15px 16px;
  border-bottom:1px solid #e2e8f0;
  background:#f8fafc;
}

.device-identity{min-width:0}
.device-identity h3{margin:3px 0 4px;font-size:18px;line-height:1.2;overflow-wrap:anywhere}
.device-kicker,.device-label{display:block;color:#64748b;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.device-status-stack{display:flex;align-items:flex-end;flex-direction:column;gap:6px;flex:0 0 auto}

.device-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid #e2e8f0;
}

.device-metrics>div{padding:11px 14px;border-right:1px solid #e2e8f0}
.device-metrics>div:last-child{border-right:0}
.device-metrics span,.device-metrics strong{display:block}
.device-metrics span{margin-bottom:3px;color:#64748b;font-size:11px;font-weight:800;text-transform:uppercase}
.device-metrics strong{font-size:16px;color:#0f172a}

.device-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:13px 16px;border-bottom:1px solid #e2e8f0}
.device-info-grid>div{min-width:0}
.device-info-grid strong,.device-info-grid small{display:block;overflow-wrap:anywhere}
.device-info-grid strong{margin-top:5px;font-size:13px;color:#1e293b}
.device-info-grid small{margin-top:3px;color:#64748b;font-size:12px}
.device-link{display:inline-block;margin-top:6px;color:#2563eb;font-size:12px;font-weight:800;text-decoration:none}
.device-link:hover{text-decoration:underline}

.device-card-section{padding:13px 16px;border-bottom:1px solid #e2e8f0}
.device-card-section:last-child{border-bottom:0}
.device-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.device-section-head h4{margin:0;font-size:13px;color:#0f172a}
.device-section-head span{color:#64748b;font-size:11px;text-align:right}

.device-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.device-actions form{
  display:block!important;
  min-width:0;
  margin:0!important;
}

.device-actions .btn.small{
  width:100%;
  min-width:0;
  min-height:32px;
  padding:6px 7px;
  font-size:11px;
}

.device-command-refresh_display{grid-column:span 2}
.device-command-refresh_display .btn.primary{background:#2563eb;color:#fff}
.device-command-refresh_display .btn.primary:hover{background:#1d4ed8}

.device-actions .btn.success{
  background:#dcfce7;
  color:#166534;
  border-color:#86efac;
}

.device-actions .btn.success:hover{
  background:#bbf7d0;
}

.device-orientation-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.device-orientation-form select{min-width:0;padding:8px 10px;border:1px solid #d1d5db;border-radius:10px}
.pir-settings-form{display:grid;gap:10px;min-width:0}
.pir-card-topline{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pir-switch-row{display:flex;align-items:center;gap:10px;cursor:pointer}
.pir-switch-row strong,.pir-switch-row small{display:block}
.pir-switch-row small{margin-top:2px;color:#64748b;font-size:11px}
.pir-switch{position:relative;display:inline-flex;width:42px;height:24px;flex:0 0 42px}
.pir-switch input{position:absolute;opacity:0;pointer-events:none}
.pir-switch-track{width:42px;height:24px;border-radius:999px;background:#cbd5e1;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);transition:background .18s ease}
.pir-switch-track::after{content:"";display:block;width:18px;height:18px;margin:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(15,23,42,.25);transition:transform .18s ease}
.pir-switch input:checked + .pir-switch-track{background:#16a34a}
.pir-switch input:checked + .pir-switch-track::after{transform:translateX(18px)}
.pir-switch input:focus-visible + .pir-switch-track{outline:3px solid rgba(37,99,235,.25);outline-offset:2px}
.pir-runtime-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pir-runtime-status small{color:#64748b;font-size:11px}
.pir-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pir-time-grid label{display:grid;gap:4px}
.pir-time-grid label>span{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase}
.pir-time-grid .input,.pir-time-grid select{min-width:0;padding:7px 8px;border-radius:9px;font-size:12px}
.pir-settings-form>.btn{justify-self:start}
.pir-help{display:block;color:#64748b;font-size:11px;line-height:1.35}
.device-empty-state{grid-column:1/-1;padding:30px;border:1px dashed #cbd5e1;border-radius:16px;color:#64748b;text-align:center;background:#f8fafc}

.device-settings{background:#fbfdff}
.device-settings>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;color:#0f172a}
.device-settings>summary::-webkit-details-marker{display:none}
.device-settings>summary:hover{background:#f8fafc}
.device-settings>summary strong,.device-settings>summary small{display:block}
.device-settings>summary strong{font-size:12px}
.device-settings>summary small{margin-top:2px;color:#64748b;font-size:11px}
.device-settings-chevron{font-size:20px;color:#64748b;line-height:1;transition:transform .18s ease}
.device-settings[open] .device-settings-chevron{transform:rotate(180deg)}
.device-settings-body{border-top:1px solid #e2e8f0;background:#fff}
.device-settings-block{padding:13px 16px;border-bottom:1px solid #e2e8f0}
.device-settings-block:last-child{border-bottom:0}

@media(max-width:1200px){
  .table-scroll .table{display:table!important;white-space:normal!important;overflow:visible!important;}
}

@media(max-width:640px){
  .device-card-head{align-items:stretch;flex-direction:column}
  .device-status-stack{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .device-info-grid{grid-template-columns:1fr}
  .device-section-head{align-items:flex-start;flex-direction:column}
  .device-section-head span{text-align:left}
  .pir-card-topline{align-items:flex-start;flex-direction:column}
  .pir-time-grid{grid-template-columns:1fr 1fr}
  .device-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .device-command-refresh_display{grid-column:span 2}
}

/* Fault reports e-mail notification UI */
.faults-table-scroll .faults-table{
  min-width:1220px;
  table-layout:auto;
}

.faults-table th,
.faults-table td{
  white-space:normal;
  line-height:1.35;
  vertical-align:top;
}

.faults-table thead th{
  white-space:nowrap;
}

.faults-table td:nth-child(6){
  min-width:250px;
  max-width:380px;
}

.mail-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.mail-chip-ok{
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac;
}

.mail-chip-muted{
  background:#f1f5f9;
  color:#64748b;
  border:1px solid #e2e8f0;
}

.mail-note{
  margin-top:6px;
  color:#64748b;
  font-size:11px;
  line-height:1.3;
  font-weight:700;
}

.faults-table .inline-form{
  min-width:230px;
}

/* Display layout builder preview */
.layout-builder-box{
  border-color:rgba(37,99,235,.22);
  background:linear-gradient(135deg,rgba(37,99,235,.06),#fff 58%);
}

.module-layout-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.layout-size-select{
  min-width:150px;
  width:auto;
  padding:8px 10px;
  border-radius:12px;
  font-weight:800;
  background:#f8fafc;
}

.display-layout-preview{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:10px;
  padding:12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:18px;
  background:radial-gradient(circle at top left,rgba(56,189,248,.18),transparent 36%),#0f172a;
  min-height:430px;
  margin-bottom:10px;
}

.layout-preview-card{
  min-height:116px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  padding:13px;
  border-radius:18px;
  color:#f8fafc;
  background:linear-gradient(145deg,rgba(30,41,59,.94),rgba(15,23,42,.9));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
  cursor:grab;
  user-select:none;
}

.layout-preview-card.is-dragging{
  opacity:.55;
  cursor:grabbing;
  outline:2px dashed rgba(125,211,252,.85);
}

.layout-preview-card.is-disabled{
  opacity:.48;
  filter:grayscale(.6);
}

.layout-preview-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.layout-preview-top strong{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  letter-spacing:-.02em;
}

.layout-preview-icon{
  min-width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.12);
  font-size:12px;
  font-weight:950;
}

.layout-preview-status{
  padding:4px 8px;
  border-radius:999px;
  background:rgba(34,197,94,.16);
  color:#bbf7d0;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
}

.layout-preview-card.is-disabled .layout-preview-status{
  background:rgba(148,163,184,.18);
  color:#cbd5e1;
}

.layout-preview-body{
  display:grid;
  gap:4px;
  overflow:hidden;
  color:rgba(226,232,240,.82);
  font-size:12px;
  line-height:1.25;
}

.layout-preview-big{
  display:block;
  font-size:36px;
  line-height:.95;
  color:#fff;
  font-weight:950;
  letter-spacing:-.08em;
}

.layout-preview-actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.layout-preview-actions button{
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:5px 7px;
  color:#e2e8f0;
  background:rgba(255,255,255,.07);
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.layout-preview-actions button:hover,
.layout-preview-actions button.active{
  background:#e0f2fe;
  color:#075985;
  border-color:#bae6fd;
}

.layout-size-full{grid-column:span 12;grid-row:span 2}
.layout-size-two_thirds{grid-column:span 8;grid-row:span 2}
.layout-size-half{grid-column:span 6;grid-row:span 2}
.layout-size-third{grid-column:span 4;grid-row:span 2}
.layout-size-compact{grid-column:span 4;grid-row:span 1}
.layout-size-tall{grid-column:span 6;grid-row:span 3}

.layout-size-compact .layout-preview-actions,
.layout-size-third .layout-preview-actions{
  display:none;
}

.layout-size-compact .layout-preview-body span:nth-child(n+2),
.layout-size-third .layout-preview-body span:nth-child(n+3){
  display:none;
}

@media(max-width:1000px){
  .display-layout-preview{grid-template-columns:repeat(6,minmax(0,1fr));min-height:360px;}
  .layout-size-full,.layout-size-two_thirds{grid-column:span 6}
  .layout-size-half,.layout-size-third,.layout-size-compact,.layout-size-tall{grid-column:span 3}
  .module-layout-controls{width:100%;justify-content:stretch;}
  .layout-size-select{width:100%;}
}

/* Dashboard layout preview follows device orientation */
.layout-builder-title{
  align-items:flex-start;
  gap:12px;
}

.layout-builder-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  text-align:right;
  max-width:680px;
}

.orientation-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:#e0f2fe;
  color:#075985;
  border:1px solid #bae6fd;
}

.orientation-badge.orientation-portrait{
  background:#ede9fe;
  color:#5b21b6;
  border-color:#ddd6fe;
}

.display-layout-preview.orientation-landscape{
  min-height:430px;
}

.display-layout-preview.orientation-portrait{
  grid-template-columns:repeat(6,minmax(0,1fr));
  min-height:690px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  aspect-ratio:9 / 16;
}

.display-layout-preview.orientation-portrait .layout-size-full,
.display-layout-preview.orientation-portrait .layout-size-two_thirds,
.display-layout-preview.orientation-portrait .layout-size-tall{
  grid-column:span 6;
}

.display-layout-preview.orientation-portrait .layout-size-half,
.display-layout-preview.orientation-portrait .layout-size-third,
.display-layout-preview.orientation-portrait .layout-size-compact{
  grid-column:span 3;
}

.display-layout-preview.orientation-portrait .layout-preview-card{
  min-height:104px;
}

.display-layout-preview.orientation-portrait .layout-preview-actions{
  gap:4px;
}

.display-layout-preview.orientation-portrait .layout-preview-actions button{
  padding:4px 6px;
  font-size:9px;
}

@media(max-width:720px){
  .layout-builder-meta{
    justify-content:flex-start;
    text-align:left;
  }

  .display-layout-preview.orientation-portrait{
    min-height:560px;
    max-width:100%;
  }
}

/* iOS-style constrained resize for display layout preview */
.layout-size-current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  border:1px solid #c7d2fe;
  font-size:11px;
  font-weight:950;
  white-space:nowrap;
}

.display-layout-preview{
  grid-auto-rows:74px;
  align-items:stretch;
}

.layout-preview-card{
  position:relative;
  min-height:0;
  overflow:hidden;
  transition:grid-column .16s ease, grid-row .16s ease, transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.layout-preview-card.is-resizing{
  cursor:nwse-resize;
  transform:scale(1.012);
  outline:2px solid rgba(125,211,252,.9);
  box-shadow:0 18px 38px rgba(14,165,233,.22),0 12px 26px rgba(0,0,0,.16);
  z-index:4;
}

.layout-resize-handle{
  position:absolute;
  right:8px;
  bottom:8px;
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  background:rgba(255,255,255,.1);
  cursor:nwse-resize;
  touch-action:none;
  z-index:3;
}

.layout-resize-handle::before,
.layout-resize-handle::after{
  content:"";
  position:absolute;
  right:5px;
  bottom:6px;
  width:10px;
  height:2px;
  border-radius:99px;
  background:rgba(226,232,240,.9);
  transform:rotate(-45deg);
  transform-origin:right center;
}

.layout-resize-handle::after{
  right:5px;
  bottom:11px;
  width:6px;
  opacity:.72;
}

.layout-resize-handle:hover{
  background:#e0f2fe;
  border-color:#bae6fd;
}

.layout-resize-handle:hover::before,
.layout-resize-handle:hover::after{
  background:#075985;
}

.layout-preview-card[data-module-key="waste"].layout-size-full,
.layout-preview-card[data-module-key="contact"].layout-size-full{
  grid-column:span 12;
  grid-row:span 1;
}

.layout-preview-card[data-module-key="waste"].layout-size-half,
.layout-preview-card[data-module-key="contact"].layout-size-half,
.layout-preview-card[data-module-key="waste"].layout-size-compact,
.layout-preview-card[data-module-key="contact"].layout-size-compact{
  grid-column:span 6;
  grid-row:span 1;
}

.layout-preview-card[data-module-key="waste"] .layout-preview-body span:nth-child(n+2),
.layout-preview-card[data-module-key="contact"] .layout-preview-body span:nth-child(n+2){
  display:none;
}

.layout-preview-card[data-module-key="weather"].layout-size-half{
  grid-column:span 6;
  grid-row:span 2;
}

.layout-preview-card[data-module-key="weather"].layout-size-third{
  grid-column:span 4;
  grid-row:span 2;
}

.layout-preview-card[data-module-key="weather"].layout-size-compact{
  grid-column:span 4;
  grid-row:span 1;
}

.layout-preview-card[data-module-key="weather"].layout-size-compact .layout-preview-big{
  font-size:30px;
}

.layout-preview-card[data-module-key="weather"].layout-size-compact .layout-preview-body span:nth-child(n+2){
  display:none;
}

.display-layout-preview.orientation-portrait{
  grid-auto-rows:72px;
}

.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-full,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-full{
  grid-column:span 6;
  grid-row:span 1;
}

.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-half,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-half,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-compact,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-compact,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-half,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-third,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-compact{
  grid-column:span 3;
}

.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-half,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-third{
  grid-row:span 2;
}

.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-compact{
  grid-row:span 1;
}


/* =========================================================
   eVhod dashboard preview = kiosk TV geometry fix
   Samsung UE32J5502AK is a 16:9 Full HD TV, so the dashboard
   preview must NOT collapse to the admin panel responsive 6-col grid.
   It now keeps the same logical grid as display.php:
   - landscape: 12 columns, 16:9 canvas
   - portrait: 6 columns, 9:16 canvas
   - hidden modules are removed from visual preview, like on the TV
========================================================= */
.layout-builder-box .display-layout-preview{
  width:100%;
  margin:0 auto 10px;
  box-sizing:border-box;
  overflow:hidden;
  align-content:stretch;
  grid-auto-flow:row dense;
  grid-auto-rows:minmax(0,1fr);
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.18),transparent 34%),
    radial-gradient(circle at bottom right,rgba(168,85,247,.14),transparent 36%),
    #0f172a;
}

.layout-builder-box .display-layout-preview.orientation-landscape{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  aspect-ratio:16 / 9;
  min-height:0!important;
  max-height:none;
  max-width:980px;
  padding:12px;
  gap:9px;
}

.layout-builder-box .display-layout-preview.orientation-portrait{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  aspect-ratio:9 / 16;
  min-height:0!important;
  max-width:540px;
  padding:12px;
  gap:9px;
}

.layout-builder-box .layout-preview-card{
  min-height:0!important;
  height:100%;
  padding:11px;
  border-radius:18px;
}

/* TV skrite module odstrani iz layouta, zato jih odstrani tudi preview. */
.layout-builder-box .layout-preview-card.is-disabled{
  display:none!important;
}

.layout-builder-box .layout-size-full{grid-column:span 12;grid-row:span 2}
.layout-builder-box .layout-size-half{grid-column:span 6;grid-row:span 2}
.layout-builder-box .layout-size-third{grid-column:span 4;grid-row:span 2}
.layout-builder-box .layout-size-compact{grid-column:span 4;grid-row:span 1}

.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-full,
.layout-builder-box .layout-preview-card[data-module-key="contact"].layout-size-full{
  grid-column:span 12;
  grid-row:span 1;
}
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-half,
.layout-builder-box .layout-preview-card[data-module-key="contact"].layout-size-half,
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-compact,
.layout-builder-box .layout-preview-card[data-module-key="contact"].layout-size-compact{
  grid-column:span 6;
  grid-row:span 1;
}

.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-full,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-two_thirds,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-tall,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-full,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-full{
  grid-column:span 6;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-half,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-third,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-compact,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-half,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-half,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-half,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-third,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-compact{
  grid-column:span 3;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-full,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-full,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-half,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-half{
  grid-row:span 1;
}

/* Na ozkih admin ekranih naj preview ostane TV-preview in se samo skrola, ne preklopi v drugačen layout. */
@media(max-width:1000px){
  .layout-builder-box{
    overflow-x:auto;
  }
  .layout-builder-box .display-layout-preview.orientation-landscape{
    min-width:760px;
  }
}

.layout-builder-box .layout-preview-status{
  pointer-events:none;
}

.layout-builder-box .layout-resize-handle{
  width:32px;
  height:32px;
  right:6px;
  bottom:6px;
}
.layout-builder-box .layout-resize-handle::before,
.layout-builder-box .layout-resize-handle::after{
  right:8px;
}

/* =========================================================
   eVhod layout polish: QR škoda + waste square + preview parity
========================================================= */
.layout-preview-card[data-module-key="qr_fault"].layout-size-third{
  grid-column:span 4;
  grid-row:span 2;
}
.layout-preview-card[data-module-key="qr_fault"] .layout-preview-body{
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:10px;
}
.layout-preview-qr-demo{
  width:58px;
  height:58px;
  grid-row:span 2;
  display:grid!important;
  place-items:center;
  border-radius:14px;
  background:#fff;
  color:#0f172a;
  font-weight:950;
  font-size:14px;
  box-shadow:inset 0 0 0 6px rgba(15,23,42,.08);
}
.layout-preview-card[data-module-key="qr_fault"].layout-size-third .layout-preview-qr-demo{
  width:66px;
  height:66px;
}
.layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 4;
  grid-row:span 2;
}
.layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body span,
.layout-preview-card[data-module-key="waste"].layout-size-full .layout-preview-body span{
  display:block;
}
.layout-preview-card[data-module-key="waste"] .layout-preview-body span:nth-child(n+4){
  display:none;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="qr_fault"].layout-size-third,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 3;
  grid-row:span 2;
}

/* Dashboard preview refinements matching TV cards */
.layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  align-content:stretch;
}
.layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body span{
  display:block!important;
  padding:7px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.09);
  font-size:12px;
  line-height:1.15;
}
.layout-preview-card[data-module-key="qr_fault"].layout-size-third .layout-preview-body{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:7px;
}
.layout-preview-card[data-module-key="qr_fault"].layout-size-third .layout-preview-qr-demo{
  width:86px;
  height:86px;
  border-radius:18px;
  font-size:16px;
}
.layout-preview-card[data-module-key="notices"].layout-size-full .layout-preview-body,
.layout-preview-card[data-module-key="notices"].layout-size-half .layout-preview-body{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:7px;
}
.layout-preview-card[data-module-key="notices"].layout-size-full .layout-preview-body span,
.layout-preview-card[data-module-key="notices"].layout-size-half .layout-preview-body span{
  display:block;
  padding:7px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
}

/* Preview: waste kocka is a 50% tile, not a narrow 33% tile. */
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 6!important;
  grid-row:span 2!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 3!important;
  grid-row:span 2!important;
}

/* =========================================================
   Dashboard preview: obvestila brez prisilnega span-3 overlaya
   Preview ostane stabilen; velikost full že uporablja 12 stolpcev in 2 vrstici.
========================================================= */
.layout-builder-box .layout-preview-card[data-module-key="notices"].layout-size-full{
  grid-column:span 12;
  grid-row:span 2;
}
.layout-builder-box .layout-preview-card[data-module-key="notices"] .layout-preview-body{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:7px;
}
.layout-builder-box .layout-preview-card[data-module-key="notices"] .layout-preview-body span{
  display:flex;
  align-items:center;
  min-height:0;
  padding:7px 9px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
}



/* =========================================================
   eVhod DASHBOARD PREVIEW RECOVERY 2026-06-05
   Preview uporablja stabilen grid brez prekrivanja.
========================================================= */
.layout-builder-box .display-layout-preview{
  display:grid!important;
  grid-auto-flow:row!important;
  align-content:stretch!important;
  overflow:hidden!important;
}
.layout-builder-box .display-layout-preview.orientation-landscape{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-template-rows:repeat(8,minmax(0,1fr))!important;
  grid-auto-rows:minmax(0,1fr)!important;
  aspect-ratio:16 / 9!important;
  gap:8px!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:repeat(10,minmax(0,1fr))!important;
  grid-auto-rows:minmax(0,1fr)!important;
  aspect-ratio:9 / 16!important;
  gap:8px!important;
}
.layout-builder-box .layout-preview-card{
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  transform:none!important;
  z-index:auto!important;
}
.layout-builder-box .display-layout-preview.orientation-landscape .layout-size-full{grid-column:span 12!important;grid-row:span 2!important;}
.layout-builder-box .display-layout-preview.orientation-landscape .layout-size-half{grid-column:span 6!important;grid-row:span 2!important;}
.layout-builder-box .display-layout-preview.orientation-landscape .layout-size-third{grid-column:span 4!important;grid-row:span 2!important;}
.layout-builder-box .display-layout-preview.orientation-landscape .layout-size-compact{grid-column:span 4!important;grid-row:span 1!important;}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-full{grid-column:span 6!important;grid-row:span 2!important;}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-half,
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-third{grid-column:span 3!important;grid-row:span 2!important;}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-size-compact{grid-column:span 3!important;grid-row:span 1!important;}

.layout-builder-box .layout-preview-card[data-module-key="notices"]{
  grid-column:1 / -1!important;
  grid-row:span 2!important;
}
.layout-builder-box .display-layout-preview.orientation-landscape .layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 6!important;
  grid-row:span 2!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 3!important;
  grid-row:span 2!important;
}
.layout-builder-box .layout-preview-card.is-disabled{display:none!important;}
.layout-builder-box .layout-preview-card.is-dragging,
.layout-builder-box .layout-preview-card.is-resizing{
  z-index:5!important;
}

/* eVhod dashboard tuning 2026-06-05: weather can be 100% width again. */
.layout-builder-box .display-layout-preview.orientation-landscape .layout-preview-card[data-module-key="weather"].layout-size-full{
  grid-column:span 12!important;
  grid-row:span 2!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-full{
  grid-column:span 6!important;
  grid-row:span 2!important;
}

/* =========================================================
   Dashboard preview hotfix 2026-06-05
   - weather supports a taller full-width option
   - waste square mirrors TV: 50% width, no crowded preview
========================================================= */
.layoutSizeTallFixMarker{display:none}
.layout-builder-box .display-layout-preview.orientation-landscape .layout-preview-card[data-module-key="weather"].layout-size-tall{
  grid-column:span 12!important;
  grid-row:span 3!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-tall{
  grid-column:span 6!important;
  grid-row:span 3!important;
}
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 6!important;
  grid-row:span 2!important;
}
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  align-content:start!important;
}
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body span:nth-child(n+5){
  display:none!important;
}

/* =========================================================
   eVhod dashboard preview fine tune 2026-06-05
   Mirrors final TV layout for weather full and waste square.
========================================================= */
.layout-builder-box .display-layout-preview.orientation-landscape .layout-preview-card[data-module-key="weather"].layout-size-full{
  grid-column:span 12!important;
  grid-row:span 2!important;
}
.layout-builder-box .display-layout-preview.orientation-landscape .layout-preview-card[data-module-key="weather"].layout-size-tall{
  grid-column:span 12!important;
  grid-row:span 3!important;
}
.layout-builder-box .display-layout-preview.orientation-landscape .layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 6!important;
  grid-row:span 2!important;
}
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  overflow:hidden!important;
}
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body span{
  display:block!important;
  min-height:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body span:nth-child(n+4){
  display:none!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-full{
  grid-column:span 6!important;
  grid-row:span 2!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="weather"].layout-size-tall{
  grid-column:span 6!important;
  grid-row:span 3!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="waste"].layout-size-third{
  grid-column:span 3!important;
  grid-row:span 2!important;
}

/* =========================================================
   Dashboard preview: weather stat centering + compact manager card
   2026-06-05
========================================================= */
.layout-builder-box .layout-preview-card[data-module-key="contact"].layout-size-compact,
.layout-preview-card[data-module-key="contact"].layout-size-compact{
  grid-column:span 4!important;
  grid-row:span 1!important;
  padding:10px 12px!important;
}
.layout-builder-box .layout-preview-card[data-module-key="contact"].layout-size-compact .layout-preview-body span:nth-child(n+2),
.layout-preview-card[data-module-key="contact"].layout-size-compact .layout-preview-body span:nth-child(n+2){
  display:none!important;
}
.layout-builder-box .display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-compact,
.display-layout-preview.orientation-portrait .layout-preview-card[data-module-key="contact"].layout-size-compact{
  grid-column:span 3!important;
  grid-row:span 1!important;
}


/* Dashboard preview: show that content-heavy cards auto-scroll on TV. */
.layout-builder-box .layout-preview-card[data-module-key="bus"] .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="bus_2"] .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="holidays"] .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="notices"] .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="waste"] .layout-preview-body{
  overflow:hidden!important;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
}
.layout-builder-box .layout-preview-card[data-module-key="bus"] .layout-preview-body span,
.layout-builder-box .layout-preview-card[data-module-key="bus_2"] .layout-preview-body span,
.layout-builder-box .layout-preview-card[data-module-key="holidays"] .layout-preview-body span,
.layout-builder-box .layout-preview-card[data-module-key="notices"] .layout-preview-body span,
.layout-builder-box .layout-preview-card[data-module-key="waste"] .layout-preview-body span{
  flex:0 0 auto;
}
.layout-builder-box .layout-preview-card[data-module-key="bus"].layout-size-compact .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="bus"].layout-size-third .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="bus_2"].layout-size-compact .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="bus_2"].layout-size-third .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="holidays"].layout-size-compact .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="holidays"].layout-size-third .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="notices"].layout-size-compact .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="notices"].layout-size-third .layout-preview-body,
.layout-builder-box .layout-preview-card[data-module-key="waste"].layout-size-third .layout-preview-body{
  animation:layout-preview-slow-scroll 8s ease-in-out infinite alternate;
}
@keyframes layout-preview-slow-scroll{
  from{transform:translateY(0)}
  to{transform:translateY(-18px)}
}
@media (prefers-reduced-motion: reduce){
  .layout-builder-box .layout-preview-card .layout-preview-body{animation:none!important;transform:none!important;}
}


/* Production ticketing additions */
.mini-stat-danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.priority-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-weight:950;font-size:12px;white-space:nowrap;border:1px solid transparent}
.priority-chip.priority-low,.priority-select.priority-low{background:#dcfce7;color:#166534;border-color:#86efac}
.priority-chip.priority-medium,.priority-select.priority-medium{background:#fef3c7;color:#92400e;border-color:#fde68a}
.priority-chip.priority-urgent,.priority-select.priority-urgent{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.priority-row-urgent td{background:linear-gradient(90deg,rgba(254,226,226,.62),transparent 22%)}
.fault-timeline{margin-top:8px}.fault-timeline summary{cursor:pointer;font-weight:900;color:#374151;font-size:12px}.fault-event{margin-top:8px;padding:8px 9px;border-radius:12px;background:#f9fafb;border:1px solid #e5e7eb}.fault-event strong,.fault-event span,.fault-event em{display:block}.fault-event span{font-size:12px;color:#6b7280}.fault-event em{font-size:12px;color:#374151;font-style:normal;margin-top:3px}.compact-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end}.submit-field{align-self:end}.faults-table .status-select{min-width:120px}.faults-table .priority-select{min-width:105px}
.success-box{background:#dcfce7!important;color:#166534!important;border-color:#86efac!important}
#screenshots .table a.btn{white-space:nowrap}
#mail-settings input[readonly]{background:#f9fafb;color:#4b5563}

/* Watchdog + contractor public workflow additions */
.watchdog-critical td{background:linear-gradient(90deg,rgba(254,226,226,.68),transparent 25%)}
.watchdog-warning td{background:linear-gradient(90deg,rgba(254,243,199,.58),transparent 25%)}
.flash{padding:12px 14px;border-radius:14px;margin:12px 0;font-weight:800;border:1px solid transparent}
.flash.success{background:#dcfce7;color:#166534;border-color:#86efac}
.flash.error{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.public-page{min-height:100vh;background:radial-gradient(circle at top left,#e0f2fe 0,#f8fafc 34%,#eef2ff 100%);padding:24px}
.public-wrap{max-width:900px;margin:0 auto}
.public-card{background:rgba(255,255,255,.94);border:1px solid rgba(148,163,184,.35);box-shadow:0 22px 70px rgba(15,23,42,.12);border-radius:28px;padding:28px}
.public-logo{display:inline-flex;padding:8px 12px;border-radius:999px;background:#111827;color:#fff;font-weight:950;margin-bottom:18px}
.public-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:18px 0}
.public-status-grid div{background:#f8fafc;border:1px solid #e5e7eb;border-radius:18px;padding:14px}
.public-status-grid span{display:block;color:#6b7280;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.public-status-grid strong{font-size:16px;color:#111827}
.public-form{display:grid;gap:14px;margin-top:18px}.public-form select,.public-form textarea{width:100%}
.public-timeline{display:grid;gap:8px;margin-top:12px}
code{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;padding:2px 6px}

/* Audit log / editable notices */
.audit-card .audit-table td {
  vertical-align: top;
}
.audit-action {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  background: #eef2ff;
  color: #3730a3;
  white-space: nowrap;
}
.audit-action-fault_status_changed,
.audit-action-fault_contractor_assigned {
  background: #fff7ed;
  color: #9a3412;
}
.audit-action-device_command_sent {
  background: #ecfeff;
  color: #155e75;
}
.audit-action-notice_created,
.audit-action-notice_updated {
  background: #f0fdf4;
  color: #166534;
}
.audit-details {
  margin-top: 6px;
}
.audit-details summary {
  cursor: pointer;
  color: #6b7280;
  font-size: 12px;
}
.audit-details code {
  display: block;
  margin-top: 5px;
  white-space: normal;
  word-break: break-word;
  color: #475569;
}
.notices-edit-table textarea {
  width: 100%;
  min-width: 260px;
  margin-top: 6px;
}
.notice-edit-form {
  display: grid;
  gap: 6px;
}
.inline-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-weight: 800;
}

/* Demo tools / layout templates */
.demo-tools-card{border:1px solid rgba(37,99,235,.18);box-shadow:0 18px 45px rgba(15,23,42,.06)}
.template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0 18px}
.template-card{border:1px solid #e5e7eb;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc);padding:14px 15px}
.template-card strong{display:block;font-size:15px;margin-bottom:6px;color:#111827}
.template-card p{margin:0;color:#6b7280;font-size:13px;line-height:1.45}
.demo-forms{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.nested-card{background:#fbfdff;border:1px solid #e5e7eb;box-shadow:none}
.nested-card h3{margin:0 0 8px;font-size:18px}
.check-row{display:flex;align-items:center;gap:8px;font-weight:800;margin:10px 0 14px;color:#374151}
.check-row input{width:18px;height:18px}
@media(max-width:1200px){.demo-forms{grid-template-columns:1fr}}

/* Dashboard split pages */
.dashboard-home-card{margin-top:2px}.quick-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.quick-link-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border:1px solid rgba(148,163,184,.28);border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc);color:var(--evh-text,#0f172a);text-decoration:none;box-shadow:0 8px 24px rgba(15,23,42,.05);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.quick-link-card:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(15,23,42,.10);border-color:rgba(37,99,235,.35)}.quick-link-card strong{letter-spacing:-.02em}.quick-link-card span{font-size:12px;font-weight:800;color:var(--evh-muted,#64748b)}@media(max-width:1000px){.quick-link-grid{grid-template-columns:1fr}}

/* v17: cleaner scalable device cards */
.devices-card{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.devices-card .section-head{
  margin:0 0 16px!important;
  padding:18px 20px!important;
  border:1px solid rgba(148,163,184,.26)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.05)!important;
}

.device-card-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))!important;
  gap:18px!important;
}

.device-card{
  display:flex!important;
  flex-direction:column!important;
  min-height:100%!important;
  border:1px solid rgba(148,163,184,.28)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 14px 38px rgba(15,23,42,.075)!important;
}

.device-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(37,99,235,.28)!important;
  box-shadow:0 22px 48px rgba(15,23,42,.12)!important;
}

.device-card-head{
  padding:18px 18px 16px!important;
  border-bottom:1px solid rgba(226,232,240,.86)!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
}

.device-identity h3{
  margin:4px 0 5px!important;
  font-size:20px!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}

.device-identity .muted{
  display:block!important;
  max-width:100%!important;
  font-size:12px!important;
  overflow-wrap:anywhere!important;
}

.device-status-stack{
  align-items:flex-end!important;
  gap:7px!important;
}

.device-status-stack .badge{
  min-height:25px!important;
  white-space:nowrap!important;
}

.device-metrics{
  gap:10px!important;
  padding:14px 16px!important;
  border-bottom:1px solid rgba(226,232,240,.86)!important;
  background:#fff!important;
}

.device-metrics>div{
  min-width:0!important;
  padding:12px!important;
  border:1px solid rgba(226,232,240,.92)!important;
  border-radius:16px!important;
  background:#f8fafc!important;
}

.device-metrics>div:last-child{border-right:1px solid rgba(226,232,240,.92)!important}
.device-metrics strong{font-size:18px!important;letter-spacing:-.02em!important}

.device-info-grid{
  gap:10px!important;
  padding:14px 16px!important;
  border-bottom:1px solid rgba(226,232,240,.86)!important;
}

.device-info-grid>div{
  padding:12px!important;
  border:1px solid rgba(226,232,240,.92)!important;
  border-radius:16px!important;
  background:#fbfdff!important;
}

.device-info-grid .device-ip-item{
  grid-column:1 / -1!important;
}

.device-ip-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  font-size:14px!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:0!important;
  overflow-wrap:anywhere!important;
}

.device-card-section{
  padding:15px 16px!important;
  border-bottom:1px solid rgba(226,232,240,.86)!important;
}

.device-actions{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
}

.device-actions .btn.small{
  min-height:36px!important;
  padding:8px 9px!important;
  border-radius:11px!important;
  font-size:11px!important;
  line-height:1.05!important;
  white-space:normal!important;
}

.device-command-refresh_display{grid-column:span 2!important}
.device-command-restart_browser,
.device-command-clear_cache,
.device-command-take_screenshot{grid-column:span 1!important}
.device-command-screen_on,
.device-command-screen_off{grid-column:span 2!important}
.device-command-reboot{grid-column:span 4!important}

.device-settings{
  margin-top:auto!important;
  background:#fff!important;
}

.device-settings>summary{
  padding:15px 18px!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
}

.device-settings[open]>summary{
  border-bottom:1px solid rgba(226,232,240,.86)!important;
}

.device-settings>summary strong{
  font-size:13px!important;
  letter-spacing:-.01em!important;
}

.device-settings-body{
  display:grid!important;
  gap:0!important;
  border-top:0!important;
}

.device-settings-block{
  padding:16px 18px!important;
  border-bottom:1px solid rgba(226,232,240,.86)!important;
}

.device-section-head{
  margin-bottom:13px!important;
}

.device-section-head h4{
  font-size:14px!important;
  letter-spacing:-.02em!important;
}

.device-orientation-form{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
}

.pir-settings-form{
  gap:12px!important;
}

.pir-card-topline{
  align-items:flex-start!important;
  padding:12px!important;
  border:1px solid rgba(226,232,240,.92)!important;
  border-radius:16px!important;
  background:#f8fafc!important;
}

.pir-sensitivity-card{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid rgba(147,197,253,.62);
  border-radius:16px;
  background:#f8fbff;
}

.pir-sensitivity-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.pir-sensitivity-head strong{
  display:block;
  margin-top:4px;
  color:#0f172a;
  font-size:13px;
}

.pir-sensitivity-head output{
  flex:0 0 auto;
  padding:6px 9px;
  border:1px solid #bfdbfe;
  border-radius:9px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.pir-sensitivity-range{
  --pir-range-progress:25%;
  width:100%;
  height:20px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}

.pir-sensitivity-range::-webkit-slider-runnable-track{
  height:7px;
  border-radius:4px;
  background:linear-gradient(90deg,#2563eb 0 var(--pir-range-progress),#dbeafe var(--pir-range-progress) 100%);
}

.pir-sensitivity-range::-webkit-slider-thumb{
  width:20px;
  height:20px;
  margin-top:-6.5px;
  appearance:none;
  -webkit-appearance:none;
  border:3px solid #fff;
  border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 1px #2563eb,0 3px 9px rgba(37,99,235,.28);
}

.pir-sensitivity-range::-moz-range-track{
  height:7px;
  border-radius:4px;
  background:#dbeafe;
}

.pir-sensitivity-range::-moz-range-progress{
  height:7px;
  border-radius:4px;
  background:#2563eb;
}

.pir-sensitivity-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border:3px solid #fff;
  border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 1px #2563eb,0 3px 9px rgba(37,99,235,.28);
}

.pir-sensitivity-range:focus-visible{
  outline:3px solid rgba(37,99,235,.2);
  outline-offset:3px;
  border-radius:8px;
}

.pir-sensitivity-scale{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:-5px;
  color:#64748b;
  font-size:10px;
  font-weight:800;
}

.pir-filter-summary{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.pir-filter-summary span{
  padding:5px 8px;
  border:1px solid #dbeafe;
  border-radius:8px;
  background:#fff;
  color:#475569;
  font-size:10px;
  font-weight:850;
}

.pir-sensitivity-card>small{
  color:#64748b;
  font-size:11px;
  line-height:1.35;
}

.pir-time-grid{
  gap:10px!important;
}

.pir-time-grid .input,
.pir-time-grid select{
  min-height:38px!important;
  border-radius:12px!important;
  background:#fff!important;
}

.pir-help{
  padding:10px 12px!important;
  border-radius:14px!important;
  background:#f8fafc!important;
}

.pir-log-section{
  background:#fbfdff!important;
}

.pir-event-list{
  display:grid;
  gap:7px;
  max-height:286px;
  overflow:auto;
  padding-right:3px;
  scrollbar-width:thin;
}

.pir-event-row{
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:13px;
  background:#fff;
}

.pir-event-row>div{
  min-width:0;
}

.pir-event-row strong,
.pir-event-row small{
  display:block;
  overflow-wrap:anywhere;
}

.pir-event-row strong{
  color:#1e293b;
  font-size:12px;
  line-height:1.2;
}

.pir-event-row small{
  margin-top:3px;
  color:#64748b;
  font-size:11px;
  line-height:1.25;
}

.pir-event-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.pir-event-motion_ignored .pir-event-dot{
  background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.12);
}

.pir-event-sensor_ready .pir-event-dot{
  background:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

.pir-event-sensor_error .pir-event-dot{
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.12);
}

.pir-log-empty{
  padding:13px;
  border:1px dashed #cbd5e1;
  border-radius:13px;
  background:#fff;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
}

.device-empty-state{
  min-height:180px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:22px!important;
}

@media(max-width:1320px){
  .device-card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))!important}
  .device-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .device-command-refresh_display{grid-column:span 3!important}
  .device-command-screen_on,
  .device-command-screen_off{grid-column:span 1!important}
  .device-command-reboot{grid-column:span 3!important}
}

@media(max-width:760px){
  .devices-card .section-head{padding:15px!important}
  .device-card-grid{grid-template-columns:1fr!important}
  .device-card-head{align-items:stretch!important;flex-direction:column!important}
  .device-status-stack{align-items:flex-start!important;flex-direction:row!important;flex-wrap:wrap!important}
  .device-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;padding:12px!important;gap:7px!important}
  .device-metrics>div{padding:10px 8px!important}
  .device-info-grid{grid-template-columns:1fr!important}
  .device-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .device-command-refresh_display,
  .device-command-reboot{grid-column:span 2!important}
  .device-command-screen_on,
  .device-command-screen_off{grid-column:span 1!important}
  .device-orientation-form{grid-template-columns:1fr!important}
  .pir-card-topline{flex-direction:column!important}
  .pir-sensitivity-head{align-items:stretch;flex-direction:column}
  .pir-sensitivity-head output{align-self:flex-start}
  .pir-time-grid{grid-template-columns:1fr 1fr!important}
}

/* v22: account directory and simplified session header */
.topbar-session{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:#64748b;
  font-size:13px;
}

.topbar-session>strong{
  color:#0f172a;
  font-size:15px;
  letter-spacing:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.topbar-role{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border:1px solid #dbeafe;
  border-radius:8px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}

.admin-directory{
  display:grid;
  gap:18px;
}

.admin-directory-head{
  margin:0!important;
  padding:18px 20px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.admin-directory-head h2,
.admin-table-card h3,
.admin-create-card h3{
  margin:0;
}

.admin-directory-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.admin-directory-stats span{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#f8fafc;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}

.admin-directory-stats strong{
  color:#0f172a;
  font-size:16px;
}

.admin-create-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.admin-create-card{
  margin:0!important;
}

.admin-create-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 12px;
  margin-top:15px;
}

.admin-create-form>.btn{
  justify-self:start;
}

.admin-table-card{
  min-width:0;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
}

.admin-table-card>.section-head{
  margin:0!important;
  padding:16px 18px!important;
  border-bottom:1px solid #e2e8f0;
}

.admin-table-card>.table-scroll{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
}

.admin-table{
  min-width:1120px;
}

.users-admin-table{
  min-width:1240px;
}

.admin-table th{
  position:static!important;
  padding:10px!important;
  font-size:10px!important;
  letter-spacing:.04em;
}

.admin-table td{
  padding:8px!important;
  vertical-align:middle;
}

.admin-table-input,
.admin-table-select{
  min-width:128px;
  min-height:36px!important;
  padding:7px 8px!important;
  border-radius:8px!important;
  font-size:12px!important;
}

.admin-table td:first-child .admin-table-input{
  min-width:160px;
  font-weight:800;
}

.admin-usage{
  display:block;
  min-width:120px;
  color:#64748b;
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
}

.admin-row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:128px;
}

.admin-row-actions form{
  display:inline-flex!important;
  margin:0!important;
}

.admin-row-actions .btn{
  min-height:32px;
  border-radius:8px!important;
}

.btn:disabled{
  cursor:not-allowed;
  opacity:.42;
  filter:none;
}

@media(max-width:900px){
  .topbar-session{align-items:flex-start;flex-wrap:wrap;gap:5px 7px}
  .topbar-session>strong{max-width:48vw}
  .admin-create-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  .admin-directory-head{align-items:flex-start!important;flex-direction:column}
  .admin-create-form{grid-template-columns:1fr}
}

/* v23: role-based read-only states and heartbeat retention */
.device-readonly-note{
  margin-top:auto;
  padding:12px 16px;
  border-top:1px solid #e2e8f0;
  background:#f8fafc;
  color:#64748b;
  font-size:11px;
  line-height:1.4;
}

.readonly-label{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 8px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
  color:#64748b;
  font-size:10px;
  font-weight:850;
}

.permissions-page{
  display:grid;
  gap:18px;
}

.permissions-page-head{
  margin:0!important;
  padding:18px 20px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.permissions-page-head h2{
  margin:0;
}

.permission-table-card{
  margin:0!important;
  padding:0!important;
  overflow:hidden;
}

.permission-table{
  min-width:980px;
}

.permission-table th,
.permission-table td{
  text-align:center;
}

.permission-table th:first-child,
.permission-table td:first-child{
  text-align:left;
}

.permission-table td:first-child strong,
.permission-table td:first-child small{
  display:block;
}

.permission-table td:first-child small{
  margin-top:3px;
  color:#94a3b8;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:10px;
}

.permission-yes,
.permission-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  min-height:25px;
  padding:4px 7px;
  border-radius:7px;
  font-size:10px;
  font-weight:850;
}

.permission-yes{
  background:#dcfce7;
  color:#166534;
}

.permission-no{
  background:#f1f5f9;
  color:#64748b;
}

.permission-notes{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.permission-notes .card{
  margin:0;
  padding:14px;
}

.permission-notes strong{
  color:#0f172a;
  font-size:12px;
}

.permission-notes p{
  margin:6px 0 0;
  color:#64748b;
  font-size:11px;
  line-height:1.4;
}

.data-retention-page{
  display:grid;
  gap:18px;
}

.retention-page-head{
  margin:0!important;
  padding:18px 20px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.retention-page-head h2,
.retention-layout h3{
  margin:0;
}

.retention-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.retention-stat-grid .card{
  margin:0;
}

.retention-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
}

.retention-layout>.card{
  margin:0;
}

.retention-form{
  display:flex;
  align-items:end;
  gap:10px;
  margin-top:16px;
}

.retention-form .field{
  min-width:180px;
  margin:0;
}

.retention-range{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px 12px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #e2e8f0;
  font-size:12px;
}

.retention-range span{
  color:#64748b;
}

.retention-range strong{
  text-align:right;
  overflow-wrap:anywhere;
}

.cron-command{
  display:block;
  margin-top:16px;
  padding:12px;
  border:1px solid #dbeafe;
  border-radius:10px;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:11px;
  line-height:1.5;
  overflow-wrap:anywhere;
  user-select:text;
}

.retention-cron-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin-top:12px;
}

.retention-cron-grid span{
  display:grid;
  gap:3px;
  padding:8px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
  color:#64748b;
  font-size:9px;
  text-align:center;
}

.retention-cron-grid strong{
  color:#0f172a;
  font-size:13px;
}

@media(max-width:900px){
  .retention-layout{grid-template-columns:1fr}
  .retention-stat-grid{grid-template-columns:1fr}
  .permission-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  .retention-form{align-items:stretch;flex-direction:column}
  .retention-form .field,.retention-form .btn{width:100%}
  .retention-cron-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .permission-notes{grid-template-columns:1fr}
}

/* =========================================================
   eVhod mobile dashboard / phone app-like UX
   2026-06-30
========================================================= */
.mobile-menu-btn,
.topbar-brand,
.sidebar-mobile-head,
.sidebar-backdrop{
  display:none;
}

.topbar{
  gap:12px;
}

.topbar-brand{
  min-width:0;
  flex-direction:column;
  line-height:1.08;
}

.topbar-brand strong{
  color:#0f172a;
  font-size:15px;
  letter-spacing:-.03em;
}

.topbar-brand small{
  max-width:36vw;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#64748b;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}

.mobile-menu-btn,
.sidebar-close-btn{
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  color:#0f172a;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

.mobile-menu-btn{
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:9px 11px;
}

.mobile-menu-lines,
.mobile-menu-lines::before,
.mobile-menu-lines::after{
  display:block;
  width:18px;
  height:2px;
  border-radius:99px;
  background:#0f172a;
}

.mobile-menu-lines{
  position:relative;
}

.mobile-menu-lines::before,
.mobile-menu-lines::after{
  content:"";
  position:absolute;
  left:0;
}

.mobile-menu-lines::before{top:-6px}
.mobile-menu-lines::after{top:6px}

@media(max-width:900px){
  html{
    -webkit-text-size-adjust:100%;
    scroll-padding-top:calc(72px + env(safe-area-inset-top));
  }

  body{
    overflow-x:hidden;
    background:#f8fafc;
  }

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

  .topbar{
    height:calc(64px + env(safe-area-inset-top));
    min-height:calc(64px + env(safe-area-inset-top));
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
    position:sticky;
    top:0;
    z-index:100;
    flex-wrap:nowrap!important;
    border-bottom:1px solid rgba(226,232,240,.92);
    box-shadow:0 10px 30px rgba(15,23,42,.08);
  }

  .mobile-menu-btn,
  .topbar-brand{
    display:inline-flex;
  }

  .topbar-session{
    display:none!important;
  }

  .topbar>.btn.secondary[href="/logout.php"]{
    width:auto!important;
    min-height:42px;
    flex:0 0 auto;
    padding:9px 12px;
    border-radius:12px;
    white-space:nowrap;
  }

  .layout{
    display:block!important;
    min-width:0;
  }

  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(86vw,340px)!important;
    height:100dvh!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    z-index:130!important;
    background:#0f172a!important;
    box-shadow:24px 0 60px rgba(15,23,42,.35);
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body.sidebar-open .sidebar{
    transform:translateX(0);
  }

  .sidebar-mobile-head{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:3px 2px 12px;
    margin-bottom:4px;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#fff;
  }

  .sidebar-mobile-head strong,
  .sidebar-mobile-head span{
    display:block;
  }

  .sidebar-mobile-head strong{
    font-size:19px;
    letter-spacing:-.04em;
  }

  .sidebar-mobile-head span{
    margin-top:2px;
    color:#94a3b8;
    font-size:12px;
    font-weight:850;
  }

  .sidebar-close-btn{
    width:42px;
    height:42px;
    padding:0;
    flex:0 0 42px;
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.14);
    color:#fff;
    font-size:26px;
    line-height:1;
  }

  .sidebar a{
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    margin:0!important;
    padding:13px 14px!important;
    border-radius:14px!important;
    color:#e5e7eb!important;
    white-space:normal!important;
  }

  .sidebar a.active{
    background:#2563eb!important;
    color:#fff!important;
  }

  .sidebar-backdrop{
    position:fixed;
    inset:0;
    display:block;
    z-index:120;
    background:rgba(15,23,42,.48);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }

  body.sidebar-open .sidebar-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .main{
    width:100%;
    min-width:0;
    padding:12px!important;
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .forms,
  .demo-forms,
  .admin-create-grid,
  .retention-layout,
  .compact-grid{
    grid-template-columns:1fr!important;
  }

  .card{
    width:100%;
    min-width:0;
    margin-bottom:12px!important;
    padding:14px!important;
    border-radius:18px!important;
  }

  .section-head,
  .admin-directory-head,
  .retention-page-head,
  .permissions-page-head{
    align-items:stretch!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  .section-head h2,
  .admin-directory-head h2,
  .retention-page-head h2,
  .permissions-page-head h2{
    font-size:21px;
    line-height:1.12;
    letter-spacing:-.04em;
  }

  .section-head p,
  .muted{
    font-size:13px;
    line-height:1.4;
  }

  .quick-link-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .quick-link-card{
    min-height:62px;
    padding:14px!important;
    border-radius:16px!important;
  }

  .stat{
    padding:16px!important;
    min-height:112px;
  }

  .stat .num{
    font-size:32px!important;
  }

  .stat .label{
    font-size:12px!important;
    line-height:1.3;
  }

  .input,
  select,
  textarea{
    min-height:44px;
    font-size:16px!important;
    border-radius:12px!important;
  }

  textarea{
    line-height:1.35;
  }

  .btn{
    min-height:44px;
    padding:11px 13px;
    border-radius:12px;
  }

  .inline-form{
    align-items:stretch!important;
    flex-direction:column!important;
  }

  .table-scroll{
    margin-left:-2px;
    margin-right:-2px;
    border-radius:16px!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .table th,
  .table td{
    padding:10px!important;
    font-size:13px!important;
  }

  .token-box{
    border-radius:16px!important;
    font-size:13px;
    line-height:1.45;
  }

  .dashboard-toast-wrap{
    left:12px!important;
    right:12px!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    max-width:none!important;
  }

  .dashboard-toast{
    border-radius:14px!important;
  }

  .device-card-grid{
    gap:12px!important;
  }

  .device-card:hover{
    transform:none!important;
  }

  .device-card-head,
  .device-card-section,
  .device-settings-block,
  .device-settings>summary{
    padding:14px!important;
  }

  .device-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    padding:10px!important;
  }

  .device-metrics>div{
    padding:9px 7px!important;
  }

  .device-metrics strong{
    font-size:15px!important;
  }

  .device-actions .btn.small{
    min-height:42px!important;
    font-size:11px!important;
  }

  .layout-builder-box{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .layout-builder-box .display-layout-preview.orientation-landscape{
    min-width:720px!important;
  }

  .layout-builder-box .layout-resize-handle{
    width:38px!important;
    height:38px!important;
  }

  .layout-preview-actions button{
    min-height:30px;
  }

  .admin-directory-stats,
  .pir-filter-summary,
  .module-layout-controls{
    align-items:stretch!important;
  }

  .admin-directory-stats span,
  .module-layout-controls>*{
    width:100%;
  }
}

@media(max-width:520px){
  .main{
    padding:10px!important;
  }

  .grid{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .card{
    padding:12px!important;
  }

  .topbar-brand small{
    max-width:34vw;
  }

  .mobile-menu-btn span:last-child{
    display:none;
  }

  .mobile-menu-btn{
    min-width:44px;
    justify-content:center;
    padding:9px 12px;
  }

  .stat{
    min-height:102px;
  }

  .stat .num{
    font-size:29px!important;
  }

  .device-metrics{
    grid-template-columns:1fr!important;
  }

  .pir-time-grid,
  .admin-create-form{
    grid-template-columns:1fr!important;
  }

  .retention-cron-grid,
  .permission-notes{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:380px){
  .topbar-brand small{
    display:none;
  }

  .topbar>.btn.secondary[href="/logout.php"]{
    padding:9px 10px;
    font-size:12px;
  }

  .grid{
    grid-template-columns:1fr!important;
  }
}

/* Mail/password access UX */
.success-message{background:#dcfce7;color:#166534;border:1px solid #86efac;border-radius:12px;padding:10px;margin-bottom:12px;font-weight:800;line-height:1.35}.login-links{margin-top:14px;text-align:center;font-size:14px}.login-links a{color:#2563eb;font-weight:800;text-decoration:none}.login-links a:hover{text-decoration:underline}.checkbox-field{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:800;color:#334155;margin:4px 0 14px}.checkbox-field input{margin-top:2px}.admin-table .mail-note{display:block;margin-top:5px}
@media(max-width:480px){.login-card{width:min(100%,380px);padding:22px;border-radius:20px}.login-body{padding:12px;align-items:center}}
.admin-create-form>.full{grid-column:1/-1}

/* Super admin RPi update center */
.device-updates-page{display:grid;gap:18px}.update-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.update-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:18px;align-items:start}.update-upload-form{display:grid;gap:14px}.update-target-box{display:flex;gap:14px;flex-wrap:wrap;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px}.radio-row{display:flex;gap:8px;align-items:center;font-weight:800;color:#334155}.update-device-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:320px;overflow:auto;padding:10px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}.update-device-option{display:flex;gap:10px;align-items:flex-start;border:1px solid #e2e8f0;border-radius:12px;padding:10px;background:#f8fafc}.update-device-option input{margin-top:4px}.update-device-option strong{display:block}.update-device-option small{display:block;color:#64748b;margin-top:3px;line-height:1.35}.code-block{display:block;white-space:pre-wrap;background:#0f172a;color:#e2e8f0;border-radius:14px;padding:14px;overflow:auto;font-size:13px;line-height:1.45}.update-history-card .table-wrap{max-height:520px}.mini-dispatch-form{display:grid;gap:8px;margin-top:10px;padding:10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.mini-device-list{display:grid;gap:5px;max-height:160px;overflow:auto;font-size:13px}.mini-device-list label{display:flex;gap:7px;align-items:center}.badge.disabled{background:#e2e8f0;color:#475569}
@media(max-width:980px){.update-layout{grid-template-columns:1fr}.update-device-picker{grid-template-columns:1fr}.update-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.update-stat-grid{grid-template-columns:1fr!important}.update-target-box{display:grid}.update-device-picker{max-height:420px}}


/* Per-device screen profile controls */
.device-screen-profile-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.device-screen-profile-form select{
  min-width:0;
  padding:8px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
}
.screen-profile-help{
  grid-column:1/-1;
  display:block;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}
.screen-profile-placeholder{
  display:grid;
  gap:4px;
  padding:12px;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
}
.screen-profile-placeholder strong{font-size:13px;color:#0f172a}
.screen-profile-placeholder span,.field-help{color:#64748b;font-size:11px;line-height:1.4}
@media(max-width:640px){
  .device-screen-profile-form{grid-template-columns:1fr}
  .device-screen-profile-form .btn{width:100%}
}