:root{
  color-scheme: dark;
  --bg:#0b1220;
  --card: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.08);
  --text:#e8eefc;
  --muted:#b7c3e6;
  --brand:#22c55e;
  --primary:#60a5fa;
  --primary-2:#2563eb;
  --danger:#ef4444;
  --warning:#f59e0b;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.45;
}

a{color: #7dd3fc; text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width: 1240px; width: calc(100% - 32px); margin: 0 auto}

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.86);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 0}

.brand{display:flex; align-items:center; justify-content:center; color: inherit; text-decoration:none; min-height:56px}
.brand:hover{opacity:.95; text-decoration:none}
.app-logo{height:34px; width:auto; max-width:100%; display:block}
.logo-fallback{display:none; font-weight:750; letter-spacing:.2px}
.logo-fallback.is-visible{display:inline-block}

.nav{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.nav-link{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}
.nav-link:hover{background: rgba(255,255,255,.06); text-decoration:none}
.nav-link.is-active{border-color: rgba(125,211,252,.45); background: rgba(125,211,252,.10)}

main.container{padding: 18px 0 42px}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card + .card{margin-top: 16px}

h1,h2,h3{margin: 0 0 12px; letter-spacing:.2px}
h2{font-size: 20px}
h3{font-size: 16px; color: var(--muted); margin-top: 18px}

.page-title{margin: 0 0 12px}
.card-title{margin-top: 0}

/* Split panels (desktop) */
.split{display:grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items:start}

@media (max-width: 900px){
  .app-logo{height:30px}
  .split{grid-template-columns: 1fr}
}

p{margin: 10px 0; color: var(--muted)}

.alert{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  margin: 12px 0;
  background: rgba(255,255,255,.03);
}
.alert-error{border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08)}
.alert-success{border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.08)}
.alert-warning{border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.08)}

label{display:block; margin-top: 12px; font-weight: 650}

.form-grid{display:grid; gap: 12px}
.form-grid + .form-grid{margin-top: 12px}
.form-grid label{margin-top: 0}
.grid-2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.col-span-2{grid-column: span 2}
.col-span-3{grid-column: span 3}

input[type=text], input[type=password], textarea, select{
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
}
input::placeholder, textarea::placeholder{color: rgba(183,195,230,.65)}
textarea{resize: vertical}

input[type=checkbox]{transform: translateY(1px)}

button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(96,165,250,.45);
  background: rgba(96,165,250,.16);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
button:hover{background: rgba(96,165,250,.22)}
button.danger{border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.12)}
button.danger:hover{background: rgba(239,68,68,.18)}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  color: var(--muted);
}

.bulk-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.tab-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-weight: 650;
  font-size: 12px;
}
.tab-link:hover{text-decoration:none; background: rgba(255,255,255,.06)}
.tab-link.is-active{border-color: rgba(125,211,252,.45); background: rgba(125,211,252,.10)}
.tab-count{color: var(--muted); font-weight: 600}

.table-wrap{overflow:auto; border-radius: 14px; border: 1px solid var(--border)}

table{width:100%; border-collapse:collapse; min-width: 420px; background: rgba(255,255,255,.02)}
th, td{padding: 9px 10px; text-align:left; border-bottom: 1px solid rgba(255,255,255,.06); overflow-wrap:anywhere}
th{font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(183,195,230,.85)}
tr:hover td{background: rgba(255,255,255,.03)}

.checkbox-col{width: 36px; padding: 0 4px; text-align:center}
.checkbox-col input[type=checkbox]{width: 16px; height: 16px; margin: 0}

.cell-truncate{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 0}


/* Versions table: keep file column readable, keep version/actions compact */
.table-versions{table-layout: fixed}
.table-versions th:nth-child(2),
.table-versions td:nth-child(2){width: 240px; min-width: 200px}
.table-versions th:nth-child(3),
.table-versions td:nth-child(3){width: 120px}

.domain-col{min-width: 200px}
.domain-link{color: inherit}
.domain-link:hover{text-decoration: underline}
.ghost{
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.08);
}
.ghost:hover{background: rgba(96,165,250,.14)}

