.p20-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p20-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.p20-form-grid input,.p20-form-grid select,.p20-inline input,.p20-inline select{width:100%;box-sizing:border-box}
.p20-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important}
.p20-check input{width:auto!important}
.p20-section{border-top:1px solid var(--line);padding-bottom:15px}
.p20-inline{display:grid;grid-template-columns:2fr 1fr auto auto;gap:10px;align-items:center;padding:15px}
.p20-grant{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px;border-top:1px solid var(--line)}
.p20-perms{display:flex;flex-wrap:wrap;gap:18px;padding:15px 0}
.p20-perms label{display:flex;align-items:center;gap:7px}
.p20-editor{margin-top:16px}
@media(max-width:800px){.p20-form-grid,.p20-inline{grid-template-columns:1fr}.p20-inline button{width:100%}}

/* Phase 2.0A.1 */
.p20-info{margin:0 15px 15px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#f7f9fc;color:var(--muted);font-size:13px}
.p20-info b{color:var(--text)}
.p20-info p{margin:5px 0 0;line-height:1.5}

/* Admin - data sources */
.admin-source-section{border-top:1px solid var(--line);background:#fbfcfe}
.admin-source-head{padding-top:16px!important;padding-bottom:12px!important}
.admin-source-list{padding:0 14px 14px}
.source-card{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-top:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.source-card:hover{border-color:#aabbd0;box-shadow:0 4px 14px rgba(0,32,80,.07);transform:translateY(-1px)}
.source-card-main{min-width:0;flex:1}
.source-card-main small{display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.source-card-title{display:flex;align-items:center;gap:9px}
.source-state{font-size:10px;font-weight:700;padding:3px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.source-state.is-active{background:#e9f7ef;color:#167345}
.source-state.is-inactive{background:#f1f3f5;color:#667085}
.source-card-meta{display:flex;align-items:center;gap:18px;flex-shrink:0}
.source-card-meta>span:not(.source-edit-hint){display:flex;flex-direction:column;gap:2px}
.source-card-meta small{font-size:9px;letter-spacing:.04em;color:var(--muted)}
.source-card-meta b{font-size:12px}
.source-edit-hint{font-size:12px;font-weight:700;color:var(--blue)}

/* Map */
.ml-map-hero{margin-bottom:12px}
.ml-map-panel{overflow:hidden}
.ml-map-panel #map{border-radius:inherit}
.meteolab-map-leaflet-popup .leaflet-popup-content-wrapper{border-radius:12px;padding:0;box-shadow:0 10px 28px rgba(0,32,80,.18)}
.meteolab-map-leaflet-popup .leaflet-popup-content{margin:0;width:auto!important}
.ml-map-popup{min-width:290px;max-width:380px}
.ml-map-popup-head{padding:13px 14px 10px;border-bottom:1px solid #e3e9f0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ml-map-popup-head b{display:block;font-size:14px;color:#071a33}
.ml-map-popup-head small{display:block;margin-top:2px;color:#718096}
.ml-map-status{font-size:10px;color:#718096;white-space:nowrap}
.ml-map-metrics{max-height:260px;overflow:auto;padding:4px 0}
.ml-map-metric{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:7px 14px;border-bottom:1px solid #f0f3f6}
.ml-map-metric:last-child{border-bottom:0}
.ml-map-metric span{font-size:12px;color:#526176}
.ml-map-metric b{font-size:13px;color:#071a33;white-space:nowrap}
.ml-map-metric b small{font-size:10px;color:#718096;font-weight:500}
.ml-map-popup-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid #e3e9f0;background:#f8fafc;border-radius:0 0 12px 12px}
.ml-map-popup-foot button{padding:7px 10px}
.ml-map-popup-foot small,.ml-map-loading{font-size:11px;color:#718096}
.ml-map-loading{padding:16px 14px}
@media(max-width:800px){
  .source-card{align-items:flex-start;flex-direction:column}
  .source-card-meta{width:100%;justify-content:space-between}
  .ml-map-popup{min-width:240px}
}

/* Phase 2.0A.2 UI polish */
.ml-map-popup-head{padding:15px 16px 12px}
.ml-map-popup-head>div{min-width:0}
.ml-map-popup-head b{font-size:15px;line-height:1.25}
.ml-map-popup-head small{font-size:11px;line-height:1.35}
.ml-map-metric{min-height:25px;padding:8px 16px;align-items:center}
.ml-map-metric span{line-height:1.25}
.ml-map-metric b{min-width:92px;text-align:right;font-variant-numeric:tabular-nums}
.ml-map-popup-updated{display:flex;align-items:center;gap:6px;padding:9px 16px;border-top:1px solid #edf1f5;color:#718096;font-size:10px;background:#fbfcfe}
.ml-map-popup-foot{justify-content:flex-start;padding:11px 16px}
.ml-map-popup-foot .primary{display:inline-flex;align-items:center;gap:7px}
#p20UserForm{display:flex;flex-direction:column}
#p20UserForm .p20-form-grid{align-items:start}
#p20UserForm .p20-form-grid>label{min-height:70px;justify-content:flex-start}
#p20UserForm .p20-form-grid>label small{display:block;min-height:15px;margin-top:-2px;font-weight:400;color:var(--muted);font-size:10px}
#p20UserForm .p20-form-grid input,#p20UserForm .p20-form-grid select{height:39px}
#p20UserForm .p20-check{min-height:auto!important;margin-top:2px}
#p20UserForm .toolbar{margin-top:2px}
#p20UserTitle:before{content:"♙";margin-right:8px;color:var(--blue)}
/* QC */
.qc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line);background:#fbfcfe;font-size:11px;color:var(--muted)}
.qc-legend>span{display:flex;align-items:center;gap:5px}
.qc-legend small{margin-left:auto}
.qc-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#28a56a}
.qc-dot.suspect{background:#d99a16}.qc-dot.invalid{background:#cf4b4b}.qc-dot.excluded{background:#667085}
.archive-value{cursor:pointer;position:relative;transition:background .12s}
.archive-value:hover{background:#f2f6fb}
.archive-value>span:first-child{font-variant-numeric:tabular-nums}
.qc-badge{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:2px 5px;border-radius:999px;font-size:9px;font-weight:700;white-space:nowrap}
.qc-suspect{background:#fff4d6;color:#8a5b00}
.qc-invalid{background:#fde8e8;color:#a32626}
.qc-excluded{background:#edf0f4;color:#4d5968}
.qc-cell-invalid,.qc-cell-excluded{opacity:.65;text-decoration:line-through;text-decoration-thickness:1px}
.qc-cell-suspect{background:#fffdf5}
.archive-time{font-variant-numeric:tabular-nums;font-weight:600;color:#526176}

/* Phase 2.0B.1 - QC modal, no browser prompt() dialogs */
.qc-valid{background:#e8f7ef;color:#187347}
.qc-badge{vertical-align:middle}
.qc-badge-icon{font-size:10px;line-height:1}
.qc-badge-text{display:none}
.archive-value:hover .qc-badge-text{display:none}

.qc-modal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px}
.qc-modal.hidden{display:none}
.qc-modal-backdrop{position:absolute;inset:0;background:rgba(7,26,51,.46);backdrop-filter:blur(2px)}
.qc-modal-card{position:relative;width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border:1px solid #d9e2ec;border-radius:14px;box-shadow:0 24px 70px rgba(0,32,80,.24)}
.qc-modal-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 20px 15px;border-bottom:1px solid var(--line)}
.qc-modal-head h2{margin:0;font-size:18px}
.qc-modal-head small{display:block;margin-top:4px;color:var(--muted)}
.qc-modal-x{border:0;background:transparent;font-size:24px;line-height:1;padding:2px 5px;color:#667085;cursor:pointer}
.qc-modal-value{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 20px;background:#f8fafc;border-bottom:1px solid var(--line)}
.qc-modal-value span{font-size:13px;color:#526176}
.qc-modal-value b{font-size:18px;font-variant-numeric:tabular-nums;color:#071a33}
.qc-modal-section{padding:17px 20px 0}
.qc-modal-label{display:block;margin-bottom:9px;font-size:12px;font-weight:700;color:#23364d}
.qc-state-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.qc-state-option{display:grid;grid-template-columns:auto auto 1fr;align-items:start;gap:9px;padding:11px 12px;border:1px solid #dce4ed;border-radius:10px;cursor:pointer;background:#fff;transition:.12s}
.qc-state-option:hover{border-color:#9fb3c8;background:#fbfcfe}
.qc-state-option:has(input:checked){border-color:#315b8e;box-shadow:0 0 0 2px rgba(0,67,134,.08)}
.qc-state-option input{margin-top:3px}
.qc-state-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800}
.qc-state-option.valid .qc-state-icon{background:#e8f7ef;color:#187347}
.qc-state-option.suspect .qc-state-icon{background:#fff4d6;color:#8a5b00}
.qc-state-option.invalid .qc-state-icon{background:#fde8e8;color:#a32626}
.qc-state-option.excluded .qc-state-icon{background:#edf0f4;color:#4d5968}
.qc-state-option b{display:block;font-size:12px;color:#071a33}
.qc-state-option small{display:block;margin-top:2px;font-size:10px;line-height:1.35;color:#718096}
#qcReason{width:100%;box-sizing:border-box;resize:vertical;min-height:78px;border:1px solid #d4deea;border-radius:9px;padding:10px 11px;font:inherit}
#qcReason:focus{outline:0;border-color:#537aa8;box-shadow:0 0 0 3px rgba(0,67,134,.08)}
#qcReasonHint{display:block;margin-top:5px;font-size:10px;color:#718096}
.qc-modal-error{margin:14px 20px 0;padding:10px 12px;border-radius:8px;background:#fdecec;color:#9d2929;font-size:12px;font-weight:600}
.qc-modal-actions{display:flex;justify-content:flex-end;gap:9px;padding:18px 20px 20px}
.qc-modal-actions button{min-height:38px}
.qc-modal-actions .primary{min-width:120px}
@media(max-width:650px){
  .qc-state-grid{grid-template-columns:1fr}
  .qc-modal{padding:10px}
  .qc-modal-card{max-height:calc(100vh - 20px)}
}

/* Users form: align second row regardless of password helper text */
#p20UserForm .p20-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:auto;
  align-items:start;
}
#p20UserForm .p20-form-grid>label{
  display:grid;
  grid-template-rows:18px 40px;
  align-content:start;
  min-height:64px;
}
#p20UserForm .p20-form-grid>label small{
  position:absolute;
  transform:translateY(18px);
  pointer-events:none;
}
#p20UserForm .p20-form-grid>label:has(small) input{
  margin-top:16px;
}
#p20UserForm .p20-form-grid>label:has(small){
  min-height:80px;
}
#p20UserForm .p20-check{
  display:flex!important;
  min-height:38px!important;
  margin-top:0;
}

/* Phase 2.0B.2 - dedicated QC workspace */
.qc-badge{display:inline-flex;align-items:center;gap:5px;min-width:28px;box-sizing:border-box}
.qc-badge-text{display:inline!important}
.archive-qc-table .qc-badge-text{display:none!important}

.qc-workspace{overflow:hidden}
.qc-toolbar{display:grid;grid-template-columns:180px minmax(220px,1fr) 190px auto;gap:12px;align-items:end;padding:15px 16px;border-bottom:1px solid var(--line);background:#fbfcfe}
.qc-toolbar label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#34465c}
.qc-toolbar input,.qc-toolbar select{height:39px}
.qc-toolbar button{height:39px}
.qc-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.qc-stat{display:flex;align-items:center;gap:10px;border:1px solid #e0e6ed;border-radius:10px;padding:10px 12px;background:#fff}
.qc-stat>span{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800}
.qc-stat b{display:block;font-size:16px;line-height:1.1}
.qc-stat small{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.qc-stat.valid>span{background:#e8f7ef;color:#187347}
.qc-stat.suspect>span{background:#fff4d6;color:#8a5b00}
.qc-stat.invalid>span{background:#fde8e8;color:#a32626}
.qc-stat.excluded>span{background:#edf0f4;color:#4d5968}
.qc-workspace-table td{vertical-align:middle}
.qc-workspace-table .qc-value{font-weight:700;font-variant-numeric:tabular-nums}
.qc-workspace-table .qc-reason{max-width:360px;color:#526176}
.qc-edit-btn{white-space:nowrap}
@media(max-width:900px){
  .qc-toolbar{grid-template-columns:1fr 1fr}
  .qc-summary{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .qc-toolbar,.qc-summary{grid-template-columns:1fr}
}

/* =========================================================
   Phase 2.0B.3 - visual system polish
   ========================================================= */
:root{
  --ml-navy:#002050;
  --ml-navy-2:#0b2d59;
  --ml-bg:#f3f6fa;
  --ml-card:#ffffff;
  --ml-line:#dbe3ec;
  --ml-muted:#66758a;
  --ml-text:#10233e;
  --ml-soft:#f8fafc;
  --ml-radius:12px;
  --ml-shadow:0 8px 24px rgba(16,35,62,.07);
}
body{background:var(--ml-bg)}
#content{padding-top:18px}
.hero{align-items:center;margin-bottom:14px}
.hero h1{letter-spacing:-.02em}
.hero p{color:var(--ml-muted)}
.panel{
  border:1px solid var(--ml-line);
  border-radius:var(--ml-radius);
  box-shadow:var(--ml-shadow);
  background:var(--ml-card);
}
.ph,.section-head{
  min-height:58px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--ml-line);
}
.ph h2,.section-head h2{margin:0;font-size:15px;letter-spacing:-.01em}
.ph small,.section-head small{display:block;margin-top:3px;color:var(--ml-muted)}
.table th{
  background:#f7f9fc;
  color:#51627a;
  font-size:10px;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.table td{border-top:1px solid #edf1f5}
.table tbody tr:hover{background:#fbfdff}
button,.primary,input,select,textarea{border-radius:8px}
button.primary{
  background:var(--ml-navy);
  border-color:var(--ml-navy);
  color:#fff;
  font-weight:700;
}
button.primary:hover{background:#0a2e5d}
.icon-btn{display:inline-flex;align-items:center;gap:7px}

/* Sidebar/nav: active item must always have readable text */
.sidebar button,
.sidebar [data-page],
nav button[data-page]{
  color:#18324f;
}
.sidebar button.active,
.sidebar [data-page].active,
nav button[data-page].active,
button[data-page].active{
  background:#eaf1f8!important;
  color:var(--ml-navy)!important;
  border-color:#b9c9db!important;
  box-shadow:inset 3px 0 0 var(--ml-navy);
  font-weight:800;
}
.sidebar button.active *,
.sidebar [data-page].active *,
nav button[data-page].active *{
  color:inherit!important;
}

/* Page headers with subtle pictogram */
.app-page-hero .hero-title-wrap{display:flex;align-items:center;gap:12px}
.page-icon{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;background:#eaf1f8;color:var(--ml-navy);font-weight:900;font-size:18px;
}

/* Organization / Users cards: better hierarchy */
.p20-form-grid{gap:14px 16px}
.p20-form-grid label{color:#213750}
.p20-info{
  background:#f7f9fc;
  border:1px solid #dce5ee;
  border-left:4px solid #9db3cb;
  box-shadow:none;
}
#p20UserForm,#p20OrgForm{padding:16px!important}
#p20UserForm .toolbar,#p20OrgForm .toolbar{padding-top:4px;border-top:0}

/* Users form: exact row alignment. Helper text lives below input, not above it. */
#p20UserForm .p20-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:18px;
  row-gap:16px;
}
#p20UserForm .p20-form-grid>label{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  min-height:0!important;
  position:relative;
}
#p20UserForm .p20-form-grid>label input,
#p20UserForm .p20-form-grid>label select{
  height:40px!important;
  margin-top:0!important;
}
#p20UserForm .p20-form-grid>label small{
  position:static!important;
  transform:none!important;
  order:3;
  min-height:14px!important;
  margin:0!important;
  line-height:1.3;
}
#p20UserForm .p20-check{
  grid-column:1 / -1;
  margin-top:0!important;
  min-height:32px!important;
}
#p20UserForm .toolbar{
  grid-column:1 / -1;
  display:flex;gap:9px;
}

/* QC dedicated page */
.qc-workspace{overflow:hidden}
.qc-toolbar{
  background:#fbfcfe;
  border-bottom:1px solid var(--ml-line);
  padding:14px 16px;
}
.qc-summary{background:#fff}
.qc-stat{
  box-shadow:0 2px 8px rgba(16,35,62,.035);
}
.qc-workspace-table th:first-child,.qc-workspace-table td:first-child{padding-left:16px}
.qc-workspace-table th:last-child,.qc-workspace-table td:last-child{padding-right:16px}
.qc-edit-btn{
  border:1px solid #cfd9e4;
  background:#fff;
  color:#173454;
  font-weight:700;
  padding:7px 10px;
}
.qc-edit-btn:hover{background:#f4f7fb}
.empty-state{padding:28px;text-align:center}
.empty-state b{display:block;font-size:15px}
.empty-state small{display:block;margin-top:6px;color:var(--ml-muted)}

/* Admin list/card proportions */
.grid{gap:14px}
.source-card{box-shadow:0 2px 8px rgba(16,35,62,.035)}
.source-card-title b{font-size:13px}

@media(max-width:800px){
  #p20UserForm .p20-form-grid{grid-template-columns:1fr}
}

/* =========================================================
   Phase 2.0B.4 - production UI hotfix
   ========================================================= */

/* Sidebar menu: deterministic colors for normal, hover and selected */
aside nav button[data-page]{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%;
  min-height:40px;
  padding:8px 11px!important;
  margin:3px 0!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:9px!important;
  background:#ffffff!important;
  color:#173454!important;
  box-shadow:none!important;
  font-weight:700;
  transition:background .12s,border-color .12s,transform .12s;
}
aside nav button[data-page]:hover{
  background:#f1f5f9!important;
  color:#002050!important;
  border-color:#d3dfeb!important;
  transform:translateX(1px);
}
aside nav button[data-page].on{
  background:#dbe8f5!important;
  color:#002050!important;
  border-color:#9db5cf!important;
  box-shadow:inset 4px 0 0 #002050!important;
}
aside nav button[data-page].on:hover{
  background:#dbe8f5!important;
  color:#002050!important;
}
aside nav button[data-page] .nav-label{
  color:inherit!important;
  line-height:1.15;
}
.nav-icon{
  width:20px;height:20px;min-width:20px;
  display:inline-flex;align-items:center;justify-content:center;
  color:inherit;
}
.nav-icon svg,.page-icon svg,.icon-btn svg{
  width:100%;height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-icon{
  width:42px!important;height:42px!important;
  min-width:42px;
}
.page-icon svg{width:23px;height:23px}
.icon-btn svg{width:16px;height:16px}

/* Organization form: more breathing room around action buttons */
#p20OrgForm .toolbar{
  margin-top:10px!important;
  padding-top:8px!important;
  padding-bottom:12px!important;
}
#p20OrgForm + .p20-info,
#p20OrgForm ~ .p20-info{
  margin-top:2px!important;
}

/* Cleaner admin form spacing */
#p20OrgForm .p20-form-grid{row-gap:15px}
#p20OrgForm input,#p20OrgForm select{height:40px}
#p20OrgForm .p20-check{align-self:end;min-height:40px}

/* QC content should visually replace previous page completely */
.qc-workspace{min-height:360px}
.qc-workspace .section-head{background:#fff}

/* Phase 2.0B.5 - QC visibility in ordinary data views */
.data-qc-marker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:5px;
  border-radius:50%;
  font-size:10px;
  font-weight:900;
  line-height:1;
  vertical-align:1px;
  cursor:help;
}
.data-qc-marker.suspect{background:#fff1c7;color:#8a5b00}
.data-qc-marker.invalid{background:#fde7e7;color:#a32626}
.archive-invalid-value .archive-data-value{
  color:#8a94a3;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}

/* Phase 2.0C - Export */
.export-workspace{overflow:hidden}
#exportForm{padding:0}
.export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px;padding:16px;border-bottom:1px solid var(--ml-line)}
.export-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#34465c}
.export-grid input,.export-grid select{height:40px}
.export-parameters{padding:16px;border-bottom:1px solid var(--ml-line)}
.export-param-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.export-param-head b{display:block;font-size:13px}
.export-param-head small{display:block;margin-top:3px;color:var(--ml-muted)}
.export-param-head>div:last-child{display:flex;gap:7px}
.export-param-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.export-param{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid #dce4ed;border-radius:9px;background:#fff;cursor:pointer}
.export-param:hover{background:#f8fafc;border-color:#b8c8d9}
.export-param b{display:block;font-size:12px}
.export-param small{display:block;margin-top:2px;color:var(--ml-muted);font-size:10px}
.export-note{display:flex;gap:10px;align-items:flex-start;margin:14px 16px 0;padding:11px 13px;border:1px solid #dce5ee;border-radius:9px;background:#f7f9fc}
.export-note>span{font-size:16px;color:var(--ml-navy)}
.export-note b{display:block;font-size:11px}
.export-note small{display:block;margin-top:2px;color:var(--ml-muted);line-height:1.4}
.export-actions{display:flex;justify-content:flex-end;padding:16px}
.export-actions .primary{min-width:160px}
@media(max-width:900px){.export-grid,.export-param-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.export-grid,.export-param-grid{grid-template-columns:1fr}.export-param-head{align-items:flex-start;flex-direction:column}}

/* Phase 2.0D - System Health */
.health-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.health-kpi{background:#fff;border:1px solid var(--ml-line);border-radius:10px;padding:12px 14px;box-shadow:0 1px 2px #0b1e3310}
.health-kpi span{display:block;text-transform:uppercase;letter-spacing:.04em;font-size:9px;font-weight:800;color:var(--ml-muted)}
.health-kpi b{display:block;margin-top:4px;font-size:23px;color:var(--ml-navy)}
.health-panel{overflow:hidden}
.health-table{width:100%;border-collapse:collapse;font-size:11px}
.health-table th{padding:9px 10px;text-align:left;background:#f6f8fb;border-bottom:1px solid var(--ml-line);font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:#5f6e80}
.health-table td{padding:10px;border-bottom:1px solid #edf1f5;vertical-align:top}
.health-table td>b{display:block;font-size:11px;color:#172b42}
.health-table td>small{display:block;margin-top:3px;color:var(--ml-muted);font-size:9px}
.health-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:850;letter-spacing:.03em}
.health-status>span{width:6px;height:6px;border-radius:50%;background:currentColor}
.health-status.online{background:#e8f7ee;color:#14723a}
.health-status.delayed{background:#fff2cc;color:#856000}
.health-status.offline,.health-status.error{background:#fde8e8;color:#a62b2b}
.health-status.disabled{background:#edf0f3;color:#687484}
.health-status.maintenance{background:#e9efff;color:#3456a3}
.health-reason{max-width:190px;line-height:1.35}
.health-error-text{color:#9c2929;max-width:220px;word-break:break-word}
@media(max-width:950px){.health-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.health-summary{grid-template-columns:1fr 1fr}}

/* Phase 2.0D.3 - Stanje sistema: desktop polish + Slovenian UI */
.health-summary{
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:12px;
  margin:14px 0 10px;
}
.health-kpi{
  min-height:82px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  padding:14px 16px;
}
.health-kpi span{
  font-size:10px;
  letter-spacing:.05em;
}
.health-kpi b{
  font-size:26px;
  line-height:1;
  margin-top:8px;
}

.health-meta-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid var(--ml-line);
  border-radius:9px;
  background:#f8fafc;
  color:#647386;
  font-size:10px;
}
.health-meta-strip span{
  white-space:nowrap;
}
.health-meta-strip b{
  color:#31445b;
}

.health-panel .section-head{
  align-items:flex-start;
  padding:14px 16px 12px;
}
.health-panel .section-head h2{
  margin:0;
}
.health-panel .section-head small{
  margin-top:4px;
  display:block;
}

.health-table-wrap{
  overflow-x:auto;
  padding:0 14px 14px;
}
.health-table{
  table-layout:auto;
  min-width:1120px;
  border:1px solid #e3e9f0;
  border-radius:10px;
  overflow:hidden;
}
.health-table th{
  text-align:left !important;
  padding:10px 12px;
  white-space:nowrap;
}
.health-table td{
  text-align:left !important;
  padding:12px;
  vertical-align:middle;
}
.health-table tbody tr:hover{
  background:#fafcff;
}
.health-table td:first-child{
  min-width:190px;
}
.health-table td:nth-child(2){
  min-width:190px;
}
.health-table td:nth-child(3),
.health-table td:nth-child(4){
  min-width:170px;
}
.health-table td:nth-child(5){
  min-width:120px;
}
.health-table td:nth-child(6){
  min-width:160px;
}
.health-table td:nth-child(7){
  min-width:170px;
}
.health-reason{
  max-width:230px;
  margin-top:5px !important;
}
.health-status{
  justify-content:flex-start;
}
.health-error-text{
  text-align:left !important;
}

@media(max-width:1100px){
  .health-summary{grid-template-columns:repeat(3,minmax(150px,1fr))}
}
@media(max-width:700px){
  .health-summary{grid-template-columns:1fr 1fr}
  .health-meta-strip{display:none}
  .health-kpi{min-height:72px}
}

/* Phase 2.0D.4 — desktop readability + complete mobile navigation */

/* System status: readable desktop typography */
.health-panel .section-head h2{font-size:15px}
.health-panel .section-head small{font-size:11px}
.health-table{font-size:12px}
.health-table th{font-size:10px;line-height:1.25}
.health-table td{font-size:12px;line-height:1.45}
.health-table td>b{font-size:12px}
.health-table td>small{font-size:10.5px;line-height:1.4}
.health-status{font-size:10px;padding:5px 9px}
.health-reason{font-size:10.5px!important}
.health-meta-strip{font-size:11px;line-height:1.45}
.health-kpi span{font-size:10.5px}
.health-kpi b{font-size:28px}

/* Header foundations */
.header-left{display:flex;align-items:center;gap:10px;min-width:0}
.mobile-menu-btn{
  display:none!important;
  width:40px;height:40px;padding:0!important;flex:0 0 40px;
  align-items:center;justify-content:center;
}
.mobile-menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mobile-nav-backdrop{display:none}

/* General reachability: wide content must scroll, not disappear */
.table-wrap,.p20-table-wrap,.health-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.panel,.hero,.card{min-width:0}
img,svg,canvas{max-width:100%}
.toolbar{flex-wrap:wrap}
input,select,textarea,button{max-width:100%}

/* Tablet / mobile application shell */
@media(max-width:900px){
  #app{
    display:block!important;
    min-height:100vh;
  }

  #app aside#appSidebar{
    display:block!important;
    position:fixed;
    z-index:1200;
    top:0;bottom:0;left:0;
    width:min(310px,86vw);
    padding:16px 12px 24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:12px 0 32px rgba(5,25,50,.18);
  }
  body.mobile-nav-open #app aside#appSidebar{transform:translateX(0)}
  body.mobile-nav-open{overflow:hidden}

  .mobile-nav-backdrop{
    display:block;
    position:fixed;
    z-index:1190;
    inset:0;
    border:0;
    border-radius:0;
    padding:0;
    background:rgba(7,22,40,.48);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  body.mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .mobile-menu-btn{display:inline-flex!important}
  .shell{width:100%;min-width:0}
  .shell header{
    min-height:62px;
    position:sticky;
    top:0;
    z-index:800;
    padding:8px 12px!important;
    gap:8px;
  }
  .header-left{flex:1 1 auto}
  #pageTitle{display:block;max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #clock{display:none!important}

  .header-right{
    flex:0 1 auto;
    gap:7px!important;
    flex-wrap:nowrap!important;
    min-width:0;
  }
  .station-picker{min-width:0}
  .station-picker span{display:none!important}
  .station-picker select{
    width:min(42vw,220px);
    min-width:0!important;
    height:38px;
    padding-left:8px;
    padding-right:26px;
  }
  #who{display:none}
  #logout{
    width:40px;
    overflow:hidden;
    white-space:nowrap;
    text-indent:-9999px;
    position:relative;
    padding:0!important;
    height:40px;
  }
  #logout:after{
    content:"↪";
    position:absolute;inset:0;
    display:grid;place-items:center;
    text-indent:0;
    font-size:18px;
    transform:rotate(180deg);
  }

  main#content{
    width:100%;
    max-width:none;
    padding:12px!important;
    overflow:hidden;
  }

  .hero{
    gap:12px;
    align-items:flex-start!important;
    flex-wrap:wrap;
  }
  .hero h1{font-size:22px!important;line-height:1.2}
  .hero p{font-size:12px;line-height:1.45}
  .hero .toolbar{width:100%}
  .hero .toolbar button{flex:1 1 auto}

  .cards,.metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .grid{grid-template-columns:1fr!important}
  .panel{max-width:100%;overflow:hidden}
  .panel>.table-wrap{overflow:auto}

  /* Admin forms and action bars */
  .p20-form-grid,.p20-inline,.export-grid,.export-param-grid{
    grid-template-columns:1fr!important;
  }
  .p20-toolbar,.export-param-head,.section-head{
    flex-wrap:wrap;
  }

  /* System state */
  .health-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
  }
  .health-kpi{min-height:70px;padding:11px 12px}
  .health-kpi b{font-size:24px}
  .health-meta-strip{display:none!important}
  .health-table-wrap{padding:0 0 10px}
  .health-table{min-width:1050px}

  /* Charts need an actually usable viewport */
  .panel canvas{max-width:none}
  #map{min-height:55vh}
}

/* Narrow phones */
@media(max-width:520px){
  main#content{padding:9px!important}
  .shell header{padding:7px 9px!important}
  #pageTitle{max-width:32vw;font-size:13px}
  .station-picker select{width:37vw;font-size:12px}
  .mobile-menu-btn,#logout{width:38px;height:38px;flex-basis:38px}

  .cards,.metrics{grid-template-columns:1fr!important}
  .health-summary{grid-template-columns:1fr 1fr!important}
  .health-kpi span{font-size:9px}
  .health-kpi b{font-size:22px}

  .hero{padding:14px!important}
  .hero h1{font-size:19px!important}
  .panel .ph,.section-head{padding-left:12px!important;padding-right:12px!important}

  /* Buttons/actions stay reachable instead of overflowing */
  .toolbar,.export-actions,.p20-actions{gap:7px}
  .toolbar button,.export-actions button,.p20-actions button{
    min-height:40px;
  }

  /* Modal: fit inside phone viewport */
  .qc-modal-card{
    width:calc(100vw - 18px)!important;
    max-height:calc(100vh - 18px);
    overflow:auto;
    margin:9px;
  }
}

/* Phase 2.0D.5 — unified Lucide icon system */
.nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
}
.nav-icon svg{
  width:20px!important;
  height:20px!important;
  max-width:none;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:10px;
  background:#eef5fb;
  color:var(--ml-navy);
}
.page-icon svg{
  width:23px!important;
  height:23px!important;
  max-width:none;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.hero-title-wrap>div{min-width:0}
.icon-btn svg{
  width:16px!important;
  height:16px!important;
  fill:none!important;
  stroke:currentColor!important;
}
@media(max-width:520px){
  .page-icon{width:38px;height:38px;flex-basis:38px}
  .page-icon svg{width:21px!important;height:21px!important}
}

/* Phase 2.0D.7 — deterministic Slovenian 24-hour datetime controls */
.ml-datetime-display{
  width:100%;
  height:40px;
  border:1px solid var(--ml-line);
  border-radius:8px;
  background:#fff;
  color:#172b42;
  padding:0 11px;
  font:inherit;
}
.flatpickr-calendar{
  font-family:inherit;
  box-shadow:0 10px 30px rgba(10,30,55,.16);
  border:1px solid #d9e2ec;
}
.flatpickr-time input{
  font-size:14px!important;
}

/* Phase 2.0D.8 — archive/access date-time UX */
.ml-date-display{
  height:40px;
  min-width:140px;
  border:1px solid var(--ml-line);
  border-radius:8px;
  background:#fff;
  color:#172b42;
  padding:0 11px;
  font:inherit;
  font-weight:650;
}
.field-help{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  line-height:1.35;
  color:var(--ml-muted);
  font-weight:500;
}
.access-time-note{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:10px 0 2px;
  padding:9px 11px;
  border:1px solid #dce5ee;
  border-radius:8px;
  background:#f8fafc;
  color:#596b7f;
  font-size:11px;
}
.access-time-note b{color:#253a52}
.validity-arrow{display:inline-block;margin:0 7px;color:#718096}

/* Archive accessibility */
#archiveBody table thead th{
  font-size:11.5px!important;
  line-height:1.3!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
  color:#344a63!important;
}
#archiveBody table thead th small{
  font-size:10px!important;
}
#archiveBody .archive-time{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.archive-nav .flatpickr-input + .ml-date-display,
.archive-nav .ml-date-display{
  width:145px;
}

@media(max-width:650px){
  .access-time-note{flex-direction:column;gap:4px}
  .archive-nav{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .archive-nav .ml-date-display{width:100%}
}

/* Phase 2.0E — Vzdrževanje */
.health-summary{grid-template-columns:repeat(6,minmax(135px,1fr))}
.health-kpi.maintenance-kpi{border-color:#ccd9f5;background:#f6f8ff}
.health-kpi.maintenance-kpi b{color:#3456a3}
.health-actions{white-space:nowrap}
.health-actions button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:7px 9px;
  font-size:10.5px;
  font-weight:700;
}
.health-actions svg{width:15px;height:15px}
.maintenance-start-btn{background:#fff;border:1px solid #cbd8e6;color:#173a67}
.maintenance-start-btn:hover{background:#f4f8fc}
.maintenance-end-btn{background:#fff5f5;border:1px solid #efcaca;color:#9b3030}
.maintenance-detail{
  margin-top:5px!important;
  color:#536a96!important;
  line-height:1.4!important;
}
.maintenance-modal-card{width:min(620px,100%)}
.maintenance-form{padding:17px 20px 2px}
.maintenance-form>label,.maintenance-time-grid>label{
  display:flex;flex-direction:column;gap:6px;
  font-size:11px;font-weight:700;color:#34465c;
}
.maintenance-form select,.maintenance-form input{height:40px}
.maintenance-form textarea{
  resize:vertical;min-height:82px;padding:10px 11px;
  border:1px solid #d4deea;border-radius:9px;font:inherit;
}
.maintenance-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.maintenance-time-grid small{font-size:10px;color:var(--ml-muted);font-weight:500}
.maintenance-note{
  margin-top:13px;padding:10px 12px;border:1px solid #dce5ee;border-radius:8px;
  background:#f8fafc;color:#596b7f;font-size:10.5px;line-height:1.45;
}
@media(max-width:1200px){.health-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){
  .health-summary{grid-template-columns:1fr 1fr!important}
  .maintenance-time-grid{grid-template-columns:1fr}
  .health-actions button span{display:none}
  .health-actions button{width:36px;justify-content:center;padding:0}
}

/* Phase 2.0E.1 — parameter maintenance */
#maintenanceParameterWrap{margin-top:14px}
#maintenanceParameterWrap small{font-size:10px;color:var(--ml-muted);font-weight:500}
.parameter-maint-list{display:flex;flex-direction:column;gap:4px;margin-top:7px}
.parameter-maint-list span{
  display:flex;align-items:center;gap:4px;width:max-content;max-width:100%;
  padding:4px 6px;border-radius:6px;background:#eef2ff;color:#4a5f91;font-size:9.5px;
}
.parameter-maint-list span b{overflow:hidden;text-overflow:ellipsis}
.parameter-maint-list button{
  border:0;background:transparent;color:#7a3150;padding:0 2px;font-size:15px;line-height:1;cursor:pointer
}

/* Phase 2.0E.2 — maintenance KPI semantics */
.health-kpi.maintenance-kpi small{
  display:block;
  margin-top:2px;
  font-size:9.5px;
  font-weight:600;
  color:#66779a;
}

/* Phase 2.0F — operational alarms/incidents */
.incident-tabs{display:flex;gap:6px;margin:0 0 12px}
.incident-tabs button{padding:8px 12px;border:1px solid #d6e0ea;background:#fff;border-radius:7px;font-weight:700;color:#52657a}
.incident-tabs button.on{background:#002050;color:#fff;border-color:#002050}
.incident-summary{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px;margin-bottom:12px}
.incident-kpi{background:#fff;border:1px solid #dce4ec;border-radius:9px;padding:12px 14px}
.incident-kpi span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#64768a}
.incident-kpi b{display:block;font-size:24px;margin-top:4px;color:#193552}
.incident-kpi.offline b,.incident-kpi.error b{color:#a53535}
.incident-kpi.delayed b{color:#956b19}
.incident-kpi.ack b{color:#315c8f}
.incident-table th{font-size:11px!important}
.incident-table td{vertical-align:top}
.incident-table td small{display:block;margin-top:4px;color:#738397;font-size:9.5px}
.incident-type,.incident-state{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:9.5px;font-weight:800;white-space:nowrap}
.incident-type.delayed{background:#fff5d9;color:#876313}
.incident-type.offline,.incident-type.config_error{background:#fff0f0;color:#a13939}
.incident-state.open{background:#fff0f0;color:#9d3434}
.incident-state.acknowledged{background:#edf4ff;color:#315c8f}
.incident-state.resolved{background:#eef8f0;color:#3d7248}
.incident-ack-btn{min-height:32px;padding:6px 9px;font-size:10px}
.incident-empty{padding:28px;text-align:center;color:#65778b}
.incident-info{margin-top:12px;padding:11px 13px;border:1px solid #dce5ee;border-radius:8px;background:#f8fafc;color:#5b6e82;font-size:10.5px;line-height:1.5}
@media(max-width:950px){.incident-summary{grid-template-columns:repeat(2,1fr)}}

/* Phase 2.0F.2 — measurement alarm rules */
.alarm-rule-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
.alarm-rule-modal{max-width:680px}
.alarm-rule-modal>label{display:block;margin:10px 0}
.alarm-rule-modal label input:not([type=checkbox]),.alarm-rule-modal label select{display:block;width:100%;margin-top:5px}
.alarm-rule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.alarm-recipients{border:1px solid #d9e2eb;border-radius:8px;padding:10px;margin:12px 0}
.alarm-recipients legend{font-weight:800;color:#334e68;padding:0 5px}
.alarm-recipients label{display:flex;gap:7px;align-items:center;padding:5px 2px}
.check-row{display:flex!important;align-items:center;gap:7px}
@media(max-width:650px){.alarm-rule-grid{grid-template-columns:1fr}}

/* Phase 2.0F.2.3 — alarm rule modal hotfix */
.alarm-rule-form{padding:18px 20px 4px}
.alarm-rule-form>label{display:block;margin:0 0 14px;font-size:12px;font-weight:700;color:#23364d}
.alarm-rule-form input:not([type="checkbox"]),
.alarm-rule-form select{width:100%;min-height:40px;margin-top:6px;padding:8px 10px;border:1px solid #cfd9e5;border-radius:8px;background:#fff;color:#071a33}
.alarm-rule-grid label{display:block;font-size:12px;font-weight:700;color:#23364d}
.alarm-recipients{margin-top:16px}


/* Phase 2.0F.2.5 — UI polish: alarms, incident history and page headers */
.alarm-rule-toolbar{
  display:flex!important;
  justify-content:center!important;
  align-items:center;
  margin:18px 0 22px!important;
}
.alarm-rule-new-btn{
  min-height:42px;
  padding:9px 16px!important;
  gap:8px!important;
  border-radius:9px!important;
  box-shadow:0 2px 7px rgba(0,32,80,.10);
}
.alarm-rule-new-btn svg{width:18px!important;height:18px!important;flex:0 0 18px}

.incident-panel .table-wrap{padding:4px 12px 14px}
.incident-table{width:100%;border-collapse:separate;border-spacing:0}
.incident-table th{padding:11px 12px!important;font-size:10.5px!important;white-space:nowrap}
.incident-table td{padding:11px 12px!important;line-height:1.4;vertical-align:middle!important}
.incident-table td:first-child{min-width:180px}
.incident-table .incident-reason{min-width:285px;max-width:460px;white-space:normal}
.incident-table td:nth-child(4),.incident-table td:nth-child(5),.incident-table td:last-child{white-space:nowrap}

/* Keep title pictograms aligned on dynamic data pages too. */
#content .hero-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}
#content .hero-title-wrap>div{min-width:0}


/* Phase 2.1B — API administration */
.api-key-table td{vertical-align:middle}
.api-key-table code{font-size:.82rem;white-space:nowrap}
.api-key-table td small{display:block;margin-top:4px;color:var(--muted)}
.api-scope-list{display:flex;flex-wrap:wrap;gap:5px;min-width:170px}
.api-scope-list span{
  display:inline-flex;align-items:center;padding:3px 7px;border:1px solid var(--line);
  border-radius:999px;background:var(--soft);font-size:.75rem;white-space:nowrap
}
.api-all-stations{color:var(--muted)}
.api-key-modal-card{width:min(760px,calc(100vw - 28px))}
.api-key-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.api-key-form>label,.api-key-created>label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.api-key-form input,.api-key-form select,.api-key-created input{
  width:100%;box-sizing:border-box
}
.api-span-2{grid-column:1/-1}
.form-label{display:block;font-weight:600;margin-bottom:8px}
.api-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.api-check-grid label,.api-inline-check{
  display:flex;align-items:center;gap:8px;font-weight:500
}
.api-check-grid input,.api-inline-check input,.api-station-picker input{width:auto}
.api-station-picker{
  margin-top:10px;max-height:230px;overflow:auto;border:1px solid var(--line);
  border-radius:10px;padding:8px;background:var(--soft)
}
.api-station-picker label{
  display:flex;align-items:flex-start;gap:9px;padding:8px;border-radius:8px;font-weight:500
}
.api-station-picker label:hover{background:var(--panel)}
.api-station-picker label span{display:flex;flex-direction:column}
.api-station-picker small{color:var(--muted);margin-top:2px}
.api-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:3px}
.api-key-created{padding:18px;display:flex;flex-direction:column;gap:16px}
.api-secret-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.api-secret-row input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.api-copy-status{min-height:20px;color:var(--muted);font-size:.85rem}
.api-key-created>.primary{align-self:flex-end}
.api-info-strip{margin-bottom:14px}
@media(max-width:760px){
  .api-key-form{grid-template-columns:1fr}
  .api-span-2{grid-column:auto}
  .api-check-grid{grid-template-columns:1fr}
  .api-secret-row{grid-template-columns:1fr}
}

/* Production UI consistency — shared modal/form spacing
   Parameter editor uses the same 20 px modal gutters and field rhythm as the
   rest of the portal instead of local inline spacing. */
.parameter-modal-card{
  width:min(580px,100%);
}
.parameter-modal-section{
  padding-top:17px;
}
.portal-form-stack{
  display:grid;
  gap:14px;
}
.portal-field{
  display:grid;
  gap:6px;
  min-width:0;
  color:#213750;
  font-size:13px;
  font-weight:600;
}
.portal-field input,
.portal-field select,
.portal-field textarea{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.hidden-field{
  display:none!important;
}
.portal-advanced{
  margin-top:14px;
}
.portal-advanced>summary{
  cursor:pointer;
  user-select:none;
}
.portal-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.portal-span-2{
  grid-column:1/-1;
}
.parameter-source-info{
  margin-top:12px;
}
@media(max-width:620px){
  .portal-form-grid{grid-template-columns:1fr}
  .portal-span-2{grid-column:auto}
}