/* =========================================================
   THEME SYSTEM (LIGHT & DARK) — TinoNguyen Admin
   - Dark: nền tối, CHỮ SÁNG, border dịu (không lóa)
   - Thêm accent hiện đại, radius/shadow, components cơ bản
   ========================================================= */

/* ========== LIGHT ========== */
:root {
  /* Palette chính */
  --bg: #f5f7fb;
  --card: #ffffff;
  --card-2: #f9fafb;
  --text: #0f172a;
  --text-muted: #6b7280;
  --border: #e5e7eb;

  --primary: #4f46e5;
  --primary-hover: #4338ca;

  /* Sidebar */
  --sidebar-bg: #111827;
  --sidebar-hover: #1f2937;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #ffffff;

  /* Form */
  --input-bg: #ffffff;

  /* Accents */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;
  --accent-1: #7c3aed;  /* tím neon */
  --accent-2: #06b6d4;  /* cyan */
  --accent-3: #f472b6;  /* hồng */

  /* Design tokens */
  --radius: 12px;
  --shadow: 0 4px 12px rgba(0,0,0,.06);
  --font-size-base: 1rem;
  --font-size-sm: .925rem;

  /* Hiệu ứng viền sáng nhẹ cho KPI */
  --kpi-ring: 0 0 0 1px rgba(79,70,229,.15), 0 10px 24px rgba(79,70,229,.08);
}

/* ========== DARK ========== */
.dark {
  /* NỀN TỐI, CHỮ SÁNG */
  --bg: #0b1220;          /* nền tổng thể */
  --card: #0f172a;        /* khối card */
  --card-2: #0c1627;      /* hover/row */
  --text: #e5e7eb;        /* chữ sáng */
  --text-muted: #9ca3af;  /* chữ phụ */
  --border: #1f2a3b;      /* viền tối dịu, không lóa */

  --primary: #6366f1;
  --primary-hover: #4f46e5;

  --sidebar-bg: #0a0f1c;
  --sidebar-hover: #141c2b;
  --sidebar-text: #9aa4b2;
  --sidebar-active: #ffffff;

  --input-bg: #141c2b;

  --success: #4ade80;
  --warning: #fbbf24;
  --danger:  #f87171;
  --info:    #60a5fa;

  --accent-1: #8b5cf6;   /* tím neon */
  --accent-2: #22d3ee;   /* cyan */
  --accent-3: #fb7185;   /* hồng */

  --shadow: 0 6px 18px rgba(0,0,0,.35);
  --kpi-ring: 0 0 0 1px rgba(99,102,241,.22), 0 12px 26px rgba(0,0,0,.45);
}

/* ========== BASE ========== */
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-base);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
}
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary-hover); }
.text-muted { color: var(--text-muted) !important; }

/* ========== SIDEBAR ========== */
.sidebar {
  width: 260px; background: var(--sidebar-bg); color: var(--sidebar-text);
  flex-shrink: 0; will-change: scroll-position;
}
.brand {
  height: 56px; display:flex; align-items:center; gap:.5rem;
  padding: 0 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand .logo { width: 28px; height: 28px; background: var(--primary); border-radius: 6px; }
.side-title {
  font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing:.05em;
  padding:.75rem 1rem .25rem; opacity:.85;
}
.side-link {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem 1rem; border-radius: var(--radius);
  color: var(--sidebar-text); transition: background .15s ease, color .15s ease;
}
.side-link:hover, .side-link.active { background: var(--sidebar-hover); color: var(--sidebar-active); }
.side-link i { width:1.25rem; text-align:center; }

/* ========== TOPBAR ========== */
.topbar {
  background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar input[type="search"] {
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); font-size: var(--font-size-sm);
}
.topbar input::placeholder { color: var(--text-muted); opacity:.85; }
.topbar .btn-icon {
  border: 1px solid var(--border); background: transparent; color: var(--text);
  padding:.4rem .6rem; border-radius: var(--radius);
}
.topbar .btn-icon:hover { background: var(--card-2); }

/* ========== CONTENT & CARD ========== */
.content { padding: 1rem 1.25rem; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* KPI card (đẹp – hiện đại, có viền ring mờ) */
.kpi {
  background: linear-gradient(180deg, rgba(99,102,241,.06), transparent);
  box-shadow: var(--kpi-ring); border-radius: var(--radius);
}

/* ========== FORMS ========== */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
textarea, select {
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: all .2s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity:.85; }
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99,102,241,.28);
  outline: none;
}

/* ========== BUTTONS ========== */
.btn { border-radius: calc(var(--radius) - 4px); }
.btn-primary {
  --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text); --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--card-2); --bs-btn-hover-color: var(--text);
}

/* Accent buttons (tùy chọn) */
.btn-accent-1{ background: var(--accent-1); color:#fff; border:0; }
.btn-accent-2{ background: var(--accent-2); color:#032026; border:0; }
.btn-accent-3{ background: var(--accent-3); color:#2e0613; border:0; }

/* ========== BADGES ========== */
.badge-soft-success { background: rgba(34,197,94,.16);  color: var(--success); }
.badge-soft-warning { background: rgba(245,158,11,.18); color: var(--warning); }
.badge-soft-danger  { background: rgba(239,68,68,.16);  color: var(--danger); }
.badge-soft-info    { background: rgba(99,102,241,.16); color: var(--info); }

/* ========== TABLES ========== */
.table { color: var(--text); border-color: var(--border); }
.table thead th { border-bottom: 1px solid var(--border); background: var(--card-2); }
.table td, .table th { border-color: var(--border); }
.table-hover > tbody > tr:hover {
  background: rgba(99,102,241,.08);
}
.dark .table-hover > tbody > tr:hover {
  background: rgba(99,102,241,.15);
}

/* ========== LIST LINKS (click-through gọn) ========== */
.list-click a { display:block; padding:.42rem .6rem; border-radius:8px; color:var(--text); }
.list-click a:hover { background: var(--card-2); color: var(--primary); }

/* ========== SCROLLBAR (sidebar show-on-hover) ========== */
:root { --sb-track: transparent; --sb-thumb: rgba(255,255,255,.18); --sb-thumb-hover: rgba(255,255,255,.28); }
body:not(.dark){ --sb-thumb: rgba(0,0,0,.18); --sb-thumb-hover: rgba(0,0,0,.28); }
.sidebar { -ms-overflow-style:none; scrollbar-width:none; }
.sidebar::-webkit-scrollbar { width:0; height:0; }
.sidebar:hover { scrollbar-width:thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
.sidebar:hover::-webkit-scrollbar{ width:8px; height:8px; }
.sidebar:hover::-webkit-scrollbar-track{ background: var(--sb-track); }
.sidebar:hover::-webkit-scrollbar-thumb{
  background: var(--sb-thumb); border-radius:8px; border:2px solid transparent; background-clip:padding-box;
}
.sidebar:hover::-webkit-scrollbar-thumb:hover{ background: var(--sb-thumb-hover); }

/* ========== RESPONSIVE ========== */
@media (max-width: 992px){
  .sidebar{
    position: fixed; inset: 0 auto 0 0; transform: translateX(-100%);
    transition: .25s; z-index: 1000;
  }
  .sidebar.open{ transform: none; }
  .overlay{ display:none; position:fixed; inset:0; background: rgba(0,0,0,.35); }
  .overlay.show{ display:block; }
}