/* ============================================================
   LicenseHub — Design Kit (Flat / SaaS)
   Bảng màu, token, component đồng nhất cho toàn admin panel.
   Dùng kèm Tailwind CDN (config bên dưới + các class .lh-*).
   ============================================================ */

:root {
  --lh-primary:        #0891B2; /* cyan-600 */
  --lh-primary-hover:  #0E7490; /* cyan-700 */
  --lh-primary-soft:   #ECFEFF; /* cyan-50  */
  --lh-secondary:      #22D3EE; /* cyan-400 */
  --lh-success:        #22C55E; /* green-500*/
  --lh-success-soft:   #F0FDF4;
  --lh-danger:         #EF4444;
  --lh-danger-soft:    #FEF2F2;
  --lh-warning:        #F59E0B;
  --lh-warning-soft:   #FFFBEB;
  --lh-info:           #3B82F6;

  --lh-bg:             #F8FAFC; /* slate-50 nền content */
  --lh-surface:        #FFFFFF;
  --lh-border:         #E2E8F0; /* slate-200 */
  --lh-text:           #0F172A; /* slate-900 */
  --lh-text-muted:     #475569; /* slate-600 */
  --lh-text-subtle:    #94A3B8; /* slate-400 */

  --lh-radius:         10px;
  --lh-shadow-sm:      0 1px 2px rgba(15,23,42,.06);
  --lh-shadow:         0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Fira Sans', system-ui, -apple-system, sans-serif;
  background: var(--lh-bg);
  color: var(--lh-text);
}

h1,h2,h3,h4,.font-mono,.lh-mono {
  font-family: 'Fira Code', ui-monospace, monospace;
}

/* ---------- Scrollbar tinh tế ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; border: 2px solid var(--lh-bg); }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ---------- Sidebar nav item ---------- */
.lh-nav {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: var(--lh-radius);
  color: var(--lh-text-muted); font-weight: 500; font-size: .9rem;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
}
.lh-nav:hover { background: #F1F5F9; color: var(--lh-text); }
.lh-nav.active { background: var(--lh-primary-soft); color: var(--lh-primary-hover); }
.lh-nav.active svg { color: var(--lh-primary); }
.lh-nav svg { width: 19px; height: 19px; flex-shrink: 0; }

/* ---------- Card / Surface ---------- */
.lh-card {
  background: var(--lh-surface);
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  box-shadow: var(--lh-shadow-sm);
}

/* ---------- Button ---------- */
.lh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: var(--lh-radius);
  font-weight: 600; font-size: .875rem; line-height: 1;
  cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s;
  white-space: nowrap;
}
.lh-btn svg { width: 17px; height: 17px; }
.lh-btn:disabled { opacity: .55; cursor: not-allowed; }
.lh-btn-primary   { background: var(--lh-primary); color: #fff; }
.lh-btn-primary:hover:not(:disabled)   { background: var(--lh-primary-hover); }
.lh-btn-success   { background: var(--lh-success); color: #fff; }
.lh-btn-success:hover:not(:disabled)   { background: #16A34A; }
.lh-btn-danger    { background: var(--lh-danger); color: #fff; }
.lh-btn-danger:hover:not(:disabled)    { background: #DC2626; }
.lh-btn-ghost     { background: #fff; color: var(--lh-text-muted); border-color: var(--lh-border); }
.lh-btn-ghost:hover:not(:disabled)     { background: #F8FAFC; color: var(--lh-text); }
.lh-btn-sm { padding: .4rem .7rem; font-size: .8rem; }

/* ---------- Input / Select ---------- */
.lh-input, .lh-select {
  width: 100%;
  padding: .6rem .8rem; font-size: .9rem;
  background: #fff; color: var(--lh-text);
  border: 1px solid var(--lh-border); border-radius: var(--lh-radius);
  transition: border-color .15s, box-shadow .15s;
}
.lh-input::placeholder { color: var(--lh-text-subtle); }
.lh-input:focus, .lh-select:focus {
  outline: none; border-color: var(--lh-secondary);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18);
}
.lh-label { display:block; font-size:.82rem; font-weight:600; color: var(--lh-text); margin-bottom:.4rem; }

/* ---------- Badge trạng thái (đồng nhất) ---------- */
.lh-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.4;
}
.lh-badge .dot { width: 6px; height: 6px; border-radius: 999px; }
.lh-badge-active   { background: var(--lh-success-soft); color: #15803D; }
.lh-badge-active   .dot { background: var(--lh-success); }
.lh-badge-expired  { background: var(--lh-danger-soft);  color: #B91C1C; }
.lh-badge-expired  .dot { background: var(--lh-danger); }
.lh-badge-revoked  { background: #F1F5F9; color: #475569; }
.lh-badge-revoked  .dot { background: #64748B; }
.lh-badge-unused   { background: var(--lh-warning-soft); color: #B45309; }
.lh-badge-unused   .dot { background: var(--lh-warning); }
.lh-badge-lifetime { background: var(--lh-primary-soft); color: var(--lh-primary-hover); }
.lh-badge-lifetime .dot { background: var(--lh-primary); }

/* ---------- Table ---------- */
.lh-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.lh-table thead th {
  text-align: left; padding: .7rem 1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--lh-text-subtle); border-bottom: 1px solid var(--lh-border);
  background: #FBFCFE;
}
.lh-table tbody td { padding: .85rem 1rem; border-bottom: 1px solid #F1F5F9; color: var(--lh-text); }
.lh-table tbody tr:last-child td { border-bottom: none; }
.lh-table tbody tr { transition: background .12s; }
.lh-table tbody tr:hover { background: #FBFCFE; }

/* ---------- Modal ---------- */
.lh-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  z-index: 50; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.lh-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.lh-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 460px;
  box-shadow: 0 20px 50px rgba(15,23,42,.25);
  transform: translateY(8px) scale(.98); transition: transform .2s;
}
.lh-modal-backdrop.open .lh-modal { transform: translateY(0) scale(1); }

/* ---------- Toast ---------- */
.lh-toast {
  display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1rem; border-radius: var(--lh-radius);
  box-shadow: var(--lh-shadow); font-size:.875rem; font-weight:500;
}

/* ---------- Misc ---------- */
.lh-kbd {
  font-family:'Fira Code',monospace; font-size:.78rem; letter-spacing:.02em;
  background:#F1F5F9; border:1px solid var(--lh-border); border-radius:6px;
  padding:.15rem .45rem; color: var(--lh-text);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}