/* Hexnet IoT Platform */
/* Frontend Version: v0.12-0001 */

:root{
  --sidebar:#0b1b2b;
  --sidebar-2:#10253a;
  --bg:#f3f6fb;
  --card:#ffffff;
  --card-soft:#f8fbff;
  --primary:#00A8F3;
  --primary-dark:#1565c0;
  --success:#2e7d32;
  --warning:#f59e0b;
  --danger:#dc2626;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 2px 10px rgba(15, 23, 42, 0.06);
  --radius:12px;
  /* Kart hover: belirgin mavi */
  --card-hover-bg:rgba(30, 136, 229, 0.17);
  --card-hover-border:#6eb6f2;
  --card-hover-shadow:0 12px 32px rgba(30, 136, 229, 0.24);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:"Segoe UI", Tahoma, Arial, sans-serif;
}

html, body{
  width:100%;
  min-height:100%;
}

body{
  background:var(--bg);
  color:var(--text);
}

a{
  text-decoration:none;
  color:inherit;
}

button, input, select, textarea{
  font:inherit;
}

.hidden{
  display:none !important;
}

/* LOGIN — görsel stiller panel/assets/css/login.css içinde (#loginScreen) */

.login-form{
  display:grid;
  gap:14px;
}

.field{
  display:grid;
  gap:8px;
}

.field label{
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary, var(--muted));
}

.field input,
.field textarea,
.field select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--input-border, #dbe3ee);
  border-radius:12px;
  background:var(--input-bg, #fff);
  color:var(--input-text, var(--text));
  outline:none;
}

/* Şifre alanı — sağda göz (göster / gizle), thinger.io benzeri */
.field .password-input-wrap{
  position:relative;
  width:100%;
  display:block;
}
.field .password-input-wrap > input{
  padding-right:46px;
}
.password-toggle-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  cursor:pointer;
  color:#64748b;
  padding:6px 8px;
  line-height:1;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.password-toggle-btn:hover{
  color:var(--primary);
  background:rgba(30, 136, 229, 0.1);
}
.password-toggle-btn:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:1px;
}

.helper-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
}

.checkbox-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.link-muted{
  color:var(--primary);
}

.message-box{
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.6;
}

.message-success{
  background:rgba(46,125,50,.10);
  border:1px solid rgba(46,125,50,.20);
  color:var(--success);
}

.message-error{
  background:rgba(211,47,47,.10);
  border:1px solid rgba(211,47,47,.20);
  color:var(--danger);
}

/* Şifremi unuttum (giriş ekranı) */
.forgot-password-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,0.45);
  backdrop-filter:blur(2px);
}

.forgot-password-dialog{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:16px;
  padding:22px 22px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
}

.forgot-password-dialog h3{
  font-size:20px;
  margin:0 0 8px;
  color:var(--text);
}

.forgot-password-sub{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

.forgot-password-form .field{
  margin-bottom:14px;
}

.forgot-password-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:4px;
}

/* APP */
.app-layout{
  display:flex;
  height:100vh;
  max-height:100vh;
  min-height:0;
  overflow:hidden;
}

.sidebar{
  width:260px;
  flex-shrink:0;
  align-self:stretch;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* Kaydırma çubuğu iki panel arasında gri şerit gibi durmasın; teker/trackpad ile kaydırma aynı */
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color:#d7e3f4;
  padding:0 14px 18px;
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
}

.sidebar::-webkit-scrollbar{
  width:0;
  height:0;
}

.sidebar-brand{
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:10px;
  width:auto;
  box-sizing:border-box;
  padding:14px 14px 16px;
  margin:0 -14px 12px;
  min-height:122px;
  height:auto;
  border-radius:0;
  position:sticky;
  top:0;
  z-index:4;
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:visible;
}

a.sidebar-brand,
a.sidebar-brand:link,
a.sidebar-brand:visited{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  border-radius:0;
  transition:background 0.15s ease, color 0.15s ease;
}

a.sidebar-brand:hover{
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color:inherit;
}

a.sidebar-brand:focus-visible{
  outline:2px solid rgba(120,190,255,.55);
  outline-offset:2px;
}

/* Sol menü kaydırılınca logo bloğu tam opak: altındaki menü şeffaflıktan görünmesin */
.sidebar.sidebar--scrolled .sidebar-brand{
  z-index:5;
  background:var(--sidebar);
  box-shadow:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar.sidebar--scrolled a.sidebar-brand:hover{
  background:var(--sidebar);
}

.sidebar.sidebar--scrolled a.sidebar-brand:focus-visible{
  background:var(--sidebar);
  outline:2px solid rgba(120,190,255,.55);
  outline-offset:2px;
}

.sidebar-brand-logo{
  max-width:100%;
  width:auto;
  height:auto;
  max-height:46px;
  object-fit:contain;
  display:block;
}

.sidebar-brand-text .brand-title{
  font-size:18px;
  line-height:1.25;
}

.topbar-notify-wrap{
  position:relative;
  flex-shrink:0;
}

.topbar-notify-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:#334155;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:background 0.15s ease, border-color 0.15s ease;
}

.topbar-notify-btn:hover{
  background:var(--card-soft);
  border-color:#c5daf0;
}

.topbar-notify-btn i{
  font-size:18px;
}

.topbar-notify-badge{
  position:absolute;
  top:4px;
  right:4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;
}

.topbar-notify-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:min(100vw - 32px, 340px);
  z-index:60;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,.14);
  overflow:hidden;
}

.topbar-notify-dropdown.hidden{
  display:none !important;
}

.topbar-notify-dropdown-head{
  padding:12px 14px;
  font-size:13px;
  font-weight:700;
  color:#334155;
  border-bottom:1px solid var(--border);
  background:var(--card-soft);
}

.topbar-notify-list{
  max-height:min(60vh, 320px);
  overflow-y:auto;
  padding:8px;
}

.topbar-notify-empty{
  padding:14px 12px;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.topbar-notify-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:none;
  border-radius:10px;
  background:#f8fafc;
  color:var(--text);
  font-size:13px;
  line-height:1.4;
  cursor:pointer;
  transition:background 0.15s ease;
}

.topbar-notify-item:hover{
  background:#e8f4fc;
}

.topbar-notify-item-icon{
  flex-shrink:0;
  color:var(--primary);
  margin-top:2px;
}

.topbar-user-wrap{
  position:relative;
  z-index:150;
}

.topbar-user-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  box-shadow:var(--shadow);
  transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.topbar-user-btn:hover{
  background:var(--card-soft);
  border-color:#c5daf0;
}

.topbar-user-avatar{
  position:relative;
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(145deg, #e3f2fd, #bbdefb);
  color:var(--primary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  overflow:hidden;
  flex-shrink:0;
}

.topbar-user-avatar-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.topbar-user-avatar-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.topbar-user-name{
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.topbar-user-chevron{
  font-size:11px;
  color:var(--muted);
  opacity:0.85;
}

.topbar-user-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:200px;
  padding:8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(15, 23, 42, 0.12);
  z-index:1000;
}

.topbar-user-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:none;
  border-radius:10px;
  background:transparent;
  font-size:14px;
  color:var(--text);
  cursor:pointer;
  transition:background 0.12s ease;
}

.topbar-user-dropdown-item:hover{
  background:var(--card-soft);
}

.topbar-user-dropdown-item--danger{
  color:#b91c1c;
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid var(--border);
  border-radius:0 0 10px 10px;
}

.topbar-user-dropdown-item--danger:hover{
  background:#fef2f2;
}

.sidebar-account-block{
  margin-bottom:4px;
}

.sidebar-account-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:12px;
}

.sidebar-account-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#8da6c2;
  margin-bottom:6px;
  margin-top:10px;
}

.sidebar-account-label:first-of-type{
  margin-top:0;
}

.sidebar-account-input{
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.15);
  color:#e8f0fa;
  font-size:13px;
  outline:none;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-account-input::placeholder{
  color:#6b8aad;
}

.sidebar-account-input:focus{
  border-color:rgba(100,181,246,.55);
  box-shadow:0 0 0 3px rgba(30,136,229,.2);
}

.account-meta-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  padding:8px 0;
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}

.account-meta-label{
  color:#a8bfd8;
}

.account-meta-row strong{
  color:#e2edf8;
  font-weight:600;
  text-align:right;
}

.account-form-message{
  margin-top:10px;
  font-size:12px;
  line-height:1.45;
  padding:8px 10px;
  border-radius:8px;
}

.account-form-message.message-success{
  background:rgba(46,125,50,.2);
  color:#c8e6c9;
}

.account-form-message.message-error{
  background:rgba(211,47,47,.18);
  color:#ffcdd2;
}

#accountSaveBtn{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.detail-info-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

.brand-title{
  font-size:22px;
  font-weight:700;
  color:#fff;
}

.brand-subtitle{
  font-size:12px;
  color:#9db4cf;
  margin-top:4px;
}

.menu-group-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7f97b3;
  padding:16px 10px 8px;
}

.menu + .menu-group-title{
  margin-top:10px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
}

.menu{
  display:grid;
  gap:6px;
}

.menu a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:12px;
  color:#c7d7ea;
  transition:.18s;
}

.menu a i{
  width:18px;
  text-align:center;
}

.menu a:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.menu a.active{
  background:rgba(30,136,229,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

.sidebar-bottom{
  margin-top:auto;
  padding-top:18px;
}

.user-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}

.user-card-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  padding:5px 0;
}

.user-card-line .label{
  color:#a8bfd8;
}

.version-footer{
  margin-top:12px;
  font-size:12px;
  line-height:1.5;
  color:#8da6c2;
  text-align:left;
}

.version-footer-table{
  display:grid;
  gap:4px;
}

.version-footer-row{
  display:grid;
  grid-template-columns:minmax(92px, 1fr) minmax(98px, 1fr);
  column-gap:12px;
  align-items:start;
  padding:2px 0 4px;
  border-bottom:1px solid rgba(157, 180, 207, 0.25);
}

.version-footer-name{
  color:#9bb2cb;
  text-align:left;
  white-space:nowrap;
}

.version-footer-value{
  color:#d6e3f3;
  text-align:left;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.main{
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:14px 16px 20px;
}

.main-body{
  flex:1;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:none;
  margin:0 0 12px;
  flex-wrap:wrap;
  flex-shrink:0;
  position:relative;
  z-index:120;
  background:#e3e9f1;
  border:1px solid #c7d2e2;
  border-radius:0;
  padding:10px max(14px, calc((100% - 1500px) / 2 + 14px));
  box-shadow:0 6px 20px rgba(15,23,42,.12);
}

.page-title h2{
  font-size:24px;
  font-weight:600;
}

.page-title p{
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
}

.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  position:relative;
  z-index:130;
}

/* Sidebar açıkken başlık başlangıcını kaydıran toggle boşluğunu kaldır */
body.hexnet-sidebar-open .hexnet-page-title-with-toggle{
  gap:0;
}

body.hexnet-sidebar-open .hexnet-sidebar-toggle{
  display:none !important;
}

.search{
  min-width:280px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 14px;
  box-shadow:var(--shadow);
}

.search i{
  color:#64748b;
}

.search input{
  border:none;
  outline:none;
  background:transparent;
  padding:12px 0;
  width:100%;
}

.topbar-search-wrap{
  position:relative;
  min-width:280px;
  flex:1;
  max-width:420px;
}

.topbar-search-dropdown{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:50;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,.12);
  max-height:min(70vh, 380px);
  overflow-y:auto;
  padding:8px 0;
}

.topbar-search-dropdown.hidden{
  display:none !important;
}

.topbar-search-section{
  padding:6px 12px 4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#64748b;
}

.topbar-search-item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 14px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:13px;
  color:#0f172a;
  border-top:1px solid #f1f5f9;
}

.topbar-search-section + .topbar-search-item{
  border-top:none;
}

.topbar-search-item:hover,
.topbar-search-item:focus{
  background:#f8fafc;
  outline:none;
}

.topbar-search-item small{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:#64748b;
  font-weight:400;
}

.topbar-search-empty,
.topbar-search-loading{
  padding:12px 14px;
  font-size:13px;
  color:#64748b;
}

.btn{
  border:none;
  border-radius:12px;
  padding:11px 15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:.18s;
}

.btn-full{
  width:100%;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:var(--shadow);
}

.btn-primary:hover{
  background:var(--primary-dark);
}

.btn-secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
}

.btn-secondary:hover{
  background:linear-gradient(180deg, #ffffff, #f3f9ff);
  border-color:#90caf9;
  color:var(--primary-dark);
  box-shadow:0 2px 10px rgba(30, 136, 229, 0.12);
}

.btn-secondary:active{
  background:#e3f2fd;
  border-color:var(--primary);
  transform:translateY(1px);
  box-shadow:0 1px 5px rgba(30, 136, 229, 0.18);
}

.btn-primary:active{
  transform:translateY(1px);
  filter:brightness(0.97);
  box-shadow:0 2px 8px rgba(21, 101, 192, 0.35);
}

.btn:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.btn-danger{
  background:var(--danger);
  color:#fff;
}

.btn-success{
  background:#16a34a;
  color:#fff;
  box-shadow:0 1px 3px rgba(22, 101, 52, 0.28);
}

.btn-success:hover{
  background:#15803d;
}

.btn-success:active{
  transform:translateY(1px);
  filter:brightness(0.97);
}

.btn-success:focus-visible{
  outline:2px solid #15803d;
  outline-offset:2px;
}

/* Kullanıcı ve başvuru incele modalları — dikey boşlukları sıkılaştırır */
.panel-modal-compact{
  padding:10px 12px;
}

.panel-modal-compact .field{
  gap:4px;
  margin-bottom:6px;
}

.panel-modal-compact .field label{
  font-size:12px;
}

.panel-modal-compact .field input,
.panel-modal-compact .field select,
.panel-modal-compact .field textarea{
  padding:8px 10px;
  border-radius:10px;
}
.panel-modal-compact .field .password-input-wrap > input{
  padding-right:44px;
}

.panel-modal-compact .grid-2{
  gap:8px;
  margin-bottom:6px;
}

.panel-modal-compact .modal-footer-actions{
  margin-top:10px;
  padding-top:10px;
  gap:8px;
}

.panel-modal-compact .modal-footer-actions .btn{
  padding:9px 12px;
}

/* Panel bildirimleri — ortalanmış kart + flu arka plan */
.panel-notify-overlay{
  position:fixed;
  inset:0;
  z-index:10060;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 4vw, 28px);
  box-sizing:border-box;
  background:rgba(15, 23, 42, 0.38);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.28s ease, visibility 0.28s ease;
  pointer-events:none;
}

