/* ── Google Font — Inter ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height                : 100%;
  font-family           : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size             : 13.5px;
  color                 : #1e293b;
  background            : #f1f5f9;
  -webkit-font-smoothing: antialiased;
}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-body {
  display        : flex;
  align-items    : center;
  justify-content: center;
  min-height     : 100vh;
  background     : linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 100%);
}
.login-card {
  background    : #fff;
  border-radius : 14px;
  padding       : 40px;
  width         : 380px;
  box-shadow    : 0 8px 40px rgba(0,0,0,.10);
  border        : 1px solid #e2e8f0;
}
.login-header { text-align: center; margin-bottom: 28px; }
.brand        { font-size: 24px; font-weight: 700; color: #0284c7; letter-spacing: 0.06em; }
.brand-sub    { font-size: 12px; color: #64748b; margin-top: 3px; font-weight: 400; }
.login-hint   { font-size: 11.5px; color: #94a3b8; text-align: center; margin-top: 12px; }

/* ── Form ──────────────────────────────────────────────────────────────── */
.form-group        { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 5px;
    letter-spacing: 0.02em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width         : 100%;
  padding       : 9px 12px;
  border        : 1px solid #e2e8f0;
  border-radius : 8px;
  font-size     : 13.5px;
  font-family   : 'Inter', sans-serif;
  color         : #1e293b;
  background    : #fff;
  outline       : none;
  transition    : border-color .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #38bdf8;
  box-shadow  : 0 0 0 3px rgba(56,189,248,.12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint     { font-size: 11.5px; color: #94a3b8; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
button, .btn {
  padding       : 8px 16px;
  border-radius : 8px;
  font-size     : 13px;
  font-weight   : 500;
  cursor        : pointer;
  border        : 1px solid #e2e8f0;
  background    : #fff;
  color         : #1e293b;
  transition    : all .15s;
  font-family   : 'Inter', sans-serif;
  letter-spacing: 0.01em;
}
button:hover, .btn:hover { background: #f1f5f9; }
.btn-primary       { background: #0284c7; color: #fff; border-color: #0284c7; }
.btn-primary:hover { background: #0369a1; border-color: #0369a1; }
.btn-danger        { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.btn-danger:hover  { background: #fee2e2; }
#login-btn {
  width        : 100%;
  margin-top   : 4px;
  padding      : 10px;
  background   : #0284c7;
  color        : #fff;
  border-color : #0284c7;
  font-size    : 14px;
}
#login-btn:hover { background: #0369a1; }

/* ── Alert ─────────────────────────────────────────────────────────────── */
.alert         { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.alert.success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.alert.danger  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.hidden        { display: none !important; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.layout { display: flex; height: 100vh; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  width         : 220px;
  background    : #ffffff;
  border-right  : 1px solid #e2e8f0;
  display       : flex;
  flex-direction: column;
  flex-shrink   : 0;
}
.sidebar-logo { padding: 22px 18px 16px; border-bottom: 1px solid #f1f5f9; }
.sidebar .brand     { font-size: 15px; color: #0284c7; display: block; font-weight: 700; letter-spacing: 0.06em; }
.sidebar .brand-sub { font-size: 10px; color: #94a3b8; display: block; margin-top: 2px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; }

#sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.nav-group-label {
  padding       : 14px 18px 4px;
  font-size     : 10px;
  font-weight   : 600;
  color         : #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.nav-item {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 9px 18px;
  font-size      : 13px;
  font-weight    : 400;
  color          : #475569;
  text-decoration: none;
  border-left    : 2px solid transparent;
  transition     : all .15s;
}
.nav-item:hover  { color: #0284c7; background: #f0f9ff; }
.nav-item.active { color: #0284c7; background: #e0f2fe; border-left-color: #0284c7; font-weight: 500; }
.nav-empty       { padding: 12px 18px; font-size: 12px; color: #94a3b8; }

.sidebar-footer { padding: 14px 18px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 6px; }
.sidebar-footer span   { font-size: 12.5px; color: #475569; font-weight: 500; }
.sidebar-footer button { background: transparent; color: #94a3b8; border-color: #e2e8f0; font-size: 12px; padding: 5px 10px; }
.sidebar-footer button:hover { color: #dc2626; background: #fef2f2; border-color: #fecaca; }

/* ── Main content ──────────────────────────────────────────────────────── */
.main-content   { flex: 1; overflow-y: auto; padding: 24px 28px; }
.page-header    { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h2 { font-size: 19px; font-weight: 600; color: #0f172a; letter-spacing: -0.01em; }

/* ── Stats ─────────────────────────────────────────────────────────────── */
.stats-row  { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.stat-card  { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.stat-label { font-size: 11.5px; color: #64748b; margin-bottom: 4px; font-weight: 500; letter-spacing: 0.02em; }
.stat-val   { font-size: 26px; font-weight: 600; color: #0f172a; letter-spacing: -0.02em; }
.stat-val.blue  { color: #0284c7; }
.stat-val.green { color: #16a34a; }
.stat-val.red   { color: #dc2626; }
.stat-val.amber { color: #d97706; }

/* ── Card / Table ──────────────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }

.table-toolbar { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; display: flex; gap: 8px; align-items: center; }
.table-toolbar input {
  width        : 320px;
  padding      : 7px 12px;
  border       : 1px solid #e2e8f0;
  border-radius: 8px;
  font-size    : 13.5px;
  font-family  : 'Inter', sans-serif;
  outline      : none;
}
.table-toolbar input:focus { border-color: #38bdf8; }

table    { width: 100%; border-collapse: collapse; }
thead th {
  padding       : 10px 16px;
  font-size     : 11px;
  font-weight   : 600;
  color         : #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align    : left;
  background    : #f8fafc;
  border-bottom : 1px solid #e2e8f0;
}
tbody td {
  padding        : 11px 16px;
  border-bottom  : 1px solid #f8fafc;
  font-size      : 13.5px;
  vertical-align : middle;
  color          : #334155;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td      { background: #f8fafc; }

/* Clickable rows */
.clickable-row          { cursor: pointer; }
.clickable-row:hover td { background: #eff6ff !important; }

/* Table helpers */
.muted     { color: #94a3b8 !important; font-size: 12.5px; }
.bold      { font-weight: 500; color: #0f172a !important; }
.empty-row { text-align: center; color: #94a3b8; padding: 32px !important; font-size: 13.5px; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge          { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 500; }
.badge-active   { background: #f0fdf4; color: #16a34a; }
.badge-locked   { background: #fef2f2; color: #dc2626; }
.badge-inactive { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.badge-group    { background: #eff6ff; color: #2563eb; }

/* ── Action buttons ────────────────────────────────────────────────────── */
.action-btns { display: flex; gap: 4px; }
.icon-btn    {
  width          : 28px;
  height         : 28px;
  border         : 1px solid #e2e8f0;
  border-radius  : 6px;
  background     : transparent;
  cursor         : pointer;
  font-size      : 13px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #64748b;
  transition     : all .15s;
}
.icon-btn:hover            { background: #f1f5f9; color: #1e293b; }
.icon-btn.lock-btn:hover   { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.icon-btn.unlock-btn:hover { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.icon-btn.delete-btn:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  position       : fixed;
  inset          : 0;
  background     : rgba(15,23,42,.35);
  display        : flex;
  align-items    : center;
  justify-content: center;
  z-index        : 100;
  backdrop-filter: blur(2px);
}
.modal         { background: #fff; border-radius: 12px; width: 440px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.modal-header  { padding: 18px 20px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.modal-close   { background: none; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; line-height: 1; padding: 0; }
.modal-body    { padding: 20px; }
.modal-footer  { padding: 14px 20px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 8px; }

/* ── Password strength ─────────────────────────────────────────────────── */
.strength-bar  { height: 4px; background: #e2e8f0; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.strength-fill { height: 100%; border-radius: 2px; width: 0; transition: width .25s, background .25s; }

/* ── Unauthorised ──────────────────────────────────────────────────────── */
.unauth-body  { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f1f5f9; }
.unauth-card  { background: #fff; border-radius: 14px; padding: 48px 40px; text-align: center; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.unauth-card h2 { font-size: 20px; font-weight: 600; color: #0f172a; margin: 16px 0 8px; }
.unauth-card p  { font-size: 13.5px; color: #64748b; margin-bottom: 24px; }

/* ── Filter bar ────────────────────────────────────────────────────────── */
.filter-bar {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 12px 16px;
  flex-wrap  : wrap;
}
.filter-bar input,
.filter-bar select {
  padding      : 7px 12px;
  border       : 1px solid #e2e8f0;
  border-radius: 8px;
  font-size    : 13.5px;
  font-family  : 'Inter', sans-serif;
  outline      : none;
  background   : #fff;
  color        : #1e293b;
}
.filter-bar input  { flex: 1; min-width: 280px; }
.filter-bar select { width: 180px; }
.filter-bar input:focus,
.filter-bar select:focus { border-color: #38bdf8; }

/* ── Table footer ──────────────────────────────────────────────────────── */
.table-footer { padding: 10px 16px; font-size: 12.5px; color: #94a3b8; border-top: 1px solid #f1f5f9; }