:root {
  --bg1: #f8fcff;
  --bg2: #eef8ff;
  --card: rgba(255,255,255,0.9);
  --line: #d8e8f8;
  --text: #12324a;
  --muted: #5c7892;
  --primary: #1e88e5;
  --primary-hover: #156fbe;
  --secondary: #e8f2fb;
  --danger: #c62828;
  --shadow: 0 18px 45px rgba(30, 136, 229, 0.12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  min-height: 100vh;
}

.page-shell {
  width: min(1200px, calc(100% - 32px));
  margin: 20px auto;
}

.topbar, .card, .sidebar {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.topbar {
  border-radius: 24px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.brand {
  font-size: 24px;
  font-weight: 700;
}
.subtitle, .muted { color: var(--muted); }
.top-nav, .action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.top-nav a, .sidebar a { text-decoration: none; color: var(--text); }

.card {
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 20px;
}

.hero-card {
  padding: 32px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(235,247,255,0.95));
  box-shadow: var(--shadow);
}

h1, h2, h3 { margin-top: 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 14px;
  padding: 11px 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(18,50,74,0.12); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--secondary); color: var(--text); }
.btn-sm { padding: 8px 12px; border-radius: 12px; font-size: 13px; }

.form-card { max-width: 980px; }
.small-form { max-width: 560px; }
.grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.grid-form.one-col { grid-template-columns: 1fr; }
.grid-form label { display: flex; flex-direction: column; gap: 8px; font-weight: 700; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.96);
  color: var(--text);
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(30,136,229,0.12);
}
.full-row { grid-column: 1 / -1; }

.alert {
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 16px;
  font-weight: 700;
}
.alert.success { background: #eefaf0; color: #207245; }
.alert.error { background: #fff0f0; color: #b42318; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.stat-card, .info-box {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
}
.stat-card .label {
  color: var(--muted);
  margin-bottom: 10px;
}
.stat-card .value {
  font-size: 28px;
  font-weight: 800;
}
.value-red { color: var(--danger); font-weight: 800; }
.two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.admin-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}
.sidebar {
  border-radius: 24px;
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 20px;
}
.sidebar a {
  display: block;
  padding: 12px 14px;
  margin-top: 8px;
  border-radius: 14px;
  background: rgba(232,242,251,0.65);
  font-weight: 700;
}
.sidebar a:hover { background: #dff0ff; }
.admin-content { min-width: 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 18px;
}
.data-table th, .data-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  background: rgba(255,255,255,0.7);
}
.data-table th {
  background: #edf6ff;
  font-size: 14px;
}
.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.page-size-form { display: flex; gap: 10px; align-items: center; }
.page-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.error-box {
  white-space: pre-wrap;
  background: #0d1b2a;
  color: #edf2f7;
  border-radius: 18px;
  padding: 16px;
  overflow: auto;
}