.panel-notify-overlay.panel-notify-overlay--visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.panel-notify-overlay:not(.hidden){
  display:flex;
}

.panel-notify__card{
  width:min(100%, 420px);
  margin:0 auto;
  padding:18px 20px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.07),
    0 22px 48px -12px rgba(15, 23, 42, 0.22);
  transform:scale(0.94) translateY(10px);
  opacity:0;
  transition:transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.26s ease;
  cursor:pointer;
}

.panel-notify-overlay--visible .panel-notify__card{
  transform:scale(1) translateY(0);
  opacity:1;
}

.panel-notify__row{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.panel-notify__icon{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.panel-notify__icon svg{
  display:block;
}

.panel-notify__message{
  margin:0;
  padding-top:2px;
  font-size:14px;
  line-height:1.5;
  color:#0f172a;
  text-align:left;
  word-break:break-word;
}

.panel-notify__card--success .panel-notify__icon{
  background:linear-gradient(145deg, #22c55e, #16a34a);
}

.panel-notify__card--success .panel-notify__message{
  color:#14532d;
}

.panel-notify__card--error .panel-notify__icon{
  background:linear-gradient(145deg, #f87171, #dc2626);
}

.panel-notify__card--error .panel-notify__message{
  color:#7f1d1d;
}

.panel-notify__card--info .panel-notify__icon{
  background:linear-gradient(145deg, #60a5fa, #2563eb);
}

.panel-notify__card--info .panel-notify__message{
  color:#1e3a8a;
}

.panel-notify__card--warning .panel-notify__icon{
  background:linear-gradient(145deg, #fbbf24, #d97706);
}

.panel-notify__card--warning .panel-notify__message{
  color:#78350f;
}

.page{
  display:none;
  animation:fadeIn .18s ease;
  width:100%;
  max-width:1500px;
  margin:0 auto;
}

.page.active{
  display:block;
}

@keyframes fadeIn{
  from{opacity:.6;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

.hero{
  background:linear-gradient(135deg,#e7f3ff,#f8fbff);
  border:1px solid #dce9f7;
  border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}

.hero h3{
  font-size:24px;
  font-weight:600;
  margin-bottom:8px;
}

.hero p{
  color:var(--muted);
  line-height:1.6;
  max-width:860px;
}

.hero-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.tag{
  background:#fff;
  border:1px solid #dbe7f4;
  color:#3e5870;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:18px;
}

.stats-dashboard{
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:14px;
}

/* Dashboard summary: referans görünüme yakın kompakt şerit */
#page-dashboard .stats-dashboard{
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:9px;
  margin-bottom:12px;
}

.dashboard-map-card{
  margin-bottom:18px;
}

.dashboard-map-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  align-items:flex-end;
  padding:12px 18px 0;
  border-bottom:1px solid var(--border);
}

.dashboard-map-search-row{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex:1;
  min-width:220px;
}

.dashboard-map--sade .leaflet-container{
  background:#f4f7fb;
  font-family:inherit;
}

.hexnet-dash-pin-icon{
  background:transparent !important;
  border:none !important;
}

.hexnet-dash-prov-pin{
  background:transparent !important;
  border:none !important;
}

.hexnet-dash-prov-pin-inner{
  position:relative;
  display:inline-block;
  line-height:0;
}

.hexnet-dash-prov-pin-badge{
  position:absolute;
  left:50%;
  top:1px;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 2px rgba(0,0,0,.55);
  pointer-events:none;
  max-width:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hexnet-dash-prov-pin-glyph{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  font-size:9px;
  font-weight:800;
  color:#e2e8f0;
  letter-spacing:.02em;
  pointer-events:none;
}
.hexnet-dash-prov-pin-accent{
  position:absolute;
  right:-1px;
  top:16px;
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid #fff;
  box-shadow:0 0 0 1px rgba(15,23,42,.08);
}

.dashboard-device-detail{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  margin:0;
  padding:0;
  border:none;
}

.dashboard-device-detail-card{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:min(280px,50vh);
  padding:14px 14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(165deg, rgba(255,255,255,.92) 0%, rgba(248,250,252,.98) 100%);
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}

.dashboard-device-detail-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:2px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.dashboard-device-detail-card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(30,136,229,.12);
  color:#1565c0;
  font-size:16px;
  flex-shrink:0;
}

.dashboard-device-detail-card-head h4{
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--text);
  line-height:1.25;
}

.dashboard-device-detail-spec{
  flex:1 1 auto;
  min-height:0;
  padding:10px 12px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
}

.dashboard-device-detail-spec .dashboard-device-detail-dl{
  max-height:min(52vh,420px);
  overflow-y:auto;
}

.dashboard-side-panel-section{
  margin-bottom:14px;
}

.dashboard-side-panel-section:last-child{
  margin-bottom:0;
}

.dashboard-side-panel-section--summary{
  padding:12px 12px 10px;
  border-radius:10px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(0,0,0,.06);
}

.dashboard-side-panel-section--device{
  padding-top:4px;
}

.dashboard-side-panel-subtitle{
  margin:0 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.dashboard-province-sample-device-name{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  margin:0 0 8px;
}

.dashboard-device-detail-hint{
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.45;
}

.dashboard-device-detail-dl{
  margin:0;
}

.dashboard-device-detail-row{
  display:grid;
  grid-template-columns:minmax(100px,40%) 1fr;
  gap:6px 12px;
  font-size:13px;
  padding:8px 0;
  border-bottom:1px dashed rgba(0,0,0,.08);
}

.dashboard-device-detail-row:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.dashboard-device-detail-row:first-child{
  padding-top:0;
}

.dashboard-device-detail-row dt{
  margin:0;
  color:var(--muted);
  font-weight:500;
}

.dashboard-device-detail-row dd{
  margin:0;
  font-weight:600;
  color:var(--text);
  word-break:break-word;
}

.dashboard-province-detail-summary{
  margin-bottom:4px;
}

.customer-kind-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:rgba(106,27,154,.10);
  color:#6a1b9a;
}

.dashboard-map-body{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:0;
  min-height:360px;
  align-items:stretch;
}

.dashboard-map{
  min-height:360px;
  width:100%;
  background:#e8eef5;
  border-radius:0 0 0 var(--radius);
}

.dashboard-map-side{
  border-left:1px solid var(--border);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-height:360px;
  height:100%;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--card-soft);
  border-radius:0 0 var(--radius) 0;
}

.dashboard-side-block h4{
  font-size:14px;
  margin:0 0 8px;
  color:var(--text);
}

.table-scroll{
  max-height:150px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}

.dashboard-mini-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.dashboard-mini-table th,
.dashboard-mini-table td{
  padding:8px 10px;
  text-align:left;
  border-bottom:1px solid var(--border);
}

.dashboard-mini-table th{
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  position:sticky;
  top:0;
  background:#f8fafc;
  z-index:1;
}

.dashboard-mini-table tr:last-child td{
  border-bottom:none;
}

.dashboard-map-hint{
  padding:10px 18px 14px;
  font-size:13px;
  color:var(--muted);
  margin:0;
  border-top:1px solid var(--border);
}

.dashboard-map-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  align-items:center;
  max-width:100%;
}

.dashboard-map-card .panel-head{
  align-items:flex-start;
}

.dashboard-legend-group{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.75);
}

.dashboard-legend-group-title{
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}

.dashboard-legend-items{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
}

.dashboard-legend-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

.dashboard-legend-item i{
  font-size:9px;
}

.dashboard-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.dashboard-filter-chip.is-active{
  border-color:rgba(30,136,229,.42);
  background:rgba(30,136,229,.08);
  box-shadow:0 1px 4px rgba(15,23,42,.08);
}
.dashboard-filter-chip.is-inactive{
  opacity:.55;
  background:transparent;
}
.dashboard-filter-chip:hover{
  border-color:rgba(30,136,229,.45);
}

@media (max-width:1100px){
  .dashboard-map-legend{
    justify-content:flex-start;
    width:100%;
  }
}

@media (max-width:760px){
  .dashboard-legend-group{
    width:100%;
    justify-content:flex-start;
    border-radius:10px;
  }
  .dashboard-legend-items{
    flex-wrap:wrap;
  }
}

@media (max-width:1100px){
  .dashboard-map-body{
    grid-template-columns:1fr;
  }
  .dashboard-map{
    border-radius:0;
    min-height:min(52vh,320px);
  }
  .dashboard-map-side{
    border-left:none;
    border-top:1px solid var(--border);
    border-radius:0 0 var(--radius) var(--radius);
    min-height:auto;
  }
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

h1, h2, h3, h4, h5, h6{
  font-weight:600;
}

.stat-value,
.kpi-value,
.dashboard-kpi-value,
.device-live-dim-pct-big,
.hexnet-iot-tank__pct,
.hexnet-iot-rgb-hex{
  font-weight:700;
}

/* Tüm içerik sayfalarındaki kartlar (profil formu hariç): belirgin mavi hover */
.main .page .card:not(.profile-page){
  transition:background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.main .page .card:not(.profile-page):hover{
  background:var(--card-hover-bg);
  border-color:var(--card-hover-border);
  box-shadow:var(--card-hover-shadow);
  transform:translateY(-1px);
}

/* firm-card: translateY üstte kırpılma yapıyor (.main-body overflow); sadece gölge/border */
.main .page .card:not(.profile-page).firm-card:hover,
.main .page .card:not(.profile-page).dashboard-map-card:hover{
  transform:none;
}

/* Liste sayfaları: tam genişlik kart — translateY üstte .main-body overflow ile kırpılıyor (kesit çizgisi) */
#page-devices > .card:not(.profile-page):hover,
#page-customers > .card:not(.profile-page):hover,
#page-users > .card:not(.profile-page):hover,
#page-companies > .card:not(.profile-page):hover{
  transform:none;
}

.main .page .card:not(.profile-page).detail-mini-card:hover{
  transform:translateY(-2px);
}

/* Ürün / firma grid: ilk satır hover için üst nefes payı */
#page-products .grid-3,
#page-companies .grid-3{
  padding-top:4px;
}

.stat-card{
  position:relative;
  min-height:92px;
  padding:12px 12px 11px;
  border-radius:12px;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.stat-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  border-radius:12px 0 0 12px;
  background:var(--primary);
  opacity:.85;
}

.stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(15,23,42,.10);
}

.stat-card--clickable{
  cursor:pointer;
}

.stat-card--clickable:hover{
  border-color:var(--card-hover-border);
  box-shadow:0 10px 20px rgba(30,64,175,.14);
}

.stat-card--clickable:focus-visible{
  outline:2px solid rgba(37,99,235,.45);
  outline-offset:1px;
}

.stat-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  color:var(--muted);
  font-size:12px;
  margin-bottom:8px;
  line-height:1.25;
}

.stat-label{
  font-size:12px;
  font-weight:600;
  color:var(--text);
  letter-spacing:.01em;
}

.stat-top i{
  font-size:16px;
  color:var(--primary);
}

.stat-value{
  font-size:30px;
  font-weight:800;
  line-height:1.1;
  margin-bottom:2px;
  letter-spacing:-.01em;
}

.stat-sub{
  font-size:10px;
  color:var(--muted);
  line-height:1.3;
}

@media (max-width: 1500px){
  #page-dashboard .stats-dashboard{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
  }
}

@media (max-width: 900px){
  #page-dashboard .stats-dashboard{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  #page-dashboard .stats-dashboard .stat-card{
    min-height:94px;
  }
}

