/* ═══ ADMIN RESKIN — Monday.com / White Sidebar ═══ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface2: #f0f1f5;
  --border: #e6e9ef;
  --accent: #0AAEEA;
  --accent2: #0898CC;
  --success: #00c875;
  --warning: #fdab3d;
  --danger: #e2445c;
  --text: #323338;
  --muted: #676879;
  --mono: 'Figtree', -apple-system, sans-serif;
  --head: 'Figtree', -apple-system, sans-serif;
  --body: 'Figtree', -apple-system, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── LOGIN ── */
.login-wrap { background: var(--bg); }
.login-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  padding: 44px;
}
.login-logo {
  font-weight: 700;
  font-size: 28px;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--text);
  letter-spacing: -0.5px;
}
.login-sub {
  font-family: var(--body);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.login-error {
  background: #fce4e8;
  border: 1px solid rgba(226,68,92,0.2);
  color: var(--danger);
  border-radius: 8px;
}
.login-box .btn-primary {
  background: #00c875;
}
.login-box .btn-primary:hover {
  background: #00a562;
}

/* ── SIDEBAR (white) ── */
.sidebar {
  background: #fff;
  border-right: 1px solid var(--border);
  width: 240px;
}
.sidebar-logo {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border);
}
.logo-mark {
  font-weight: 700;
  font-size: 20px;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--text);
  letter-spacing: -0.3px;
}
.logo-sub {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.nav-label {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.nav-item {
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
}
.nav-item:hover {
  background: var(--surface2);
  color: var(--text);
}
.nav-item.active {
  background: #e6f7ef;
  color: #00854d;
}
.nav-badge {
  background: #e2445c;
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  border-radius: 12px;
}
.admin-avatar {
  border-radius: 50%;
  background: #00c875;
}
.sidebar-footer {
  border-top: 1px solid var(--border);
}
#sidebar-name { color: var(--text); }
.logout-btn {
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  font-family: var(--body);
  font-weight: 500;
}
.logout-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ── TOPBAR ── */
.topbar {
  height: 52px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}
.topbar-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.2px;
}

/* ── CONTENT ── */
.content { padding: 24px 32px; }

/* ── BUTTONS ── */
.btn {
  font-family: var(--body);
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: #00c875;
  color: #fff;
}
.btn-primary:hover { background: #00a562; }
.btn-ghost {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ── STAT CARDS ── */
.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.stat-card::before {
  height: 3px;
  border-radius: 8px 8px 0 0;
  background: var(--accent-c, #00c875);
}
.stat-label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.stat-value {
  font-weight: 700;
  font-size: 28px;
  color: var(--text);
}
.stat-sub { font-size: 13px; }

/* ── SECTIONS ── */
.section-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.2px;
}
.section-sub { font-size: 13px; }

/* ── TABLES ── */
.table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
thead th {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  background: #f6f7fb;
  padding: 10px 16px;
}
tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
}
tbody tr:hover td { background: #f6f7fb; }

/* ── BADGES (coloured pills) ── */
.badge {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
}
.badge::before { display: none; }
.badge-active { background: #d4f7e6; color: #006644; }
.badge-pending { background: #fff4e2; color: #7f5700; }
.badge-suspended { background: #fce4e8; color: #b91c33; }

/* ── MODAL ── */
.modal {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.modal-overlay {
  background: rgba(50,51,56,0.5);
  backdrop-filter: blur(4px);
}
.modal-title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.2px;
}

/* ── FORMS ── */
.form-label {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.form-input {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  padding: 10px 14px;
}
.form-input:focus {
  border-color: #00c875;
  box-shadow: 0 0 0 3px rgba(0,200,117,0.12);
}

/* ── TABS (underline style) ── */
.tabs {
  background: transparent;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  width: 100%;
}
.tab {
  border-radius: 0;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab.active {
  background: transparent;
  color: #00c875;
  border-bottom-color: #00c875;
}

/* ── PROVISION STEPS ── */
.step {
  background: #f6f7fb;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.step-running { background: rgba(0,200,117,0.1); color: #00c875; }
.step-done { background: rgba(0,200,117,0.1); color: #00c875; }
.step-fail { background: rgba(226,68,92,0.1); color: #e2445c; }

/* ── TOASTS ── */
.toast {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  color: var(--text);
}
.toast-success { border-left: 3px solid #00c875; }
.toast-error { border-left: 3px solid #e2445c; }

/* ── MISC ── */
.subdomain { color: #00c875; font-family: var(--body); }
.live-dot { color: #00c875; font-family: var(--body); font-size: 11px; font-weight: 600; }
.live-dot::before { background: #00c875; }
.empty { color: var(--muted); }
.loading { border-color: rgba(0,200,117,0.2); border-top-color: #00c875; }