/* Linqui Admin — Main CSS */

:root {
  --blue: #1a73e8;
  --blue-light: #4a9ff5;
  --blue-dark: #1a5fcc;
  --green: #1a8a4a;
  --green-light: #34c759;
  --red: #c0392b;
  --red-light: #e74c3c;
  --orange: #e67e22;
  --purple: #8e44ad;
  --teal: #0a9a9a;
  --sidebar-bg: #0f1f4a;
  --sidebar-width: 230px;
  --topbar-height: 56px;
  --font: 'Google Sans', Roboto, Arial, sans-serif;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(26,95,204,0.08);
}

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

body {
  font-family: var(--font);
  font-size: 13px;
  color: #1a2a4a;
  background: #f0f4ff;
  min-height: 100vh;
}

/* ── Login Page ─────────────────────────────────────── */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f1f4a 0%, #1a3a8a 100%);
}

.login-wrap { width: 100%; max-width: 420px; padding: 20px; }

.login-card {
  background: #fff; border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.login-logo {
  text-align: center; margin-bottom: 28px;
}
.login-logo-icon { font-size: 40px; margin-bottom: 8px; }
.login-logo-text { font-size: 26px; font-weight: 700; color: #1a2a4a; }
.login-logo-sub { font-size: 12px; color: #8aaace; margin-top: 2px; }

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-footer {
  text-align: center; margin-top: 24px;
  font-size: 10px; color: #aac;
}

/* ── Form Elements ──────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label {
  font-size: 11px; font-weight: 600; color: #6a8ab0;
  text-transform: uppercase; letter-spacing: 0.8px;
}
.form-input {
  padding: 10px 13px; border: 1.5px solid #c8d8f0;
  border-radius: var(--radius); font-family: var(--font);
  font-size: 13px; color: #1a2a4a; background: #f8faff;
  outline: none; transition: all 0.15s; width: 100%;
}
.form-input:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(74,159,245,0.12);
  background: #fff;
}
.form-hint { font-size: 11px; color: #8aaace; margin-top: 2px; }
.form-divider { border: none; border-top: 1px solid #e8f0fc; margin: 16px 0; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

textarea.form-input { resize: vertical; }
select.form-input { appearance: none; cursor: pointer; }

.input-wrap { position: relative; }
.input-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 14px; color: #8aaace;
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius); border: none;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.15s; outline: none; white-space: nowrap;
}
.btn-full { width: 100%; padding: 12px; font-size: 14px; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }

.btn-primary {
  background: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
  color: #fff; box-shadow: 0 2px 8px rgba(26,95,204,0.28);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(26,95,204,0.4); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; pointer-events: none; transform: none; }

.btn-danger { background: #fff0f0; color: var(--red); border: 1px solid #f5c6c6; }
.btn-danger:hover { background: #ffe0e0; }

.btn-success { background: #f0fff5; color: var(--green); border: 1px solid #b8e6c8; }
.btn-success:hover { background: #e0ffec; }

.btn-ghost { background: #f0f4ff; color: #4a6fa5; border: 1px solid #c8d8f0; }
.btn-ghost:hover { background: #e0ebff; }

/* ── Alert ──────────────────────────────────────────── */
.alert {
  padding: 10px 14px; border-radius: 8px; font-size: 12px;
  display: none; align-items: center; gap: 8px; margin-bottom: 12px;
}
.alert.show { display: flex; }
.alert.success { background: #f0fff5; color: var(--green); border: 1px solid #b8e6c8; }
.alert.error { background: #fff0f0; color: var(--red); border: 1px solid #f5c6c6; }
.alert.info { background: #f0f5ff; color: var(--blue-dark); border: 1px solid #c8d8f0; }

/* ── Search ─────────────────────────────────────────── */
.search-input {
  padding: 8px 12px 8px 32px; border: 1.5px solid #c8d8f0;
  border-radius: 8px; font-family: var(--font); font-size: 12px; color: #1a2a4a;
  outline: none; background: #f8faff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236a8ab0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
  transition: all 0.15s;
}
.search-input:focus { border-color: var(--blue-light); background-color: #fff; box-shadow: 0 0 0 3px rgba(74,159,245,0.12); }

/* ── Badges ─────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600;
}
.badge-active { background: #e8f8ee; color: var(--green); }
.badge-inactive { background: #fff0f0; color: var(--red); }
.badge-dot { width: 5px; height: 5px; border-radius: 50%; }
.badge-active .badge-dot { background: var(--green); }
.badge-inactive .badge-dot { background: var(--red); }

.key-mono {
  font-family: 'DM Mono', monospace; font-size: 11px;
  background: #f0f4ff; padding: 2px 6px; border-radius: 4px; color: var(--blue-dark);
}

.plan-badge {
  padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase;
}
.plan-starter { background: #f0f4ff; color: #4a6fa5; }
.plan-professional { background: #f0fff5; color: var(--green); }
.plan-enterprise { background: #fff0f5; color: #8e44ad; }

.log-action {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: #eef4ff; color: var(--blue-dark); font-weight: 500;
}

.empty-state {
  text-align: center; padding: 40px 20px; color: #8aaace;
}
.empty-icon { font-size: 32px; margin-bottom: 8px; }
.empty-text { font-size: 13px; }

.spinner-row td { text-align: center; padding: 30px; color: #8aaace; }