/* Workforce Suite — UI styling.
   Dark, gradient-accented operations console aesthetic, mirroring the look of
   the Aptus Workforce sign-in / dashboard experience. */

:root {
  --bg:        #070b16;
  --bg-2:      #0b1120;
  --panel:     #0e1628;
  --panel-2:   #131d33;
  --border:    #1e2a44;
  --text:      #e6edf7;
  --muted:     #8a98b5;
  --brand:     #6366f1;
  --brand-2:   #22d3ee;
  --green:     #34d399;
  --amber:     #fbbf24;
  --red:       #f87171;
  --radius:    16px;
  --shadow:    0 20px 60px -20px rgba(0,0,0,.7);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* Background: layered radial gradients + fine noise overlay (like Aptus). */
.bg-fx {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(800px 600px at 100% 110%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.bg-fx::after {
  content: ""; position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.logo { height: 30px; color: var(--text); }

/* ---------- Split auth layout ---------- */
.auth {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 100vh;
}
@media (max-width: 920px) { .auth { grid-template-columns: 1fr; } .auth__hero { display: none; } }

.auth__hero {
  padding: 56px clamp(40px, 6vw, 90px);
  display: flex; flex-direction: column; gap: 34px;
  border-right: 1px solid var(--border);
}
.auth__hero h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05; margin: 18px 0 0; letter-spacing: -.02em;
}
.auth__hero h1 span {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth__hero p.lead { color: var(--muted); font-size: 18px; max-width: 30ch; line-height: 1.5; }

.stats { display: flex; gap: 38px; flex-wrap: wrap; }
.stats .num { font-size: 30px; font-weight: 800; }
.stats .num span { color: var(--brand-2); }
.stats .lbl { color: var(--muted); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

/* Command center mock */
.cc {
  margin-top: auto;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.cc__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.cc__live { color: var(--green); display: inline-flex; align-items: center; gap: 7px; }
.cc__live::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0);} 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0);} }
.cc__tabs { display: flex; gap: 8px; padding: 14px 16px 4px; }
.cc__tabs span { font-size: 12px; padding: 6px 12px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.cc__tabs span.on { background: rgba(99,102,241,.2); color: var(--text); }
.cc__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px 16px 18px; }
.cc__cell { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.cc__cell b { display:block; font-size: 22px; }
.cc__cell small { color: var(--muted); }
.spark { display:flex; align-items:flex-end; gap:3px; height:36px; margin-top:8px; }
.spark i { flex:1; background: linear-gradient(180deg,var(--brand),var(--brand-2)); border-radius:2px; opacity:.85; }

/* ---------- Auth card ---------- */
.auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px; }
.card {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgba(19,29,51,.9), rgba(11,17,32,.95));
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 34px;
  backdrop-filter: blur(6px);
}
.card h2 { margin: 18px 0 4px; font-size: 22px; }
.card .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: .15s; font-family: inherit;
}
.btn:hover { border-color: var(--brand); }
.btn--primary { background: linear-gradient(90deg, var(--brand), #4f46e5); border: none; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--block { margin-top: 6px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

.oauth { display: grid; gap: 10px; }

.divider { display:flex; align-items:center; gap: 12px; color: var(--muted); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background: var(--border); }

.field { margin-bottom: 14px; }
.field label { display:block; font-size: 12px; letter-spacing:.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px; border-radius: 11px; font-size: 15px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit;
}
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.field .row { display:flex; justify-content: space-between; align-items:center; }

.note { font-size: 13px; color: var(--muted); margin-top: 18px; text-align:center; }
.foot { margin-top: 20px; text-align:center; font-size: 11px; color: var(--muted); letter-spacing:.03em; }

.alert { padding: 11px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; display:none; }
.alert--err { background: rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.4); color: #fecaca; }
.alert--ok  { background: rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.4); color: #bbf7d0; }
.alert.show { display:block; }

/* ---------- Dashboard ---------- */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; } .side { display:none; } }
.side { border-right: 1px solid var(--border); padding: 22px 18px; background: rgba(11,17,32,.6); }
.side .logo { margin-bottom: 28px; }
.nav a { display:flex; align-items:center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.nav a:hover, .nav a.on { background: var(--panel-2); color: var(--text); text-decoration:none; }
.nav a i { font-size: 17px; }

.main { padding: 26px clamp(20px,3vw,40px); }
.topbar { display:flex; align-items:center; justify-content: space-between; margin-bottom: 26px; }
.topbar h1 { font-size: 22px; margin: 0; }
.who { display:flex; align-items:center; gap: 12px; font-size: 14px; color: var(--muted); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,var(--brand),var(--brand-2)); display:flex; align-items:center; justify-content:center; font-weight:700; color:#0b1120; }

.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 16px; margin-bottom: 26px; }
.kpi { background: var(--panel); border:1px solid var(--border); border-radius: 14px; padding: 18px; }
.kpi .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing:.04em; }
.kpi .val { font-size: 30px; font-weight: 800; margin-top: 6px; }
.kpi .val small { font-size: 14px; color: var(--muted); font-weight: 500; }

.panel { background: var(--panel); border:1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 22px; }
.panel h3 { margin: 0 0 14px; font-size: 16px; display:flex; align-items:center; gap:8px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }

table { width:100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align:left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing:.04em; }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; font-weight:600; }
.badge--online { background: rgba(52,211,153,.15); color: var(--green); }
.badge--idle { background: rgba(251,191,36,.15); color: var(--amber); }
.badge--offline { background: rgba(248,113,113,.15); color: var(--red); }
.badge--low { background: rgba(52,211,153,.15); color: var(--green); }
.badge--medium { background: rgba(251,191,36,.15); color: var(--amber); }
.badge--high { background: rgba(248,113,113,.15); color: var(--red); }

.bar { display:flex; align-items:flex-end; gap: 8px; height: 160px; }
.bar .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.bar .col .fill { width: 70%; background: linear-gradient(180deg,var(--brand),var(--brand-2)); border-radius: 5px 5px 0 0; }
.bar .col small { color: var(--muted); font-size: 11px; }

.health-bar { height: 6px; background: var(--panel-2); border-radius: 999px; overflow:hidden; width: 80px; }
.health-bar i { display:block; height:100%; background: linear-gradient(90deg,var(--green),var(--brand-2)); }

.skeleton { color: var(--muted); padding: 14px 0; }