@media (max-width: 980px) {
  .stats-grid, .two-col-grid, .grid-form, .admin-layout { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .page-shell { width: calc(100% - 20px); }
}

.lookup-wrap { position: relative; }
.lookup-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #d7e8f8;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(13, 40, 70, 0.12);
  padding: 6px;
  max-height: 260px;
  overflow: auto;
}
.hidden { display: none; }
.lookup-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.lookup-item:hover { background: #eef7ff; }
.lookup-item strong { display: block; color: #10243e; }
.lookup-item span { display: block; color: #4f6478; font-size: 13px; margin-top: 3px; }
.small-note { margin-top: 8px; }
.order-entry-table .lookup-wrap { min-width: 280px; }

.collapsible-panel.hidden { display:none; }
.collapsible-panel { margin-top: 6px; }


.wide-layout { width: min(1600px, calc(100% - 24px)); }
.sidebar-group { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.sidebar-title { font-weight: 800; color: var(--muted); font-size: 13px; margin: 8px 6px 4px; text-transform: uppercase; }
.table-wrap { overflow-x: auto; width: 100%; }
.table-wide { min-width: 1200px; }
.report-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-item { background: rgba(255,255,255,0.86); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.chart-list { display: grid; gap: 12px; }
.chart-list.compact { gap: 10px; }
.chart-row { display: grid; grid-template-columns: minmax(180px, 280px) 1fr 160px; gap: 12px; align-items: center; }
.chart-label { font-weight: 700; }
.chart-label a {
  color: var(--primary-hover);
  font-weight: 800;
  text-decoration: none !important;
}

.chart-label a:hover {
  color: var(--primary);
  text-decoration: none !important;
}
.chart-bar-wrap { height: 14px; border-radius: 999px; background: #e8f2fb; overflow: hidden; }
.chart-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7cc6ff, #1e88e5); }
.chart-value { text-align: right; font-weight: 800; color: var(--danger); }
.data-table a { color: var(--primary-hover); font-weight: 700; text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
@media (max-width: 1200px) { .report-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .admin-layout { grid-template-columns: 220px 1fr; } }
@media (max-width: 980px) { .chart-row, .detail-grid, .report-filter-grid { grid-template-columns: 1fr; } .sidebar { position: static; } .wide-layout { width: calc(100% - 12px); } }

.btn-danger { background: #ffe3e3; color: #9f1f1f; }
.btn-danger:hover { background: #ffd6d6; }
.inline-check { display:flex !important; flex-direction:row !important; align-items:center; gap:10px; }
.inline-check input[type="checkbox"] { width:18px; height:18px; margin:0; flex:0 0 auto; }
.inline-check span { line-height:1; }
.compact-actions { gap:8px; }
.compact-actions form { margin:0; }
.status-pill { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-weight:700; background:#eef5fb; color:#35556f; }
.status-paid { background:#e8f7ec; color:#1d6b3c; }
.status-partial { background:#fff4df; color:#8a5a00; }
.empty-state { text-align:center; color: var(--muted); }


.sidebar-link, .sidebar-parent {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-top: 8px;
  border-radius: 14px;
  background: rgba(232,242,251,0.65);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.sidebar-parent { position: relative; }
.sidebar-parent::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  transition: transform .18s ease;
}
.sidebar-parent.expanded::after { transform: translateY(-50%) rotate(180deg); }
.sidebar-link:hover, .sidebar-parent:hover { background: #dff0ff; }
.sidebar-link.active, .sidebar-parent.active {
  background: linear-gradient(135deg, #d9efff, #edf8ff);
  border: 1px solid #c8e3fb;
}
.sidebar-menu { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.sidebar-children { margin-top: 6px; padding-left: 10px; }
.sidebar-children .sidebar-link { font-weight: 600; }
.table-wrap { overflow-x: auto; width: 100%; }
.table-wide { min-width: 1200px; }

.tenant-topbar {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  padding:14px 18px;
  border-radius:20px;
  background:rgba(255,255,255,0.88);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.tenant-topbar .profile-block { display:flex; flex-direction:column; align-items:flex-start; min-width: 320px; text-align:left; }
.tenant-topbar .profile-name { font-weight:800; font-size:16px; max-width:360px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tenant-topbar .profile-subtitle { color:var(--muted); font-size:13px; max-width:360px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sidebar-parent { font-size: 16px; font-weight: 800; }
.sidebar-children .sidebar-link { font-size: 13px; font-weight: 600; }
.sidebar-link.active, .sidebar-parent.active, .sidebar-parent.expanded {
  background: linear-gradient(135deg, #1e88e5, #67b4ff);
  color:#fff;
  box-shadow: 0 14px 30px rgba(30,136,229,0.24);
  border:0;
}
.sidebar-link.active:hover, .sidebar-parent.active:hover, .sidebar-parent.expanded:hover { color:#fff; }
.sidebar-parent.active::after, .sidebar-parent.expanded::after { color:#fff; }

.back-btn {
  background:#f4f8fc;
  color:#43617a;
  font-size:13px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid #d8e8f8;
}
.form-card .section-head { margin-bottom: 14px; }
.form-card .section-head .action-row { gap: 14px; }

.unauthorized-overlay {
  position: fixed;
  inset: 0;
  background: rgba(244, 249, 255, 0.78);
  backdrop-filter: blur(3px);
  z-index: 90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.unauthorized-overlay .unauthorized-card {
  max-width: 560px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  box-shadow: var(--shadow);
}
.unauthorized-overlay .unauthorized-card h2 { margin-bottom: 10px; }
.unauthorized-overlay .unauthorized-card p { color: var(--muted); line-height: 1.6; }

.multi-select { position: relative; }
.multi-select-toggle {
  width:100%;
  min-height:46px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.multi-select-panel {
  position:absolute;
  z-index:35;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(18,50,74,0.14);
  padding:10px;
}
.multi-select-search { margin-bottom: 8px; }
.multi-select-options { max-height: 260px; overflow:auto; display:grid; gap:6px; }
.multi-select-option { display:flex; align-items:flex-start; gap:10px; padding:8px 6px; border-radius:10px; cursor:pointer; }
.multi-select-option:hover { background:#eef7ff; }
.multi-select-option input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; }
.multi-select-option span { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.multi-select-actions { display:flex; justify-content:space-between; gap:10px; margin-top:10px; }

.number-input { text-align:right; }
.import-actions { gap: 18px; }
.import-actions .btn { min-width: 170px; }

.table-tools {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  align-items:center;
  margin-bottom:12px;
}
.table-columns-toggle { display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--muted); font-size:13px; }
.table-columns-toggle label { display:flex; align-items:center; gap:6px; font-weight:600; }
.table-columns-toggle input { width:16px; height:16px; }

.quick-ledger-btn {
  position:fixed;
  left:18px;
  bottom:20px;
  z-index:95;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:linear-gradient(135deg, #1e88e5, #5ab6ff);
  color:#fff;
  font-weight:800;
  box-shadow:0 18px 36px rgba(30,136,229,0.28);
}
.quick-ledger-panel {
  position:fixed;
  left:18px;
  bottom:82px;
  width:min(420px, calc(100vw - 36px));
  z-index:96;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:18px;
}
.quick-ledger-panel textarea { min-height: 120px; resize: vertical; }
.quick-ledger-help {
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  background:#f5faff;
  border:1px solid #dbeefe;
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}
.quick-ledger-response { margin-top: 10px; font-weight:700; }

@media (max-width: 980px) {
  .tenant-topbar { justify-content: space-between; align-items:flex-start; }
  .tenant-topbar .profile-block { align-items:flex-start; }
  .quick-ledger-btn { left:10px; right:10px; justify-content:center; }
  .quick-ledger-panel { left:10px; right:10px; width:auto; }
}


.settings-card { max-width: 1100px; }
.tenant-topbar { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.profile-block { margin-right:auto; min-width:260px; }
.profile-name { font-weight:800; font-size:16px; }
.profile-subtitle { color: var(--muted); font-size: 13px; margin-top: 4px; }
.grid-form label > .muted { font-weight: 500; }
.action-row { gap: 14px; }
.action-row .btn { min-width: 140px; }
input[type="file"] { display:none; }
.file-upload { display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; padding:14px 16px; border:1px dashed var(--line); border-radius:16px; background: rgba(255,255,255,0.96); }
.file-upload-btn { display:inline-flex; align-items:center; justify-content:center; min-width:150px; padding:11px 16px; border-radius:14px; background: var(--secondary); color: var(--text); font-weight:700; cursor:pointer; }
.file-upload-btn:hover { background:#dff0ff; }
.file-upload-name { color: var(--muted); font-weight:600; min-width:180px; }
.file-upload.has-file .file-upload-name { color: var(--text); }
.upload-actions { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
@media (max-width: 980px) { .tenant-topbar { align-items:flex-start; } .profile-block { width:100%; margin-right:0; } }

.brand-app { font-size: 22px; }
.import-page-card { max-width: 1120px; }
.import-page-card .action-row { gap: 14px; }
.import-page-card .import-actions { gap: 14px; }
.import-page-card form.grid-form { gap: 20px; }
.copy-inline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.copy-inline input[readonly] { min-width: 320px; max-width: 420px; background:#f7fbff; }
.user-login-copy { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.quick-ledger-help strong { display:inline-block; margin:4px 8px 4px 0; }

/* Tangsi UI lock: 2026-05-03 - refined theme, font and spacing polish */
@font-face {
  font-family: 'TangsiRoboto';
  src: url('/static/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TangsiRoboto';
  src: url('/static/fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TangsiRoboto';
  src: url('/static/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg1: #f7f3eb;
  --bg2: #ece3d3;
  --card: rgba(255, 253, 248, 0.94);
  --line: #dfd1bd;
  --text: #2b241c;
  --muted: #776b5f;
  --primary: #8a623d;
  --primary-hover: #6f4d2e;
  --secondary: #f1e8dc;
  --danger: #b44b43;
  --shadow: 0 18px 42px rgba(80, 57, 32, 0.12);
}
body { font-family: 'TangsiRoboto', Arial, Helvetica, sans-serif; letter-spacing: .01em; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.25; }
.card, .sidebar, .topbar { border-color: rgba(135, 98, 61, .16); }
.card { padding: clamp(18px, 2.3vw, 26px); }
.sidebar a, .sidebar-parent { color: var(--text); }
.sidebar a, .sidebar-parent, .btn, input, textarea, select, .stat-card, .info-box { border-radius: 16px; }
.sidebar a { background: rgba(241, 232, 220, .72); }
.sidebar a:hover, .sidebar-link.active, .sidebar-parent.active { background: #e4d2bd; color: #241a12; }
.btn { min-height: 38px; line-height: 1.2; }
.btn-primary { background: linear-gradient(135deg, #8a623d, #a87c4f); }
.btn-primary:hover { background: linear-gradient(135deg, #6f4d2e, #93683f); }
.btn-secondary { background: #f1e8dc; color: #3b2b1e; border: 1px solid #e2d1bd; }
.btn-danger { background: #b44b43; color: #fff; }
.btn-danger:hover { background: #963b35; }
input, textarea, select { min-height: 42px; border-color: #dccdb9; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(138,98,61,.14); }
input[readonly] { background: #f2eee7; color: #6f6255; cursor: not-allowed; }
.field-note { display: block; font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.grid-form { gap: 14px 16px; }
.section-head { align-items: flex-start; }
.section-head p { margin-bottom: 0; }
.table-wrap { overflow-x: auto; border-radius: 18px; }
.data-table { min-width: 760px; border: 1px solid var(--line); }
.data-table th { background: #eadcc9; color: #2e241a; white-space: nowrap; }
.data-table th, .data-table td { padding: 11px 10px; line-height: 1.45; }
.stat-card { padding: 16px; }
.stat-card .value { font-size: clamp(20px, 2.3vw, 27px); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; margin: 0; }
.quick-ledger-btn {
  left: auto;
  right: 22px;
  bottom: 18px;
  padding: 8px 12px;
  font-size: 12px;
  min-height: 34px;
  box-shadow: 0 12px 26px rgba(80,57,32,.18);
  background: linear-gradient(135deg, #7b5a38, #ad8356);
}
.quick-ledger-panel { left: auto; right: 22px; bottom: 64px; }
.quick-ledger-help { background:#fbf7f0; border-color:#e4d4c0; }
@media (max-width: 980px) {
  .admin-layout { gap: 12px; }
  .sidebar { position: relative; top: 0; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { padding: 16px; }
  .action-row .btn { min-width: 0; }
  .quick-ledger-btn { left:auto; right:12px; width:auto; max-width: 150px; justify-content:center; }
  .quick-ledger-panel { left:10px; right:10px; width:auto; }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-shell { width: calc(100% - 14px); margin: 8px auto; }
  .topbar, .card, .sidebar { border-radius: 18px; }
  .section-head { gap: 10px; }
  .btn { padding: 9px 12px; }
  .data-table th, .data-table td { padding: 9px 8px; font-size: 13px; }
}

/* Tangsi CRM/Pipeline UI lock: 2026-05-03 - CSS-only visual refresh */
:root {
  --bg1: #f4f7fb;
  --bg2: #e9eef6;
  --card: rgba(255,255,255,.96);
  --line: #d9e1ec;
  --text: #10213b;
  --muted: #66758a;
  --primary: #0f5f8f;
  --primary-hover: #0a466b;
  --secondary: #eef3f8;
  --danger: #c24545;
  --success: #54a765;
  --warning: #e0a827;
  --shadow: 0 18px 45px rgba(16,33,59,.10);
}
html, body, button, input, textarea, select, table, .sidebar, .tenant-topbar {
  font-family: 'TangsiRoboto', Arial, Helvetica, sans-serif !important;
}
body {
  background:
    radial-gradient(circle at top left, rgba(15,95,143,.12), transparent 30%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  color: var(--text);
}
.page-shell.wide-layout, .page-shell { width: min(1480px, calc(100% - 28px)); }
.card, .topbar, .sidebar, .tenant-topbar {
  background: var(--card);
  border: 1px solid rgba(217,225,236,.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.card { border-radius: 22px; }
.topbar { border-radius: 22px; }
.sidebar {
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
}
.brand, .brand-app { color: #0b1b33; font-weight: 900; letter-spacing: -.03em; }
h1, h2, h3 { color: #0b1b33; font-weight: 900; letter-spacing: -.025em; }
.muted, .subtitle { color: var(--muted); line-height: 1.55; }
.sidebar-link, .sidebar-parent, .sidebar a {
  background: transparent !important;
  border: 1px solid transparent;
  color: #31445c !important;
  border-radius: 14px;
  padding: 11px 12px;
  font-weight: 700;
}
.sidebar-link:hover, .sidebar-parent:hover, .sidebar a:hover {
  background: #edf5fa !important;
  color: #0f5f8f !important;
}
.sidebar-link.active, .sidebar-parent.active, .sidebar-parent.expanded {
  background: linear-gradient(135deg, #0f5f8f, #1784b6) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(15,95,143,.22);
}
.sidebar-title { color:#7a8798; letter-spacing:.06em; }
.tenant-topbar {
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,249,252,.98));
}
.profile-name { color:#0b1b33; }
.profile-subtitle { color:#66758a; }
.btn {
  border-radius: 12px;
  min-height: 38px;
  font-weight: 800;
  box-shadow: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(16,33,59,.10); }
.btn-primary { background: linear-gradient(135deg, #0f5f8f, #1d8db7); color:#fff; }
.btn-primary:hover { background: linear-gradient(135deg, #0a466b, #0f759d); }
.btn-secondary { background:#f2f6fa; border:1px solid #dae4ee; color:#24384f; }
.btn-secondary:hover { background:#e9f1f7; }
.btn-danger { background:#fff0f0; color:#b83636; border:1px solid #f1caca; }
.btn-danger:hover { background:#c24545; color:#fff; }
input, textarea, select, .multi-select-toggle {
  border: 1px solid #d8e1eb;
  background:#fff;
  color:#14243a;
  border-radius: 12px;
  min-height: 42px;
}
input:focus, textarea:focus, select:focus, .multi-select-toggle:focus {
  border-color:#1784b6;
  box-shadow: 0 0 0 4px rgba(23,132,182,.13);
}
.grid-form label { color:#263951; gap:7px; }
.section-head { align-items:flex-start; margin-bottom: 12px; }
.stats-grid { gap: 14px; }
.stat-card, .info-box, .detail-item {
  background: #fff;
  border: 1px solid #dce4ee;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(16,33,59,.05);
}
.stat-card .label { font-size: 13px; font-weight: 700; color:#6d7c8e; }
.stat-card .value { color:#0b1b33; }
.value-red { color:#c24545; }
.table-wrap { border-radius: 18px; border: 1px solid #dce4ee; background:#fff; }
.data-table {
  border: 0;
  border-radius: 0;
  min-width: 820px;
  margin-top: 0;
}
.data-table th {
  background: #eef3f8;
  color:#182a42;
  font-weight: 900;
  border-bottom:1px solid #cfd9e5;
}
.data-table td { background:#fff; color:#203249; }
.data-table tr:nth-child(even) td { background:#fbfcfe; }
.data-table tr:hover td { background:#f3f9fc; }
.data-table th, .data-table td { padding: 11px 10px; line-height:1.45; }
.lookup-panel, .multi-select-panel {
  border:1px solid #d6e1ec;
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(16,33,59,.16);
}
.lookup-item:hover, .multi-select-option:hover { background:#eef8fc; }
.lookup-empty { padding: 11px 12px; color:#b83636; font-weight:800; }
.quick-ledger-btn {
  right: 18px !important;
  left: auto !important;
  bottom: 16px !important;
  max-width: 138px;
  min-height: 32px;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f5f8f, #1784b6) !important;
  box-shadow: 0 12px 24px rgba(15,95,143,.20);
}
.quick-ledger-panel { right: 18px !important; left:auto !important; bottom: 58px; }
.alert.success { background:#edf8f0; color:#287044; border:1px solid #cbe9d3; }
.alert.error { background:#fff1f1; color:#b83636; border:1px solid #f0cccc; }
@media (max-width: 980px) {
  .page-shell.wide-layout, .page-shell { width: calc(100% - 16px); margin: 10px auto; }
  .admin-layout { grid-template-columns: 1fr; }
  .sidebar { position:relative; top:0; }
  .tenant-topbar { align-items:flex-start; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quick-ledger-btn { right: 12px !important; left:auto !important; max-width: 132px; }
  .quick-ledger-panel { left:10px !important; right:10px !important; width:auto; }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .card, .topbar, .sidebar { border-radius: 16px; padding: 14px; }
  .grid-form, .report-filter-grid, .detail-grid, .two-col-grid { grid-template-columns: 1fr !important; }
  .section-head { gap: 10px; }
  .action-row { gap: 8px; }
  .btn { padding: 8px 10px; font-size: 13px; }
  .data-table th, .data-table td { padding: 9px 8px; font-size: 13px; }
}

/* Khóa giao diện cảnh báo công nợ và tồn kho tối thiểu */
.debt-badge{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:6px 10px;border-radius:999px;font-weight:800;text-decoration:none;border:1px solid transparent;}
.debt-orange,.debt-row-orange td{background:#fff7ed;}
.debt-orange{color:#9a3412;border-color:#fed7aa;}
.debt-red,.debt-row-red td{background:#fef2f2;}
.debt-red{color:#991b1b;border-color:#fecaca;}
.low-stock-row td{background:#fff1f2 !important;}
.stock-alert{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#dc2626;color:#fff;font-weight:800;}
@media (max-width: 768px){.debt-badge{min-width:auto}.data-table.table-wide{min-width:920px}}

/* Tangsi compact digital layout patch */
.card{border-radius:18px;border:1px solid #e5e7eb;box-shadow:0 10px 28px rgba(15,23,42,.06);padding:18px!important;margin-bottom:16px!important;}
.section-head{gap:14px;align-items:flex-start;margin-bottom:14px;}
.section-head h1{font-size:22px;line-height:1.2;margin:0 0 4px;}
.section-head h2{font-size:18px;margin:0 0 4px;}
.section-head p,.muted{font-size:13px;line-height:1.45;}
.btn{border-radius:10px!important;padding:9px 13px!important;font-size:13px!important;font-weight:700!important;white-space:nowrap;}
.btn-sm{padding:6px 9px!important;font-size:12px!important;}
.action-row{gap:8px!important;flex-wrap:wrap;}
.grid-form{gap:14px!important;}
.grid-form label{gap:7px!important;font-size:13px!important;}
input,select,textarea{border-radius:10px!important;padding:10px 12px!important;border:1px solid #d9e0ea!important;}
.info-box{border-radius:16px!important;padding:16px!important;border:1px solid #e5e7eb;background:#fff;}
.two-col-grid{gap:16px!important;}
.table-wrap,.table-scroll{width:100%;overflow:auto;border-radius:14px;border:1px solid #e5e7eb;}
.data-table{font-size:13px;border-collapse:separate!important;border-spacing:0;width:100%;}
.data-table th{background:#f3f6fb;color:#334155;font-weight:800;padding:11px 12px!important;border-bottom:1px solid #dde5f0;white-space:nowrap;}
.data-table td{padding:10px 12px!important;border-bottom:1px solid #eef2f7;vertical-align:top;}
.data-table tr:hover td{background:#f8fbff;}
.compact-filter{background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;padding:14px;margin:12px 0 16px;}
.nowrap{white-space:nowrap;}
.text-clip{max-width:260px;white-space:normal;word-break:break-word;}

/* Tangsi blue sale-ready UI refresh - 2026-05-04 */
:root{
  --bg1:#f7fcff;
  --bg2:#eaf7ff;
  --bg3:#d9f0ff;
  --card:rgba(255,255,255,.94);
  --line:#d8e9f7;
  --text:#0c2742;
  --muted:#5f7690;
  --primary:#0ea5e9;
  --primary-hover:#0284c7;
  --secondary:#edf8ff;
  --danger:#ef4444;
  --success:#10b981;
  --warning:#f59e0b;
  --shadow:0 18px 46px rgba(14,165,233,.14);
}
body{
  background:
    radial-gradient(circle at 8% 8%, rgba(14,165,233,.18), transparent 28%),
    radial-gradient(circle at 92% 0%, rgba(45,212,191,.15), transparent 25%),
    linear-gradient(135deg,#ffffff 0%,var(--bg1) 32%,var(--bg2) 68%,#ffffff 100%) !important;
  color:var(--text)!important;
}
.page-shell.wide-layout,.page-shell{width:min(1540px,calc(100% - 30px))!important;}
.card,.tenant-topbar,.topbar,.sidebar{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,250,255,.94))!important;
  border:1px solid rgba(187,222,246,.9)!important;
  box-shadow:var(--shadow)!important;
  border-radius:26px!important;
}
.card{padding:24px!important;margin-bottom:22px!important;}
.admin-layout{grid-template-columns:260px minmax(0,1fr)!important;gap:22px!important;}
.sidebar{padding:20px!important;position:sticky;top:18px;background:linear-gradient(180deg,#ffffff,#eff9ff)!important;}
.brand-app,.brand{color:#075985!important;font-size:24px!important;font-weight:900!important;letter-spacing:-.04em!important;margin-bottom:14px;}
.sidebar-link,.sidebar-parent,.sidebar a{
  padding:13px 15px!important;
  border-radius:18px!important;
  color:#25435f!important;
  background:rgba(255,255,255,.68)!important;
  border:1px solid rgba(216,233,247,.78)!important;
  margin-top:8px!important;
}
.sidebar-link:hover,.sidebar-parent:hover,.sidebar a:hover{background:#e8f8ff!important;color:#0284c7!important;transform:translateX(2px);}
.sidebar-link.active,.sidebar-parent.active,.sidebar-parent.expanded{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(14,165,233,.28)!important;
  border-color:transparent!important;
}
.sidebar-menu{border-top:1px solid rgba(216,233,247,.9)!important;margin-top:14px!important;padding-top:10px!important;}
h1{font-size:26px!important;line-height:1.18!important;color:#082f49!important;margin-bottom:8px!important;}
h2{font-size:21px!important;color:#082f49!important;}
h3{font-size:17px!important;color:#0f3d5d!important;}
.muted,.subtitle{color:var(--muted)!important;font-size:14px!important;line-height:1.6!important;}
.section-head{gap:18px!important;margin-bottom:18px!important;padding-bottom:4px!important;}
.action-row{gap:12px!important;}
.btn{
  border-radius:999px!important;
  padding:11px 17px!important;
  min-height:42px!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:0 8px 18px rgba(14,165,233,.10)!important;
  border:1px solid transparent!important;
}
.btn-primary{background:linear-gradient(135deg,#0ea5e9,#22d3ee)!important;color:#fff!important;}
.btn-primary:hover{background:linear-gradient(135deg,#0284c7,#06b6d4)!important;}
.btn-secondary{background:#f0f9ff!important;color:#075985!important;border-color:#bae6fd!important;}
.btn-secondary:hover{background:#e0f2fe!important;}
.btn-danger{background:#fff1f2!important;color:#be123c!important;border-color:#fecdd3!important;}
.btn-sm{min-height:34px!important;padding:7px 12px!important;font-size:12px!important;}
.grid-form{gap:20px!important;}
.grid-form label{gap:10px!important;font-size:14px!important;color:#183b56!important;}
input,textarea,select,.multi-select-toggle{
  min-height:46px!important;
  border-radius:18px!important;
  padding:13px 16px!important;
  background:#fff!important;
  border:1px solid #cfe5f5!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
input:focus,textarea:focus,select:focus,.multi-select-toggle:focus{border-color:#38bdf8!important;box-shadow:0 0 0 5px rgba(14,165,233,.14)!important;}
.info-box,.stat-card,.detail-item{
  border-radius:24px!important;
  padding:22px!important;
  background:#fff!important;
  border:1px solid #d9ecf8!important;
  box-shadow:0 14px 32px rgba(14,165,233,.08)!important;
}
.stats-grid,.two-col-grid{gap:20px!important;}
.stat-card .label{color:#64748b!important;font-size:13px!important;font-weight:800!important;}
.stat-card .value{color:#075985!important;font-weight:900!important;}
.table-wrap,.table-scroll{
  border-radius:24px!important;
  border:1px solid #d9ecf8!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(14,165,233,.08)!important;
  overflow:auto!important;
}
.data-table{border-collapse:separate!important;border-spacing:0!important;min-width:850px!important;background:#fff!important;margin-top:0!important;}
.data-table th{
  background:linear-gradient(180deg,#effaff,#e0f4ff)!important;
  color:#0c4a6e!important;
  font-size:13px!important;
  font-weight:900!important;
  padding:16px 18px!important;
  border-bottom:1px solid #cfe5f5!important;
}
.data-table td{
  padding:16px 18px!important;
  border-bottom:1px solid #ecf5fb!important;
  background:#fff!important;
  color:#1f3b55!important;
  line-height:1.55!important;
}
.data-table tr:nth-child(even) td{background:#fbfdff!important;}
.data-table tr:hover td{background:#f0fbff!important;}
.value-red{color:#e11d48!important;font-weight:900!important;}
.status-pill{border-radius:999px!important;padding:7px 12px!important;background:#e0f2fe!important;color:#075985!important;}
.status-paid{background:#dcfce7!important;color:#047857!important;}
.status-partial{background:#fef3c7!important;color:#92400e!important;}
.lookup-wrap,.multi-select{position:relative!important;z-index:50!important;}
.lookup-wrap:focus-within,.multi-select:focus-within{z-index:99998!important;}
.lookup-panel,.multi-select-panel{
  z-index:99999!important;
  border-radius:18px!important;
  border:1px solid #bae6fd!important;
  box-shadow:0 22px 48px rgba(2,132,199,.22)!important;
  background:#fff!important;
  padding:8px!important;
}
.lookup-item{border-radius:14px!important;padding:12px 14px!important;}
.lookup-item:hover,.multi-select-option:hover{background:#e8f8ff!important;}
.lookup-empty{padding:13px 14px!important;color:#e11d48!important;font-weight:900!important;}
.collapsible-panel{position:relative;z-index:20;}
.order-entry-table{overflow:visible!important;}
.quick-ledger-btn{background:linear-gradient(135deg,#0ea5e9,#22d3ee)!important;box-shadow:0 14px 28px rgba(14,165,233,.26)!important;}
.alert{border-radius:18px!important;padding:14px 16px!important;}
.alert.success{background:#ecfdf5!important;color:#047857!important;border:1px solid #bbf7d0!important;}
.alert.error{background:#fff1f2!important;color:#be123c!important;border:1px solid #fecdd3!important;}
@media(max-width:980px){.admin-layout{grid-template-columns:1fr!important}.sidebar{position:relative!important;top:0!important}.card{padding:18px!important}.stats-grid,.two-col-grid{grid-template-columns:1fr!important}}

/* User color versions */
body.theme-light {
  --bg1:#f7f8fb; --bg2:#ffffff; --card:rgba(255,255,255,.94); --line:#d9dde5;
  --text:#151922; --muted:#687182; --primary:#202632; --primary-hover:#000000; --secondary:#eef0f4;
  --danger:#b42318; --shadow:0 18px 45px rgba(18,24,32,.12);
}
body.theme-blue {
  --bg1:#f8fcff; --bg2:#e7f5ff; --card:rgba(255,255,255,.92); --line:#d8e8f8;
  --text:#12324a; --muted:#5c7892; --primary:#1e88e5; --primary-hover:#156fbe; --secondary:#e8f2fb;
  --danger:#c62828; --shadow:0 18px 45px rgba(30,136,229,.14);
}
body.theme-green {
  --bg1:#f7fff9; --bg2:#e7f8ee; --card:rgba(255,255,255,.92); --line:#d5eadc;
  --text:#12351f; --muted:#5b7d66; --primary:#16a34a; --primary-hover:#11823b; --secondary:#e9f7ee;
  --danger:#c62828; --shadow:0 18px 45px rgba(22,163,74,.14);
}
body.theme-red {
  --bg1:#fff9f8; --bg2:#ffeceb; --card:rgba(255,255,255,.92); --line:#f0d6d4;
  --text:#3b1715; --muted:#8a625f; --primary:#e53935; --primary-hover:#c62828; --secondary:#fff0ef;
  --danger:#b71c1c; --shadow:0 18px 45px rgba(229,57,53,.14);
}
body.theme-yellow {
  --bg1:#fffdf5; --bg2:#fff6d8; --card:rgba(255,255,255,.93); --line:#efe0aa;
  --text:#3b2d08; --muted:#806b2d; --primary:#f5a400; --primary-hover:#d88a00; --secondary:#fff5d7;
  --danger:#b42318; --shadow:0 18px 45px rgba(245,164,0,.16);
}
body.theme-pink {
  --bg1:#fff8fc; --bg2:#ffeaf5; --card:rgba(255,255,255,.93); --line:#efd3e2;
  --text:#3a1830; --muted:#805f73; --primary:#ec4899; --primary-hover:#db2777; --secondary:#fff0f7;
  --danger:#b42318; --shadow:0 18px 45px rgba(236,72,153,.15);
}
body.theme-green .chart-bar, body.theme-green .sidebar-link.active, body.theme-green .sidebar-parent.active, body.theme-green .sidebar-parent.expanded, body.theme-green .quick-ledger-btn { background:linear-gradient(135deg,#16a34a,#73d68d); }
body.theme-red .chart-bar, body.theme-red .sidebar-link.active, body.theme-red .sidebar-parent.active, body.theme-red .sidebar-parent.expanded, body.theme-red .quick-ledger-btn { background:linear-gradient(135deg,#e53935,#ff8a80); }
body.theme-yellow .chart-bar, body.theme-yellow .sidebar-link.active, body.theme-yellow .sidebar-parent.active, body.theme-yellow .sidebar-parent.expanded, body.theme-yellow .quick-ledger-btn { background:linear-gradient(135deg,#f5a400,#ffd76a); color:#3b2d08; }
body.theme-pink .chart-bar, body.theme-pink .sidebar-link.active, body.theme-pink .sidebar-parent.active, body.theme-pink .sidebar-parent.expanded, body.theme-pink .quick-ledger-btn { background:linear-gradient(135deg,#ec4899,#f9a8d4); }
body.theme-light .chart-bar, body.theme-light .sidebar-link.active, body.theme-light .sidebar-parent.active, body.theme-light .sidebar-parent.expanded, body.theme-light .quick-ledger-btn { background:linear-gradient(135deg,#202632,#6b7280); }
.theme-picker-form { margin:0; }
.theme-picker {
  min-width:128px;
  height:38px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--secondary);
  color:var(--text);
  font-weight:800;
  box-shadow:0 10px 22px rgba(18,50,74,.08);
}

/* Ledger row action safety: buttons stay clickable and visible */
.data-table td .compact-actions { align-items:center; flex-wrap:nowrap; }
.data-table td .compact-actions form { display:inline-flex; }
.data-table td .compact-actions .btn { min-width:auto; white-space:nowrap; }
@media (max-width: 980px) { .data-table td .compact-actions { flex-wrap:wrap; } }


/* Fix hiển thị bảng: không cắt ngang nội dung, cho phép cuộn ngang rõ ràng */
.table-wrap,.table-scroll{
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
}
.data-table{
  width:max-content!important;
  min-width:100%!important;
  table-layout:auto!important;
}
.data-table th,
.data-table td{
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
.data-table th{white-space:nowrap!important;}
.data-table td .compact-actions,
.compact-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
.data-table td .compact-actions form{margin:0!important;display:inline-flex!important;}
.data-table td .compact-actions .btn{white-space:nowrap!important;}

/* Fix riêng báo cáo NCC: bảng chi tiết nhập mua theo mặt hàng không tràn khỏi giao diện */
.supplier-product-table-wrap,
.supplier-report-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.supplier-product-table,
.supplier-report-table {
  min-width: 1180px !important;
  width: max-content !important;
  max-width: none !important;
}
.supplier-product-table th,
.supplier-product-table td,
.supplier-report-table th,
.supplier-report-table td {
  white-space: nowrap;
}
.supplier-product-table td:nth-child(5),
.supplier-report-table td:first-child {
  white-space: normal;
  min-width: 220px;
  max-width: 320px;
}


/* Fix bảng nhập mua hàng và rà soát bảng chung: chống lệch khỏi khung giao diện */
.purchase-lines-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 8px !important;
}
.purchase-lines-table-wrap .order-entry-table {
  min-width: 980px !important;
  width: max-content !important;
  max-width: none !important;
}
.order-entry-table th,
.order-entry-table td {
  vertical-align: middle !important;
}
.order-entry-table th:nth-child(3),
.order-entry-table td:nth-child(3),
.order-entry-table th:nth-child(5),
.order-entry-table td:nth-child(5) {
  text-align: right !important;
}
.order-entry-table td:nth-child(1) { min-width: 280px !important; }
.order-entry-table td:nth-child(2) { min-width: 220px !important; }
.order-entry-table td:nth-child(3) { min-width: 170px !important; }
.order-entry-table td:nth-child(4),
.order-entry-table td:nth-child(5) { min-width: 140px !important; }
.order-entry-table td:last-child { min-width: 90px !important; white-space: nowrap !important; }
.order-entry-table input,
.order-entry-table .lookup-input {
  min-width: 0 !important;
}
.order-entry-table .lookup-wrap {
  min-width: 0 !important;
  width: 100% !important;
}
.order-entry-table .lookup-panel {
  min-width: 260px !important;
}
/* Những bảng chưa có .table-wrap vẫn tự có thanh cuộn ngang, không đẩy vỡ layout */
.card > .data-table,
.info-box > .data-table,
.collapsible-panel > .data-table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}
.card > .data-table thead,
.card > .data-table tbody,
.card > .data-table tr,
.info-box > .data-table thead,
.info-box > .data-table tbody,
.info-box > .data-table tr {
  width: 100% !important;
}
@media (max-width: 980px) {
  .purchase-lines-table-wrap .order-entry-table { min-width: 900px !important; }
}


/* FIX autocomplete: nằm ngay dưới ô nhập, nhưng nổi trên bảng và không bị cắt */
.floating-suggestion-panel {
  position: fixed !important;
  z-index: 2147483000 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  overflow: auto !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  transform: none !important;
}
.floating-suggestion-panel.hidden { display: none !important; }


/* APPEND-ONLY: Căn cụm Hiển thị cột lùi vào trong để không dính bo góc */
.table-tools {
  padding-left: clamp(18px, 24%, 35%);
  padding-right: 18px;
  box-sizing: border-box;
}
@media (max-width: 980px) {
  .table-tools { padding-left: 18px; }
}

/* APPEND-ONLY: Gợi ý bộ lọc báo cáo nổi ngay dưới input */
.report-autocomplete-wrap { position: relative; width: 100%; }
.report-autocomplete-panel {
  position: fixed;
  z-index: 2147483001;
  background: #fff;
  border: 1px solid #d8e2ee;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
  max-height: 260px;
  overflow: auto;
  padding: 6px;
}
.report-autocomplete-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  border-radius: 9px;
  font-weight: 600;
  color: #243044;
  cursor: pointer;
}
.report-autocomplete-item:hover { background: #eef8fc; }
.report-autocomplete-empty { padding: 10px 12px; color: #8a96a8; font-weight: 600; }


/* APPEND-ONLY 2026-05-05: Hiển thị cột và checkbox/select nằm cùng hàng, lùi nhẹ khỏi bo góc */
.table-tools {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  padding-left: clamp(28px, 15%, 20%) !important;
}
.table-tools > strong { white-space: nowrap !important; margin-right: 4px !important; }
.table-columns-toggle { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 12px !important; }
.table-columns-toggle label { display: inline-flex !important; align-items: center !important; gap: 5px !important; margin: 0 !important; white-space: nowrap !important; }
@media (max-width: 980px) { .table-tools { padding-left: 18px !important; } }

/* APPEND-ONLY 2026-05-05: autocomplete mới cho các bộ lọc báo cáo đã khóa */
.locked-report-ac-panel {
  position: fixed !important;
  z-index: 2147483002 !important;
  background: #fff !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16) !important;
  max-height: 260px !important;
  overflow: auto !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
.locked-report-ac-panel.hidden { display:none !important; }
.locked-report-ac-item { width:100% !important; border:0 !important; background:transparent !important; text-align:left !important; padding:9px 10px !important; border-radius:9px !important; font-weight:600 !important; color:#243044 !important; cursor:pointer !important; }
.locked-report-ac-item:hover { background:#eef8fc !important; }
.locked-report-ac-empty { padding:10px 12px !important; color:#8a96a8 !important; font-weight:600 !important; }

/* APPEND-ONLY 2026-05-05: 2 bảng công nợ bung full chiều ngang */
body:has(form[action="/cong-no"]), body {}
section.card:has(h2) .data-table { min-width: 100%; }
body .card .debt-full-width-wrap { width:100% !important; max-width:100% !important; overflow-x:auto !important; }
body .card .debt-full-width-wrap .data-table { width:100% !important; min-width:100% !important; }

/* APPEND-ONLY 2026-05-05 FIX: trả cụm Hiển thị cột về sát trái, giữ label và checkbox/select cùng một hàng */
.table-tools {
  padding-left: 10px !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
}
.table-tools > strong {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.table-columns-toggle {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
}


/* APPEND-ONLY 2026-05-05: giao diện đăng nhập / đăng ký chuyên nghiệp hơn */
.auth-shell {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
}
.auth-card {
  width: min(100%, 520px);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
  padding: 30px;
}
.auth-card-wide { width: min(100%, 820px); }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { margin: 10px 0 8px; font-size: 30px; }
.auth-head p { margin: 0; color: #64748b; line-height: 1.55; }
.auth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: #eef6ff;
  color: #155e9f;
  font-weight: 800;
  font-size: 13px;
}
.auth-form { display: grid; gap: 15px; }
.auth-form label { font-weight: 700; color: #334155; }
.auth-form input { margin-top: 7px; }
.auth-submit { width: 100%; justify-content: center; margin-top: 4px; }
.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
  font-weight: 700;
}
.auth-links a { color: #155e9f; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-grid { margin-top: 6px; }
@media (max-width: 720px) {
  .auth-card { padding: 22px; border-radius: 18px; }
  .auth-head h1 { font-size: 24px; }
}

/* APPEND-ONLY 2026-05-05: nâng giao diện đăng nhập/đăng ký SaaS + nút nổi bật */
.auth-shell{
  min-height:calc(100vh - 88px)!important;
  background:radial-gradient(circle at top left, rgba(14,165,233,.16), transparent 34%), linear-gradient(135deg,#f8fbff 0%,#eef6ff 48%,#ffffff 100%)!important;
  padding:48px 18px!important;
}
.auth-card{
  text-align:center!important;
  border-radius:30px!important;
  border:1px solid rgba(148,163,184,.24)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.18)!important;
  padding:38px 36px!important;
  overflow:hidden!important;
  position:relative!important;
}
.auth-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:7px;
  background:linear-gradient(90deg,#0ea5e9,#22d3ee,#38bdf8);
}
.auth-head{text-align:center!important;}
.auth-head h1{font-size:34px!important;letter-spacing:-.035em!important;color:#0f172a!important;}
.auth-head p{max-width:620px;margin-left:auto!important;margin-right:auto!important;}
.auth-badge{box-shadow:0 10px 24px rgba(14,165,233,.14)!important;}
.auth-form,.auth-grid{text-align:left!important;}
.auth-form label,.auth-grid label{color:#1f2937!important;}
.auth-form input,.auth-grid input,.auth-grid textarea,.auth-grid select{
  border-radius:16px!important;
  border:1px solid #dbe7f3!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04)!important;
  background:#fbfdff!important;
}
.auth-form input:focus,.auth-grid input:focus,.auth-grid textarea:focus,.auth-grid select:focus{
  border-color:#38bdf8!important;
  box-shadow:0 0 0 4px rgba(56,189,248,.16)!important;
}
.auth-submit,.auth-card .btn-primary,.auth-card .btn-secondary{
  border-radius:999px!important;
  min-height:46px!important;
  font-weight:900!important;
  justify-content:center!important;
  box-shadow:0 16px 30px rgba(14,165,233,.22)!important;
}
.auth-card .btn-primary{background:linear-gradient(135deg,#0284c7,#22d3ee)!important;}
.auth-card .btn-secondary{background:#fff!important;color:#075985!important;border:1px solid #bae6fd!important;box-shadow:0 12px 24px rgba(15,23,42,.08)!important;}
.auth-links{justify-content:center!important;}
.auth-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  border:1px solid #dbeafe!important;
  padding:10px 14px!important;
  background:#f8fbff!important;
  box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
}
.plan-limit-card{max-width:760px;margin:0 auto;text-align:center;padding:34px!important;}
.plan-limit-icon{width:58px;height:58px;border-radius:20px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:#eef6ff;font-size:28px;box-shadow:0 14px 30px rgba(14,165,233,.16);}
.plan-box,.payment-box{text-align:left;border:1px solid #e2e8f0;border-radius:22px;padding:18px 20px;margin-top:18px;background:#fbfdff;}
.plan-price{font-size:26px;font-weight:900;color:#0284c7;margin:8px 0;}
.auth-plan-note{margin:16px auto 0;padding:14px 16px;border-radius:18px;background:#f0f9ff;border:1px solid #bae6fd;color:#075985;font-weight:700;line-height:1.55;max-width:680px;}

/* APPEND-ONLY 2026-05-05: font Việt hóa Roboto + ẩn ghi chú gói tại màn đăng ký */
@font-face{font-family:'Roboto';src:url('/static/fonts/Roboto-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Roboto';src:url('/static/fonts/Roboto-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Roboto';src:url('/static/fonts/Roboto-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
html,body,input,select,textarea,button,.btn,.data-table,.sidebar,.topbar{font-family:'Roboto','Arial','Helvetica',sans-serif!important;}
.auth-plan-note{display:none!important;}
.tenant-quota-note{margin:14px 0 16px;padding:13px 16px;border:1px solid #bae6fd;border-radius:16px;background:#f0f9ff;color:#64748b; font-style: italic;font-weight:700;line-height:1.5;box-shadow:0 8px 20px rgba(14,165,233,.08);}
.tenant-quota-note strong{color:#0f172a;}


/* APPEND-ONLY 2026-05-05: ép toàn bộ dự án dùng font Roboto */
html, body, button, input, select, textarea, table, th, td, a, label, .btn, .card, .sidebar, .topbar, .data-table, .brand, .brand-app {
  font-family: "Roboto", Arial, Helvetica, sans-serif !important;
}

/* APPEND-ONLY: làm rõ thao tác nhập Excel và thông báo file */
.file-upload {
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}
.file-upload-btn {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18) !important;
}
.file-upload-name { font-weight: 800 !important; color: #475569 !important; }
.file-upload.has-file { border-color: #16a34a !important; background: #f0fdf4 !important; }
.file-upload.has-file .file-upload-name { color:#166534 !important; }
.file-upload-message {
  display:block;
  width:100%;
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  background:#ecfdf5;
  color:#166534;
  font-weight:700;
  border:1px solid #bbf7d0;
}
.import-page-card .btn-primary,
.import-page-card button[type="submit"] {
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18) !important;
}


/* APPEND-ONLY 2026-05-05: sửa lỗi input file bị display:none làm trình duyệt chặn submit khi required */
input[type="file"][data-file-beautified="1"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  display:block !important;
}
.file-upload .file-upload-message{display:block;}


/* APPEND-ONLY 2026-05-05: thông báo chọn file nằm cạnh nút, nút chọn file bo tròn + shadow rõ */
.file-upload{align-items:center !important;}
.file-upload .file-upload-message{
  width:auto !important;
  flex:1 1 260px !important;
  margin-top:0 !important;
}
.file-upload .file-upload-btn{
  border-radius:999px !important;
  box-shadow:0 10px 22px rgba(15,23,42,.22) !important;
}
@media (max-width: 720px){
  .file-upload .file-upload-message{width:100% !important; flex-basis:100% !important; margin-top:8px !important;}
}

/* APPEND-ONLY 2026-05-05: làm nút chọn file Excel giống nút browser thật + hiện trạng thái file bên cạnh */
.file-upload,
.file-upload-inline .file-upload,
form[enctype="multipart/form-data"] .file-upload{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  padding:14px !important;
  border:1px solid #94a3b8 !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.12) !important;
}
.file-upload .file-upload-btn,
form[enctype="multipart/form-data"] .file-upload .file-upload-btn{
  min-height:42px !important;
  padding:10px 18px !important;
  border:1px solid #334155 !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#ffffff 0%,#e2e8f0 100%) !important;
  color:#0f172a !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  cursor:pointer !important;
  box-shadow:0 4px 0 rgba(15,23,42,.18),0 10px 22px rgba(15,23,42,.14) !important;
}
.file-upload .file-upload-btn:hover,
form[enctype="multipart/form-data"] .file-upload .file-upload-btn:hover{
  background:linear-gradient(180deg,#f8fafc 0%,#cbd5e1 100%) !important;
  transform:translateY(-1px) !important;
}
.file-upload .file-upload-name,
form[enctype="multipart/form-data"] .file-upload .file-upload-name{
  flex:1 1 220px !important;
  min-width:180px !important;
  padding:10px 12px !important;
  border:1px dashed #cbd5e1 !important;
  border-radius:12px !important;
  background:#ffffff !important;
  color:#64748b !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  word-break:break-word !important;
}
.file-upload.has-file .file-upload-name,
form[enctype="multipart/form-data"] .file-upload.has-file .file-upload-name{
  border-color:#86efac !important;
  background:#f0fdf4 !important;
  color:#166534 !important;
}
.file-upload .file-upload-message,
form[enctype="multipart/form-data"] .file-upload .file-upload-message{
  flex:1 1 260px !important;
  width:auto !important;
  margin-top:0 !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  background:#eff6ff !important;
  border:1px solid #bfdbfe !important;
  color:#1e3a8a !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}
.file-upload.has-file .file-upload-message,
form[enctype="multipart/form-data"] .file-upload.has-file .file-upload-message{
  background:#ecfdf5 !important;
  border-color:#bbf7d0 !important;
  color:#166534 !important;
}

/* APPEND-ONLY 2026-05-05: nới rộng toàn bộ form tạo/sửa để input không bị chật */
.form-card{
  max-width:1280px !important;
  width:100% !important;
}
.form-card .grid-form{
  grid-template-columns:repeat(2,minmax(360px,1fr)) !important;
  align-items:start !important;
}
.form-card .grid-form label,
.form-card .grid-form .full-row{
  min-width:0 !important;
}
.form-card .grid-form input[type="text"],
.form-card .grid-form input[type="number"],
.form-card .grid-form input[type="email"],
.form-card .grid-form input[type="tel"],
.form-card .grid-form input[type="date"],
.form-card .grid-form select,
.form-card .grid-form textarea{
  width:100% !important;
  min-width:260px !important;
  box-sizing:border-box !important;
}
.form-card .grid-form label.full-row input,
.form-card .grid-form label.full-row textarea{
  min-width:100% !important;
}
.form-card .order-entry-table,
.form-card .data-table{
  min-width:100% !important;
}
.form-card .order-entry-table input[type="text"],
.form-card .data-table input[type="text"]{
  min-width:150px !important;
  width:100% !important;
  box-sizing:border-box !important;
}
/* Căn phải các ô số trong dòng sản phẩm / đơn hàng / nhập mua */
.order-entry-table input[name="quantities"],
.order-entry-table input[name="unit_prices"],
.order-entry-table input[name="unit_costs"],
.order-entry-table input.cost-input,
.order-entry-table input.unit-price-input {
  text-align: right !important;
}
.form-card .order-entry-table input[name="variant_attribute_name"],
.form-card .order-entry-table input[name="variant_attribute_value"],
.form-card .order-entry-table input[name="variant_sku"]{
  min-width:180px !important;
}
@media (max-width: 920px){
  .form-card .grid-form{grid-template-columns:1fr !important;}
  .form-card .grid-form input[type="text"],
  .form-card .grid-form input[type="number"],
  .form-card .grid-form input[type="email"],
  .form-card .grid-form input[type="tel"],
  .form-card .grid-form input[type="date"],
  .form-card .grid-form select,
  .form-card .grid-form textarea{min-width:0 !important;}
}
/* APPEND-ONLY: Tangsi - nút chọn file Excel rõ ràng */
.tangsi-excel-upload-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 12px 14px !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
}

.tangsi-excel-upload-btn {
  min-height: 42px !important;
  padding: 10px 18px !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff, #e2e8f0) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.18), 0 10px 20px rgba(15, 23, 42, 0.12) !important;
}

.tangsi-excel-upload-status {
  padding: 10px 12px !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

.tangsi-excel-upload-box.has-file .tangsi-excel-upload-status {
  border-color: #86efac !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
}
/* APPEND-ONLY: chỉnh layout nhập Excel sản phẩm */
.tangsi-excel-upload-box {
  width: fit-content !important;
  min-width: unset !important;
  max-width: max-content !important;
  padding: 10px 12px !important;
}

/* Cho form nhập Excel xếp dọc: chọn file ở trên, submit ở dưới */
form[enctype="multipart/form-data"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

/* Hàng nút submit/hủy nằm dưới phần chọn file */
form[enctype="multipart/form-data"] .form-actions,
form[enctype="multipart/form-data"] .actions,
form[enctype="multipart/form-data"] .button-row {
  margin-top: 4px !important;
  align-self: flex-start !important;
}
/* APPEND-ONLY: Ẩn nút dropdown của input autocomplete */
input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
}

input[list] {
  appearance: none !important;
  -webkit-appearance: none !important;
}
/* APPEND-ONLY: UI login/register Tangsi SaaS */

.auth-page-pro {
  min-height: calc(100vh - 40px);
  display: grid;
  grid-template-columns: 1.1fr 420px;
  align-items: center;
  gap: 48px;
  padding: 48px 7vw;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 35%),
    linear-gradient(135deg, #f8fafc, #e0f2fe);
}

.auth-left-pro {
  max-width: 560px;
}

.auth-brand-pro {
  font-size: 24px;
  font-weight: 900;
  color: #075985;
  margin-bottom: 32px;
}

.auth-left-pro h1 {
  font-size: 44px;
  line-height: 1.1;
  color: #0f172a;
  margin-bottom: 18px;
}

.auth-left-pro p {
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
}

.auth-right-pro {
  display: flex;
  justify-content: center;
}

.auth-card-pro {
  width: 100%;
  max-width: 420px;
  padding: 34px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #bae6fd;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.auth-card-pro h1,
.auth-card-pro h2,
.auth-card-pro h3 {
  text-align: center;
  color: #075985;
  margin-bottom: 22px;
}

.auth-card-pro form {
  display: grid;
  gap: 14px;
}

.auth-card-pro label {
  font-weight: 700;
  color: #0f172a;
}

.auth-card-pro input,
.auth-card-pro select {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  padding: 10px 14px;
  background: #f8fafc;
}

.auth-card-pro input:focus,
.auth-card-pro select:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
  background: #ffffff;
}

.auth-card-pro button,
.auth-card-pro .btn {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: white;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.35);
}

.auth-card-pro a {
  color: #0284c7;
  font-weight: 700;
}

@media (max-width: 900px) {
  .auth-page-pro {
    grid-template-columns: 1fr;
    padding: 28px 18px;
  }

  .auth-left-pro {
    text-align: center;
    margin: 0 auto;
  }

  .auth-left-pro h1 {
    font-size: 32px;
  }
}
/* APPEND-ONLY: Button top nav Tangsi */

.top-nav {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Style từng nút */
.top-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;
  padding: 8px 18px !important;

  border-radius: 999px !important;
  border: 1px solid #bae6fd !important;

  background: #ffffff !important;
  color: #075985 !important;

  font-weight: 800 !important;
  text-decoration: none !important;

  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.15) !important;

  transition: all 0.2s ease !important;
}

/* Hover */
.top-nav a:hover {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;

  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.3) !important;
}

/* Nút nổi bật (login) */
.top-nav a[href*="dang-nhap"] {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Hover riêng login */
.top-nav a[href*="dang-nhap"]:hover {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
}
/* APPEND-ONLY: Topbar SaaS Pro */

.topbar {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(186, 230, 253, 0.9) !important;
  box-shadow: 0 18px 45px rgba(14, 165, 233, 0.14) !important;
}

.top-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(224, 242, 254, 0.65) !important;
  border: 1px solid rgba(186, 230, 253, 0.8) !important;
}

.top-nav a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  color: #075985 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

.top-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 6px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #0ea5e9 !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.2s ease !important;
}

.top-nav a:hover {
  background: #ffffff !important;
  color: #0369a1 !important;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.18) !important;
  transform: translateY(-1px) !important;
}

.top-nav a:hover::after {
  transform: scaleX(1) !important;
}

.top-nav a[href*="dang-nhap"] {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35) !important;
}

.top-nav a[href*="dang-nhap"]::after {
  background: #ffffff !important;
}

.top-nav a[href*="dang-nhap"]:hover {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
}
/* APPEND-ONLY: Thu nhỏ checkbox phân quyền */

/* Chỉ áp dụng trong bảng phân quyền */
table input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  transform: scale(1) !important;
  cursor: pointer;
}

/* Nếu trước đó bị scale lớn */
table input[type="checkbox"]:checked {
  transform: scale(1) !important;
}

/* Canh giữa checkbox trong ô */
table td input[type="checkbox"] {
  display: block;
  margin: auto;
}
/* ===== PROFILE COMPANY BLOCK ===== */

.profile-company-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:2px;
  min-width:320px;
}

.profile-user-name{
  font-size:22px;
  font-weight:800;
  color:#12344d;
  line-height:1.2;
  text-align:left;
}

.profile-company-name{
  font-size:14px;
  font-weight:600;
  color:#587086;
  line-height:1.3;
  text-align:left;
}
.profile-login-slug{
  width:100%;
  text-align:left !important;
}

.profile-login-slug{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:#7f93a6;
  line-height:1.4;
}

.profile-login-label{
  color:#7f93a6;
}

.profile-login-link{
  color:#0b5cab;
  font-weight:700;
  word-break:break-all;
}

.copy-slug-btn{
  border:none;
  background:#e9f6ff;
  color:#0b5cab;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:all .18s ease;
}

.copy-slug-btn:hover{
  background:#d7efff;
}
.tenant-search-box {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 14px 0 18px;
}

.tenant-search-box input {
  min-width: 360px;
  height: 42px;
  border: 1px solid #bfe8ff;
  border-radius: 14px;
  padding: 0 14px;
  outline: none;
  background: #fff;
}

.tenant-search-box input:focus {
  border-color: #22aeea;
  box-shadow: 0 0 0 3px rgba(34, 174, 234, 0.12);
}

.btn-danger {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.btn-danger:hover {
  background: #fecaca;
}
.badge-active {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-weight: 700;
  font-size: 12px;
}
.zalo-support-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  background: #0068ff;
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 104, 255, 0.28);
}

.zalo-support-btn:hover {
  background: #0054cc;
}
/* Cài đặt doanh nghiệp - bố cục 2 cột */
.company-settings-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  align-items: start !important;
}

.company-settings-grid label {
  min-width: 0 !important;
}

.company-settings-grid input[type="text"],
.company-settings-grid input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
}

.company-settings-grid .full-row {
  grid-column: 1 / -1 !important;
}

@media (max-width: 768px) {
  .company-settings-grid {
    grid-template-columns: 1fr !important;
  }
}
.readonly-input {
  background: #eef6ff !important;
  color: #334155 !important;
  cursor: not-allowed !important;
}
/* Search box trong các trang danh sách */
.list-search-box {
  position: relative;
  margin: 12px 0 14px;
  max-width: 760px;
}

.list-search-form {
  display: flex;
  align-items: center;
  gap: 1%;
  flex-wrap: nowrap;
}

.list-search-input {
  width: 420px;
  max-width: 420px;
  height: 40px;
  border: 1px solid #cfe1f4;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.list-search-input:focus {
  border-color: #22aeea;
  box-shadow: 0 0 0 3px rgba(34, 174, 234, 0.12);
}

.list-search-form .btn {
  height: 40px;
  white-space: nowrap;
  flex-shrink: 0;
}

.list-search-suggestions {
  position: absolute;
  top: 46px;
  left: 0;
  width: 420px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cfe1f4;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
  z-index: 99999;
}

.list-search-suggestions.hidden {
  display: none;
}

.list-search-item {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.list-search-item:hover {
  background: #eef8ff;
}

.list-search-empty {
  padding: 10px 12px;
  color: #8a96a8;
  font-size: 14px;
}
.bulk-order-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.bulk-action-menu {
  position: absolute;
  top: 44px;
  left: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid #d8e2ee;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
  padding: 6px;
  z-index: 99999;
}

.bulk-action-menu.hidden {
  display: none;
}

.bulk-action-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
}

.bulk-action-item:hover {
  background: #eef8fc;
}

.compact-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
.order-print-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  min-width: 90px;
}

.order-print-actions .btn {
  width: 86px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.order-print-actions .btn.is-done,
.order-print-actions .btn.btn-secondary.is-done {
  background: #ffe9a8 !important;
  border: 1px solid #e5c24d !important;
  color: #d10000 !important;
}
.status-cancelled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.order-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.order-cancel-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.order-cancel-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-detail-actions .order-detail-small-btn,
.order-detail-actions .order-cancel-badge {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.order-cancel-badge {
  background: #fee2e2 !important;
  border: 1px solid #f5b5b5 !important;
  color: #b91c1c !important;
}
/* FIX: Chi tiết đơn hàng - form hủy và các button nằm chung 1 hàng */
.section-head {
  align-items: flex-start !important;
}

.section-head > .order-detail-actions {
  width: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  margin-top: 8px !important;
}

.section-head > .order-detail-actions .order-cancel-form {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

.section-head > .order-detail-actions .order-cancel-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
}

.section-head > .order-detail-actions .order-cancel-field input {
  width: 150px !important;
  min-width: 150px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

.section-head > .order-detail-actions .order-detail-small-btn,
.section-head > .order-detail-actions .order-cancel-form .btn {
  min-width: 110px !important;
  width: auto !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

@media (max-width: 1200px) {
  .section-head > .order-detail-actions {
    flex-wrap: wrap !important;
  }

  .section-head > .order-detail-actions .order-cancel-form {
    flex-wrap: wrap !important;
  }
}
.order-detail-actions .back-btn {
  background: #6b7280 !important;
  border: 1px solid #6b7280 !important;
  color: #ffffff !important;
}

.order-detail-actions .back-btn:hover {
  background: #4b5563 !important;
  border: 1px solid #4b5563 !important;
  color: #ffffff !important;
}
.payment-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
}

.payment-status-badge.pay-unpaid {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #c2410c !important;
}

.payment-status-badge.pay-partial {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.payment-status-badge.pay-overpaid {
  background: #fff8dc !important;
  border-color: #d4af37 !important;
  color: #a16207 !important;
}

.payment-status-badge.pay-paid {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}
.payment-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(15,23,42,.45);
  align-items:center;
  justify-content:center;
  padding:20px;
}

.payment-modal-box{
  width:min(520px,100%);
  background:#fff;
  border-radius:22px;
  padding:24px;
  box-shadow:0 24px 60px rgba(15,23,42,.25);
  position:relative;
}

.modal-close{
  position:absolute;
  top:12px;
  right:14px;
  border:0;
  background:#f1f5f9;
  border-radius:999px;
  width:34px;
  height:34px;
  cursor:pointer;
  font-size:22px;
}

.qr-box{
  display:flex;
  justify-content:center;
  padding:16px;
  background:#f8fafc;
  border-radius:18px;
  margin-top:14px;
}