:root {
  --bg: #0f172a;
  --bg-soft: #111827;
  --panel: #111827;
  --panel-soft: #172033;
  --border: #263247;
  --border-soft: #1e293b;
  --text: #e5e7eb;
  --text-soft: #cbd5e1;
  --muted: #94a3b8;
  --primary: #2196f3;
  --primary-hover: #1686db;
  --primary-soft: rgba(33,150,243,.14);
  --success: #22c55e;
  --success-soft: rgba(34,197,94,.14);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,.14);
  --shadow: 0 14px 35px rgba(0,0,0,.24);
  --radius: 16px;
  --radius-small: 10px;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  min-height:100vh;
  margin:0;
  background:radial-gradient(circle at top right,rgba(33,150,243,.08),transparent 34%),linear-gradient(180deg,#0b1220 0%,var(--bg) 100%);
  color:var(--text);
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.5;
}
a{color:inherit}
button,input,textarea,select{font:inherit}

.app-shell{min-height:100vh}
.app-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  min-height:74px;padding:0 34px;
  background:rgba(15,23,42,.94);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-mark{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:linear-gradient(145deg,#2196f3,#0d6fbe);
  box-shadow:0 0 22px rgba(33,150,243,.32);color:#fff;font-size:19px;font-weight:800;
}
.brand-text strong{display:block;color:#fff;font-size:17px}
.brand-text span{display:block;margin-top:1px;color:var(--muted);font-size:12px}
.main-nav{display:flex;align-items:center;gap:7px}
.main-nav a{padding:9px 13px;border-radius:9px;color:var(--text-soft);text-decoration:none;font-weight:650;transition:.18s ease}
.main-nav a:hover,.main-nav a.active{background:var(--primary-soft);color:#7dc4ff}
.header-user{display:flex;align-items:center;gap:12px}
.user-chip{display:flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:var(--bg-soft);color:var(--text-soft);font-size:13px}
.user-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--primary-soft);color:#7dc4ff;font-weight:800}

.page-container,.dashboard{width:min(1460px,calc(100% - 48px));margin:0 auto;padding:34px 0 54px}
.page-header,.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.page-header h1,.topbar h1{margin:0;color:#fff;font-size:clamp(27px,3vw,38px);line-height:1.15;letter-spacing:-.6px}
.page-header p,.topbar p{margin:7px 0 0;color:var(--muted);font-size:15px}

.panel,.locations{
  position:relative;margin-bottom:22px;padding:24px;
  background:linear-gradient(180deg,rgba(23,32,51,.98),rgba(17,24,39,.98));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)
}
.panel h2,.locations h2{margin:0 0 20px;color:#fff;font-size:19px}
.form-panel{max-width:880px}

.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}
.stat-card{position:relative;overflow:hidden;min-height:140px;padding:23px;background:linear-gradient(145deg,#172033,#111827);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:.18s ease}
.stat-card::before{position:absolute;inset:0 auto 0 0;width:4px;background:var(--primary);content:""}
.stat-card::after{position:absolute;top:-32px;right:-32px;width:110px;height:110px;border-radius:50%;background:var(--primary-soft);content:""}
.stat-card:hover{transform:translateY(-2px);border-color:#36516f}
.stat-card span{position:relative;z-index:1;display:block;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.35px;text-transform:uppercase}
.stat-card strong{position:relative;z-index:1;display:block;margin-top:16px;color:#fff;font-size:38px;line-height:1}

.actions,.form-actions{display:flex;flex-wrap:wrap;gap:10px}
.button,.logout{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;border:1px solid var(--border);border-radius:var(--radius-small);background:#172033;color:var(--text);cursor:pointer;text-decoration:none;font-weight:700;transition:.18s ease}
.button:hover,.logout:hover{transform:translateY(-1px);border-color:#3b516d;background:#1e2a40}
.button.primary{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 7px 20px rgba(33,150,243,.22)}
.button.primary:hover{border-color:var(--primary-hover);background:var(--primary-hover)}
.button.danger{border-color:rgba(239,68,68,.42);background:var(--danger-soft);color:#fca5a5}
.button.danger:hover{border-color:var(--danger);background:var(--danger);color:#fff}
.button.small{min-height:34px;padding:6px 10px;font-size:13px}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.form-grid label{display:flex;flex-direction:column;gap:8px;color:var(--text-soft);font-size:13px;font-weight:700}
.form-grid label:has(textarea),.form-grid label:has(input[type="file"]),.form-grid .form-actions,.form-grid .full,.form-grid>.panel{grid-column:1/-1}
input,textarea,select,.form-control{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;outline:none;background:#0f172a;color:var(--text);transition:.18s ease}
textarea{min-height:130px;resize:vertical}
input::placeholder,textarea::placeholder{color:#64748b}
input:focus,textarea:focus,select:focus,.form-control:focus{border-color:var(--primary);background:#111b2d;box-shadow:0 0 0 3px rgba(33,150,243,.14)}
input[type="file"]{padding:8px}
input[type="file"]::file-selector-button{margin-right:12px;padding:8px 11px;border:0;border-radius:8px;background:var(--primary-soft);color:#7dc4ff;cursor:pointer;font-weight:700}
small{color:var(--muted);font-size:12px;font-weight:500}

.table-wrapper{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;background:rgba(15,23,42,.42)}
thead{background:#172033}
th{padding:13px 15px;color:var(--muted);font-size:12px;letter-spacing:.3px;text-align:left;text-transform:uppercase}
td{padding:14px 15px;border-top:1px solid var(--border-soft);color:var(--text-soft);vertical-align:middle}
tbody tr{transition:background .16s ease}
tbody tr:hover{background:rgba(33,150,243,.055)}
td strong{color:#fff}
.table-actions{display:flex;flex-wrap:wrap;gap:7px}
.hash{font-family:Consolas,"Courier New",monospace;color:#93c5fd;font-size:12px}

.alert,.success-box,.error-box{margin-bottom:20px;padding:13px 15px;border:1px solid;border-radius:10px;font-weight:650}
.alert.success,.success-box{border-color:rgba(34,197,94,.4);background:var(--success-soft);color:#86efac}
.alert.error,.error-box{border-color:rgba(239,68,68,.42);background:var(--danger-soft);color:#fca5a5}
.badge{display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border:1px solid var(--border);border-radius:999px;background:#172033;color:var(--text-soft);font-size:12px;font-weight:800}
.badge.primary{border-color:rgba(33,150,243,.35);background:var(--primary-soft);color:#7dc4ff}
.badge.success{border-color:rgba(34,197,94,.35);background:var(--success-soft);color:#86efac}
.badge.danger{border-color:rgba(239,68,68,.35);background:var(--danger-soft);color:#fca5a5}

.login-page{display:grid;min-height:100vh;place-items:center;padding:24px}
.login-card{width:min(440px,100%);padding:32px;background:linear-gradient(180deg,#172033,#111827);border:1px solid var(--border);border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,.35)}
.login-card h1{margin:0;color:#fff;font-size:28px}
.login-card>p{margin:8px 0 24px;color:var(--muted)}
.login-card form{display:grid;gap:16px}
.login-card label{display:grid;gap:7px;color:var(--text-soft);font-size:13px;font-weight:700}

.empty-state{padding:50px 24px;color:var(--muted);text-align:center}
.empty-state strong{display:block;margin-bottom:6px;color:#fff;font-size:18px}
.meta{color:var(--muted);font-size:13px}

@media (max-width:980px){
  .app-header{align-items:flex-start;flex-wrap:wrap;gap:12px;padding:15px 22px}
  .main-nav{order:3;width:100%;overflow-x:auto}
  .stats-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .page-container,.dashboard{width:min(100% - 28px,1460px);padding-top:22px}
  .page-header,.topbar{align-items:flex-start;flex-direction:column}
  .form-grid{grid-template-columns:1fr}
  .form-grid>*{grid-column:1!important}
  .panel,.locations{padding:18px}
  .app-header{padding-inline:14px}
  .brand-text span,.user-chip span{display:none}
  .button,.logout{width:100%}
  .actions,.form-actions{flex-direction:column}
}

.clients-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px;
  color: #e5e7eb;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.page-header h1 {
  margin: 4px 0 8px;
  font-size: 32px;
  color: #f8fafc;
}

.page-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

.page-description {
  margin: 0;
  color: #94a3b8;
}

.refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #111827;
  color: #f8fafc;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.refresh-button:hover {
  background: #1e293b;
  border-color: #475569;
  transform: translateY(-1px);
}

.summary-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(30, 41, 59, 0.96),
      rgba(15, 23, 42, 0.96)
    );
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.summary-card-online {
  border-left: 5px solid #22c55e;
}

.summary-card-offline {
  border-left: 5px solid #ef4444;
}

.summary-card-unknown {
  border-left: 5px solid #64748b;
}

.summary-label {
  display: block;
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 14px;
}

.summary-value {
  font-size: 30px;
  color: #f8fafc;
}

.table-card {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(30, 41, 59, 0.98),
      rgba(15, 23, 42, 0.98)
    );
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.table-card-header h2 {
  margin: 0 0 5px;
  font-size: 20px;
  color: #f8fafc;
}

.table-card-header p {
  margin: 0;
  color: #94a3b8;
  font-size: 14px;
}

.table-search input {
  width: 280px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #334155;
  border-radius: 10px;
  outline: none;
  background: #0f172a;
  color: #f8fafc;
  font: inherit;
}

.table-search input::placeholder {
  color: #64748b;
}

.table-search input:focus {
  border-color: #3b82f6;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.16);
}

.table-wrapper {
  overflow-x: auto;
}

.clients-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.clients-table th {
  padding: 13px 16px;
  background: rgba(51, 65, 85, 0.72);
  color: #cbd5e1;
  font-size: 12px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.clients-table td {
  padding: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  vertical-align: middle;
  background: rgba(15, 23, 42, 0.28);
}

.clients-table tbody tr {
  transition: background 0.2s ease;
}

.clients-table tbody tr:hover td {
  background: rgba(51, 65, 85, 0.42);
}

.host-cell,
.detail-cell,
.last-seen-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.host-cell strong,
.detail-cell strong,
.last-seen-cell strong {
  color: #f1f5f9;
}

.host-cell span,
.detail-cell span,
.last-seen-cell span {
  color: #94a3b8;
  font-size: 13px;
}

.host-cell small,
.detail-cell small {
  color: #64748b;
  font-size: 12px;
}

.sync-badge,
.client-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.sync-online {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.25);
}

.sync-offline {
  color: #f87171;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.25);
}

.sync-unknown {
  color: #cbd5e1;
  background: rgba(100, 116, 139, 0.18);
  border-color: rgba(148, 163, 184, 0.2);
}

.status-ok {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.25);
}

.status-warning {
  color: #facc15;
  background: rgba(234, 179, 8, 0.14);
  border-color: rgba(234, 179, 8, 0.25);
}

.status-critical {
  color: #f87171;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.25);
}

.status-unknown {
  color: #cbd5e1;
  background: rgba(100, 116, 139, 0.18);
  border-color: rgba(148, 163, 184, 0.2);
}

.status-message {
  max-width: 240px;
  margin-top: 7px;
  overflow: hidden;
  color: #94a3b8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  padding: 60px 24px;
  text-align: center;
  color: #94a3b8;
}

.empty-state h3 {
  margin: 0 0 8px;
  color: #f8fafc;
}

@media (max-width: 1000px) {
  .summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .table-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .table-search input {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .clients-page {
    padding: 18px;
  }

  .page-header {
    flex-direction: column;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }
}