/* =======================================================
   HATI Admin CRM · Style
   ======================================================= */
@import url('style.css');

body.admin {
  background: #F4ECD6;
  color: var(--ink-900);
  overflow: hidden;
}
.admin-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ===== Sidebar ===== */
.sidebar {
  background: linear-gradient(180deg, #0C0A06 0%, #1A150D 100%);
  color: var(--gold-400);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--gold-900);
  overflow-y: auto;
}
.sidebar__brand {
  padding: 24px 22px 20px;
  border-bottom: 1px solid rgba(179,138,44,.2);
  display: flex; align-items: center; gap: 12px;
}
.sidebar__logo {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  color: var(--ink-900);
  display: grid; place-items: center;
  font-family: var(--f-serif); font-weight: 700;
  box-shadow: 0 4px 12px rgba(212,164,55,.3);
}
.sidebar__name { font-family: var(--f-serif); font-weight: 700; color: #fff; line-height: 1; }
.sidebar__sub { font-size: .7rem; letter-spacing: .2em; color: var(--gold-500); margin-top: 3px; text-transform: uppercase; }
.sidebar__nav { padding: 14px 10px; flex: 1; }
.sidebar__section { font-size: .7rem; letter-spacing: .22em; color: var(--gold-700); text-transform: uppercase; padding: 14px 14px 6px; font-weight: 600; }
.sidebar__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #C7B98F;
  font-size: .92rem; font-weight: 500;
  cursor: pointer;
  transition: all .2s var(--ease);
  margin-bottom: 2px;
  position: relative;
}
.sidebar__item:hover { background: rgba(212,164,55,.08); color: var(--gold-400); }
.sidebar__item.is-active {
  background: linear-gradient(135deg, rgba(212,164,55,.18), rgba(212,164,55,.06));
  color: var(--gold-400);
  border: 1px solid rgba(212,164,55,.25);
}
.sidebar__item.is-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--gold-500); border-radius: 0 3px 3px 0; }
.sidebar__ico { width: 20px; flex: 0 0 20px; display: grid; place-items: center; color: inherit; }
.sidebar__badge {
  margin-left: auto;
  background: var(--red-700); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.sidebar__user {
  padding: 14px 16px;
  border-top: 1px solid rgba(179,138,44,.2);
  display: flex; align-items: center; gap: 10px;
}
.sidebar__user-ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--red-700));
  color: #fff; display: grid; place-items: center; font-weight: 700;
}
.sidebar__user-name { color: #fff; font-size: .88rem; font-weight: 600; }
.sidebar__user-role { font-size: .72rem; color: var(--gold-700); }

/* ===== Main ===== */
.main {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #F4ECD6;
}
.topbar2 {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 14px 28px;
  display: flex; align-items: center; gap: 20px;
}
.search {
  flex: 1;
  max-width: 460px;
  position: relative;
}
.search input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 10px;
  padding: 10px 14px 10px 40px;
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s var(--ease);
}
.search input:focus { border-color: var(--gold-600); background: #fff; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-500); }

.topbar2__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.iconbtn2 {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--ink-700);
  transition: all .2s var(--ease);
  position: relative;
}
.iconbtn2:hover { background: var(--gold-100); color: var(--red-800); }
.iconbtn2 .notif-dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red-700);
}

.view {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
}
.view__head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.view__title {
  font-family: var(--f-serif); font-size: 1.8rem; font-weight: 700;
  color: var(--ink-900); margin: 0;
}
.view__sub { color: var(--ink-500); font-size: .92rem; margin-top: 2px; }

/* ===== KPI Cards ===== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  position: relative; overflow: hidden;
  transition: all .25s var(--ease);
}
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi__ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-100), var(--gold-200));
  color: var(--red-800);
  margin-bottom: 14px;
}
.kpi__ico--red { background: linear-gradient(135deg, var(--red-50), #fadfe4); color: var(--red-800); }
.kpi__ico--green { background: linear-gradient(135deg, #dcf5e4, #c2ebd0); color: var(--success); }
.kpi__ico--gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-700)); color: var(--ink-900); }
.kpi__label { font-size: .82rem; color: var(--ink-500); font-weight: 500; }
.kpi__value { font-family: var(--f-serif); font-size: 1.8rem; font-weight: 700; color: var(--ink-900); margin: 4px 0 6px; line-height: 1; }
.kpi__delta { font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.kpi__delta.up { color: var(--success); }
.kpi__delta.down { color: var(--danger); }
.kpi__spark { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; opacity: .5; pointer-events: none; }

/* ===== Cards / Panels ===== */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.panel__title { font-family: var(--f-serif); font-size: 1.15rem; font-weight: 700; margin: 0; }

