/* QRperformance application UI
   Cohesive admin design system for the functional QRP app. */

:root{
  color-scheme: light;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bg:#f4f7fb;
  --bg-soft:#edf3f8;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef5fb;
  --text:#172033;
  --text-strong:#0f172a;
  --muted:#64748b;
  --muted-2:#8391a6;
  --line:#dbe4ee;
  --line-strong:#c8d3df;
  --accent:#2563eb;
  --accent-soft:#e8f0ff;
  --accent-line:#b8cffd;
  --success:#0f9f6e;
  --success-soft:#e8f8f1;
  --warning:#c97a06;
  --warning-soft:#fff6df;
  --danger:#dc3545;
  --danger-soft:#fff0f2;
  --info:#0e7490;
  --info-soft:#e7f7fb;
  --shadow:0 18px 45px rgba(15,23,42,.09);
  --shadow-sm:0 8px 22px rgba(15,23,42,.07);
  --r:8px;
  --r2:8px;
  --btnr:7px;
  --wrap:1680px;
  --topbar-h:74px;
  --logo-w:220px;
}

body.theme-dark{
  color-scheme: dark;
  --bg:#111827;
  --bg-soft:#0f172a;
  --surface:#162033;
  --surface-2:#111c2f;
  --surface-3:#1d293d;
  --text:#eef4fb;
  --text-strong:#ffffff;
  --muted:#a8b5c7;
  --muted-2:#8fa0b8;
  --line:rgba(199,213,230,.16);
  --line-strong:rgba(199,213,230,.26);
  --accent:#62a3ff;
  --accent-soft:rgba(98,163,255,.14);
  --accent-line:rgba(98,163,255,.36);
  --success:#3dd38d;
  --success-soft:rgba(61,211,141,.14);
  --warning:#f3b64b;
  --warning-soft:rgba(243,182,75,.14);
  --danger:#fb7185;
  --danger-soft:rgba(251,113,133,.14);
  --info:#67d4ef;
  --info-soft:rgba(103,212,239,.13);
  --shadow:0 22px 54px rgba(0,0,0,.28);
  --shadow-sm:0 12px 30px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.45;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);
  letter-spacing:0;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none;color:var(--text-strong)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.58}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

h1,h2,h3,h4,p{margin-top:0}
h1{font-size:26px;line-height:1.15;letter-spacing:0;margin-bottom:8px;color:var(--text-strong)}
h2{font-size:21px;line-height:1.2;margin-bottom:10px;color:var(--text-strong)}
h3{font-size:16px;line-height:1.25;margin-bottom:8px;color:var(--text-strong)}
h4{font-size:14px;line-height:1.25;margin-bottom:6px;color:var(--text-strong)}
p{margin-bottom:10px}
code,.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:.92em;
}
pre{
  margin:0;
  padding:12px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  overflow:auto;
  white-space:pre-wrap;
}

.muted,.smallmuted,.hint,.page-sub,.chart-sub,.chart-foot{
  color:var(--muted) !important;
}
.muted{font-size:13px}
.smallmuted,.hint{font-size:12px}
.lead{
  max-width:760px;
  color:var(--muted);
  font-size:15px;
  line-height:1.58;
}
.eyebrow{
  display:block;
  margin-bottom:7px;
  color:var(--info);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Top navigation */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(203,213,225,.76);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
body.theme-dark .topbar{
  background:rgba(17,24,39,.9);
  border-bottom-color:var(--line);
}
.topbar-inner{
  width:min(var(--wrap),calc(100vw - 48px));
  min-height:var(--topbar-h);
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--logo-w) 1fr auto;
  gap:18px;
  align-items:center;
}
.topbar-inner::before{
  content:"";
  width:var(--logo-w);
  height:52px;
  background:url("../assets/images/logo.png") left center / contain no-repeat;
  pointer-events:none;
}
.topbar-inner::after{content:""}
.brand,.topbar .brand,.topbar h1{display:none !important}
.topnav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  min-width:0;
}
.topnav a,.topnav .topnav-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:var(--btnr);
  color:var(--muted);
  font-weight:760;
  line-height:1;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .08s ease;
}
.topnav a:hover,.topnav .topnav-item:hover{
  background:var(--surface-3);
  border-color:var(--line);
  color:var(--text-strong);
}
.topnav a.active,.topnav .topnav-item.active{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent);
}
.topnav a[aria-disabled="true"],.nav-item[aria-disabled="true"]{
  opacity:.48;
  pointer-events:none;
}
.count{
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--danger);
  color:white;
  font-size:11px;
  font-weight:800;
}

