/* Giao diện theo module CRM/ERP mới (NoiboTheme): chữ Inter / Segoe UI, nền kem, nút cam, trạng thái xanh ngọc / đỏ / vàng / xanh dương.
   Bảng màu lấy nguyên từ NOIBO trong client/src/sections/@dashboard/erp/ketoan/common.js. Muốn quay lại giao diện cũ: bỏ dòng link tệp này trong base.html. */
:root{
  --bg:#fff8f2;--surface-soft:#fffaf6;--surface-warm:#fff1e7;
  --ink:#2d211c;--muted:#7c6a61;--line:#ead9ce;--line-strong:#ddc4b5;
  --orange:#ef6b38;--orange-dark:#c9481f;--orange-soft:#fff0e7;
  --teal:#15866f;--teal-soft:#e7f7f2;--red:#d7433c;--red-soft:#fff0ee;
  --yellow:#a66d00;--yellow-soft:#fff5d5;--blue:#3976d4;--blue-soft:#edf4ff;
  --brand:#ef6b38;--brand-deep:#c9481f;--brand-soft:#fff0e7;--brand-wash:#fffaf6;--blue-dark:#c9481f;
  --gradient:linear-gradient(135deg,#e85f32,#c94522);
  --surface:#fff;--shadow:0 9px 28px #643c2314;
  color:var(--ink);background:var(--bg);
}
:root,body,button,input,textarea,select{font-family:Inter,"Segoe UI Variable","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif}
body{background:var(--bg);color:var(--ink)}
h1,h2,h3,strong,b{font-weight:700}

/* khung */
.sidebar,.topbar{background:#fff;border-color:var(--line)}
.main-column,.page-content{background:var(--bg)}
.brand-copy.company-name>strong,.brand-copy strong{color:var(--orange-dark)}
.brand-copy.company-name>span,.brand-copy small{color:var(--muted)}
.sidebar-caption,.topbar-kicker,.eyebrow{color:#9a8579}
.nav-link{color:var(--muted)}
.nav-link:hover{background:var(--surface-warm);color:var(--orange-dark)}
.nav-link.active{background:var(--orange-soft);color:var(--orange-dark);font-weight:600}
.avatar{background:var(--orange-soft);color:var(--orange-dark)}
.logout-button{border-color:var(--line);color:var(--muted)}
.logout-button:hover{background:var(--surface-warm)}
.environment-card{background:var(--teal-soft);border-color:#c8ebe1}
.environment-dot,.eyebrow-dot{background:var(--teal);box-shadow:0 0 0 4px #c8ebe1}
.environment-card small,.sidebar-footer,.page-footer{color:#9a8579}

/* thẻ, bảng */
.surface-card,.stat-card,.form-title-card,.setup-card,.login-card{border-color:var(--line);box-shadow:var(--shadow)}
.form-title-card{background:linear-gradient(115deg,#fff,var(--surface-warm))}
.data-table th{background:var(--surface-soft);color:#9a8579;border-bottom-color:var(--line)}
.data-table td{color:#5d4d45;border-bottom-color:#f2e6dd}
.data-table tbody tr:hover{background:var(--surface-soft)}
.primary-cell{color:var(--ink)}.secondary-cell{color:#a8978c}
.task-card{background:var(--surface-soft);border-color:var(--line)}
.task-card h3{color:var(--orange-dark)}
.read-task{border-color:var(--line)}

/* nút, liên kết */
.button-primary,.btn{background:var(--gradient);color:#fff;box-shadow:0 5px 12px #c9481f33}
.button-primary:hover,.btn:hover{color:#fff;filter:brightness(.96)}
.btn.secondary,.button:not(.button-primary){background:#fff;border:1px solid var(--line-strong);color:var(--orange-dark);box-shadow:none}
.btn.secondary:hover{background:var(--orange-soft);color:var(--orange-dark)}
.btn.warn{background:var(--yellow-soft);color:var(--yellow);border-color:#f0dca0}
.text-action,.back-link,a{color:var(--orange-dark)}
.text-action:hover,.back-link:hover{color:var(--orange)}

/* nhãn trạng thái dạng viên thuốc có chấm */
.status-pill,.form-status,.version-chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;background:var(--orange-soft);color:var(--orange-dark);font-weight:600}
.status-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status-danger{background:var(--red-soft);color:var(--red)}
.workload-over{background:var(--red-soft);color:var(--red)}
.workload-under{background:var(--yellow-soft);color:var(--yellow)}
.workload-incomplete{background:#f3ece7;color:var(--muted)}
.workload-ok{background:var(--teal-soft);color:var(--teal)}
.queue-row-status{background:var(--yellow-soft);color:var(--yellow)}
.queue-number{background:var(--orange-soft);color:var(--orange-dark)}
.queue-blue{background:var(--blue-soft);color:var(--blue)}
.queue-violet{background:var(--orange-soft);color:var(--orange-dark)}
.queue-green{background:var(--teal-soft);color:var(--teal)}
.queue-row:hover .queue-row-arrow{color:var(--orange)}

/* thông báo */
.flash-message{background:var(--teal-soft);color:var(--teal);border-color:#c8ebe1}
.warn-message{background:var(--yellow-soft);color:var(--yellow);border-color:#f0dca0}
.warn-message .flash-icon{color:var(--yellow)}
.field-error,.errorlist,.field ul.errorlist{color:var(--red)}
.review-note{background:var(--yellow-soft);border-left-color:var(--yellow);color:#6b4a10}
.preview-box{background:var(--surface-soft);border-color:var(--line-strong)}
.privacy-note{background:var(--blue-soft);border-color:#d6e5fb;color:#44648f}
.privacy-note>span{color:var(--blue)}
.login-hint{background:var(--blue-soft);color:#44648f}.login-hint strong{color:var(--blue)}
.diff-add{background:var(--teal-soft)}.diff-change{background:var(--yellow-soft)}.diff-error{background:var(--red-soft)}.diff-left{background:#f3ece7}

/* biểu mẫu */
.field input,.field select,.field textarea,.form-section input[type=text],.form-section input[type=number],.form-section textarea,.form-section select,.review-form textarea,.inline-form input,.inline-form select{border-color:var(--line-strong);color:var(--ink);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus,.form-section input:focus,.form-section textarea:focus,.form-section select:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ef6b3822}
.field label,.review-form label{color:#4a3a33}
.section-help{color:var(--muted)}
input[type=checkbox],input[type=radio]{accent-color:var(--orange)}

/* thẻ thống kê: xanh dương / vàng / xanh ngọc như noibo */
.stat-blue{--accent:var(--blue);--tint:var(--blue-soft)}
.stat-orange{--accent:var(--orange);--tint:var(--orange-soft)}
.stat-green{--accent:var(--teal);--tint:var(--teal-soft)}
.stat-card>strong{color:var(--ink)}.stat-top{color:var(--muted)}
.empty-icon{background:var(--orange-soft);color:var(--orange)}
.setup-icon{background:var(--orange-soft);color:var(--orange-dark)}
.save-status:before{background:var(--teal)}
.community-banner{background:linear-gradient(120deg,var(--teal-soft),var(--yellow-soft))}
.community-tile{border-color:var(--line)}.coral{background:var(--red-soft)}.mint{background:var(--teal-soft)}.gold{background:var(--yellow-soft)}
.account-slip{border-color:#a8978c}