/* —— Dashboard: özet kart renk vurguları, skeleton —— */
.page-dashboard--loading .stat-card--skeleton{
  pointer-events:none;
}
.stat-card--skeleton .stat-value,
.stat-card--skeleton .stat-label,
.stat-card--skeleton .stat-sub{
  position:relative;
  color:transparent !important;
  min-height:1.1em;
  border-radius:6px;
  background:linear-gradient(90deg, rgba(148,163,184,.2) 0%, rgba(226,232,240,.6) 50%, rgba(148,163,184,.2) 100%);
  background-size:200% 100%;
  animation:hexnet-dash-skel 1.1s ease-in-out infinite;
}
.stat-card--skeleton .stat-value{
  min-height:34px;
  width:48%;
}
.stat-card__icon{
  opacity:.92;
}
.stat-card--accent-db .stat-card__icon{ color:#0d47a1; }
.stat-card--accent-db::before{ background:#0d47a1; }
.stat-card--accent-on .stat-card__icon{ color:#1565c0; }
.stat-card--accent-on::before{ background:#1565c0; }
.stat-card--accent-off .stat-card__icon{ color:#78909c; }
.stat-card--accent-off::before{ background:#78909c; }
.stat-card--accent-ok .stat-card__icon{ color:#2e7d32; }
.stat-card--accent-ok::before{ background:#2e7d32; }
.stat-card--accent-warn .stat-card__icon{ color:#f9a825; }
.stat-card--accent-warn::before{ background:#f9a825; }
.stat-card--accent-bad .stat-card__icon{ color:#c62828; }
.stat-card--accent-bad::before{ background:#c62828; }
.stat-card--accent-alarm .stat-card__icon{ color:#6a1b9a; }
.stat-card--accent-alarm::before{ background:#6a1b9a; }
.stat-card--accent-ota .stat-card__icon{ color:#00695c; }
.stat-card--accent-ota::before{ background:#00695c; }
@keyframes hexnet-dash-skel{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}

.dashboard-page-alert{
  margin:0 0 12px;
  padding:10px 14px;
  border-radius:10px;
  font-size:13px;
  border:1px solid #fecaca;
  background:#fef2f2;
  color:#991b1b;
}
html.theme-dark .dashboard-page-alert{
  border-color:#7f1d1d;
  background:#450a0a;
  color:#fecaca;
}
.dashboard-page-alert.hidden{ display:none; }

.dashboard-map-host{
  position:relative;
  min-height:360px;
  height:100%;
}
.dashboard-map-loading{
  position:absolute;
  inset:0;
  z-index:500;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(248,250,252,.88);
  backdrop-filter:blur(2px);
  border-radius:0 0 0 var(--radius);
  pointer-events:none;
  transition:opacity .2s ease;
}
.dashboard-map-loading[aria-hidden="true"]{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
html.theme-dark .dashboard-map-loading{
  background:rgba(15,23,42,.82);
}
.dashboard-map-loading__spinner{
  width:32px;
  height:32px;
  border:3px solid rgba(30,64,175,.2);
  border-top-color:#1d4ed8;
  border-radius:50%;
  animation:hexnet-spin .75s linear infinite;
}
@keyframes hexnet-spin{ to{ transform:rotate(360deg);} }
.dashboard-map-loading__text{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

.dashboard-map-search-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
}
.btn-dashboard-find{
  min-width:96px;
  font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,42,.12);
}
.btn-ghost{
  background:transparent;
  border:1px dashed var(--border);
  color:var(--muted);
  font-size:13px;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
}
.btn-ghost:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.btn-text{
  background:none;
  border:none;
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  padding:4px 0;
  margin-top:4px;
  cursor:pointer;
  text-align:left;
  width:100%;
}
.btn-text:hover{ text-decoration:underline; }

.hexnet-dash-gps-icon{
  background:transparent !important;
  border:none !important;
}
.hexnet-dash-gps-icon--selected .marker{
  filter:drop-shadow(0 0 4px rgba(30,64,175,.9));
  transform:scale(1.08);
}
.hexnet-dash-tenant-icon{
  background:transparent !important;
  border:none !important;
}

/* Marker system: type identity + status accent */
.marker{
  --marker-base:#2563eb;
  --status-accent:#64748b;
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid #fff;
  background:var(--marker-base);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  position:relative;
}
.marker__glyph{
  font-size:13px;
  line-height:1;
}
.marker__accent{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid #fff;
  background:var(--status-accent);
}
.marker--device{ border-radius:50%; }
.marker--company{ border-radius:10px; }
.marker--customer{ border-radius:50%; }
.marker.is-online{ --status-accent:#16a34a; }
.marker.is-warning{ --status-accent:#ea580c; }
.marker.is-offline{ --status-accent:#dc2626; }
.marker.is-passive{ --status-accent:#6b7280; }
.marker.is-neutral{ --status-accent:#64748b; }

.hexnet-dash-cluster{
  background:transparent !important;
  border:none !important;
}
.hexnet-dash-cluster__inner{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:#2563eb;
  border:2px solid #fff;
  box-shadow:0 3px 10px rgba(37,99,235,.32);
}

.dashboard-device-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  min-height:min(300px,48vh);
  padding:20px 16px;
  border-radius:12px;
  border:1px dashed var(--border);
  color:var(--muted);
  background:rgba(255,255,255,.4);
}
html.theme-dark .dashboard-device-empty{
  background:rgba(15,23,42,.3);
}
.dashboard-device-empty__icon{ font-size:32px; opacity:.55; }
.dashboard-device-empty__text{ margin:0; font-size:14px; line-height:1.5; max-width:280px; }
.dashboard-device-empty.hidden{ display:none !important; }

.dashboard-device-detail-card-titles{ flex:1; min-width:0; }
.dashboard-device-detail-subtitle{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.dashboard-device-status-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  flex-shrink:0;
  border:1px solid transparent;
}
.dashboard-device-status-pill[data-status="online"]{ background:rgba(46,125,50,.12); color:#1b5e20; border-color:rgba(46,125,50,.3); }
.dashboard-device-status-pill[data-status="warning"]{ background:rgba(249,168,37,.12); color:#b45309; border-color:rgba(249,168,37,.35); }
.dashboard-device-status-pill[data-status="offline"]{ background:rgba(211,47,47,.1); color:#b91c1c; border-color:rgba(211,47,47,.3); }
.dashboard-device-status-pill[data-status="passive"]{ background:rgba(120,144,156,.12); color:#455a64; border-color:rgba(120,144,156,.3); }
.dashboard-device-detail-block{ margin-top:0; }
.dashboard-device-detail-block--tech{
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,.06);
}
.dashboard-legend--multiline{ align-items:flex-start; }
.dashboard-legend-line{ display:flex; flex-wrap:wrap; gap:8px 12px; width:100%; }
.dashboard-legend-sep{ opacity:.4; }

.grid-2{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:18px;
  margin-bottom:18px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:18px;
}

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 12px;
  border-bottom:1px solid var(--border);
}

.panel-head h3{
  font-size:17px;
  color:var(--text);
}

.panel-head p{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.panel-body{
  padding:14px 12px;
}

.device-list{
  display:grid;
  gap:14px;
}

.device-item{
  background:var(--card-soft);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  transition:background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.device-item:hover{
  background:rgba(30, 136, 229, 0.06);
  border-color:#b3d7f5;
  box-shadow:0 4px 14px rgba(30, 136, 229, 0.08);
}

.device-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}

.device-name{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}

.meta{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.online{
  background:rgba(46,125,50,.10);
  color:var(--success);
}

.offline{
  background:rgba(211,47,47,.10);
  color:var(--danger);
}

.warning{
  background:rgba(249,168,37,.12);
  color:var(--warning);
}

.bars{
  display:grid;
  gap:10px;
}

.bar-row{
  display:grid;
  grid-template-columns:120px 1fr 50px;
  gap:10px;
  align-items:center;
  font-size:13px;
  color:var(--muted);
}

.bar{
  height:10px;
  background:#e8eef5;
  border-radius:999px;
  overflow:hidden;
}

.bar > div{
  height:100%;
  background:linear-gradient(90deg,#42a5f5,#1e88e5);
  border-radius:999px;
}

.logs-filter-bar{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:12px 16px;
  align-items:end;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}

.logs-filter-bar .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.logs-filter-bar .field label{
  font-size:13px;
  color:var(--muted);
}

.logs-filter-bar .field select{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--input-border, #e5e7eb);
  font-size:14px;
  background:var(--input-bg, #ffffff);
  color:var(--input-text, #1f2937);
  box-shadow:0 4px 12px var(--shadow-soft, rgba(0, 0, 0, 0.1));
  opacity:1;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  appearance:auto;
}

.logs-filter-bar .field select:focus{
  background:var(--input-bg, #ffffff);
  color:var(--input-text, #1f2937);
}

.logs-filter-bar .field select option{
  background:var(--input-bg, #ffffff);
  color:var(--input-text, #1f2937);
}

.logs-filter-bar .field select option:hover{
  background:var(--surface-muted, #f3f4f6);
}

.dropdown-menu,
.select-menu{
  background:var(--input-bg, #ffffff) !important;
  color:var(--input-text, #1f2937) !important;
  border:1px solid var(--input-border, #e5e7eb) !important;
  box-shadow:0 4px 12px var(--shadow-soft, rgba(0, 0, 0, 0.1)) !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.logs-filter-bar .field input[type="search"]{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:14px;
  background:var(--surface);
}

.logs-filter-bar .field input[type="date"]{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:14px;
  background:var(--surface);
}

/* Force date inputs to stay white in logs filters */
.logs-filter-bar input,
.logs-filter-bar input[type="date"],
.logs-filter-bar .date-input,
.logs-filter-bar .form-control,
.logs-filters input,
.logs-filters input[type="date"],
.logs-filters .date-input,
.logs-filters .form-control{
  background:var(--input-bg, #ffffff) !important;
  color:var(--input-text, #1f2937) !important;
  border:1px solid var(--input-border, #d1d5db) !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.logs-filter-bar input[type="date"]::-webkit-calendar-picker-indicator,
.logs-filters input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:1;
  filter:none;
}

.logs-filter-bar .date-input,
.logs-filter-bar .date-picker-wrapper,
.logs-filters .date-input,
.logs-filters .date-picker-wrapper{
  background:#ffffff !important;
}

.logs-filter-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.logs{
  display:grid;
  gap:12px;
}

.log-row{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  transition:background-color 0.16s ease, box-shadow 0.16s ease;
}

.log-row:hover{
  background:rgba(30, 136, 229, 0.08);
  box-shadow:inset 4px 0 0 var(--primary);
}

.log-row:last-child{
  border-bottom:none;
}

.log-row--muted{
  opacity:0.88;
}

.log-row--muted:hover{
  background:transparent;
  box-shadow:none;
}

.log-time{
  font-size:12px;
  color:var(--muted);
}

.log-text{
  font-size:14px;
  line-height:1.6;
}

.logs-table-wrap{
  padding:0;
  overflow:auto;
  max-height:calc(100vh - 260px);
}

.logs-table{
  width:100%;
  min-width:780px;
  border-collapse:separate;
  border-spacing:0;
}

.logs-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  text-align:left;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:12px 16px;
}

.logs-table tbody td{
  border-bottom:1px solid var(--border);
  padding:12px 16px;
  font-size:14px;
  vertical-align:top;
}

.logs-table tbody tr{
  transition:background-color .16s ease;
}

.logs-table tbody tr:hover{
  background:rgba(30, 136, 229, 0.06);
}

.logs-row-main{
  cursor:pointer;
}

.logs-row-main--error{
  background:rgba(185, 28, 28, 0.07);
}

.logs-row-main--error:hover{
  background:rgba(185, 28, 28, 0.12);
}

.logs-row-main.is-expanded{
  background:rgba(30, 136, 229, 0.10);
}

.logs-time{
  white-space:nowrap;
  color:var(--muted);
  font-size:12px;
}

.logs-source{
  white-space:nowrap;
  text-transform:capitalize;
  color:var(--text);
}

.logs-message{
  font-size:14px;
  line-height:1.45;
  word-break:break-word;
}

.logs-empty-row td{
  color:var(--muted);
  text-align:center;
  padding:22px 16px;
}

.logs-type-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  border-radius:999px;
  padding:3px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid transparent;
}

.logs-type-badge--info{
  color:#166534;
  background:rgba(22, 101, 52, .12);
  border-color:rgba(22, 101, 52, .28);
}

.logs-type-badge--warning{
  color:#854d0e;
  background:rgba(161, 98, 7, .13);
  border-color:rgba(161, 98, 7, .32);
}

.logs-type-badge--error{
  color:#b91c1c;
  background:rgba(185, 28, 28, .12);
  border-color:rgba(185, 28, 28, .32);
}

.logs-type-badge--system{
  color:#1d4ed8;
  background:rgba(29, 78, 216, .11);
  border-color:rgba(29, 78, 216, .28);
}

.logs-type-badge--audit{
  color:#6b21a8;
  background:rgba(107, 33, 168, .11);
  border-color:rgba(107, 33, 168, .26);
}

.logs-type-badge--device{
  color:#0f766e;
  background:rgba(15, 118, 110, .12);
  border-color:rgba(15, 118, 110, .28);
}

.logs-type-badge--mqtt{
  color:#4338ca;
  background:rgba(67, 56, 202, .11);
  border-color:rgba(67, 56, 202, .27);
}

.logs-row-detail td{
  background:rgba(15, 23, 42, 0.03);
  border-bottom:1px solid var(--border);
  padding:0 16px 12px;
}

.logs-detail-json{
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f8fafc;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;
  word-break:break-word;
}

.endpoints-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}

.endpoints-toolbar .field{
  width:min(320px, 100%);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.endpoints-toolbar .field label{
  font-size:12px;
  color:var(--muted);
}

.endpoints-toolbar .field select{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
}

.endpoints-list{
  display:grid;
  gap:12px;
}

.endpoint-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.endpoint-item__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.endpoint-item__badges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.endpoint-method{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid transparent;
}

.endpoint-method--get{
  background:rgba(21,128,61,.10);
  border-color:rgba(21,128,61,.30);
  color:#166534;
}

.endpoint-method--post{
  background:rgba(30,136,229,.10);
  border-color:rgba(30,136,229,.30);
  color:#0f4e8a;
}

.endpoint-category{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  color:var(--muted);
  border:1px solid var(--border);
}

.endpoint-url{
  margin-bottom:8px;
}

.endpoint-url code{
  word-break:break-all;
}

.endpoint-meta{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}

.endpoint-block{
  margin-top:8px;
}

.endpoint-block__title{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}

.endpoint-block pre{
  margin:0;
  padding:10px;
  border-radius:10px;
  background:var(--pre-bg, #f8fafc);
  color:var(--pre-text, var(--text));
  border:1px solid var(--border);
  overflow:auto;
  font-size:12px;
  line-height:1.45;
}

.endpoint-test-dialog{
  max-width:760px;
}

.endpoint-test-dialog textarea{
  width:100%;
  min-height:180px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  line-height:1.45;
  resize:vertical;
}

.endpoint-test-response{
  margin:0;
  padding:10px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid var(--border);
  max-height:260px;
  overflow:auto;
  font-size:12px;
  line-height:1.45;
}

.endpoints-live-card,
.endpoints-resolver-card{
  margin-bottom:12px;
}

.endpoints-live-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

.endpoints-topic-preview{
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:#f8fafc;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.endpoints-topic-preview code{
  font-size:13px;
}

.endpoints-resolver-form{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.endpoints-resolver-form .field{
  flex:1 1 280px;
}

.endpoints-resolver-result{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}

.endpoints-mqtt-live-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  width:min(420px, 100%);
  margin-left:auto;
  align-items:start;
  margin-bottom:12px;
}

#endpointPublishPayloadInput{
  width:100%;
  min-height:160px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  line-height:1.45;
  resize:vertical;
}

@media (max-width: 1200px){
  .endpoints-mqtt-live-grid{
    grid-template-columns:1fr;
    width:100%;
    margin-left:0;
  }
}

/* Endpoints dashboard layout */
.endpoints-dashboard{
  display:grid;
  grid-template-columns:minmax(0, 8fr) minmax(320px, 4fr);
  gap:24px;
  align-items:start;
}

.endpoints-main-col,
.endpoints-side-col{
  display:grid;
  gap:24px;
  min-width:0;
}

.endpoints-side-col .card{
  min-width:0;
}

.endpoints-main-col .grid-2{
  display:block;
}

.endpoints-main-col .grid-2 .card{
  width:100%;
}

.endpoints-live-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.endpoints-topic-preview{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#0f172a;
  color:#cbd5e1;
}

.endpoints-topic-preview span{
  color:#94a3b8;
}

.endpoints-topic-preview code{
  color:#e2e8f0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.endpoints-stream-table-wrap{
  overflow:auto;
  max-height:460px;
}

.endpoints-stream-table-wrap table td code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12px;
}

.endpoints-empty-state{
  border:1px dashed var(--border);
  border-radius:12px;
  background:var(--surface-muted, #f8fafc);
  padding:18px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.endpoints-empty-state__icon{
  font-size:20px;
  line-height:1;
}

.endpoints-empty-state__text{
  font-size:13px;
  color:var(--muted);
}

.endpoint-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  background:var(--card);
}

.endpoint-item__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.endpoint-item__badges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.endpoint-method{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  border:1px solid transparent;
}

.endpoint-method--get{
  background:rgba(30,136,229,.12);
  border-color:rgba(30,136,229,.35);
  color:#0f4e8a;
}

.endpoint-method--post{
  background:rgba(21,128,61,.12);
  border-color:rgba(21,128,61,.35);
  color:#166534;
}

.endpoint-method--put{
  background:rgba(234,88,12,.12);
  border-color:rgba(234,88,12,.35);
  color:#9a3412;
}

.endpoint-method--delete{
  background:rgba(220,38,38,.12);
  border-color:rgba(220,38,38,.35);
  color:#991b1b;
}

.endpoint-url code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  word-break:break-all;
}

.endpoint-block pre{
  margin:0;
  padding:10px;
  border-radius:10px;
  background:var(--pre-bg, #f8fafc);
  color:var(--pre-text, var(--text));
  border:1px solid var(--border);
  overflow:auto;
  font-size:12px;
  line-height:1.45;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (max-width: 1400px){
  .endpoints-dashboard{
    grid-template-columns:minmax(0, 7fr) minmax(320px, 5fr);
  }
}

@media (max-width: 1100px){
  .endpoints-dashboard{
    grid-template-columns:1fr;
  }
  .endpoints-main-col,
  .endpoints-side-col{
    gap:16px;
  }
  .endpoints-live-grid{
    grid-template-columns:1fr;
  }
}

table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
}

th, td{
  padding:13px 14px;
  text-align:left;
  border-bottom:1px solid var(--border);
  font-size:14px;
  vertical-align:middle;
}

th{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  background:var(--table-header-bg, #f8fafc);
}

/* Data tables: row hover (devices, customers, OTA, settings role preview, etc.) */
.card .panel-body > table tbody tr{
  transition:background-color 0.16s ease, box-shadow 0.16s ease;
}

.card .panel-body > table tbody tr:hover{
  background:rgba(30, 136, 229, 0.11);
  box-shadow:inset 4px 0 0 var(--primary);
}

/*
  Müşteriler / cihazlar / kullanıcılar: satır rengi tr üzerinde.
  (Gradient her td'ye ayrı verilince kolonlar arasında dikey şerit oluşuyordu.)
*/
#page-customers .card .panel-body > table tbody tr.customer-row--active,
#page-devices .card .panel-body > table tbody tr.device-row--active,
#page-users .card .panel-body > table tbody tr.user-table-row--active{
  background:linear-gradient(
    90deg,
    rgba(76, 175, 80, 0.28) 0%,
    #e8f5e9 10%,
    rgba(200, 230, 201, 0.55) 100%
  );
}

#page-customers .card .panel-body > table tbody tr.customer-row--active td,
#page-devices .card .panel-body > table tbody tr.device-row--active td,
#page-users .card .panel-body > table tbody tr.user-table-row--active td{
  background:transparent;
}

#page-customers .card .panel-body > table tbody tr.customer-row--passive,
#page-devices .card .panel-body > table tbody tr.device-row--passive,
#page-users .card .panel-body > table tbody tr.user-table-row--passive{
  background:linear-gradient(
    90deg,
    rgba(144, 164, 174, 0.22) 0%,
    #eceff1 12%,
    #fafafa 100%
  );
}

#page-customers .card .panel-body > table tbody tr.customer-row--passive td,
#page-devices .card .panel-body > table tbody tr.device-row--passive td,
#page-users .card .panel-body > table tbody tr.user-table-row--passive td{
  background:transparent;
}

#page-customers .card .panel-body > table tbody tr.customer-row--active:hover,
#page-customers .card .panel-body > table tbody tr.customer-row--passive:hover,
#page-devices .card .panel-body > table tbody tr.device-row--active:hover,
#page-devices .card .panel-body > table tbody tr.device-row--passive:hover,
#page-users .card .panel-body > table tbody tr.user-table-row--active:hover,
#page-users .card .panel-body > table tbody tr.user-table-row--passive:hover{
  background:rgba(30, 136, 229, 0.16);
  box-shadow:inset 4px 0 0 var(--primary);
}

#page-customers .card .panel-body > table tbody tr.customer-row--active:hover td,
#page-customers .card .panel-body > table tbody tr.customer-row--passive:hover td,
#page-devices .card .panel-body > table tbody tr.device-row--active:hover td,
#page-devices .card .panel-body > table tbody tr.device-row--passive:hover td,
#page-users .card .panel-body > table tbody tr.user-table-row--active:hover td,
#page-users .card .panel-body > table tbody tr.user-table-row--passive:hover td{
  background:transparent;
}

.kv{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
}

.kv:last-child{
  border-bottom:none;
}

.k{
  color:var(--muted);
}

.action-col{
  display:grid;
  gap:10px;
}

.firm-card{
  padding:16px;
}

/* Firma / ürün kartları: aktif = belirgin mavi, pasif = belirgin gri */
.firm-card--active{
  border:2px solid #1e88e5;
  background:linear-gradient(165deg, #dbeefc 0%, #ffffff 42%, #e8f4fc 100%);
  box-shadow:0 2px 14px rgba(30, 136, 229, 0.18);
}

.firm-card--active h4{
  color:#0d47a1;
}

.firm-card--passive{
  border:2px solid #78909c;
  background:linear-gradient(165deg, #cfd8dc 0%, #eceff1 40%, #e0e0e0 100%);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.firm-card--passive h4{
  color:#37474f;
}

.firm-card--passive p,
.firm-card--passive .firm-stats{
  color:#546e7a;
}

.firm-card h4{
  font-size:16px;
  margin-bottom:8px;
}

.firm-card p{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:14px;
}

.firm-stats{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
}

.firm-card-body{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}

.firm-card-text{
  flex:1;
  min-width:0;
}

.firm-card-text p{
  margin-bottom:8px;
}

.firm-stats--compact{
  margin-bottom:0;
}

.firm-card-logo-slot{
  position:relative;
  flex-shrink:0;
  width:88px;
}

.firm-card-logo-img{
  width:88px;
  height:88px;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--border);
  display:block;
}

.firm-card-logo-placeholder{
  width:88px;
  height:88px;
  border-radius:10px;
  border:1px dashed #cbd5e1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-size:26px;
  background:rgba(255,255,255,.55);
}

.firm-card-logo-upload{
  display:block;
  margin-top:6px;
  cursor:pointer;
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:var(--primary);
  line-height:1.25;
}

.firm-card-logo-upload:hover .firm-card-logo-upload-text{
  text-decoration:underline;
}

.firm-card-logo-upload input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

.footer-note{
  margin-top:18px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

@media (max-width:1200px){
  .stats,
  .grid-3{
    grid-template-columns:repeat(2,1fr);
  }

  .grid-2{
    grid-template-columns:1fr;
  }
}

@media (max-width:860px){
  .app-layout{
    flex-direction:column;
    height:100vh;
    max-height:100vh;
    min-height:0;
    overflow:hidden;
  }

  .sidebar{
    width:100%;
    flex:0 1 auto;
    max-height:min(46vh, 380px);
    overflow-x:hidden;
    overflow-y:auto;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .main{
    flex:1;
    min-height:0;
    padding:14px 16px 20px;
  }

  .stats,
  .grid-3{
    grid-template-columns:1fr;
  }

  .bar-row{
    grid-template-columns:100px 1fr 40px;
  }

  .kv{
    grid-template-columns:120px 1fr;
  }

  .search{
    min-width:100%;
  }
}

.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
}

.status-active{
  background:linear-gradient(180deg, rgba(56, 142, 60, 0.42), rgba(46, 125, 50, 0.22));
  color:#1b5e20;
  border-color:#388e3c;
  box-shadow:0 2px 10px rgba(46, 125, 50, 0.38);
}

.status-passive{
  background:linear-gradient(180deg, rgba(96, 125, 139, 0.5), rgba(84, 110, 122, 0.28));
  color:#37474f;
  border-color:#607d8b;
  box-shadow:0 1px 6px rgba(55, 71, 79, 0.2);
}

.status-select{
  padding:8px 10px;
  border:1px solid #dbe3ee;
  border-radius:10px;
  background:#fff;
  min-width:120px;
  cursor:pointer;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.status-select:hover{
  border-color:#90caf9;
  background:#fafcff;
}

.status-select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(30, 136, 229, 0.22);
}

/* —— Customers page v2 (device inventory inspired) —— */
.customers-filter-bar{
  display:grid;
  grid-template-columns:minmax(220px,2fr) repeat(3,minmax(140px,1fr)) auto;
  gap:10px;
  align-items:end;
  margin-bottom:10px;
}
.customers-filter-bar__search{
  min-width:0;
}
.customers-filter-clear-btn{
  width:38px;
  min-height:38px;
  padding:0;
  border-radius:10px;
}

.customers-table-wrap{
  overflow:auto;
}

.customers-table th,
.customers-table td{
  padding:10px 12px;
}

.customers-table tbody tr{
  cursor:pointer;
  transition:background-color .14s ease, box-shadow .14s ease;
}

.customers-table tbody tr:hover{
  background:#f5f7fa !important;
  box-shadow:none !important;
}

.customers-name-cell{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.customers-name-cell__name{
  font-weight:700;
  color:var(--text);
}
.customers-name-cell__meta{
  font-size:12px;
  color:var(--muted);
  line-height:1.25;
}

.customers-company-cell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.customers-company-cell__devices{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

.customer-status-dot-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.customer-status-dot-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
}
.customer-status-dot-badge--active{
  color:#166534;
  background:rgba(22,163,74,.10);
  border:1px solid rgba(22,163,74,.28);
}
.customer-status-dot-badge--passive{
  color:#475569;
  background:rgba(100,116,139,.12);
  border:1px solid rgba(100,116,139,.28);
}

.customers-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.btn-customer-detail{
  min-height:30px;
  padding:5px 10px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  font-size:12px;
}
.btn-customer-icon{
  width:30px;
  height:30px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.btn-customer-icon.btn-customer-delete{
  color:#b91c1c;
  border-color:#fecaca;
}

.customer-row-focus{
  background:rgba(59,130,246,.12) !important;
}

.customers-actions-mobile{
  display:none;
}
.customers-actions-mobile__toggle{
  list-style:none;
  cursor:pointer;
  width:32px;
  height:32px;
  border:1px solid var(--border);
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.customers-actions-mobile__toggle::-webkit-details-marker{
  display:none;
}
.customers-actions-mobile__menu{
  margin-top:6px;
  display:flex;
  gap:6px;
  justify-content:flex-end;
}

.customers-pagination{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.customers-pagination__left,
.customers-pagination__right{
  display:flex;
  align-items:center;
  gap:8px;
}
.customers-pagination__label,
.customers-pagination__info{
  font-size:12px;
  color:var(--muted);
}
.customers-pagination__size{
  min-width:66px;
  height:32px;
}

.users-actions-inline{
  flex-wrap:wrap;
}

.users-actions-inline .status-select{
  min-width:110px;
  height:30px;
  padding:4px 8px;
  border-radius:8px;
}

.users-actions-inline .btn-customer-icon{
  width:30px;
  height:30px;
}

.users-actions-inline .btn-user-delete{
  color:#b91c1c;
  border-color:#fecaca;
}

.users-req-actions{
  justify-content:flex-start;
}

.users-pagination{
  margin-top:12px;
}

.customers-row-skeleton td{
  color:transparent !important;
  position:relative;
}
.customers-row-skeleton td::after{
  content:"";
  display:block;
  width:100%;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(148,163,184,.2) 0%, rgba(226,232,240,.6) 50%, rgba(148,163,184,.2) 100%);
  background-size:200% 100%;
  animation:hexnet-dash-skel 1.1s ease-in-out infinite;
}

.detail-layout{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.detail-header-card{
  padding:20px;
}

.detail-header-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}

.detail-eyebrow{
  font-size:12px;
  letter-spacing:.12em;
  opacity:.65;
  margin-bottom:6px;
}

.detail-title{
  margin:0;
  font-size:28px;
  line-height:1.2;
}

.detail-subtitle{
  margin-top:6px;
  font-size:14px;
  opacity:.8;
}

.detail-header-right{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
}

.detail-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.detail-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.detail-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}

.detail-mini-card{
  padding:16px;
}

.detail-mini-label{
  font-size:13px;
  opacity:.7;
  margin-bottom:8px;
}

.detail-mini-value{
  font-size:18px;
  font-weight:600;
  line-height:1.35;
  word-break:break-word;
}

.detail-main-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

.detail-section-card{
  padding:20px;
}

.detail-section-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:14px;
  color:var(--text);
}

.detail-info-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.detail-info-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

.detail-info-row:last-child{
  border-bottom:none;
}

.detail-info-label{
  opacity:.7;
  min-width:140px;
}

.detail-info-value{
  text-align:right;
  font-weight:600;
  word-break:break-word;
}

@media (max-width: 980px){
  .detail-summary-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .detail-main-grid{
    grid-template-columns:1fr;
  }
}

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

  .detail-header-right{
    width:100%;
    align-items:flex-start;
  }

  .detail-badges,
  .detail-actions{
    justify-content:flex-start;
  }

  .detail-info-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .detail-info-value{
    text-align:left;
  }
}

.detail-header-right{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  min-width:180px;
}

/* =========================
   Device Detail Panel
=========================*/

.detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 32px;
  margin-top:12px;
}

.detail-info-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
}

.detail-info-label{
  font-size:12px;
  color:var(--text-muted, var(--muted));
}

.detail-info-value{
  font-size:14px;
  font-weight:500;
  color:var(--text);
}

/* Header */
.detail-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.detail-title{
  font-size:18px;
  font-weight:600;
}

/* badge */
.detail-status{
  padding:4px 10px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
}

.detail-status.active{
  background:#16a34a;
  color:white;
}

.detail-status.passive{
  background:#6b7280;
  color:white;
}

/* responsive */
@media (max-width:900px){
  .detail-grid{
    grid-template-columns: 1fr;
  }
}

.company-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

/* Device detail: empty / error states */
.device-detail-state-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(480px, calc(100vh - 200px));
  padding:32px 20px 48px;
}

.device-detail-state{
  width:100%;
  max-width:460px;
  margin:0 auto;
  padding:36px 32px 32px;
  text-align:center;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255,255,255,.8) inset;
  position:relative;
  overflow:hidden;
}

.device-detail-state::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:18px 0 0 18px;
}

.device-detail-state--hint::before{
  background:linear-gradient(180deg, var(--primary), #42a5f5);
}

.device-detail-state--error::before{
  background:linear-gradient(180deg, var(--danger), #e57373);
}

.device-detail-state__visual{
  width:76px;
  height:76px;
  margin:0 auto 20px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  line-height:1;
}

.device-detail-state--hint .device-detail-state__visual{
  background:linear-gradient(145deg, rgba(30,136,229,.14), rgba(66,165,245,.22));
  color:var(--primary-dark);
  box-shadow:0 4px 14px rgba(30, 136, 229, 0.15);
}

.device-detail-state--error .device-detail-state__visual{
  background:linear-gradient(145deg, rgba(211,47,47,.12), rgba(229,115,115,.2));
  color:var(--danger);
  box-shadow:0 4px 14px rgba(211, 47, 47, 0.12);
}

.device-detail-state__icon{
  display:none;
  align-items:center;
  justify-content:center;
}

.device-detail-state--hint .device-detail-state__icon--hint{
  display:flex;
}

.device-detail-state--error .device-detail-state__icon--hint{
  display:none;
}

.device-detail-state--error .device-detail-state__icon--error{
  display:flex;
}

.device-detail-state__title{
  margin:0 0 10px;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--text);
  line-height:1.35;
}

.device-detail-state__desc{
  margin:0;
  font-size:0.9375rem;
  line-height:1.65;
  color:var(--muted);
  max-width:34em;
  margin-left:auto;
  margin-right:auto;
}

.device-detail-state__actions{
  margin-top:22px;
  display:flex;
  justify-content:center;
}

.device-detail-state__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  border-radius:12px;
  font-weight:600;
}

.device-detail-state__cta i{
  opacity:0.9;
  font-size:0.95em;
}

/* PROFILE PAGE */
#page-profile{
  padding:0 4px 24px;
}

.profile-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.875rem;
  color:var(--muted);
  margin:0 0 16px;
}

.profile-breadcrumb-sep{
  opacity:0.65;
}

.profile-page.card{
  max-width:920px;
  padding:28px 28px 32px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.profile-page-title{
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0 0 24px;
  color:var(--text);
}

.profile-section{
  margin-bottom:28px;
}

.profile-section:last-of-type{
  margin-bottom:0;
}

.profile-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
  font-weight:600;
  margin:0 0 8px;
  color:var(--text);
}

.profile-section-title i{
  color:var(--muted);
  font-size:1rem;
}

.profile-section-hint{
  font-size:0.8125rem;
  color:var(--muted);
  margin:0 0 16px;
}

.profile-picture-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}

.profile-avatar-wrap{
  width:120px;
  height:120px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--border);
  background:var(--card-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}

.profile-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.profile-avatar-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:2.5rem;
}

.profile-upload-btn{
  min-width:120px;
}

.profile-form-grid{
  display:grid;
  grid-template-columns:minmax(140px, 200px) 1fr;
  gap:14px 20px;
  align-items:center;
}

.profile-field-label{
  font-size:0.875rem;
  font-weight:500;
  color:var(--text);
}

.profile-field-input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-field-input:focus{
  outline:none;
  border-color:rgba(30, 136, 229, 0.55);
  box-shadow:0 0 0 3px rgba(30, 136, 229, 0.12);
}

.profile-field-input[readonly]{
  background:#f3f4f6;
  color:var(--muted);
  cursor:default;
}

.profile-actions{
  margin-top:22px;
}

.profile-save-btn{
  min-width:160px;
}

.profile-page-message{
  margin-top:14px;
  font-size:0.875rem;
}

.profile-page-message.message-success{
  color:var(--success);
}

.profile-page-message.message-error{
  color:var(--danger);
}

@media (max-width: 640px){
  .profile-form-grid{
    grid-template-columns:1fr;
    gap:6px;
  }
  .profile-field-label{
    margin-top:8px;
  }
  .profile-field-label:first-child{
    margin-top:0;
  }
}

/* Tablo satır numarası (No) */
.table-col-no{
  width:52px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

/* —— MQTT test sayfası —— */
.mqtt-page{
  width:100%;
  max-width:1500px;
  margin:0 auto;
}
.mqtt-page__intro{
  margin-bottom:18px;
}
.mqtt-page__title{
  font-size:1.35rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 6px;
}
.mqtt-page__lead{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  max-width:52rem;
}

.mqtt-config-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  margin-bottom:18px;
  padding:12px 14px;
  background:var(--card-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.mqtt-config-strip__placeholder{
  font-size:13px;
  color:var(--muted);
}
.mqtt-badge{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  padding:8px 12px;
  border-radius:10px;
  font-size:12px;
  border:1px solid var(--border);
  background:var(--card);
  min-width:160px;
  max-width:min(100%, 320px);
}
.mqtt-badge--ok{
  border-color:rgba(46, 125, 50, 0.35);
  background:rgba(46, 125, 50, 0.06);
}
.mqtt-badge--warn{
  border-color:rgba(211, 47, 47, 0.35);
  background:rgba(211, 47, 47, 0.06);
}
.mqtt-badge__label{
  font-weight:600;
  color:var(--text);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.mqtt-badge__val{
  font-size:13px;
  color:var(--muted);
}
.mqtt-badge__hint{
  display:block;
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
  font-weight:400;
}
.mqtt-badge__hint--mono{
  font-family:ui-monospace, Consolas, monospace;
  font-size:10px;
  word-break:break-all;
}

.mqtt-card__sub{
  margin:4px 0 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}
.mqtt-card__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.mqtt-live-summary{
  font-size:14px;
  font-weight:600;
  color:var(--primary);
}
.mqtt-emqx-hint{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

.mqtt-status-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.mqtt-status-table thead th{
  text-align:left;
  padding:8px;
  border-bottom:1px solid var(--border);
  font-weight:600;
  color:#475569;
  font-size:12px;
}
.mqtt-status-table tbody td{
  padding:8px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.mqtt-status-table__loading{
  padding:12px;
  color:var(--muted);
}
.mqtt-status-table tbody tr.mqtt-status-row--nav:hover{
  background:rgba(30, 136, 229, 0.07);
}

.mqtt-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(340px, 420px);
  gap:18px;
  align-items:start;
  margin-bottom:18px;
}
@media (max-width: 960px){
  .mqtt-layout{
    grid-template-columns:1fr;
  }
  .mqtt-layout__aside{
    order:-1;
  }
}

.mqtt-context-line{
  margin:0 0 12px;
  font-size:13px;
  color:var(--primary);
  font-weight:500;
}
.mqtt-hint{
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
}
.mqtt-device-select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
}
.mqtt-pre{
  margin:0;
  padding:12px;
  background:var(--surface-2, #f1f5f9);
  border-radius:10px;
  font-size:12px;
  line-height:1.45;
  font-family:ui-monospace, Consolas, monospace;
}
.mqtt-pre--topics{
  min-height:100px;
  white-space:pre-wrap;
}
.mqtt-pre--json{
  max-height:220px;
  overflow:auto;
}
.mqtt-pre--log{
  min-height:180px;
  max-height:380px;
  overflow:auto;
}
.mqtt-pre--url{
  word-break:break-all;
  font-size:11px;
  margin:6px 0 0;
}
.mqtt-db-api-card{
  margin-top:10px;
  margin-bottom:16px;
}
.mqtt-db-api-card--embedded{
  margin:0 0 16px;
  padding:14px 14px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(30, 136, 229, 0.06);
}
.mqtt-db-api-embedded-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.mqtt-db-api-device-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.mqtt-db-api-device-row label{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
.mqtt-db-api-embedded-title{
  font-weight:700;
  font-size:14px;
  color:var(--text);
}
.mqtt-db-api-embedded-hint{
  margin:0 0 12px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}
.mqtt-broker-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:4px 0 14px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
}
.mqtt-broker-divider::before,
.mqtt-broker-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}
.mqtt-db-api-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:900px){
  .mqtt-db-api-grid{
    grid-template-columns:1fr;
  }
}
.mqtt-db-api-label{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:8px;
}
.mqtt-db-api-pre{
  min-height:140px;
  max-height:320px;
  white-space:pre-wrap;
  word-break:break-word;
}
.mqtt-ham-payload-block{
  margin-top:16px;
}
.mqtt-pre--raw{
  font-size:11px;
  line-height:1.45;
  background:#0b1220;
  color:#e2e8f0;
  border:1px solid #1e293b;
  border-radius:10px;
  padding:10px 12px;
  max-height:220px;
  overflow:auto;
}
.mqtt-msg-raw{
  margin-top:8px;
  font-size:11px;
  color:var(--muted);
}
.mqtt-msg-raw pre{
  margin:4px 0 0;
  padding:8px;
  background:#0b1220;
  color:#cbd5e1;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:11px;
  max-height:160px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
.mqtt-json-input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  font-family:ui-monospace, Consolas, monospace;
  font-size:12px;
}

.mqtt-actions-group{
  margin:18px 0;
  padding:14px 0 0;
  border-top:1px solid var(--border);
}
.mqtt-actions-group:first-of-type{
  border-top:none;
  padding-top:0;
}
.mqtt-actions-group--muted{
  opacity:0.95;
}
.mqtt-actions-group__label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#475569;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:10px;
}
.mqtt-actions-group__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mqtt-field-inline{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:10px;
  align-items:center;
}
@media (max-width: 480px){
  .mqtt-field-inline{
    grid-template-columns:1fr;
  }
}

.mqtt-details-api{
  margin-top:14px;
}
.mqtt-details-api summary{
  cursor:pointer;
  font-weight:600;
  font-size:13px;
  color:var(--primary);
  padding:6px 0;
}

.mqtt-docs-card .panel-body{
  max-height:min(70vh, 640px);
  overflow-y:auto;
}
.mqtt-docs-toc{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  font-size:12px;
}
.mqtt-docs-toc a{
  color:var(--primary);
  font-weight:600;
}
.mqtt-doc-step{
  margin-bottom:16px;
  scroll-margin-top:12px;
}
.mqtt-doc-step__title{
  font-size:13px;
  margin:0 0 8px;
  color:var(--text);
}
.mqtt-doc-step__no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:700;
  margin-right:6px;
  vertical-align:middle;
}
.mqtt-doc-list{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.mqtt-doc-p{
  margin:0 0 6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.mqtt-esp-details{
  margin-bottom:18px;
  overflow:hidden;
}
.mqtt-esp-details summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mqtt-esp-details summary::-webkit-details-marker{
  display:none;
}
.mqtt-esp-summary__title{
  font-weight:700;
  font-size:15px;
}
.mqtt-esp-summary__hint{
  font-size:12px;
  color:var(--muted);
}

.mqtt-log-card .mqtt-pre--log{
  background:var(--surface-2, #f1f5f9);
}

.mqtt-console-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  gap:16px;
  margin-bottom:16px;
}
.mqtt-console-col{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.mqtt-select-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.mqtt-selected-card{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-soft);
  padding:12px;
}
.mqtt-selected-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:8px;
}
.mqtt-selected-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 14px;
}
.mqtt-selected-item{
  font-size:13px;
}
.mqtt-selected-item b{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}
.mqtt-selected-empty{
  color:var(--muted);
  font-size:13px;
}
.mqtt-topic-lines{
  display:grid;
  gap:8px;
  margin-bottom:12px;
}
.mqtt-topic-lines > div{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:8px;
  align-items:center;
}
.mqtt-topic-lines span{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
}
.mqtt-topic-lines code{
  padding:7px 10px;
  border-radius:8px;
  background:var(--surface-2);
  font-size:12px;
  word-break:break-all;
}
.mqtt-test-block.is-disabled{
  opacity:.6;
  pointer-events:none;
}
.mqtt-stream-controls{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 100px auto;
  gap:10px;
  align-items:end;
}
.mqtt-topic-input--locked{
  cursor:default;
  background:var(--surface-2, #f1f5f9);
  color:var(--text);
}
.mqtt-cmd-device-id{
  max-width:160px;
  font-family:ui-monospace, Consolas, monospace;
}
.mqtt-hint--tight{
  margin-top:6px;
  font-size:11px;
  line-height:1.4;
}
.mqtt-topic-input--editable{
  font-family:ui-monospace, Consolas, monospace;
  font-size:12px;
}
.mqtt-stream-btns{
  display:flex;
  gap:8px;
}
.mqtt-stream-toolbar{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.mqtt-stream-badge{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:5px 10px;
  border-radius:999px;
}
.mqtt-stream-badge--idle{
  background:rgba(71,85,105,.14);
  color:#334155;
}
.mqtt-stream-badge--on{
  background:rgba(46,125,50,.15);
  color:#2e7d32;
}
.mqtt-stream-badge--warn{
  background:rgba(245,158,11,.18);
  color:#b45309;
}
.mqtt-msg-list{
  margin-top:10px;
  max-height:360px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
}
.mqtt-msg-item{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.mqtt-msg-item:last-child{
  border-bottom:none;
}
.mqtt-msg-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px;
}
.mqtt-msg-payload{
  margin:0;
  font-size:12px;
  font-family:ui-monospace, Consolas, monospace;
  white-space:pre-wrap;
  word-break:break-word;
}
.mqtt-msg-empty{
  padding:14px;
  color:var(--muted);
  font-size:13px;
}
.mqtt-command-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:end;
}
.mqtt-cmd-args-grid{
  margin:10px 0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.mqtt-tab-nav{
  display:flex;
  gap:6px;
  margin-bottom:12px;
}
.mqtt-tab-btn{
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--card);
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.mqtt-tab-btn.is-active{
  border-color:var(--primary);
  color:var(--primary);
}
.mqtt-tab-panel{
  display:none;
}
.mqtt-tab-panel.is-active{
  display:block;
}
.mqtt-reply-ok{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.mqtt-reply-ok--true{
  color:#2e7d32;
  background:rgba(46,125,50,.14);
}
.mqtt-reply-ok--false{
  color:#c62828;
  background:rgba(211,47,47,.14);
}

@media (max-width: 1100px){
  .mqtt-console-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 900px){
  .mqtt-select-row{
    grid-template-columns:1fr;
  }
  .mqtt-stream-controls{
    grid-template-columns:1fr;
  }
  .mqtt-topic-lines > div{
    grid-template-columns:1fr;
  }
  .mqtt-selected-grid{
    grid-template-columns:1fr;
  }
  .mqtt-cmd-args-grid{
    grid-template-columns:1fr;
  }
}

/* —— IoT device detail dashboard —— */
.hexnet-iot-live-card{
  overflow:hidden;
}
.hexnet-iot-dashboard{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.hexnet-iot-muted{
  color:var(--muted);
  font-size:14px;
  margin:0;
  line-height:1.5;
}
.hexnet-iot-statusbar{
  display:grid;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card-soft, #f8fbff);
}
.hexnet-iot-statusbar__main{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.hexnet-iot-statusbar__title{
  font-weight:700;
  font-size:17px;
  color:var(--text);
  line-height:1.25;
}
.hexnet-iot-statusbar__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.hexnet-iot-pill{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(30, 136, 229, 0.12);
  color:var(--primary-dark, #1565c0);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hexnet-iot-badge{
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
}
.hexnet-iot-badge--on{
  background:rgba(46, 125, 50, 0.15);
  color:var(--success);
}
.hexnet-iot-badge--off{
  background:rgba(211, 47, 47, 0.12);
  color:var(--danger);
}
.hexnet-iot-live-pulse{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--muted);
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
}
.hexnet-iot-live-pulse--active{
  background:var(--success);
  animation:hexnet-iot-pulse 1.6s ease-out infinite;
}
@keyframes hexnet-iot-pulse{
  0%{ box-shadow:0 0 0 0 rgba(46, 125, 50, 0.45); }
  70%{ box-shadow:0 0 0 10px rgba(46, 125, 50, 0); }
  100%{ box-shadow:0 0 0 0 rgba(46, 125, 50, 0); }
}
.hexnet-iot-live-stream{
  font-size:11px;
  color:var(--muted);
  letter-spacing:0.03em;
}
.hexnet-iot-raw-json{
  margin:0;
  max-height:240px;
  overflow:auto;
  font-size:11px;
  line-height:1.45;
  padding:12px;
  border-radius:10px;
  background:rgba(15, 23, 42, 0.04);
  border:1px solid var(--border);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space:pre-wrap;
  word-break:break-word;
}
#deviceDetailLastTelemetryPayload{
  white-space:pre-wrap;
}
.hexnet-iot-statusbar__row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:8px 16px;
  font-size:13px;
  color:var(--text);
}
.hexnet-iot-k{
  color:var(--muted);
  margin-right:6px;
}
.hexnet-iot-telemetry-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
}
.hexnet-iot-metric-card{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow);
  min-height:72px;
}
.hexnet-iot-metric-ico{
  font-size:22px;
  line-height:1;
}
.hexnet-iot-metric-body{
  min-width:0;
}
.hexnet-iot-metric-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted);
  margin-bottom:4px;
}
.hexnet-iot-metric-val{
  font-size:16px;
  font-weight:700;
  color:var(--text);
  word-break:break-word;
}
.hexnet-iot-panel{
  padding:4px 0;
}
.hexnet-iot-subtitle{
  font-size:13px;
  font-weight:700;
  margin:0 0 10px;
  color:var(--text);
}
.hexnet-iot-water{
  margin-bottom:12px;
}
.hexnet-iot-water__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  margin-bottom:6px;
}
.hexnet-iot-water__track{
  height:10px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.hexnet-iot-water__bar{
  height:100%;
  border-radius:999px;
  transition:width 0.35s ease, background 0.2s;
  min-width:0;
}
.hexnet-iot-water__bar--low{
  background:var(--danger);
}
.hexnet-iot-water__bar--mid{
  background:var(--warning);
}
.hexnet-iot-water__bar--high{
  background:var(--success);
}
.hexnet-iot-water__bar--empty{
  background:#9ca3af;
  width:0 !important;
}
.hexnet-iot-relay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
  gap:10px;
  margin-bottom:8px;
}
.hexnet-iot-relay{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:12px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-soft, #f8fbff);
  cursor:pointer;
  user-select:none;
}
.hexnet-iot-relay__name{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.hexnet-iot-relay__cb{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.hexnet-iot-switch{
  width:48px;
  height:26px;
  border-radius:999px;
  background:#cbd5e1;
  position:relative;
  transition:background 0.2s;
  pointer-events:none;
}
.hexnet-iot-relay__cb:checked ~ .hexnet-iot-switch{
  background:var(--success);
}
.hexnet-iot-switch::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  top:2px;
  left:2px;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
  transition:transform 0.2s;
}
.hexnet-iot-relay__cb:checked ~ .hexnet-iot-switch::after{
  transform:translateX(22px);
}
.hexnet-iot-dim-grid{
  display:grid;
  gap:12px;
}
.hexnet-iot-dim{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  font-size:13px;
}
.hexnet-iot-dim__lbl{
  min-width:42px;
  color:var(--muted);
  font-weight:600;
}
.hexnet-iot-dim__val{
  min-width:36px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
.hexnet-iot-rgb-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
}
.hexnet-iot-rgb-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:var(--muted);
}
.hexnet-iot-rgb-field input{
  width:64px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:8px;
}
.hexnet-iot-footer-topic{
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
  word-break:break-word;
}
.hexnet-iot-footer-topic code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:var(--text);
}
@media (max-width:600px){
  .hexnet-iot-statusbar__title{
    font-size:16px;
  }
  .hexnet-iot-telemetry-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* —— Device detail v2 (hero + tech accordion) —— */
.detail-layout--device{
  gap:14px;
  width:100%;
  max-width:1400px;
  margin:0 auto;
}
.device-detail-hero{
  padding:16px 18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(135deg, var(--card-soft, #f8fbff) 0%, var(--card) 100%);
}
.device-detail-hero__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.device-detail-hero__eyebrow{
  margin-bottom:4px;
  font-size:11px;
  letter-spacing:0.14em;
  opacity:0.65;
}
.device-detail-hero__title{
  margin:0 0 6px;
  font-size:22px;
  font-weight:700;
  line-height:1.2;
  color:var(--text);
}
.device-detail-hero__uid{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:13px;
  margin-bottom:6px;
}
.device-detail-hero__uid-label{
  opacity:0.65;
  font-weight:600;
}
.device-detail-hero__uid-val{
  font-size:13px;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(30, 136, 229, 0.08);
  color:var(--primary-dark, #1565c0);
}
.device-detail-hero__context{
  margin:0;
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}
.device-detail-hero__aside{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  min-width:min(100%, 200px);
}
.device-detail-hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.device-detail-hero__stale{
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(245, 158, 11, 0.18);
  color:var(--warning, #d97706);
}
.device-detail-hero__metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px 14px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.device-detail-hero__metric{
  min-width:0;
}
.device-detail-hero__metric-k{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
  margin-bottom:4px;
}
.device-detail-hero__metric-v{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  word-break:break-word;
}
.device-detail-tech{
  padding:0;
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 1px 3px rgba(15, 23, 42, 0.06);
}
.device-detail-tech__summary{
  list-style:none;
  cursor:pointer;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  user-select:none;
  background:var(--card);
}
.device-detail-tech__summary::-webkit-details-marker{
  display:none;
}
.device-detail-tech__summary-start{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.device-detail-tech__summary-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(59, 130, 246, 0.12);
  color:var(--primary, #2563eb);
  font-size:15px;
  flex-shrink:0;
}
.device-detail-tech__summary-title{
  font-weight:700;
  font-size:16px;
  color:var(--text);
  line-height:1.25;
}
.device-detail-tech[open] .device-detail-tech__chev i{
  transform:rotate(180deg);
}
.device-detail-tech__chev{
  color:var(--muted);
  font-size:14px;
  flex-shrink:0;
}
.device-detail-tech__chev i{
  display:inline-block;
  transition:transform 0.2s ease;
}
.device-detail-tech__body{
  padding:4px 20px 20px;
  border-top:1px solid var(--border);
  background:var(--card);
}
.device-detail-tech__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px 40px;
  padding-top:8px;
}
.device-detail-tech__col{
  min-width:0;
}
.device-detail-tech__block-title{
  margin:0 0 12px;
  padding:0;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--muted);
  border:none;
}
.device-detail-tech__list{
  margin:0;
  padding:0;
}
.device-detail-tech__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}
.device-detail-tech__row:last-child{
  border-bottom:none;
}
.device-detail-tech__row dt{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
}
.device-detail-tech__row dt i{
  width:16px;
  text-align:center;
  font-size:13px;
  opacity:0.65;
  flex-shrink:0;
}
.device-detail-tech__row dt span{
  min-width:0;
}
.device-detail-tech__row dd{
  margin:0;
  flex:0 1 48%;
  text-align:right;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  word-break:break-word;
}
.device-detail-tech__row--copy dd{
  flex:0 1 40%;
}
.device-detail-tech__row--copy .device-detail-tech__copy{
  flex:0 0 auto;
}
.device-detail-tech__mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  font-weight:500;
}
.device-detail-tech__live{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:100%;
}
.device-detail-tech__live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34, 197, 94, 0.25);
  flex-shrink:0;
}
.device-detail-tech__status-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-transform:lowercase;
  letter-spacing:0.02em;
}
.device-detail-tech__status-pill--online{
  background:rgba(34, 197, 94, 0.14);
  color:#15803d;
}
.device-detail-tech__status-pill--offline{
  background:rgba(148, 163, 184, 0.2);
  color:var(--muted);
}
.device-detail-tech__status-pill--warning{
  background:rgba(245, 158, 11, 0.16);
  color:#b45309;
}
.device-detail-tech__copy{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-muted, #f8fafc);
  color:var(--muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.device-detail-tech__copy:hover{
  background:rgba(59, 130, 246, 0.08);
  border-color:rgba(59, 130, 246, 0.35);
  color:var(--primary, #2563eb);
}
.device-detail-tech__copy:focus-visible{
  outline:2px solid var(--primary, #2563eb);
  outline-offset:2px;
}
.device-detail-tech__info{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:20px;
  padding:14px 16px;
  border-radius:10px;
  background:rgba(59, 130, 246, 0.08);
  border:1px solid rgba(59, 130, 246, 0.18);
}
.device-detail-tech__info > i{
  color:var(--primary, #2563eb);
  font-size:18px;
  margin-top:1px;
  flex-shrink:0;
}
.device-detail-tech__info p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text-secondary, #475569);
}
.detail-mono-wrap{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  text-align:right;
}
@media (max-width:900px){
  .device-detail-tech__grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .device-detail-hero__aside{
    align-items:flex-start;
    width:100%;
  }
  .device-detail-hero__badges{
    justify-content:flex-start;
  }
}
.hexnet-iot-live-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.hexnet-iot-live-head__hint{
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}
.hexnet-iot-section-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.hexnet-iot-telemetry-grid--six{
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
}
.hexnet-iot-metric-card--empty{
  opacity:0.92;
}
.hexnet-iot-metric-card--rssi-ok{
  border-color:rgba(46, 125, 50, 0.25);
}
.hexnet-iot-metric-card--rssi-weak{
  border-color:rgba(245, 158, 11, 0.45);
  background:rgba(245, 158, 11, 0.06);
}
.hexnet-iot-metric-card--temp-warn{
  border-color:rgba(211, 47, 47, 0.35);
  background:rgba(211, 47, 47, 0.05);
}
.hexnet-iot-meta-line{
  font-size:12px;
  color:var(--muted);
  margin:8px 0 12px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(15, 23, 42, 0.03);
  border:1px dashed var(--border);
}
.hexnet-iot-water-grid{
  display:grid;
  gap:12px;
}
@media (min-width:700px){
  .hexnet-iot-water-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.hexnet-iot-water--empty .hexnet-iot-water__head{
  color:var(--muted);
}
.hexnet-iot-relay--on{
  border-color:rgba(30, 136, 229, 0.45);
  background:rgba(30, 136, 229, 0.08);
}
.hexnet-iot-relay__state{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
}
.hexnet-iot-relay--on .hexnet-iot-relay__state{
  color:var(--primary-dark, #1565c0);
}
.hexnet-iot-dim-grid--cards{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
@media (min-width: 1100px){
  .hexnet-iot-dim-grid--cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.hexnet-iot-dim-card{
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-soft, #f8fbff);
  min-height:108px;
}
.hexnet-iot-dim-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.hexnet-iot-dim-card__val{
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  font-size:13px;
}
.hexnet-iot-dim-card__range{
  width:100%;
  margin:0;
}
.hexnet-iot-rgb-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px;
}
.hexnet-iot-rgb-preview{
  width:56px;
  height:56px;
  border-radius:12px;
  border:1px solid var(--border);
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
}
.hexnet-iot-rgb-fields{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
  flex:1;
  min-width:200px;
}
.hexnet-iot-rgb-enable{
  width:100%;
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}
.hexnet-iot-raw-details{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:0 12px 12px;
  background:rgba(15, 23, 42, 0.02);
}
.hexnet-iot-raw-details__summary{
  cursor:pointer;
  padding:12px 4px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  list-style:none;
}
.hexnet-iot-raw-details__summary::-webkit-details-marker{
  display:none;
}
.hexnet-iot-raw-details .hexnet-iot-raw-json{
  max-height:200px;
}
.hexnet-advanced-details{
  margin-top:10px;
  border:1px dashed var(--border);
  border-radius:12px;
  padding:0 12px 12px;
  background:rgba(15, 23, 42, 0.02);
}
.hexnet-advanced-details > summary{
  cursor:pointer;
  padding:10px 2px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  list-style:none;
}
.hexnet-advanced-details > summary::-webkit-details-marker{
  display:none;
}
.hexnet-iot-panel--controls{
  padding-top:8px;
}
.hexnet-iot-metric-ico{
  color:var(--primary-dark, #1565c0);
  opacity:0.9;
}

/* —— Device detail hero: 3 columns (identity · last data · status) —— */
.device-detail-hero--dashboard{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:0 2px 10px rgba(15, 23, 42, 0.06);
  transition:box-shadow 0.35s ease, border-color 0.25s ease;
}
.device-detail-hero--dashboard.device-detail-hero--data-live{
  border-color:rgba(46, 125, 50, 0.42);
  box-shadow:0 4px 24px rgba(46, 125, 50, 0.2), 0 0 0 1px rgba(46, 125, 50, 0.12);
}
.device-detail-hero__grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}
.device-detail-hero__col--left{
  min-width:0;
  flex:1 1 40%;
}
.device-detail-hero__col--center{
  text-align:center;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(15, 23, 42, 0.03);
  border:1px solid var(--border);
  flex:0 0 240px;
}
.device-detail-hero__col--status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  flex:0 0 auto;
}
.device-detail-hero__col--actions{
  flex:0 0 auto;
}
.device-detail-hero__status-inline{
  display:flex;
  align-items:center;
  gap:8px;
}
.device-detail-hero--dashboard .device-detail-hero__title{
  margin:0 0 8px;
  font-size:clamp(20px, 2.2vw, 26px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.15;
  color:var(--text);
}
.device-detail-hero__uid-row{
  margin-bottom:6px;
}
.device-detail-hero__uid-badge{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:8px;
  background:rgba(30, 136, 229, 0.1);
  color:var(--primary-dark, #1565c0);
  border:1px solid rgba(30, 136, 229, 0.22);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.device-detail-hero__context--firm{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  max-width:42ch;
}
.device-detail-hero__center-label{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.device-detail-hero__relative-big{
  display:block;
  font-size:clamp(18px, 2vw, 22px);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text);
  line-height:1.25;
  font-variant-numeric:tabular-nums;
}
.device-detail-hero__clock-small{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.device-detail-hero__primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.01em;
  border:1px solid transparent;
  line-height:1.1;
  text-transform:none;
}
.device-detail-hero__primary-text{
  line-height:1.1;
}
.device-detail-hero__primary-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  flex-shrink:0;
}
.device-detail-hero__primary--online{
  background:rgba(46, 125, 50, 0.12);
  border-color:rgba(46, 125, 50, 0.35);
  color:#166534;
}
.device-detail-hero__primary--online .device-detail-hero__primary-dot{
  background:var(--success);
  box-shadow:0 0 0 3px rgba(46, 125, 50, 0.22);
}
.device-detail-hero__primary--stale{
  background:rgba(245, 158, 11, 0.14);
  border-color:rgba(245, 158, 11, 0.4);
  color:#b45309;
}
.device-detail-hero__primary--stale .device-detail-hero__primary-dot{
  background:var(--warning, #f59e0b);
}
.device-detail-hero__primary--offline{
  background:rgba(148, 163, 184, 0.2);
  border-color:rgba(100, 116, 139, 0.35);
  color:#475569;
}
.device-detail-hero__primary--offline .device-detail-hero__primary-dot{
  background:#94a3b8;
}
.device-detail-hero__mqtt-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#f8fafc;
  color:#64748b;
  font-size:13px;
}
.device-detail-hero__mqtt-icon--online{
  color:#166534;
  border-color:rgba(46,125,50,.35);
  background:rgba(46,125,50,.12);
}
.device-detail-hero__mqtt-icon--offline{
  color:#b91c1c;
  border-color:rgba(220,38,38,.3);
  background:rgba(220,38,38,.1);
}
.device-detail-hero__mqtt-icon--unknown{
  color:#64748b;
  border-color:rgba(100,116,139,.32);
  background:rgba(100,116,139,.08);
}
.device-detail-hero__actions{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  justify-content:flex-end;
  margin-top:4px;
  padding:4px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-muted, rgba(248, 250, 252, 0.85));
}

/* Device detail: Geri / Duzenle butonlarini daha duzgun grup halinde tut */
#deviceDetailBackBtn,
#deviceDetailEditBtn{
  min-height:30px;
  padding:6px 12px;
  border-radius:8px;
  font-size:12px;
  line-height:1;
}
#deviceDetailBackBtn{
  border-color:rgba(100,116,139,.35);
}
#deviceDetailEditBtn{
  box-shadow:none;
}
@media (max-width:900px){
  .device-detail-hero__grid{
    flex-wrap:wrap;
    row-gap:10px;
  }
  .device-detail-hero__col--left{
    order:1;
    flex:1 1 calc(55% - 8px);
  }
  .device-detail-hero__col--status{
    order:2;
    flex:0 0 auto;
    justify-content:flex-end;
  }
  .device-detail-hero__col--center{
    order:3;
    flex:1 1 100%;
  }
  .device-detail-hero__col--actions{
    order:2;
    margin-left:auto;
  }
  .device-detail-hero__actions{
    justify-content:flex-end;
  }
}

/* —— Premium metric cards —— */
.hexnet-iot-telemetry-grid--dash{
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:14px;
}
.hexnet-iot-metric-premium{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:0 2px 8px rgba(15, 23, 42, 0.05);
  min-height:92px;
  transition:border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.hexnet-iot-metric-premium__ico{
  font-size:24px;
  line-height:1;
  margin-top:2px;
  flex-shrink:0;
  opacity:0.92;
}
.hexnet-iot-metric-premium__body{
  min-width:0;
  flex:1;
}
.hexnet-iot-metric-premium__label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
  margin-bottom:6px;
}
.hexnet-iot-metric-premium__val{
  display:block;
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  word-break:break-word;
  transition:opacity 0.2s ease;
}
.hexnet-iot-metric-premium__sub{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.hexnet-iot-metric-premium--good{
  border-color:rgba(46, 125, 50, 0.32);
  background:linear-gradient(155deg, rgba(46, 125, 50, 0.09), var(--card));
}
.hexnet-iot-metric-premium--good .hexnet-iot-metric-premium__ico{
  color:var(--success);
}
.hexnet-iot-metric-premium--mid{
  border-color:rgba(245, 158, 11, 0.38);
  background:linear-gradient(155deg, rgba(245, 158, 11, 0.11), var(--card));
}
.hexnet-iot-metric-premium--mid .hexnet-iot-metric-premium__ico{
  color:var(--warning, #d97706);
}
.hexnet-iot-metric-premium--bad{
  border-color:rgba(211, 47, 47, 0.32);
  background:linear-gradient(155deg, rgba(211, 47, 47, 0.08), var(--card));
}
.hexnet-iot-metric-premium--bad .hexnet-iot-metric-premium__ico{
  color:var(--danger);
}
.hexnet-iot-metric-premium--empty{
  border-color:var(--border);
  background:var(--card-soft, #f8fbff);
  opacity:0.96;
}
.hexnet-iot-metric-premium--empty .hexnet-iot-metric-premium__ico{
  color:var(--muted);
}
.hexnet-iot-metric-premium--empty .hexnet-iot-metric-premium__val{
  font-size:18px;
  font-weight:700;
  color:var(--muted);
}
.hexnet-iot-metric-premium__val--flash{
  animation:hexnet-metric-val-flash 0.55s ease;
}
@keyframes hexnet-metric-val-flash{
  0%{ opacity:0.35; }
  100%{ opacity:1; }
}

/* —— Water tanks —— */
.hexnet-iot-panel--water{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-elevated, var(--overlay-light, rgba(255, 255, 255, 0.72)));
  box-shadow:none;
}
.hexnet-iot-water-rgb-row{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:stretch;
}
.hexnet-iot-water-rgb-row > .hexnet-iot-panel--water{
  grid-column:span 3;
}
.hexnet-iot-water-rgb-row > .hexnet-iot-panel--rgb-inline{
  grid-column:span 1;
}
@media (max-width:1200px){
  .hexnet-iot-water-rgb-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .hexnet-iot-water-rgb-row > .hexnet-iot-panel--water{
    grid-column:span 2;
  }
  .hexnet-iot-water-rgb-row > .hexnet-iot-panel--rgb-inline{
    grid-column:span 2;
  }
}
@media (max-width:700px){
  .hexnet-iot-water-rgb-row{
    grid-template-columns:1fr;
  }
  .hexnet-iot-water-rgb-row > .hexnet-iot-panel--water,
  .hexnet-iot-water-rgb-row > .hexnet-iot-panel--rgb-inline{
    grid-column:span 1;
  }
}
.hexnet-iot-water-rgb-row .hexnet-iot-panel--water{
  padding:8px 10px;
}
.hexnet-iot-water-rgb-row .hexnet-iot-water-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.hexnet-iot-water-rgb-row .hexnet-iot-water-grid > *{
  width:100%;
  min-width:0;
}
.hexnet-iot-water-rgb-row .hexnet-iot-tank{
  padding:6px 8px;
}
.hexnet-iot-water-rgb-row .hexnet-iot-tank__head{
  margin-bottom:4px;
}
.hexnet-iot-water-rgb-row .hexnet-iot-tank__track{
  height:8px;
}
.hexnet-iot-water-rgb-row .hexnet-iot-tank__pct{
  font-size:15px;
}
.hexnet-iot-panel--rgb-inline{
  padding:0;
  display:flex;
}
.hexnet-iot-tank{
  border-radius:12px;
  border:1px solid var(--border);
  padding:8px 10px;
  background:var(--surface-elevated, var(--card));
  box-shadow:0 1px 4px var(--shadow-soft, rgba(15, 23, 42, 0.04));
}
.hexnet-iot-tank--empty{
  opacity:0.88;
}
.hexnet-iot-tank__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.hexnet-iot-tank__head-txt{
  font-size:11px;
  font-weight:700;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hexnet-iot-tank__head-txt i{
  color:var(--primary, #1e88e5);
  opacity:0.85;
}
.hexnet-iot-tank__track{
  position:relative;
  height:10px;
  border-radius:999px;
  background:rgba(148, 163, 184, 0.28);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hexnet-iot-tank__fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  height:100%;
  border-radius:999px;
  min-width:0;
  transition:width 0.45s ease, background 0.25s ease;
}
.hexnet-iot-tank__pct{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  text-align:right;
  font-weight:800;
  font-size:18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
  color:var(--primary-dark, #1565c0);
  line-height:1;
  pointer-events:none;
  text-shadow:none;
}

.hexnet-iot-metric-premium--sensor .hexnet-iot-metric-premium__body {
  min-width: 0;
}
.hexnet-iot-sensor-dual {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}
.hexnet-iot-sensor-dual__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 3.5rem;
}
.hexnet-iot-sensor-dual__k {
  font-size: 0.68rem;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hexnet-iot-sensor-dual__v {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.hexnet-iot-channel-chips{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-bottom:0.75rem;
}
.hexnet-iot-channel-chip{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.35rem 0.65rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card-bg, #fff);
  font-size:0.82rem;
}

/* —— Relay compact tiles —— */
.hexnet-iot-relay-grid--4x4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}
@media (max-width:900px){
  .hexnet-iot-relay-grid--4x4{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.hexnet-iot-relay-tile{
  position:relative;
  display:block;
  margin:0;
  cursor:pointer;
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
  user-select:none;
  transition:transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hexnet-iot-relay-tile:hover{
  transform:scale(1.03);
  box-shadow:0 8px 16px rgba(15, 23, 42, 0.14);
}
.hexnet-iot-relay-tile:focus-within{
  border-color:rgba(30, 136, 229, 0.52);
  box-shadow:0 0 0 3px rgba(30, 136, 229, 0.18);
}
.hexnet-iot-relay-tile__cb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  margin:0;
  cursor:pointer;
  z-index:2;
}
.hexnet-iot-relay-tile__face{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:9px 4px;
  min-height:60px;
  pointer-events:none;
  transition:background 0.28s ease, color 0.22s ease;
}
.hexnet-iot-relay-tile--on .hexnet-iot-relay-tile__face{
  background:linear-gradient(160deg, rgba(46, 125, 50, 0.95), rgba(27, 94, 32, 0.98));
  color:#fff;
}
.hexnet-iot-relay-tile--off .hexnet-iot-relay-tile__face{
  background:var(--surface-2, #e2e8f0);
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.hexnet-iot-relay-tile__id{
  font-size:13px;
  font-weight:800;
  letter-spacing:0.04em;
}
.hexnet-iot-relay-tile__state{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  opacity:0.95;
}
.hexnet-iot-relay-tile--loading .hexnet-iot-relay-tile__face{
  filter:brightness(0.97);
}
.hexnet-iot-relay-tile--loading::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  background-size:200% 100%;
  animation:hexnet-relay-shimmer 1s linear infinite;
}
@keyframes hexnet-relay-shimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}
/* —— Dimmer cards —— */
.hexnet-iot-dim-card__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.device-live-dim-pct-big{
  font-size:34px;
  font-weight:800;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  color:var(--primary-dark, #1565c0);
  line-height:0.9;
  align-self:flex-start;
}
.hexnet-iot-dim-card .device-live-dim-range{
  width:100%;
  margin:0;
  accent-color:var(--primary, #1e88e5);
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}
.hexnet-iot-dim-card .device-live-dim-range::-webkit-slider-runnable-track{
  height:12px;
  border-radius:999px;
  background:rgba(30, 136, 229, 0.22);
}
.hexnet-iot-dim-card .device-live-dim-range::-moz-range-track{
  height:12px;
  border-radius:999px;
  background:rgba(30, 136, 229, 0.22);
}
.hexnet-iot-dim-card .device-live-dim-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  border-radius:50%;
  margin-top:-5px;
  border:2px solid #fff;
  background:var(--primary, #1e88e5);
  box-shadow:0 2px 8px rgba(30, 136, 229, 0.35);
}
.hexnet-iot-dim-card .device-live-dim-range::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid #fff;
  background:var(--primary, #1e88e5);
  box-shadow:0 2px 8px rgba(30, 136, 229, 0.35);
}

/* —— RGB dashboard —— */
.hexnet-iot-rgb-panel--dash{
  width:100%;
  height:100%;
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap:0;
}
.hexnet-iot-rgb-card{
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  flex:1;
}
.hexnet-iot-rgb-tile{
  width:100%;
  margin:0;
  max-width:none;
  min-height:100%;
  border:0;
  border-radius:12px;
  background:rgba(255, 255, 255, 0.85);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}
.hexnet-iot-rgb-tile:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.hexnet-iot-rgb-icon{
  position:relative;
  width:42px;
  height:42px;
  display:inline-block;
}
.hexnet-iot-rgb-icon__c{
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  border:none;
  mix-blend-mode:multiply;
  opacity:0.9;
}
.hexnet-iot-rgb-icon__c--r{
  left:9px;
  top:0;
  background:#ff4b55;
}
.hexnet-iot-rgb-icon__c--g{
  left:0;
  top:14px;
  background:#42dff5;
}
.hexnet-iot-rgb-icon__c--b{
  left:18px;
  top:14px;
  background:#4c6bc6;
}
.hexnet-iot-rgb-tile__label{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  line-height:1;
}
.hexnet-iot-rgb-preview--ghost{
  display:none;
}
.hexnet-iot-rgb-card .device-live-rgb-saved{
  width:100%;
}
.hexnet-rgb-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15, 23, 42, 0.5);
}
.hexnet-rgb-modal__sheet{
  width:min(480px, 100%);
  max-height:96vh;
  overflow:auto;
  border-radius:16px;
  background:#f5f7fa;
  border:1px solid #d7e5ef;
  box-shadow:0 20px 50px rgba(0, 0, 0, 0.28);
  padding:18px;
}
.hexnet-rgb-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.hexnet-rgb-modal__title{
  margin:0;
  font-size:22px;
}
.hexnet-rgb-modal__close{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid #c8d8e4;
  background:#fff;
}
.hexnet-rgb-modal__saved-row{
  margin-bottom:14px;
}
.hexnet-rgb-modal__saved-row .btn{
  width:100%;
}
.hexnet-rgb-modal__wheel-wrap{
  position:relative;
  width:300px;
  height:300px;
  margin:0 auto 16px;
}
.hexnet-rgb-wheel{
  width:300px;
  height:300px;
  display:block;
}
.hexnet-rgb-wheel__marker{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 1px 6px rgba(15, 23, 42, 0.35);
  background:#1f2937;
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.hexnet-rgb-modal__apply{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:118px;
  height:118px;
  border-radius:50%;
  border:2px solid #9ca3af;
  background:#050505;
  color:#fff;
  font-size:28px;
  font-weight:800;
}
.hexnet-rgb-modal__brightness label{
  display:block;
  font-size:18px;
  font-weight:500;
  color:#4b5563;
  margin-bottom:6px;
}
.hexnet-rgb-modal__brightness input[type="range"]{
  width:100%;
  margin-bottom:16px;
}
.hexnet-rgb-modal__footer-close{
  width:100%;
}
@media (max-width: 760px){
  .hexnet-rgb-modal{
    padding:0;
  }
  .hexnet-rgb-modal__sheet{
    width:100%;
    height:100vh;
    max-height:none;
    border-radius:0;
    padding:16px;
  }
  .hexnet-rgb-modal__wheel-wrap{
    width:min(320px, 92vw);
    height:min(320px, 92vw);
  }
  .hexnet-rgb-wheel{
    width:100%;
    height:100%;
  }
}

/* ===== Cross-page consistency layer ===== */
:is(
  #page-products,
  #page-devices,
  #page-companies,
  #page-customers,
  #page-users,
  #page-endpoints,
  #page-mqtt-test,
  #page-logs,
  #page-settings,
  #page-profile,
  #page-security
) > .card{
  border-radius:14px;
  margin-bottom:14px;
}

:is(.devices-filter-bar, .users-filter-bar, .customers-filter-bar, .logs-filter-bar, .users-requests-filter-bar){
  gap:10px;
  align-items:end;
}

:is(.devices-filter-bar, .users-filter-bar, .customers-filter-bar, .logs-filter-bar, .users-requests-filter-bar) .field label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

:is(.devices-filter-bar, .users-filter-bar, .customers-filter-bar, .logs-filter-bar, .users-requests-filter-bar) input,
:is(.devices-filter-bar, .users-filter-bar, .customers-filter-bar, .logs-filter-bar, .users-requests-filter-bar) select{
  min-height:38px;
  border-radius:10px;
}

:is(#page-devices, #page-customers, #page-users, #page-logs) .panel-body > table th{
  font-size:11px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
}

:is(#page-devices, #page-customers, #page-users, #page-logs, #page-endpoints, #page-mqtt-test) .panel-body > table th,
:is(#page-devices, #page-customers, #page-users, #page-logs, #page-endpoints, #page-mqtt-test) .panel-body > table td{
  padding:10px 12px;
}

:is(#page-products, #page-companies, #page-endpoints, #page-mqtt-test, #page-logs, #page-settings) .panel-head{
  min-height:64px;
}

/* OTA / firmware page */
#page-ota .ota-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:24px;
}
@media (max-width:900px){
  #page-ota .ota-layout{ grid-template-columns:1fr; }
}
#page-ota .ota-panel{
  padding:16px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-elevated, rgba(255,255,255,.6));
}
#page-ota .ota-section-title{
  margin:0 0 14px;
  font-size:15px;
  font-weight:600;
}
#page-ota .ota-form-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}
#page-ota .ota-select{
  width:100%;
  min-height:40px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg, #fff);
  color:var(--text);
  font-size:14px;
  cursor:pointer;
}
#page-ota .ota-select:focus{
  outline:2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-color:var(--primary);
}
#page-ota .ota-selected-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin-bottom:18px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  background:color-mix(in srgb, var(--primary) 8%, transparent);
  font-size:13px;
}
#page-ota .ota-selected-banner i{ color:var(--primary); }
#page-ota .ota-actions-row{ margin-top:4px; }
#page-ota .ota-hint{
  margin:10px 0 0;
  font-size:12px;
  color:var(--muted);
}
#page-ota .ota-progress-bar{
  height:8px;
  border-radius:4px;
  overflow:hidden;
  background:var(--border);
}
#page-ota .ota-progress-fill{
  height:100%;
  width:0%;
  background:var(--primary);
  transition:width .35s ease;
}
#page-ota .ota-progress-label{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
}
#page-ota .ota-table-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
#page-ota .ota-table-head .ota-section-title{ margin-bottom:0; }
#page-ota .ota-filter-field{ min-width:200px; }
#page-ota .ota-filter-label{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}
#page-ota .ota-select--compact{ min-height:36px; font-size:13px; }
#page-ota .ota-input{
  width:100%;
  min-height:40px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg, #fff);
  color:var(--text);
  font-size:14px;
}
#page-ota .ota-form-grid--register{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
}
#page-ota .ota-field--wide{ grid-column:1 / -1; }
#page-ota .ota-file-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:6px;
}
#page-ota .ota-file-input{
  flex:1 1 220px;
  min-width:180px;
  font-size:13px;
  color:var(--text);
}
#page-ota .ota-register-card{
  margin:20px 0;
  padding:16px 18px;
  border-radius:12px;
  border:1px dashed var(--border);
  background:color-mix(in srgb, var(--primary) 4%, transparent);
}
#page-ota .ota-table-block{ margin-top:8px; }
#page-ota .ota-table-block + .ota-table-block{ margin-top:24px; }
#page-ota .ota-url-cell,
#page-ota .ota-err-cell{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-ota .ota-err-inline{ color:var(--danger, #c62828); }
#page-ota .device-detail-hero__actions .btn + .btn{ margin-left:6px; }

/* Cihaz modalı — bilgi kutuları (tema uyumlu) */
.device-form-callout{
  margin-bottom:10px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
}
.device-form-callout--warn{
  background:#fffbeb;
  border-color:#fcd34d;
}
.device-form-callout--warn .device-form-callout__title{
  font-size:12px;
  font-weight:700;
  color:#92400e;
  margin-bottom:8px;
}
.device-form-callout--warn .device-form-callout__hint{
  margin:6px 0 0;
  font-size:12px;
  color:#78350f;
  line-height:1.45;
}
.device-form-callout--info{
  background:#f0f9ff;
  border:1px solid #bae6fd;
  border-radius:8px;
  font-size:13px;
  line-height:1.5;
  color:#1e3a5f;
}
.device-form-field-hint{
  margin:6px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}
.device-form-input-readonly{
  background:var(--surface-muted, #f3f4f6) !important;
  color:var(--text-secondary, #374151) !important;
  cursor:default;
}
#deviceModal .device-form-callout--warn label{
  color:#78350f;
}