/* Shell */
.admin-shell{
  width:min(var(--wrap),calc(100vw - 48px));
  margin:20px auto 36px;
}
.admin-grid{
  display:grid;
  grid-template-columns:286px minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.admin-grid>*,
.admin-content{min-width:0}
.admin-content,.page{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Sidebar */
.sidebar{
  position:sticky;
  top:94px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
body.theme-dark .sidebar{background:rgba(22,32,51,.86)}
.camp-card,.active-campaign-card{
  padding:16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--accent-soft),transparent);
}
.camp-label,.active-campaign-kicker,.sidebar-section{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.camp-name,.active-campaign-name{
  margin-top:6px;
  color:var(--text-strong);
  font-size:16px;
  font-weight:850;
  line-height:1.2;
}
.camp-meta,.active-campaign-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.sidebar-links{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sidebar-section{
  margin:12px 2px 3px;
}
.nav-item{
  min-height:40px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:var(--btnr);
  color:var(--text);
  font-weight:720;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.nav-item:hover{
  background:var(--surface-3);
  border-color:var(--line);
  color:var(--text-strong);
}
.nav-item.active{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent);
}
.nav-cta{
  background:var(--accent);
  border-color:var(--accent);
  color:white;
}
.nav-cta:hover{background:#1d4ed8;color:white}
.sidebar-footer{
  padding:12px;
  border-top:1px solid var(--line);
}
.nav-logout{width:100%;justify-content:center}

/* Cards and page heads */
.page-head,.card,.panel,.mini-card,.kpi-card,.kpi,.chart,.tablewrap,.table-wrap,.app-hero-main,.app-hero-side{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-sm);
}
body.theme-dark .page-head,
body.theme-dark .card,
body.theme-dark .panel,
body.theme-dark .mini-card,
body.theme-dark .kpi-card,
body.theme-dark .kpi,
body.theme-dark .chart,
body.theme-dark .tablewrap,
body.theme-dark .table-wrap,
body.theme-dark .app-hero-main,
body.theme-dark .app-hero-side{
  background:rgba(22,32,51,.88);
}
.page-head{
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.page-title h1{margin:0}
.page-sub{margin-top:6px;font-size:13px}
.page-actions,.next-actions,.btnrow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.card{padding:18px}
.card-head,.row-head,.panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.card-title{margin:0}
.panel{overflow:hidden}
.panel-head{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  padding:14px 16px;
}
.panel-body{
  padding:16px;
  border-top:1px solid var(--line);
}
.panel-title{font-weight:850;color:var(--text-strong)}
.panel-sub{margin-top:2px;color:var(--muted);font-size:13px}
.mini-card{padding:14px}

/* Layout helpers */
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:240px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tri-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.42fr);gap:16px}
.mt14{margin-top:14px}
.pills{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Buttons */
.btn,.btn2,.btn-mini,.qb-ghost,.qc-ghost,a.btn,a.btn2,a.btn-mini,button.btn,button.btn2,button.btn-mini,.iconbtn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 13px;
  border:1px solid var(--line-strong);
  border-radius:var(--btnr);
  background:var(--surface);
  color:var(--text-strong);
  font-weight:780;
  line-height:1;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease,color .15s ease;
}
.btn:hover,.btn2:hover,.btn-mini:hover,.qb-ghost:hover,.qc-ghost:hover,.iconbtn:hover{
  background:var(--surface-3);
  border-color:var(--line-strong);
  color:var(--text-strong);
}
.btn:active,.btn2:active,.btn-mini:active,.iconbtn:active{transform:translateY(1px)}
.btn-primary,a.btn-primary,button.btn-primary,.btn.btn-primary{
  border-color:var(--accent);
  background:var(--accent);
  color:white;
}
.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8;color:white}
.btn-danger,a.btn-danger,button.btn-danger,.btn.btn-danger{
  border-color:var(--danger);
  background:var(--danger);
  color:white;
}
.btn-danger:hover{background:#b42332;border-color:#b42332;color:white}
.btn-ghost,.btn2,.qb-ghost,.qc-ghost{
  background:var(--surface-2);
}
.btn-mini{
  min-height:34px;
  padding:7px 10px;
  font-size:12px;
}
.iconbtn{
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
}
.iconbtn.danger{
  color:var(--danger);
  border-color:rgba(220,53,69,.28);
  background:var(--danger-soft);
}

/* Forms */
label,.seg label,.field-label{
  display:block;
  margin:10px 0 6px;
  color:var(--text-strong);
  font-size:13px;
  font-weight:760;
}
.field-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.seg{display:flex;flex-direction:column;gap:6px;min-width:170px}
.seg label{margin:0;font-size:12px;color:var(--muted)}
input,select,textarea,.input,.qb-input,.qb-select,.qb-textarea,.qc-input,.qc-select,.qc-textarea{
  width:100%;
  min-height:42px;
  padding:10px 11px;
  border:1px solid var(--line-strong);
  border-radius:var(--btnr);
  background:var(--surface);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus,.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
input[type="checkbox"],input[type="radio"],.chk{
  width:18px;
  min-width:18px;
  height:18px;
  min-height:18px;
  padding:0;
  accent-color:var(--accent);
}
.form-section,.advanced-box{
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface-2);
}
.form-section+.form-section{margin-top:14px}
.form-section-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.form-section-title h3{margin:0}
.form-section-title p{margin:4px 0 0;color:var(--muted);font-size:13px}
.advanced-box>summary{
  cursor:pointer;
  color:var(--text-strong);
  font-weight:820;
}
.field-error{
  margin-top:6px;
  color:var(--danger);
  font-size:12px;
  line-height:1.35;
}
.field-invalid{
  border-color:var(--danger) !important;
  box-shadow:0 0 0 3px rgba(220,53,69,.12) !important;
}

/* Feedback and status */
.flash,.notice,.info-box,.insight-card{
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface-2);
}
.flash{margin-bottom:12px}
.flash.ok{border-color:rgba(15,159,110,.32);background:var(--success-soft)}
.flash.err{border-color:rgba(220,53,69,.32);background:var(--danger-soft)}
.notice{
  margin-bottom:14px;
  border-color:rgba(201,122,6,.34);
  background:var(--warning-soft);
  color:var(--text);
}
.insight-card{
  border-color:rgba(14,116,144,.28);
  background:var(--info-soft);
}
.insight-card b{color:var(--text-strong)}
.insight-card p{margin:6px 0 0;color:var(--muted)}
.is-loading{opacity:.78;pointer-events:none}
.is-loading::after{
  content:"";
  width:14px;
  height:14px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:999px;
  animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Badges, pills, statuses */
.badge,.pill,.chip,.pill-sm,.tag,.sbadge,.kpi-delta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.badge.ok,.pill.ok,.tag.ok,.sbadge.ok,.kpi-delta.ok{
  border-color:rgba(15,159,110,.34);
  background:var(--success-soft);
  color:var(--success);
}
.badge.warn,.pill.warn,.tag.warn,.sbadge.warn,.kpi-delta.warn{
  border-color:rgba(201,122,6,.34);
  background:var(--warning-soft);
  color:var(--warning);
}
.badge.danger,.badge.bad,.pill.danger,.tag.bad,.sbadge.bad,.kpi-delta.bad{
  border-color:rgba(220,53,69,.34);
  background:var(--danger-soft);
  color:var(--danger);
}
.badge.on{background:var(--success-soft);border-color:rgba(15,159,110,.34);color:var(--success)}
.badge.off{background:var(--surface-3);border-color:var(--line);color:var(--muted)}
.badge.qr{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.status-good{color:var(--success)}
.status-warn{color:var(--warning)}
.status-bad{color:var(--danger)}

/* Tables */
.tablewrap,.table-wrap{
  overflow:auto;
  padding:0;
}
table,.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  table-layout:auto;
}
th,td,.table th,.table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  text-align:left;
  overflow-wrap:anywhere;
}
th,.table th{
  color:var(--muted);
  background:var(--surface-2);
  font-size:12px;
  font-weight:850;
  text-transform:none;
  letter-spacing:0;
  position:sticky;
  top:0;
  z-index:1;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td,.table tr:hover td{background:rgba(37,99,235,.035)}
.responsive-table td[data-label]::before{display:none}

/* Dashboard, guided flows and empty states */
.app-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr);
  gap:16px;
}
.app-hero-main,.app-hero-side{padding:20px}
.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.summary-card{
  padding:13px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface-2);
}
.summary-card .label{color:var(--muted);font-size:12px;font-weight:760}
.summary-card .value{margin-top:4px;color:var(--text-strong);font-size:24px;font-weight:900}
.task-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.task-card{
  min-height:150px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-sm);
  transition:border-color .15s ease,background .15s ease,transform .08s ease;
}
.task-card:hover{
  border-color:var(--accent-line);
  background:var(--accent-soft);
  color:var(--text-strong);
}
.task-card .icon{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r);
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:900;
}
.task-card h3{margin:0}
.task-card p{margin:0;color:var(--muted);font-size:13px}
.guide-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.guide-step{
  min-height:50px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface-2);
  color:var(--muted);
}
.guide-step b{
  width:24px;
  min-width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-strong);
}
.guide-step.is-on{
  border-color:var(--accent-line);
  background:var(--accent-soft);
  color:var(--text-strong);
}
.empty-state{
  padding:28px;
  text-align:center;
  border:1px dashed var(--line-strong);
  border-radius:var(--r);
  background:var(--surface-2);
}
.empty-state h3{margin-bottom:6px}

