/* ══════════════════════════════════════════════════
   BT Deal — CSS Design System  (Rose / Mauve Theme)
   Cấu trúc giống 100% BT Stock, tông hồng nude dịu
   ══════════════════════════════════════════════════ */
:root {
  --navy: #6b2040;
  --navy2: #874260;
  --sea:  #a65576;
  --foam: #faf3f5;
  --wave: #e8ced6;
  --gold: #c88a2a;
  --danger: #b83a2e;
  --ok:   #1a8a5a;
  --txt:  #2a1f24;
  --mu:   #8a7e86;
  --bg:   #f8f4f5;
  --r:    10px;
  --sh:   0 3px 18px rgba(107,32,64,.08);
}

* { margin:0; padding:0; box-sizing:border-box }
body { font-family:'Be Vietnam Pro',sans-serif; background:var(--bg); color:var(--txt); min-height:100vh }

/* ── LOGIN ── */
#appLogin {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(-45deg,#3d1528,#6b2040,#a65576,#c4788e);
  background-size:400% 400%;
  animation:loginBgMesh 15s ease infinite;
}
@keyframes loginBgMesh { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.login-wrapper { padding:20px; width:100%; max-width:400px }
.login-glass-card {
  background:rgba(255,255,255,0.93); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.4); border-radius:20px;
  padding:38px 32px; box-shadow:0 25px 50px -12px rgba(0,0,0,.4);
}
.login-logo-container { text-align:center; margin-bottom:30px }
.login-logo-container img { width:80px; height:80px; object-fit:contain; margin-bottom:10px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.1)) }
.login-badge-cloud {
  display:inline-block; background:linear-gradient(135deg,#a65576,#874260); color:#fff; font-size:10px; font-weight:700; padding:3px 12px;
  border-radius:12px; letter-spacing:.5px; margin-bottom:8px; box-shadow:0 2px 6px rgba(135,66,96,.3);
}
.login-brand { font-size:24px; font-weight:800; color:var(--navy); letter-spacing:1px; margin:0 0 6px }
.login-subtitle { font-size:13.5px; color:var(--mu); margin:0 }
.login-divider { width:48px; height:4px; background:linear-gradient(to right,var(--navy),var(--sea)); border-radius:2px; margin:16px auto 0 }
.login-form { display:flex; flex-direction:column; gap:20px }

.glass-field { position:relative }
.glass-field input {
  width:100%; height:56px; padding:22px 16px 6px 16px; background:transparent;
  border:1.5px solid rgba(200,210,225,.8); border-radius:8px; font-size:15px; font-family:inherit; color:var(--txt);
  outline:none; transition:.2s ease all;
}
.glass-field input:focus, .glass-field input:not(:placeholder-shown) {
  border-color:var(--sea); box-shadow:0 0 0 3px rgba(192,67,122,.11);
}
.glass-field label.wave-label {
  position:absolute; left:16px; top:18px; color:var(--mu); font-size:14.5px;
  pointer-events:none; font-weight:500; display:flex;
}
.glass-field label.wave-label .char { transition:.25s ease all; transition-delay:calc(var(--index)*.04s) }
.glass-field input:focus ~ label.wave-label .char,
.glass-field input:not(:placeholder-shown) ~ label.wave-label .char {
  transform:translateY(-10px); font-size:12.5px; color:var(--sea); font-weight:600;
}
.btn-eye {
  position:absolute; right:12px; top:16px; background:none; border:none; padding:4px; color:var(--mu);
  cursor:pointer; transition:.2s; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.btn-eye:hover { color:var(--sea); background:rgba(192,67,122,.06) }

.login-btn-neon {
  position:relative; overflow:hidden; width:100%; height:50px; margin-top:10px;
  background:linear-gradient(135deg,var(--navy),var(--sea)); color:#fff; border:none; border-radius:12px;
  font-size:16px; font-weight:700; cursor:pointer; transition:all .3s ease; box-shadow:0 6px 16px rgba(192,67,122,.25);
  display:flex; align-items:center; justify-content:center;
}
.login-btn-neon::after {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.25),transparent); transform:skewX(-20deg); transition:.5s;
}
.login-btn-neon:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 24px rgba(192,67,122,.4) }
.login-btn-neon:hover:not(:disabled)::after { left:150% }
.login-btn-neon:disabled { opacity:.7; cursor:not-allowed; transform:none; background:var(--mu); box-shadow:none; pointer-events:none }
.login-footer { margin-top:24px; text-align:center; font-size:12px; color:#94a3b8; font-weight:500 }

/* ── TOPBAR ── */
.topbar {
  background:linear-gradient(135deg,#3d1528 0%,var(--navy) 60%,var(--navy2) 100%);
  color:#fff; padding:0 18px; display:flex; align-items:center; gap:7px;
  position:sticky; top:0; z-index:100; box-shadow:0 2px 16px rgba(0,0,0,.20);
}
.tb-brand { display:flex; align-items:center; gap:10px; padding:10px 0; flex-shrink:0 }
.tb-logo-img { width:40px; height:40px; object-fit:contain; border-radius:50%; border:1.5px solid rgba(255,255,255,.25) }
.tb-name { font-size:12.5px; font-weight:700 }
.tb-sub { font-size:10px; opacity:.6 }

.tb-nav { display:flex; gap:2px; margin-left:auto; flex-wrap:wrap }
.tab-btn {
  background:rgba(255,255,255,.1); border:none; color:rgba(255,255,255,.75);
  padding:6px 12px; border-radius:7px; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:500; transition:.2s;
}
.tab-btn:hover { background:rgba(255,255,255,.18); color:#fff }
.tab-btn.active { background:rgba(255,255,255,.22); color:#fff; font-weight:700; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35) }

.tb-user { display:flex; align-items:center; gap:6px; padding:4px 9px; background:rgba(255,255,255,.1); border-radius:8px; margin-left:6px }
.tb-user-name { font-size:12px; font-weight:600 }
.tb-user-role { font-size:10px; opacity:.6 }
.tb-logout {
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.2); color:#fff;
  padding:5px 10px; border-radius:7px; font-size:11.5px; font-weight:500; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.tb-logout:hover { background:rgba(255,255,255,.22) }

/* ── MAIN ── */
.main { max-width:1360px; margin:0 auto; padding:18px 13px }
.tab-pane { display:none; animation:fadeIn .2s }
.tab-pane.active { display:block }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

.sec-hdr { display:flex; align-items:center; gap:9px; margin-bottom:13px }
.sec-hdr h2 { font-size:17px; font-weight:700; color:var(--navy) }
.sec-line { flex:1; height:2px; background:linear-gradient(to right,var(--wave),transparent) }

/* ── FORM / FIELD ── */
.field { display:flex; flex-direction:column; gap:4px }
.flbl { font-size:11px; font-weight:600; color:var(--mu); text-transform:uppercase; letter-spacing:.4px }
.flbl span { color:var(--danger) }
.finput {
  border:1.5px solid var(--wave); border-radius:7px; padding:7px 10px;
  font-size:13px; font-family:inherit; color:var(--txt); background:#fffafb; outline:none; transition:.2s; width:100%;
}
.finput:focus { border-color:var(--sea); box-shadow:0 0 0 3px rgba(192,67,122,.11) }

.fi { margin-bottom:15px }
.fi label { display:block; font-size:12px; font-weight:600; color:var(--mu); margin-bottom:4px }
input, select, textarea { font-family:inherit; }
textarea { border:1.5px solid var(--wave); border-radius:7px; padding:7px 10px; font-size:13px; width:100%; outline:none; resize:vertical }
textarea:focus { border-color:var(--sea) }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:5px; padding:7px 15px; border:none; border-radius:8px; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:.2s }
.btn.sm { padding:6px 11px; font-size:12px }
.btn-primary { background:linear-gradient(135deg,var(--sea),var(--navy2)); color:#fff; box-shadow:0 2px 10px rgba(192,67,122,.3) }
.btn-primary:hover:not(:disabled) { transform:translateY(-1px) }
.btn-primary:disabled { opacity:.6; cursor:not-allowed }
.btn-outline { background:#fff; color:var(--navy); border:1.5px solid var(--wave) }
.btn-outline:hover { border-color:var(--sea); background:var(--foam) }
.btn-print { background:linear-gradient(135deg,#e67e22,var(--danger)); color:#fff }

/* ── DASHBOARD CARDS ── */
.db-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:14px }
.db-stat-card { background:#fff; border-radius:var(--r); padding:16px; box-shadow:var(--sh); border-left:4px solid var(--wave) }
.db-stat-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:8px }
.db-stat-val { font-size:22px; font-weight:700; color:var(--navy) }
.db-stat-label { font-size:12px; color:var(--mu); margin-top:2px }
.db-card { background:#fff; border-radius:var(--r); box-shadow:var(--sh); overflow:hidden }
.db-card-hdr { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1.5px solid var(--foam); font-size:14px; font-weight:700; color:var(--navy) }
.db-card-body { padding:14px 16px }

/* ── TABLE ── */
.tbl-wrap { overflow:visible; border:1.5px solid var(--wave); border-radius:8px }
.tbl-card { background:#fff; border-radius:var(--r); box-shadow:var(--sh); overflow:hidden }
.dtbl { width:100%; border-collapse:collapse; font-size:13px }
.dtbl td, .dtbl th { white-space:nowrap }
.dtbl thead th { background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff; padding:8px 11px; font-size:12px; font-weight:600; text-align:left }
.dtbl tbody tr { border-bottom:1px solid var(--foam); transition:.12s }
.dtbl tbody tr:hover { background:var(--foam) }
.dtbl tbody td { padding:7px 11px }
.dtbl tfoot td { padding:7px 11px; background:var(--foam); font-size:13px; border-top:2px solid var(--wave) }
.form-tbl { width:100%; border-collapse:collapse; min-width:640px }
.form-tbl thead th { background:var(--navy); color:#fff; padding:7px; font-size:11.5px; font-weight:600; white-space:nowrap; text-align:center }
.form-tbl tbody tr { border-bottom:1px solid var(--foam); transition:.12s }
.form-tbl tbody tr:hover { background:#fff5f8 }
.form-tbl tbody td { padding:4px 5px; font-size:12.5px }

input.ci { border:1.5px solid var(--wave); border-radius:6px; padding:5px 6px; font-size:13px; font-family:inherit; width:100%; outline:none; transition:.15s; background:#fff }
input.ci:focus { border-color:var(--sea); background:#fff5f8 }

.empty { text-align:center; color:var(--mu); padding:32px!important; font-size:13px }
.center { text-align:center } .right { text-align:right } .bold { font-weight:700 } .nowrap { white-space:nowrap }

/* ── FILTER / STAT ── */
.filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#fff; border-radius:var(--r); padding:9px 14px; box-shadow:var(--sh); margin-bottom:13px }
.filter-bar label { font-size:12px; font-weight:600; color:var(--mu); white-space:nowrap }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:13px }
.stat { background:#fff; border-radius:var(--r); padding:11px 14px; box-shadow:var(--sh); border-top:3px solid var(--sea) }
.stat-v { font-size:16px; font-weight:700; color:var(--navy) }
.stat-l { font-size:11.5px; color:var(--mu); margin-top:2px }

/* ── SUM MODE BAR ── */
.sum-mode-bar { display:flex; gap:3px; margin-bottom:10px }
.smbtn { background:#fff; border:1.5px solid var(--wave); padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; color:var(--mu); cursor:pointer; transition:.2s; font-family:inherit }
.smbtn:hover { border-color:var(--sea); color:var(--navy) }
.smbtn.active { background:var(--navy); color:#fff; border-color:var(--navy) }
.filter-sum { background:#fff; border-radius:var(--r); padding:10px 14px; box-shadow:var(--sh); margin-bottom:10px }
.filter-sum-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px }
.filter-sum-row:last-child { margin-bottom:0 }
.filter-sum-row label { font-size:12px; font-weight:600; color:var(--mu); white-space:nowrap; min-width:60px }

/* ── KANBAN BOARD ── */
.kanban-board { display:flex; gap:14px; min-height:calc(100vh - 200px); overflow-x:auto; padding-bottom:10px }
.k-col { flex:1; min-width:240px; max-width:320px; background:var(--foam); border-radius:8px; display:flex; flex-direction:column; border:1px solid var(--wave) }
.k-hdr { padding:10px 14px; font-weight:600; font-size:12.5px; border-radius:8px 8px 0 0; color:#fff }
.k-body { padding:10px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px }
.k-card { background:#fff; padding:12px; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.05); border:1px solid var(--wave); cursor:pointer; transition:.15s }
.k-card:hover { box-shadow:0 4px 10px rgba(139,26,74,.12); border-color:var(--sea) }
.k-card h4 { margin-bottom:3px; font-size:13px; color:var(--navy) }
.k-card .k-meta { font-size:11.5px; color:var(--mu); margin-bottom:2px; font-weight:500 }
.k-card .k-stat { display:flex; justify-content:space-between; font-size:11.5px; border-top:1px dashed var(--wave); padding-top:6px; margin-top:4px }
.k-card .k-amt { font-weight:700; color:var(--navy) }

/* ── ROLE BADGE ── */
.rbadge { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700 }
.r-admin { background:#fef0f5; color:var(--navy) }
.r-sales { background:#e8f0fb; color:#1e6db5 }
.chip { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11.5px; font-weight:600 }
.chip.ok { background:#ecfbf1; color:var(--ok) }
.chip.er { background:#fde8e8; color:var(--danger) }
.chip.log-neu { background:var(--foam); color:var(--mu) }

/* ── TOAST ── */
.toast-root { position:fixed; top:15px; right:15px; z-index:9999; display:flex; flex-direction:column; gap:6px }
.toast { background:#333; color:#fff; padding:10px 15px; border-radius:6px; font-size:13px; box-shadow:0 4px 8px rgba(0,0,0,.2); animation:toastIn .3s ease-out forwards; max-width:300px; line-height:1.4; border-left:4px solid transparent }
.toast.ok { border-color:var(--ok) }
.toast.err { border-color:var(--danger); background:#fde8e8; color:#991b1b }
.toast.warn { border-color:#f59e0b; background:#fef3c7; color:#92400e }
@keyframes toastIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── MODALS ── */
.modal-layer { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.5); z-index:9000; align-items:center; justify-content:center; backdrop-filter:blur(2px) }
.modal-layer.active { display:flex }
.modal-box { background:#fff; border-radius:12px; width:100%; max-width:500px; box-shadow:0 20px 25px -5px rgba(0,0,0,.1); display:flex; flex-direction:column; max-height:90vh; animation:slideUp .3s cubic-bezier(.16,1,.3,1) }
.modal-hdr { padding:16px 24px; border-bottom:1px solid var(--wave); display:flex; justify-content:space-between; align-items:center }
.modal-hdr h3 { font-size:18px; color:var(--navy) }
.btn-close { background:transparent; border:none; font-size:18px; color:var(--mu); cursor:pointer; transition:.2s }
.btn-close:hover { color:var(--danger) }
.modal-body { padding:24px; overflow-y:auto; flex:1 }
.modal-ftr { padding:16px 24px; background:var(--foam); border-top:1px solid var(--wave); border-radius:0 0 12px 12px; display:flex; justify-content:flex-end; gap:10px }
@keyframes slideUp { from{opacity:0;transform:translateY(20px) scale(.95)} to{opacity:1;transform:none} }

/* ── PHIẾU BLOCK (dùng cho tồn kho xem chéo) ── */
.phieu-block { border-radius:8px; overflow:hidden; box-shadow:var(--sh) }
.phieu-block-hdr { background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff; padding:8px 13px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:12.5px }
.sum-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:12px }

/* ── CONFIG TABS ── */
.cfg-tabs { display:flex; gap:3px; margin-bottom:10px }
.cfg-tabs button { background:#fff; border:1.5px solid var(--wave); padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; color:var(--mu); cursor:pointer; transition:.2s; font-family:inherit }
.cfg-tabs button:hover { border-color:var(--sea); color:var(--navy) }
.cfg-tabs button.active { background:var(--navy); color:#fff; border-color:var(--navy) }

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .topbar { flex-wrap:wrap; padding:8px 10px }
  .tb-nav { order:3; width:100%; justify-content:center }
  .kanban-board { flex-direction:column }
  .k-col { max-width:100% }
}