.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ===== Table ===== */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; padding: 12px 14px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; border-bottom: 1px solid var(--line); background: var(--cream); }
.tbl td { padding: 14px; border-bottom: 1px solid var(--line-soft); }
.tbl tr:hover td { background: var(--cream); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl__actions { display: flex; gap: 6px; }
.tbl__actions button {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--cream); color: var(--ink-700);
  transition: all .2s var(--ease);
}
.tbl__actions button:hover { background: var(--gold-600); color: var(--ink-900); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  background: var(--cream); color: var(--ink-700);
}
.chip--new { background: #E5E5E5; color: #555; }
.chip--consult { background: #FDF1D5; color: #8E6C1E; }
.chip--quote { background: #F3E9D2; color: #8E6C1E; }
.chip--nego { background: #FAE9B1; color: #6F5415; }
.chip--won { background: #D9F2E1; color: #2F7A4D; }
.chip--lost { background: #FCE0E3; color: #B8323C; }
.chip--care { background: #FCE7EC; color: #6B1528; }
.chip--success { background: #D9F2E1; color: #2F7A4D; }
.chip--warn { background: #FDF1D5; color: #C28A14; }
.chip--danger { background: #FCE0E3; color: #B8323C; }
.chip--info { background: #DBEAFE; color: #1D4ED8; }

/* ===== Avatar ===== */
.ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--red-700));
  color: #fff;
  display: inline-grid; place-items: center;
  font-weight: 700; font-size: .82rem;
  vertical-align: middle; flex-shrink: 0;
}
.ava--sm { width: 28px; height: 28px; font-size: .72rem; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell b { display: block; font-weight: 600; color: var(--ink-900); font-size: .9rem; }
.user-cell span { color: var(--ink-500); font-size: .78rem; }

/* ===== Kanban pipeline ===== */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.kanban__col {
  flex: 0 0 280px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.kanban__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kanban__title { font-weight: 700; font-size: .86rem; display: flex; align-items: center; gap: 8px; }
.kanban__title::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--col); }
.kanban__count { background: #fff; padding: 2px 10px; border-radius: 999px; font-size: .76rem; color: var(--ink-500); border: 1px solid var(--line); }
.kanban__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: grab;
  transition: all .2s var(--ease);
}
.kanban__card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); border-color: var(--gold-600); }
.kanban__card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kanban__card-name { font-weight: 600; font-size: .88rem; }
.kanban__card-meta { font-size: .76rem; color: var(--ink-500); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.kanban__card-val { font-family: var(--f-serif); color: var(--red-800); font-weight: 700; margin-top: 6px; font-size: .95rem; }

/* ===== Charts (pure CSS) ===== */
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 90px; gap: 12px; align-items: center; font-size: .86rem; }
.bar-row__label { color: var(--ink-700); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.bar-row__label::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--col); }
.bar-row__track { height: 10px; background: var(--ivory); border-radius: 999px; overflow: hidden; }
.bar-row__fill { height: 100%; background: linear-gradient(90deg, var(--gold-600), var(--red-700)); border-radius: 999px; transition: width 1s var(--ease); }
.bar-row__val { text-align: right; font-weight: 600; color: var(--ink-900); font-size: .86rem; }

/* Line chart area */
.linechart { width: 100%; height: 240px; }

/* ===== Buttons ===== */
.btn-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .84rem; font-weight: 600;
  transition: all .2s var(--ease);
  border: 1px solid var(--line);
  background: #fff;
}
.btn-sm:hover { border-color: var(--gold-600); color: var(--red-800); }
.btn-sm--primary { background: linear-gradient(135deg, var(--gold-600), var(--gold-700)); color: var(--ink-900); border-color: var(--gold-500); }
.btn-sm--primary:hover { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--ink-900); transform: translateY(-1px); }
.btn-sm--dark { background: var(--ink-900); color: var(--gold-400); border-color: var(--ink-800); }
.btn-sm--dark:hover { background: var(--ink-800); color: var(--gold-400); }

/* ===== Forms ===== */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-600); background: #fff; }
.field textarea { resize: vertical; min-height: 80px; }

/* ===== Modal ===== */
.modal {
  position: fixed; inset: 0;
  background: rgba(12,10,6,.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal__body {
  background: #fff;
  border-radius: 20px;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--gold-600);
  box-shadow: 0 40px 80px rgba(0,0,0,.3);
  animation: modalIn .25s var(--ease);
}
.modal--lg .modal__body { width: min(900px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(10px); } }
.modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal__head h3 { margin: 0; font-family: var(--f-serif); font-size: 1.3rem; }
.modal__close { width: 36px; height: 36px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-size: 1.3rem; }
.modal__close:hover { background: var(--red-700); color: #fff; }

/* ===== Pancake inbox ===== */
.inbox { display: grid; grid-template-columns: 320px 1fr 320px; height: calc(100vh - 180px); gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.inbox__threads { border-right: 1px solid var(--line); background: var(--cream); overflow-y: auto; }
.inbox__search { padding: 14px; border-bottom: 1px solid var(--line); background: #fff; }
.inbox__search input { width: 100%; border: 1px solid var(--line); background: var(--cream); border-radius: 8px; padding: 8px 12px; font-size: .86rem; outline: none; }
.thread {
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; gap: 10px;
  cursor: pointer;
  transition: all .15s var(--ease);
  position: relative;
}
.thread:hover { background: var(--ivory); }
.thread.is-active { background: var(--gold-100); border-left: 3px solid var(--gold-600); }
.thread__channel {
  position: absolute; bottom: 14px; left: 38px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  font-size: .7rem; color: #fff;
  border: 2px solid var(--cream);
}
.thread__channel--fb { background: #1877F2; }
.thread__channel--zalo { background: #0068FF; }
.thread__channel--ig { background: linear-gradient(135deg, #E4405F, #FFDC80); }
.thread__channel--web { background: var(--gold-600); color: var(--ink-900); }
.thread__body { flex: 1; min-width: 0; }
.thread__top { display: flex; justify-content: space-between; align-items: baseline; }
.thread__name { font-weight: 600; font-size: .88rem; color: var(--ink-900); }
.thread__time { font-size: .72rem; color: var(--ink-500); }
.thread__preview { font-size: .82rem; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.thread__badge { background: var(--red-700); color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-top: 4px; display: inline-block; }

.inbox__chat { display: flex; flex-direction: column; overflow: hidden; }
.inbox__chat-head { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.inbox__chat-head-info { flex: 1; }
.inbox__chat-head-info b { display: block; }
.inbox__chat-head-info span { font-size: .78rem; color: var(--ink-500); }
.inbox__chat-body { flex: 1; overflow-y: auto; padding: 18px; background: var(--cream); }
.inbox__chat-input { padding: 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.inbox__chat-input input { flex: 1; border: 1px solid var(--line); background: var(--cream); border-radius: 10px; padding: 10px 14px; outline: none; font-size: .9rem; font-family: inherit; }
.inbox__chat-input input:focus { border-color: var(--gold-600); background: #fff; }
.inbox__context { border-left: 1px solid var(--line); background: var(--cream); overflow-y: auto; padding: 20px; }
.inbox__context h5 { font-family: var(--f-sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 12px; font-weight: 600; }
.inbox__context-item { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: .86rem; }

/* ===== Content calendar ===== */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day {
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; min-height: 110px;
  font-size: .82rem;
  transition: all .2s var(--ease);
}
.cal-day:hover { border-color: var(--gold-600); }
.cal-day__date { font-weight: 700; color: var(--ink-500); font-size: .74rem; margin-bottom: 8px; }
.cal-day.is-today { background: linear-gradient(135deg, var(--gold-100), var(--cream)); border-color: var(--gold-600); }
.cal-day.is-today .cal-day__date { color: var(--red-800); }
.cal-post {
  background: var(--gold-100);
  border-left: 3px solid var(--gold-600);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: .72rem;
  margin-bottom: 4px;
  cursor: pointer;
}
.cal-post--pub { background: #D9F2E1; border-left-color: var(--success); }
.cal-post--draft { background: #FDF1D5; border-left-color: var(--warn); }
.cal-post--plan { background: #E8E4DA; border-left-color: var(--ink-500); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 1fr; }
  .inbox__threads, .inbox__context { display: none; }
}

/* ===== Utilities ===== */
.flex { display: flex; }
.flex-gap { gap: 12px; }
.flex-between { justify-content: space-between; }
.flex-center { align-items: center; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mt-md { margin-top: 16px; }
.text-right { text-align: right; }
.text-muted { color: var(--ink-500); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-gold { color: var(--gold-700); }
.hidden { display: none !important; }

/* =====================================================================
   DARK + GOLD THEME · đồng bộ với site public (Black #0A0A0A · Gold #C9A96E)
   Áp cho toàn bộ admin — khớp với theme-override.css bên public
   ===================================================================== */
:root {
  --a-bg:        #0A0A0A;
  --a-bg-soft:   #141414;
  --a-surface:   #1A1A1A;
  --a-surface-2: #222018;
  --a-text:      #F5F1E8;
  --a-text-soft: #D8D3C3;
  --a-muted:     #A09A87;
  --a-gold:      #C9A96E;
  --a-gold-light:#E5CC8F;
  --a-gold-dark: #8B7746;
  --a-line:      rgba(201,169,110,0.18);
  --a-line-soft: rgba(201,169,110,0.10);
  --a-success:   #3EBB7E;
  --a-danger:    #E55C6A;
  --a-info:      #6BA8FF;
  --a-warn:      #E5C767;
}

body.admin { background: var(--a-bg) !important; color: var(--a-text) !important; font-family: 'Inter', -apple-system, sans-serif !important; }
.admin-shell { background: var(--a-bg) !important; }

/* Sidebar — đậm hơn, gold accent */
.sidebar { background: linear-gradient(180deg, #0A0A0A 0%, #14110B 100%) !important; border-right: 1px solid var(--a-line) !important; color: var(--a-text-soft) !important; }
.sidebar__brand { border-bottom: 1px solid var(--a-line) !important; }
.sidebar__name { color: #fff !important; }
.sidebar__sub { color: var(--a-gold) !important; }
.sidebar__logo { background: linear-gradient(135deg, var(--a-gold), var(--a-gold-dark)) !important; color: var(--a-bg) !important; }
.sidebar__section { color: var(--a-gold) !important; opacity: .8; }
.sidebar__item { color: var(--a-text-soft) !important; }
.sidebar__item:hover { background: rgba(201,169,110,.08) !important; color: var(--a-gold-light) !important; }
.sidebar__item.is-active { background: rgba(201,169,110,.12) !important; color: var(--a-gold) !important; }
.sidebar__item.is-active::before { background: var(--a-gold) !important; }
.sidebar__badge { background: var(--a-gold) !important; color: var(--a-bg) !important; }
.sidebar__user { border-top: 1px solid var(--a-line) !important; }
.sidebar__user-ava { background: linear-gradient(135deg, var(--a-gold), var(--a-gold-dark)) !important; color: var(--a-bg) !important; }
.sidebar__user-name { color: #fff !important; }
.sidebar__user-role { color: var(--a-muted) !important; }

/* Topbar / search */
.main { background: var(--a-bg) !important; }
.topbar2 { background: rgba(10,10,10,.92) !important; backdrop-filter: blur(20px); border-bottom: 1px solid var(--a-line) !important; }
.search { background: var(--a-surface) !important; border: 1px solid var(--a-line) !important; }
.search input { background: transparent !important; color: var(--a-text) !important; }
.search input::placeholder { color: var(--a-muted) !important; }
.search svg { color: var(--a-muted) !important; }
.iconbtn2 { background: var(--a-surface) !important; border: 1px solid var(--a-line) !important; color: var(--a-text-soft) !important; }
.iconbtn2:hover { background: rgba(201,169,110,.1) !important; color: var(--a-gold) !important; }

/* View head */
.view__title { color: #fff !important; }
.view__sub { color: var(--a-text-soft) !important; }

/* KPI */
.kpi { background: var(--a-surface) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.kpi:hover { border-color: var(--a-gold) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; }
.kpi__ico { background: rgba(201,169,110,.12) !important; color: var(--a-gold) !important; }
.kpi__ico--red { background: rgba(229,92,106,.12) !important; color: var(--a-danger) !important; }
.kpi__ico--green { background: rgba(62,187,126,.12) !important; color: var(--a-success) !important; }
.kpi__ico--gold { background: linear-gradient(135deg, var(--a-gold), var(--a-gold-dark)) !important; color: var(--a-bg) !important; }
.kpi__label { color: var(--a-muted) !important; }
.kpi__value { color: #fff !important; }
.kpi__delta.up { color: var(--a-success) !important; }
.kpi__delta.down { color: var(--a-danger) !important; }

/* Panel */
.panel { background: var(--a-surface) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.panel__title { color: #fff !important; }

/* Table */
.tbl th { background: var(--a-bg-soft) !important; color: var(--a-gold) !important; border-bottom: 1px solid var(--a-line) !important; }
.tbl td { border-bottom: 1px solid var(--a-line-soft) !important; color: var(--a-text) !important; }
.tbl tr:hover td { background: rgba(201,169,110,.05) !important; }
.tbl__actions button { background: var(--a-bg) !important; color: var(--a-text-soft) !important; border: 1px solid var(--a-line) !important; }
.tbl__actions button:hover { background: var(--a-gold) !important; color: var(--a-bg) !important; border-color: var(--a-gold) !important; }

/* Chip — giữ semantic, điều chỉnh nền/chữ cho dark */
.chip { background: rgba(201,169,110,.1) !important; color: var(--a-gold-light) !important; }
.chip--new       { background: rgba(255,255,255,.06) !important; color: var(--a-text-soft) !important; }
.chip--consult   { background: rgba(229,199,103,.15) !important; color: var(--a-warn) !important; }
.chip--quote     { background: rgba(229,199,103,.15) !important; color: var(--a-warn) !important; }
.chip--nego      { background: rgba(229,199,103,.2) !important; color: var(--a-gold-light) !important; }
.chip--won       { background: rgba(62,187,126,.15) !important; color: var(--a-success) !important; }
.chip--lost      { background: rgba(229,92,106,.15) !important; color: var(--a-danger) !important; }
.chip--care      { background: rgba(229,92,106,.12) !important; color: #FFA6B0 !important; }
.chip--success   { background: rgba(62,187,126,.15) !important; color: var(--a-success) !important; }
.chip--warn      { background: rgba(229,199,103,.15) !important; color: var(--a-warn) !important; }
.chip--danger    { background: rgba(229,92,106,.15) !important; color: var(--a-danger) !important; }
.chip--info      { background: rgba(107,168,255,.15) !important; color: var(--a-info) !important; }

/* Avatar */
.ava { background: linear-gradient(135deg, var(--a-gold), var(--a-gold-dark)) !important; color: var(--a-bg) !important; }
.user-cell b { color: #fff !important; }
.user-cell span { color: var(--a-muted) !important; }

/* Kanban */
.kanban__col { background: var(--a-bg-soft) !important; border: 1px solid var(--a-line) !important; }
.kanban__head { border-bottom: 1px solid var(--a-line) !important; }
.kanban__title { color: #fff !important; }
.kanban__count { background: var(--a-bg) !important; color: var(--a-gold) !important; border: 1px solid var(--a-line) !important; }
.kanban__card { background: var(--a-surface) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.kanban__card:hover { border-color: var(--a-gold) !important; }
.kanban__card-name { color: #fff !important; }
.kanban__card-val { color: var(--a-gold) !important; }

/* Bars */
.bar-row__label { color: var(--a-text) !important; }
.bar-row__track { background: var(--a-bg-soft) !important; border: 1px solid var(--a-line-soft) !important; }
.bar-row__fill { background: linear-gradient(90deg, var(--a-gold-dark), var(--a-gold)) !important; }
.bar-row__val { color: var(--a-text) !important; }

/* Buttons */
.btn-sm { background: var(--a-surface) !important; color: var(--a-text) !important; border: 1px solid var(--a-line) !important; }
.btn-sm:hover { border-color: var(--a-gold) !important; color: var(--a-gold) !important; background: rgba(201,169,110,.08) !important; }
.btn-sm--primary { background: linear-gradient(135deg, var(--a-gold), var(--a-gold-dark)) !important; color: var(--a-bg) !important; border: 0 !important; box-shadow: 0 4px 14px rgba(201,169,110,.25) !important; }
.btn-sm--primary:hover { background: linear-gradient(135deg, var(--a-gold-light), var(--a-gold)) !important; color: var(--a-bg) !important; }
.btn-sm--dark { background: var(--a-bg) !important; color: var(--a-gold) !important; border: 1px solid var(--a-gold) !important; }
.btn-sm--dark:hover { background: var(--a-gold) !important; color: var(--a-bg) !important; }

/* Fields */
.field label { color: var(--a-text-soft) !important; }
.field input, .field select, .field textarea { background: var(--a-bg) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--a-gold) !important; background: var(--a-bg-soft) !important; }

/* Modal */
.modal { background: rgba(0,0,0,.75) !important; }
.modal__body { background: var(--a-surface) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6) !important; }
.modal__head h3 { color: #fff !important; }
.modal__close { background: var(--a-bg) !important; color: var(--a-text-soft) !important; }
.modal__close:hover { background: var(--a-danger) !important; color: #fff !important; }

/* Chart line */
.linechart { color: var(--a-gold) !important; }

/* Inbox / thread */
.inbox { background: var(--a-surface) !important; border: 1px solid var(--a-line) !important; }
.thread { border-bottom: 1px solid var(--a-line-soft) !important; color: var(--a-text) !important; }
.thread:hover { background: rgba(201,169,110,.05) !important; }
.thread.is-active { background: rgba(201,169,110,.1) !important; }
.thread__preview { color: var(--a-muted) !important; }
.inbox__context-item { background: var(--a-bg-soft) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.inbox__context h5 { color: var(--a-gold) !important; }

/* Calendar */
.cal-day { background: var(--a-bg-soft) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.cal-day.is-today { background: rgba(201,169,110,.1) !important; border-color: var(--a-gold) !important; }
.cal-day__date { color: var(--a-muted) !important; }

/* Inventory module */
.inv-tabs { border-bottom: 1px solid var(--a-line) !important; }
.inv-tab { color: var(--a-text-soft) !important; }
.inv-tab:hover { background: rgba(201,169,110,.06) !important; color: var(--a-gold-light) !important; }
.inv-tab.is-active { background: rgba(201,169,110,.12) !important; color: var(--a-gold) !important; border-bottom-color: var(--a-gold) !important; }
.cost-box { background: var(--a-bg-soft) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.cost-row { border-bottom: 1px dashed var(--a-line-soft) !important; }
.cost-row b { color: var(--a-gold) !important; }
.price-tier { background: var(--a-bg-soft) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.price-tier b { color: var(--a-gold) !important; }
.po-card { background: var(--a-bg-soft) !important; border: 1px solid var(--a-line) !important; color: var(--a-text) !important; }
.po-card__meta { color: var(--a-muted) !important; }
.mini-badge--good { background: rgba(62,187,126,.15) !important; color: var(--a-success) !important; }
.mini-badge--warn { background: rgba(229,199,103,.15) !important; color: var(--a-warn) !important; }
.mini-badge--bad  { background: rgba(229,92,106,.15) !important; color: var(--a-danger) !important; }
.abc-A { background: linear-gradient(135deg, var(--a-gold), var(--a-gold-dark)) !important; color: var(--a-bg) !important; }
.abc-B { background: rgba(107,168,255,.2) !important; color: var(--a-info) !important; }
.abc-C { background: var(--a-bg-soft) !important; color: var(--a-muted) !important; }

/* Utility — text helpers trên nền dark */
.text-muted   { color: var(--a-muted) !important; }
.text-success { color: var(--a-success) !important; }
.text-danger  { color: var(--a-danger) !important; }
.text-gold    { color: var(--a-gold) !important; }

/* Scrollbar */
.admin ::-webkit-scrollbar { width: 10px; height: 10px; }
.admin ::-webkit-scrollbar-track { background: var(--a-bg); }
.admin ::-webkit-scrollbar-thumb { background: var(--a-gold-dark); border-radius: 5px; }
.admin ::-webkit-scrollbar-thumb:hover { background: var(--a-gold); }
.admin ::selection { background: var(--a-gold); color: var(--a-bg); }