/* KPI and analytics */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}
.kpi-card,.kpi{
  min-height:104px;
  padding:15px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.kpi-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.kpi-label,.lbl{color:var(--muted);font-size:12px;font-weight:760}
.kpi-value,.val{color:var(--text-strong);font-size:25px;font-weight:900;line-height:1.05}
.kpi-sub{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chart{overflow:hidden}
.chart-pad{padding:16px}
.chart-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.chart-title{font-size:15px;font-weight:850;color:var(--text-strong)}
.linechart{
  width:100%;
  min-height:180px;
  display:block;
  background:var(--surface-2);
  border-radius:var(--r);
}
.linechart .gridline{stroke:rgba(100,116,139,.18);stroke-width:1}
.linechart .scan{stroke:var(--accent);stroke-width:2.4;fill:none}
.linechart .fb{stroke:var(--success);stroke-width:2.4;fill:none}
.linechart .dot{fill:var(--accent)}
.linechart .dotfb{fill:var(--success)}
.barchart{
  min-height:180px;
  display:flex;
  align-items:flex-end;
  gap:3px;
  padding:12px;
  background:var(--surface-2);
  border-radius:var(--r);
}
.barcol{width:7px;display:flex;flex-direction:column;justify-content:flex-end;gap:1px}
.bar-scan{background:var(--accent);border-radius:3px 3px 0 0}
.bar-fb{background:var(--success);border-radius:3px 3px 0 0}
.donut-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donut{
  width:160px;
  height:160px;
  border-radius:999px;
  background:conic-gradient(var(--danger) 0 var(--p-red),var(--warning) var(--p-red) var(--p-yellow),var(--success) var(--p-yellow) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.donut::after{
  content:"";
  position:absolute;
  inset:19px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
}
.donut-center{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.donut-n{font-size:26px;font-weight:900;line-height:1;color:var(--text-strong)}
.donut-t{margin-top:4px;color:var(--muted);font-size:12px}
.legend{min-width:230px}
.legend-row{display:flex;gap:10px;align-items:center;margin:8px 0}
.swatch{width:10px;height:10px;border-radius:2px}
.swatch.red{background:var(--danger)}
.swatch.yellow{background:var(--warning)}
.swatch.green{background:var(--success)}
.score-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.score-box{
  width:122px;
  height:122px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.score-box .n{font-size:34px;font-weight:900;line-height:1;color:var(--text-strong)}
.score-box .t{margin-top:6px;color:var(--muted);font-size:12px}

/* Traffic status */
.ampel{display:flex;gap:6px;align-items:center}
.ampel-dot{
  width:13px;
  height:13px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(100,116,139,.32);
  opacity:.45;
}
.ampel-dot:hover{opacity:.85}
.ampel-dot.is-active{opacity:1;outline:2px solid rgba(37,99,235,.18);outline-offset:2px}
.ampel-red{background:var(--danger)}
.ampel-yellow{background:var(--warning)}
.ampel-green{background:var(--success)}
.ampel-legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.ampel-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  min-height:36px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text);
}
.ampel-pill:hover{background:var(--surface-3);color:var(--text-strong)}
.ampel-pill.is-active{border-color:var(--accent-line);background:var(--accent-soft)}
.ampel-pill b{font-weight:850}
.muted-sm{color:var(--muted);font-size:12px}

/* Tooltips */
.help{position:relative;display:inline-flex;align-items:center}
.help-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.tooltip{
  position:absolute;
  top:28px;
  right:0;
  z-index:1000;
  width:min(320px,calc(100vw - 32px));
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--text-strong);
  color:#fff;
  box-shadow:var(--shadow);
  font-size:12px;
  line-height:1.45;
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease;
}
.help:hover .tooltip,.help:focus-within .tooltip{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Popups and QR list helpers */
.qr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.qr-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.qr-filters .seg label{color:var(--muted) !important}
.qr-filters input,.qr-filters select{min-width:160px}
.actions{display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-end;align-items:center}
.bulkbar{
  position:sticky;
  bottom:10px;
  z-index:30;
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
body.theme-dark .bulkbar{background:rgba(17,24,39,.94)}
.bulkbar .left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bulkbar .n{font-weight:900;color:var(--text-strong)}
.qr-pop{
  position:fixed;
  z-index:9999;
  display:none;
  width:290px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow);
}
.qr-pop.is-on{display:block}
.qr-pop .t{margin-bottom:8px;font-weight:900;color:var(--text-strong)}
.qr-pop .img{
  width:240px;
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface-2);
}
.qr-pop .img img{display:block;width:240px;height:240px}
.qr-pop .mini{margin-top:8px;color:var(--muted);font-size:12px;word-break:break-all}
.danger-title{color:var(--danger)}
.qr-kind-card,.tile,.typepill,.btn-toggle{border-radius:var(--r) !important}
.qr-kind-card.is-active,.typepill.is-on,.btn-toggle.is-on{
  background:var(--accent-soft) !important;
  border-color:var(--accent-line) !important;
  color:var(--accent) !important;
}

/* Import states */
.import-row-error td{background:var(--danger-soft)}
.import-row-warn td{background:var(--warning-soft)}
.import-row-ok td{background:var(--success-soft)}

/* Compatibility cleanups for older view-level CSS */
body.theme-light .badge,
body.theme-light .chip,
body.theme-light .pill,
body.theme-light .table th,
body.theme-light .iconbtn,
body.theme-light .input{
  color:var(--text) !important;
}
body.theme-light .table-wrap,
body.theme-light .tablewrap{
  background:var(--surface) !important;
}

/* Responsive */
@media (max-width:1400px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .grid-2,.tri-grid,.split,.app-hero{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--logo-w:180px}
  .topbar{position:relative}
  .topbar-inner{
    width:calc(100vw - 24px);
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 0;
  }
  .topbar-inner::before{width:180px;height:44px}
  .topbar-inner::after{display:none}
  .topnav{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
  }
  .admin-shell{width:calc(100vw - 24px);margin-top:12px}
  .admin-grid{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto}
  .sidebar-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sidebar-section{grid-column:1 / -1}
}
@media (max-width:760px){
  h1{font-size:23px}
  .page-head,.card,.app-hero-main,.app-hero-side{padding:14px}
  .summary-grid,.task-grid,.guide-strip,.kpi-grid{grid-template-columns:1fr}
  .page-actions,.next-actions,.qr-filters,.bulkbar{width:100%}
  .seg,.qr-filters .seg,.page-actions .seg{width:100%;min-width:0}
  .btn,.btn2,.btn-mini{width:100%}
  .iconbtn{width:40px;min-width:40px}
  .actions .iconbtn{width:40px;min-width:40px}
  .bulkbar{position:static;align-items:stretch;flex-direction:column}
  table.responsive-table thead{display:none}
  table.responsive-table,
  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table td{display:block;width:100%}
  table.responsive-table tr{
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  table.responsive-table td{
    border-bottom:0;
    padding:7px 10px;
  }
  table.responsive-table td[data-label]::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:11px;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
}
@media (max-width:620px){
  .sidebar-links{grid-template-columns:1fr}
  .row{display:block}
  .col{min-width:0;margin-bottom:10px}
  .card-head,.page-head{align-items:stretch}
  .qr-pop{width:calc(100vw - 24px) !important;left:12px !important}
}