:root{
  --bg:#ffffff;
  --surface:#fbfbfd;
  --surface-2:#f5f7fa;
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#0176d3;
  --brand-2:#0b5cab;
  --border:#e5e7eb;
  --shadow:0 6px 20px rgba(2, 8, 20, 0.06);
  --radius:12px;
  --app-banner-height:56px;
  --app-banner-loader-offset:8px;
}
html, body { background: var(--surface); color: var(--ink); font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial; }

/* Global page-banner normalization (applies to top-level app headers only) */
body > .header,
body > .page-banner,
body > .page-header,
.help-page > .header,
.help-page > .page-banner,
.help-page > .page-header,
.app-banner{
  box-sizing:border-box;
  height:var(--app-banner-height);
  min-height:var(--app-banner-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  position:relative;
}

body > .header > .left,
body > .header > .right,
body > .header > .header-right,
body > .page-banner > .left,
body > .page-banner > .right,
body > .page-banner > .header-right,
body > .page-header > .left,
body > .page-header > .right,
body > .page-header > .header-right,
.help-page > .header > .left,
.help-page > .header > .right,
.help-page > .header > .header-right,
.help-page > .page-banner > .left,
.help-page > .page-banner > .right,
.help-page > .page-banner > .header-right,
.help-page > .page-header > .left,
.help-page > .page-header > .right,
.help-page > .page-header > .header-right,
.app-banner > .left,
.app-banner > .right,
.app-banner > .header-right{
  min-width:0;
  flex-wrap:nowrap;
}

.app-banner .banner-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  gap:2px;
}

.app-banner .banner-title{
  font-weight:800;
  font-size:16px;
  line-height:1.2;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-banner .banner-sub{
  font-size:12px;
  color:#6b7280;
  line-height:1.2;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(56vw, 760px);
}

/* Shared page banners */
.provider-header .left,
.provider-header .right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-height:40px;
}
.provider-header-title{
  font-weight:800;
  font-size:16px;
  line-height:1.2;
  white-space:nowrap;
}
.provider-header-subtitle{
  color:#6b7280;
  font-size:12px;
  white-space:nowrap;
}

/* Buttons */
.btn{ border:1px solid #cbd5e1; background:#fff; color:#374151; padding:8px 12px; border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.03); transition: transform .02s ease, background .15s ease, border .15s ease, color .15s ease; font-weight:700; }
.btn:hover{ background:#f8fafc; border-color:#94a3b8; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:#2e7d32; color:#fff; border-color:#2e7d32; }
.btn-primary:hover{ background:#256628; border-color:#256628; filter:none; }
.btn-ghost{ background:#fff; border:1px solid #cbd5e1; color:#374151; }
.btn-danger{ background:#fff; color:#c62828; border:1px solid #ef9a9a; }
.icon-btn{ border:none; background:transparent; padding:6px; cursor:pointer; border-radius:6px; }
.icon-btn:hover{ background: var(--surface-2); }

/* Inputs */
.input, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea {
  border:1px solid var(--border); border-radius:8px; background:#fff; outline:none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(1,118,211,.12); }

/* Cards / Tiles */
.card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.tile{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Tables - reduce visual noise */
table{ border-collapse: separate; border-spacing: 0; width:100%; }
thead th{ background:#fff; position:sticky; top:0; padding:10px; border-bottom:1px solid var(--border); }
tbody td{ padding:10px; border-bottom:1px solid var(--border); }
tbody tr:hover{ background:#f8fafc; }

/* Shared banner loader (global progress bar) */
.banner-loader{
  position:fixed;
  left:0;
  right:0;
  top:var(--app-banner-height);
  z-index:5000;
  height:4px;
  margin:0;
  padding:0;
  overflow:hidden;
  pointer-events:none;
  background: #96d1fb;
  border-bottom: 1px solid rgba(255,255,255,.55);
}
.app-shell > .app-menu ~ .app-content .banner-loader{
  left:220px;
}
.app-shell > .app-menu.collapsed ~ .app-content .banner-loader{
  left:55px;
}
.banner-loader::before{
  display:block;
  position:absolute;
  content:"";
  left:-30%;
  width:35%;
  height:4px;
  background: #1d4ed8;
  will-change: left, width;
  animation: bannerLoading 1.6s ease-in-out infinite;
}
.banner-loader > *{ display:none !important; }
@keyframes bannerLoading{
  0% { left:-30%; width:35%; opacity:1; }
  50% { left:30%; width:45%; opacity:1; }
  100% { left:105%; width:35%; opacity:1; }
}

/* Hidden always hides */
[hidden]{ display:none !important; }

/* Search input with inline clear */
.search-wrap{ position:relative; display:inline-flex; align-items:center; }
.search-wrap input[type="search"]{ padding-left:28px; padding-right:28px; min-width: 240px; }
.search-wrap .icon{ position:absolute; left:8px; opacity:.6; pointer-events:none; }
.search-wrap .clear{ position:absolute; right:8px; border:none; background:transparent; cursor:pointer; opacity:.5; }
.search-wrap .clear:hover{ opacity:.9; }

/* Dropdowns */
.dropdown{ position:relative; white-space:nowrap; }
.dropdown > .btn, .dropdown > .icon-btn { white-space:nowrap; }
.dropdown-menu{ position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow: var(--shadow); padding:8px; min-width: 240px; z-index: 999; }
.dropdown-menu.small{ min-width: 200px; }
.no-wrap{ white-space:nowrap; }

/* Panels + modals */
.side-panel{ position: fixed; right:0; top:0; width:40%; height:100%; background:#fff; border-left:1px solid var(--border); box-shadow: -8px 0 24px rgba(2,8,20,.08); z-index: 1001; }
.panel-body{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; align-content:start; }
.panel-footer{ display:flex; justify-content:space-between; align-items:center; padding:14px 24px; }
.panel-meta{ font-size:12px; color:#64748b; line-height:1.3; padding:8px 16px; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.35); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal{ background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:16px; }
.modal.large{ min-width: 640px; }

/* Tooltips */
.help-ico{ margin-left:6px; opacity:.6; cursor:pointer; }
.help-pop{ position:absolute; background:#0f172a; color:#fff; padding:10px 12px; border-radius:8px; max-width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size:12px; z-index: 1200; }

/* Column chooser */
.col-chooser{ max-height: 60vh; overflow:auto; }
.col-row{ display:flex; align-items:center; gap:8px; border:1px dashed var(--border); padding:6px; border-radius:8px; background:#fff; }

/* Prevent wrapping on Columns */
.columns-control{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

/* Columns popover (anchored to the columns icon) */
.colsel-popover {
  position: fixed;            /* IMPORTANT: so it can float above layout */
  z-index: 10000;
  min-width: 260px;
  max-width: 360px;
  max-height: 60vh;
  overflow: auto;

  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: 10px;
}

.colsel-popover .colsel-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.colsel-popover .colsel-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.colsel-popover .colsel-actions button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
  background: #f7f7f7;
  cursor: pointer;
}

.colsel-popover .colsel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 8px;
}

.colsel-popover .colsel-item:hover {
  background: rgba(0,0,0,.04);
}

.colsel-popover .colsel-item input {
  transform: translateY(1px);
}

/* optional: small arrow look */
.colsel-popover::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.12);
  border-top: 1px solid rgba(0,0,0,.12);
  transform: rotate(45deg);
  top: -6px;
  left: 16px;
}

.tabs .tab-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.tabs .tab-control:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.tabs .tab-control.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
  font-weight: 500;
  box-shadow: none;
}

.tabs .tab-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}