/* ================================================================
   GLASS DESIGN LAYER — theme-aware, reused across every portal page.
   Depends on the tokens in variables.css; adapts to light + dark.
   ================================================================ */

/* Page backdrop wash so frosted surfaces have something to refract. */
.portal-main{
  background-color: var(--bg);
  background-image:
    radial-gradient(680px 440px at 4% -8%,  rgba(20,184,166,0.10), transparent 60%),
    radial-gradient(700px 480px at 106% -6%, rgba(139,92,246,0.09), transparent 62%),
    radial-gradient(780px 540px at 90% 110%, rgba(245,158,11,0.06), transparent 64%);
  background-attachment: fixed;
}
:root[data-theme="dark"] .portal-main{
  background-image:
    radial-gradient(680px 440px at 4% -8%,  rgba(20,184,166,0.16), transparent 60%),
    radial-gradient(700px 480px at 106% -6%, rgba(139,92,246,0.15), transparent 62%),
    radial-gradient(780px 540px at 90% 110%, rgba(245,158,11,0.10), transparent 64%);
}

/* Frost the standard token-based surfaces so existing pages lift automatically. */
.card, .info-card, .section-card, .supplier-hero, .kpi-card{
  background: color-mix(in srgb, var(--card) 74%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ---- Reusable portal page primitives (opt-in via .zt-* classes) ---- */
.zt-page{ padding: 26px 32px 46px; max-width: 1240px; }
.zt-page-head{ margin-bottom: 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.zt-page-head > :first-child{ flex: 1 1 240px; min-width: 240px; } /* title keeps its space — never overlapped */
.zt-page-head h1{ font-size: 24px; font-weight: 800; color: var(--text); margin: 0; letter-spacing:-0.01em; }
.zt-page-head .sub{ font-size: 13.5px; color: var(--text-muted); margin-top: 5px; max-width: 720px; }
/* Standard right-side action cluster (search + filter + button) — stays on one row, never squeezed. */
/* nowrap: search + filter + button stay on ONE row (wrapping made them stack vertically). */
.zt-head-actions{ display:flex; gap:10px; align-items:center; flex:0 0 auto; flex-wrap:nowrap; justify-content:flex-end; }

.zt-grid{ display:grid; gap:18px; }
.zt-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.zt-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.zt-grid.auto{ grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); }

.zt-glass{
  background: color-mix(in srgb, var(--card) 74%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.zt-glass.pad{ padding: 22px 24px; }
.zt-glass.hover{ transition: transform .18s, box-shadow .18s; }
.zt-glass.hover:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.zt-section-title{ font-size: 15px; font-weight:700; color: var(--text); margin: 30px 0 12px; }

.zt-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:700; color:#fff; }

/* Glass table */
.zt-table-wrap{ overflow:hidden; border-radius:16px; }
.zt-table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
.zt-table thead th{ text-align:left; padding:12px 18px; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); background: color-mix(in srgb, var(--card) 55%, transparent); }
.zt-table tbody td{ padding:14px 18px; border-top:1px solid var(--border); color:var(--text); }
.zt-table tbody tr:hover{ background: color-mix(in srgb, var(--primary) 7%, transparent); }

/* mini progress bar */
.zt-bar{ height:7px; border-radius:4px; background: var(--border); overflow:hidden; }
.zt-bar > span{ display:block; height:100%; border-radius:4px; background: var(--primary-gradient); }

.zt-empty{ text-align:center; color: var(--text-muted); padding: 34px 20px; }
.zt-link{ color: var(--primary); font-weight:600; font-size:13px; text-decoration:none; }
.zt-link:hover{ text-decoration:underline; }

/* ONE authoritative look for every portal dropdown/input. Page-level <style> blocks live in the body
   (later source order) and were beating the bundled rules, leaving native white selects in dark mode —
   hence !important here. background-color/-image are set separately so the chevron survives. */
.portal-main select{
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px;
  padding: 9px 34px 9px 12px;
  font-size: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
:root[data-theme="dark"] .portal-main select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.portal-main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.portal-main textarea{
  background-color: var(--card);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Header action cluster: definite widths so a select can never balloon and shove the controls over
   the page title (that was the overlap bug). */
.zt-head-actions > *{ flex: 0 0 auto; }
.zt-head-actions input[type="text"], .zt-head-actions .input-field{ width: 220px !important; min-width: 0; }
.zt-head-actions select{ width: 170px !important; min-width: 0; }

/* Filter dropdowns sit in tight rows next to their Apply button — keep them compact so the row never
   collapses into a glued vertical stack. */
.esg-select, .imp-select, .filter-select, .zt-filter-select{ width: 150px !important; min-width: 0; }

@media (max-width: 900px){
  .zt-page{ padding: 22px 18px 40px; }
  .zt-grid.cols-2, .zt-grid.cols-3{ grid-template-columns: 1fr; }
}