/* SiS Analytics — основной стиль, тёмная тема из sis_analytics_master.html */

:root{
  --bg:#070a0f;
  --bg2:#0c1018;
  --surface:#111620;
  --surface2:#161c28;
  --border:#1e2638;
  --border2:#2d3748;
  --accent:#ff6b35;
  --accent2:#4a9eff;
  --green:#00d68f;
  --yellow:#ffd166;
  --red:#ff4757;
  --purple:#a78bfa;
  --text:#dde4f0;
  --text2:#9aa7b8;
  --muted:#64748b;
  --dim:#2d3748;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Display','Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.app{display:flex;min-height:100vh}

.sidebar{
  width:240px;
  background:var(--bg2);
  border-right:1px solid var(--border);
  padding:0;
  position:fixed;
  top:0;left:0;bottom:0;
  overflow-y:auto;
}
.sidebar-brand{
  padding:24px 20px;
  border-bottom:1px solid var(--border);
}
.sidebar-brand-logo{
  font-family:'Unbounded','Inter',sans-serif;
  font-size:18px;
  font-weight:900;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-0.5px;
}
.sidebar-brand-sub{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-top:4px;
}
.sidebar-nav{padding:12px 0}
.sidebar-section{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  padding:12px 20px 6px;
  font-weight:700;
}
.sidebar-item{
  display:block;
  padding:10px 20px;
  color:var(--text2);
  font-size:14px;
  border-left:2px solid transparent;
  transition:all 0.15s;
}
.sidebar-item:hover{
  color:var(--text);
  background:rgba(255,255,255,0.03);
  text-decoration:none;
}
.sidebar-item.active{
  color:var(--accent);
  background:rgba(255,107,53,0.08);
  border-left-color:var(--accent);
}
.sidebar-item-icon{
  display:inline-block;
  width:20px;
  margin-right:10px;
  text-align:center;
}

.main{
  margin-left:240px;
  flex:1;
  min-height:100vh;
}

.topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:14px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:10;
}
.topbar-title{
  font-size:18px;
  font-weight:700;
  color:var(--text);
}
.topbar-actions{
  display:flex;
  gap:16px;
  align-items:center;
}
.topbar-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:13px;
}
.topbar-user-name{color:var(--text);font-weight:600}
.topbar-user-role{color:var(--muted);font-size:11px}

.content{padding:28px}

/* Cards & grid */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
}
.card-title{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.8px;
  font-weight:700;
  margin-bottom:10px;
}
.card-value{
  font-size:32px;
  font-weight:900;
  color:var(--text);
  line-height:1;
  font-family:'IBM Plex Mono',monospace;
}
.card-value-sm{font-size:22px}
.card-sub{
  font-size:12px;
  color:var(--text2);
  margin-top:6px;
}

.card-accent{border-color:rgba(255,107,53,0.3)}
.card-accent .card-value{color:var(--accent)}
.card-green{border-color:rgba(0,214,143,0.3)}
.card-green .card-value{color:var(--green)}
.card-red{border-color:rgba(255,71,87,0.3)}
.card-red .card-value{color:var(--red)}
.card-yellow{border-color:rgba(255,209,102,0.3)}
.card-yellow .card-value{color:var(--yellow)}

/* Section headers */
.section{margin-top:28px}
.section-title{
  font-size:16px;
  font-weight:700;
  color:var(--text);
  margin-bottom:14px;
}

/* Table */
.table{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  border-collapse:collapse;
}
.table th{
  background:var(--bg2);
  padding:12px 16px;
  text-align:left;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-bottom:1px solid var(--border);
}
.table td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(255,255,255,0.02)}

/* Badges */
.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.badge-green{background:rgba(0,214,143,0.15);color:var(--green);border:1px solid rgba(0,214,143,0.3)}
.badge-red{background:rgba(255,71,87,0.15);color:var(--red);border:1px solid rgba(255,71,87,0.3)}
.badge-yellow{background:rgba(255,209,102,0.15);color:var(--yellow);border:1px solid rgba(255,209,102,0.3)}
.badge-gray{background:rgba(100,116,139,0.15);color:var(--muted);border:1px solid var(--border2)}

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:10px;
  border:1px solid var(--border2);
  background:var(--surface2);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.15s;
  text-decoration:none;
}
.btn:hover{background:var(--surface);border-color:var(--muted);text-decoration:none}
.btn-primary{
  background:linear-gradient(135deg,var(--accent) 0%,#ff8155 100%);
  border-color:transparent;
  color:#fff;
}
.btn-primary:hover{filter:brightness(1.1)}
.btn-sm{padding:6px 12px;font-size:12px}

/* Login page */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--bg);
}
.login-card{
  width:100%;
  max-width:420px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px 36px;
}
.login-logo{
  text-align:center;
  font-family:'Unbounded','Inter',sans-serif;
  font-size:24px;
  font-weight:900;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:6px;
  letter-spacing:-0.5px;
}
.login-sub{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:32px;
}
.form-group{margin-bottom:18px}
.form-label{
  display:block;
  font-size:12px;
  color:var(--text2);
  margin-bottom:6px;
  font-weight:600;
}
.form-input{
  width:100%;
  padding:12px 14px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  transition:border-color 0.15s;
}
.form-input:focus{
  outline:none;
  border-color:var(--accent);
}
.form-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text2);
  cursor:pointer;
}
.form-checkbox input{accent-color:var(--accent)}
.form-error{
  background:rgba(255,71,87,0.1);
  border:1px solid rgba(255,71,87,0.3);
  color:var(--red);
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  margin-bottom:16px;
}
.form-submit{
  width:100%;
  padding:13px;
  background:linear-gradient(135deg,var(--accent) 0%,#ff8155 100%);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  margin-top:8px;
  transition:filter 0.15s;
}
.form-submit:hover{filter:brightness(1.1)}

/* Empty state */
.empty{
  padding:40px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* Health score ring (placeholder) */
.health-ring{
  display:flex;
  align-items:center;
  gap:20px;
}
.health-score-big{
  font-size:56px;
  font-weight:900;
  font-family:'IBM Plex Mono',monospace;
  line-height:1;
}
.health-score-big.good{color:var(--green)}
.health-score-big.mid{color:var(--yellow)}
.health-score-big.bad{color:var(--red)}