.badge-pending{border-color: rgba(245,158,11,.45); color: #fbbf24}
.badge-approved{border-color: rgba(34,197,94,.45); color: #4ade80}
.badge-disabled{border-color: rgba(148,163,184,.45); color: #cbd5f5}
.badge-online{border-color: rgba(34,197,94,.45); color: #4ade80}
.badge-offline{border-color: rgba(148,163,184,.45); color: #cbd5f5}


code{padding: 2px 8px; border-radius: 10px; border:1px solid var(--border); background: rgba(255,255,255,.03)}

hr{border:0; height:1px; background: rgba(255,255,255,.08); margin: 18px 0}

.footer{margin-top: 22px; color: rgba(183,195,230,.7); font-size: 12px; text-align:center}

@media (max-width: 640px){
  .app-logo{height:26px}
  .topbar-inner{flex-direction:column; align-items:flex-start}
  .nav{justify-content:flex-start}
  .split{grid-template-columns: 1fr}
  .grid-2, .grid-3{grid-template-columns: 1fr}
  .col-span-2, .col-span-3{grid-column: auto}
  table{min-width: 360px}
}


.table-sites-compact th, .table-sites-compact td{padding:6px 8px}
.site-details{margin:0}
.site-details > summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer}
.site-details > summary::-webkit-details-marker{display:none}
.site-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0;color:var(--muted)}
.site-actions{display:flex;flex-wrap:wrap;gap:8px}
.site-actions button{margin-top:0;padding:8px 10px}
@media (max-width:640px){.site-meta{grid-template-columns:1fr}}

.attention-wrap{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.attention-card{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:220px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);text-decoration:none}
.attention-card:hover{text-decoration:none;background:rgba(255,255,255,.07)}
.attention-card.is-active{border-color:rgba(125,211,252,.6);background:rgba(125,211,252,.12)}
.attention-title{font-size:13px;color:var(--muted)}
.attention-value{font-weight:800;font-size:18px;color:var(--text)}
.attention-clear{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text);text-decoration:none}
.attention-clear:hover{text-decoration:none;background:rgba(255,255,255,.06)}

.kpi-report{
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.kpi-title{margin:0 0 6px; font-size:16px}
.kpi-meta{color: var(--muted); font-size:12px; margin-bottom:10px}
.kpi-grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px}
.kpi-item{border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:rgba(255,255,255,.02)}
.kpi-item strong{display:block; font-size:18px; margin-top:4px}
.kpi-label{font-size:12px; color:var(--muted)}
.kpi-events{margin-top:10px}
.kpi-events ul{margin:6px 0 0 16px; padding:0}
.kpi-events li{margin:2px 0; color:var(--text)}
@media (max-width: 900px){
  .kpi-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .kpi-grid{grid-template-columns: 1fr;}
}

.customer-subcard{padding:14px}
.customer-actions-inline{display:flex;gap:8px;flex-wrap:wrap}
.is-active-link{font-weight:700;color:var(--primary)}
.site-customer-link{margin:8px 0}
.site-customer-form{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.site-customer-form label{margin-top:0;min-width:220px}
.site-customer-form button{margin-top:0;padding:8px 10px}

/* UI readability refresh */
main.container{padding: 24px 0 56px}
.card{padding:24px}
.card + .card{margin-top:20px}
.page-title{margin-bottom:16px}
.form-grid{gap:16px}
.bulk-actions{margin-bottom:16px; gap:12px}
.tabs{margin-bottom:16px; gap:10px}
.table-wrap{border-radius:16px}
th, td{padding:12px 12px}
.table-sites-compact th, .table-sites-compact td{padding:10px 10px}
.site-details > summary{padding:6px 2px; gap:10px}
.site-meta{gap:12px; margin:12px 0}
.site-actions{gap:10px; margin-top:8px}
.site-customer-link{margin:12px 0}
.site-customer-form{gap:10px}
.attention-wrap{margin:12px 0 18px; gap:12px}
.attention-card{padding:12px 14px}
.kpi-report{margin: 14px 0 18px; padding:14px}
.kpi-grid{gap:10px}

/* Dropdown contrast fix */
select,
select option,
select optgroup{
  background-color:#ffffff;
  color:#0f172a;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
}

@media (max-width: 640px){
  .card{padding:18px}
  .bulk-actions{gap:8px}
  th, td{padding:10px 9px}
}


select{
  border-color: rgba(15,23,42,.22);
}

.inline-form-block{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.inline-form-block button{margin-top:0}

.monitoring-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.monitoring-summary-item{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02)}
.monitoring-summary-item span{display:block;color:var(--muted);font-size:12px}
.monitoring-summary-item strong{display:block;margin-top:4px;color:var(--text)}
.monitoring-raw-details{margin-top:12px;border:1px solid var(--border);border-radius:12px;padding:10px;background:rgba(255,255,255,.02)}
.monitoring-raw-details summary{cursor:pointer;font-weight:650}
.monitoring-raw-details pre{margin:10px 0 0;white-space:pre-wrap;word-break:break-word;font-size:12px;color:var(--muted)}
.badge-severity-critical{border-color:rgba(239,68,68,.55);color:#fca5a5}
.badge-severity-warning{border-color:rgba(245,158,11,.55);color:#fcd34d}
.badge-severity-info{border-color:rgba(96,165,250,.55);color:#93c5fd}
@media (max-width:900px){.monitoring-summary-grid{grid-template-columns:1fr}}