: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;
}
html, body { background: var(--surface); color: var(--ink); font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial; }

/* Buttons */
.btn{ border:1px solid transparent; background:#fff; color:var(--ink); padding:8px 12px; border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,.03); transition: transform .02s ease, background .15s ease, border .15s ease; }
.btn:hover{ background: var(--surface-2); }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: linear-gradient(180deg, var(--brand), var(--brand-2)); color:#fff; border:none; }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-ghost{ background:transparent; border:1px solid var(--border); }
.btn-danger{ background:#ba0517; color:#fff; border:none; }
.icon-btn{ border:none; background:transparent; padding:6px; cursor:pointer; border-radius:8px; }
.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; padding:8px 10px; 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; }

/* Page banner loader */
.banner-loader{ position: sticky; top:40px; z-index: 50; display:flex; align-items:center; justify-content:center; height: 4px; background: transparent; margin-bottom: 4px; }
.banner-loader .dots{ display: inline-flex; gap:6px; }
.banner-loader .dot{ width:6px; height:6px; border-radius:999px; background: var(--brand); opacity:.25; animation: pulse 1s infinite ease-in-out; }
.banner-loader .dot:nth-child(2){ animation-delay:.15s; }
.banner-loader .dot:nth-child(3){ animation-delay:.3s; }
@keyframes pulse{ 0%,100%{ opacity:.2; transform: translateY(0); } 50%{ opacity:1; transform: translateY(-3px); } }

/* 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; }