:root {
  --navy:#10233f; --navy2:#183b68; --blue:#2f66e8; --blue2:#2452bd;
  --cyan:#35a7ff; --bg:#f4f7fb; --surface:#fff; --text:#172033;
  --muted:#68758a; --line:#e2e8f0; --success-bg:#e8f7ef; --success:#13784b;
  --stock-bg:#eaf1ff; --stock:#2a54b6; --warning-bg:#fff3dd; --warning:#9a6200;
  --danger-bg:#fdecec; --danger:#b42318;
  --shadow:0 10px 30px rgba(16,35,63,.08);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Inter,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at top right,rgba(53,167,255,.08),transparent 28rem),var(--bg);color:var(--text)}
a{color:var(--blue);text-decoration:none}
.wrap{width:min(1180px,92%);margin:0 auto}
.topbar{background:linear-gradient(105deg,var(--navy),var(--navy2));box-shadow:0 4px 18px rgba(9,30,66,.16)}
.nav{min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{color:white;display:flex;align-items:center;gap:12px}
.brand-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--blue));font-weight:900}
.brand-copy{display:flex;flex-direction:column;line-height:1.1}
.brand-copy small{margin-top:4px;color:rgba(255,255,255,.68);font-size:.72rem}
.navlinks{display:flex;align-items:center;gap:12px}
.navlinks>a{color:rgba(255,255,255,.88);padding:10px 12px}
.navlinks .nav-button{background:white;color:var(--navy);border-radius:10px;font-weight:700;padding:10px 15px}
.page-shell{padding-bottom:60px}
.hero{padding:70px 0 44px;border-bottom:1px solid rgba(226,232,240,.9)}
.hero h1{margin:0;max-width:800px;font-size:clamp(2.8rem,7vw,5.6rem);line-height:.97;letter-spacing:-.055em;color:var(--navy)}
.hero-subtitle{max-width:700px;margin:18px 0 0;color:var(--muted);font-size:1.08rem;line-height:1.7}
.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:800;color:var(--blue)}
.searchbox{max-width:840px;display:flex;gap:10px;margin-top:30px;padding:8px;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.searchbox input{border:0;outline:0;flex:1;padding:12px 14px;font-size:1rem}
.searchbox button{padding-inline:24px}
.content-section{padding-top:36px}
.toolbar,.pagehead{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:24px 0 28px}
.toolbar h2,.pagehead h1{margin:0;color:var(--navy)}
.pagehead h1{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.035em}
.page-description{color:var(--muted);margin:10px 0 0}
.count-pill{display:inline-flex;min-width:32px;height:32px;align-items:center;justify-content:center;padding:0 9px;margin-left:8px;border-radius:999px;background:#e9efff;color:var(--blue2);font-size:.86rem;vertical-align:middle}
.button,.secondary-button{border:0;border-radius:11px;padding:12px 17px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.button{color:white;background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 8px 18px rgba(47,102,232,.22)}
.secondary-button{color:var(--navy);background:#eef2f7}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(295px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 8px 24px rgba(16,35,63,.055);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cardtop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.badge{padding:6px 10px;border-radius:999px;background:var(--stock-bg);color:var(--stock);font-size:.78rem;font-weight:800}
.badge-active{background:var(--success-bg);color:var(--success)}
.badge-in-stock{background:var(--stock-bg);color:var(--stock)}
.badge-repair{background:var(--warning-bg);color:var(--warning)}
.badge-retired,.badge-lost{background:var(--danger-bg);color:var(--danger)}
.asset-type{color:var(--muted);font-size:.9rem}
.asset-heading{padding:18px 0 16px;border-bottom:1px solid var(--line)}
.asset-heading h3{margin:0;color:var(--navy);font-size:1.18rem}
.asset-model{margin:7px 0 0;color:var(--muted);font-weight:650}
.asset-meta{display:grid;gap:12px;padding:16px 0}
.asset-meta div,.details div{display:flex;flex-direction:column;gap:4px}
.asset-meta span,.details span{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.actions{display:flex;gap:8px;padding-top:4px}
.action-link{padding:8px 11px;border-radius:9px;color:var(--navy);background:#f3f6fa;font-weight:700;font-size:.88rem}
.action-link.primary{color:white;background:var(--blue)}
.danger-link{color:var(--danger)}
.page-actions,.form-actions{display:flex;gap:10px;align-items:center}
.detail-subline{display:flex;gap:12px;align-items:center;margin-top:14px;color:var(--muted)}
.details-card,.form-card,.confirm-card{background:white;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.details-card,.form-card{padding:26px}
.confirm-card{max-width:620px;margin:70px auto;padding:32px}
.confirm-card h1{color:var(--navy);margin-top:6px}
.confirm-card p{color:var(--muted)}
.delete-summary{padding:16px;background:#f7f9fc;border-radius:12px;margin:22px 0;display:flex;flex-direction:column;gap:5px}
.details{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.details>div{padding:17px;background:#f8fafc;border:1px solid #edf1f5;border-radius:12px}
.wide{grid-column:1/-1}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:26px}
.formgrid label{display:flex;flex-direction:column;gap:8px;color:var(--navy);font-size:.9rem;font-weight:750}
input,select,textarea{width:100%;border:1px solid #d9e1eb;border-radius:10px;background:white;padding:12px 13px;font:inherit;color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,102,232,.11)}
.validation,[data-valmsg-for]{color:var(--danger);font-size:.82rem}
.danger{background:var(--danger);box-shadow:none}
.empty{margin-top:20px;background:white;border:1px dashed #cfd8e5;border-radius:16px;text-align:center;padding:42px 20px;color:var(--muted)}
.empty h3{color:var(--navy)}
.footer{padding:26px 0;border-top:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.6)}
.footer-inner{display:flex;justify-content:space-between;gap:20px;font-size:.86rem}
@media(max-width:760px){
  .nav{align-items:flex-start;padding:16px 0}
  .brand-copy small{display:none}
  .navlinks>a:not(.nav-button){display:none}
  .hero{padding-top:48px}
  .searchbox{flex-direction:column}
  .toolbar,.pagehead{align-items:flex-start;flex-direction:column}
  .formgrid,.details{grid-template-columns:1fr}
  .wide{grid-column:auto}
  .page-actions{width:100%}
  .page-actions a{flex:1}
  .footer-inner{flex-direction:column}
}

.compact-hero h1{font-size:clamp(2.6rem,5vw,4.6rem)}
.domain-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.domain-table{width:100%;border-collapse:collapse;min-width:1050px}
.domain-table th,.domain-table td{text-align:left;padding:16px 18px;border-bottom:1px solid #edf1f5;vertical-align:middle}
.domain-table th{background:#f8fafc;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.domain-table td strong{display:block;color:var(--navy)} .domain-table td small{display:block;color:var(--muted);margin-top:4px}
.table-actions{white-space:nowrap}.table-actions a{margin-right:10px;font-weight:700;font-size:.86rem}
.expiry-pill{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:.8rem;font-weight:800}
.expiry-green{background:var(--success-bg);color:var(--success)} .expiry-orange{background:var(--warning-bg);color:var(--warning)}
.expiry-red{background:var(--danger-bg);color:var(--danger)} .expiry-neutral{background:#eef2f7;color:var(--muted)}


/* =========================================================
   Authentication
   ========================================================= */
.logout-form { margin: 0; }
.logout-button {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: white;
  padding: 9px 13px;
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.logout-button:hover { background: rgba(255,255,255,.15); }

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px;
  background:
    radial-gradient(circle at 15% 15%, rgba(53,167,255,.14), transparent 28rem),
    linear-gradient(135deg, #0d1d34, #183b68);
}
.login-shell {
  width: min(1050px, 96vw);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  overflow: hidden;
  border-radius: 26px;
  background: white;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}
.login-brand-panel {
  padding: 70px 60px;
  display: flex;
  align-items: center;
  color: white;
  background:
    linear-gradient(145deg, rgba(47,102,232,.93), rgba(16,35,63,.98));
}
.login-brand {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.login-mark { flex: 0 0 auto; }
.login-kicker {
  margin: 4px 0 12px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .17em;
  color: rgba(255,255,255,.72);
}
.login-brand h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.login-brand p:last-child {
  max-width: 500px;
  margin-top: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.76);
}
.login-card { padding: 60px 48px; }
.login-card h2 {
  margin: 0;
  color: var(--navy);
  font-size: 2rem;
}
.login-help { color: var(--muted); margin: 10px 0 28px; }
.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--navy);
  font-weight: 700;
}
.remember-row {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 6px 0 22px;
  color: var(--muted);
}
.remember-row input { width: auto; }
.login-button { width: 100%; min-height: 48px; }
.login-validation { margin-bottom: 16px; }

/* =========================================================
   Reports
   ========================================================= */
.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}
.report-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.report-card h2 { margin: 0; color: var(--navy); }
.report-card p { color: var(--muted); }
.report-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel { padding: 38px 28px; }
  .login-card { padding: 38px 28px; }
  .report-grid { grid-template-columns: 1fr; }
  .logout-form { width: 100%; }
}