@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* New design system palette (Trang chủ redesign) */
  --primary: #0C2D5C;        /* xanh dương đậm - sidebar, tiêu đề, nút đăng xuất */
  --primary-light: #14508C;  /* xanh dương vừa - nút chính, icon nhấn, menu active */
  --sidebar-text: #C6D4E6;   /* chữ menu chưa chọn */
  --bg-page: #F2F5F9;        /* nền trang tổng thể */
  --bg-card: #FFFFFF;        /* nền card */
  --text-primary: #1F2937;
  --text-secondary: #5A6B85;

  /* Color System - Light Theme Tokens */
  --bg-light: #F2F5F9; /* Premium clean off-white background */
  --bg-light-panel: #ffffff; /* Crisp white panel background */
  --text-light: #334155; /* Soft dark slate for body text */
  --text-light-muted: #8A93A6; /* Muted slate for secondary text */
  --text-light-highlight: #0f172a; /* Rich dark slate for headings */
  --border-light: #DCE2EC; /* Soft light gray border */
  
  /* Color System - Dark Theme Tokens */
  --bg-dark: #08090c; /* Matte black - extremely dark and glare-free */
  --bg-dark-panel: #0e1015; /* Dark charcoal - very deep and muted */
  --text-dark: #cbd5e1; /* Soft light slate (highly readable, zero glare) */
  --text-dark-muted: #94a3b8; /* Muted slate gray */
  --text-dark-highlight: #f8fafc; /* Crisp, clean soft white for headings */
  --border-dark: #1b1e26; /* Dark, subtle border */

  /* Current Active Theme Variables (default light) */
  --bg: var(--bg-light);
  --bg-panel: var(--bg-light-panel);
  --text: var(--text-light);
  --text-muted: var(--text-light-muted);
  --text-highlight: var(--text-light-highlight);
  --border: var(--border-light);
  --glass-shadow: rgba(15, 23, 42, 0.05);
  --card-glow: transparent;
  --company-item-bg: #ffffff;
  --task-item-bg: #ffffff;
  --alert-danger-bg: #fef2f2;
  --alert-warning-bg: #fffbeb;
  --alert-info-bg: #ecfeff;
  --bg-input: var(--bg-light-panel);
  
  /* Panel Colors (Light Theme Defaults) */
  --bg-sidebar-search: var(--bg-light-panel);
  --bg-sidebar-add: var(--bg-light-panel);
  --bg-company-list: var(--bg-light-panel);
  --bg-dashboard-stats: #dce9fb;
  --bg-task-feed: #dce9fb;
  --bg-alert-center: #dcf3e6;
  --bg-company-tasks: #dcf3e6;
  --bg-sidebar-nav: #dce9fb;
  --bg-company-profile: var(--bg-light-panel);
  --bg-company-ai: var(--bg-light-panel);
  --bg-settings-modal: var(--bg-light-panel);
  --border-task-feed: rgba(37, 99, 235, 0.25);
  --border-alert-center: rgba(34, 197, 94, 0.25);

  --accent-primary: #2563eb; /* Deep professional blue */
  --accent-primary-glow: rgba(37, 99, 235, 0.05);
  --navy: var(--primary); /* Solid dark navy for sidebar/header/primary structural elements */
  --navy-light: var(--primary-light);
  --accent-secondary: #06b6d4;
  --accent-secondary-glow: rgba(6, 182, 212, 0.05);

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #06b6d4;

  --sync-success-bg: rgba(16, 185, 129, 0.1);
  --sync-success-border: rgba(16, 185, 129, 0.25);
  --sync-success-text: #34d399;

  --sync-primary-bg: rgba(99, 102, 241, 0.1);
  --sync-primary-border: rgba(99, 102, 241, 0.25);
  --sync-primary-text: #a5b4fc;

  --sync-danger-bg: rgba(239, 68, 68, 0.1);
  --sync-danger-border: rgba(239, 68, 68, 0.25);
  --sync-danger-text: #fca5a5;

  /* Category Badges (Dark Mode) */
  --badge-shipment-bg: rgba(14, 165, 233, 0.07);
  --badge-shipment-text: #38bdf8;
  --badge-shipment-border: rgba(14, 165, 233, 0.16);

  --badge-register-bg: rgba(168, 85, 247, 0.07);
  --badge-register-text: #c084fc;
  --badge-register-border: rgba(168, 85, 247, 0.16);

  --badge-newproduct-bg: rgba(234, 179, 8, 0.07);
  --badge-newproduct-text: #facc15;
  --badge-newproduct-border: rgba(234, 179, 8, 0.16);

  --badge-callonline-bg: rgba(20, 184, 166, 0.07);
  --badge-callonline-text: #2dd4bf;
  --badge-callonline-border: rgba(20, 184, 166, 0.16);

  --badge-meetfactory-bg: rgba(249, 115, 22, 0.07);
  --badge-meetfactory-text: #ff9f43;
  --badge-meetfactory-border: rgba(249, 115, 22, 0.16);

  --badge-pushdeposit-bg: rgba(34, 197, 94, 0.07);
  --badge-pushdeposit-text: #4ade80;
  --badge-pushdeposit-border: rgba(34, 197, 94, 0.16);

  --badge-foc-bg: rgba(239, 68, 68, 0.07);
  --badge-foc-text: #f87171;
  --badge-foc-border: rgba(239, 68, 68, 0.16);

  --badge-other-bg: #F1F3F7;
  --badge-other-text: #475569;
  --badge-other-border: #DCE2EC;

  --badge-company-bg: rgba(37, 99, 235, 0.1);
  --badge-company-text: #2563eb;
  --badge-company-border: rgba(37, 99, 235, 0.25);

  /* Feed Tags (Dark Mode) */
  --feed-tag-company-bg: rgba(37, 99, 235, 0.08);
  --feed-tag-company-text: #2563eb;
  --feed-tag-company-border: rgba(37, 99, 235, 0.2);

  --feed-tag-contact-bg: rgba(139, 92, 246, 0.08);
  --feed-tag-contact-text: #a78bfa;
  --feed-tag-contact-border: rgba(139, 92, 246, 0.2);

  --feed-tag-general-bg: #EAF1FA;
  --feed-tag-general-text: #14508C;
  --feed-tag-general-border: rgba(20, 80, 140, 0.3);

  --font-title: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Was "all 0.2s ease" - transitioning EVERY property (used on ~24
     selectors app-wide: .btn, .filter-chip, .glass-panel...) makes the
     browser watch every single property for changes instead of just the
     ones actually animated here, and combined with a hover rule that also
     changes transform (see .btn-primary:hover/.btn-danger:hover) is exactly
     the kind of setup that trips a weak/buggy GPU compositor - reported as
     "di chuột vào đâu là chỗ đó biến mất" (content vanishing wherever the
     cursor moves) on Mac Safari, then again as continuous flickering on a
     budget laptop's Chrome even after every individual hover-transform rule
     found so far was removed. transform and box-shadow are the two
     properties that actually force a GPU compositing layer (as opposed to
     background-color/border-color/color/opacity, which are cheap paint-only
     changes) - dropped both from this shared list entirely rather than
     keep hunting for one more rule that still pairs one of them with a
     hover/scroll-triggered repaint. A few :hover rules (.glass-panel,
     .btn-primary...) still change box-shadow, and box-shadow/transform
     values still update on hover either way - they just apply instantly
     now instead of animating into place. */
  --transition-smooth: background-color 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

[data-theme="light"] {
  --bg: var(--bg-light);
  --bg-panel: var(--bg-light-panel);
  --text: var(--text-light);
  --text-muted: var(--text-light-muted);
  --text-highlight: var(--text-light-highlight);
  --border: var(--border-light);
  --glass-shadow: rgba(15, 23, 42, 0.05);
  --card-glow: transparent;
  --company-item-bg: #ffffff;
  --task-item-bg: #ffffff;
  --alert-danger-bg: #fef2f2;
  --alert-warning-bg: #fffbeb;
  --alert-info-bg: #ecfeff;
  --bg-input: var(--bg-light-panel);

  /* Panel Colors (Light Theme Defaults) */
  --bg-sidebar-search: var(--bg-light-panel);
  --bg-sidebar-add: var(--bg-light-panel);
  --bg-company-list: var(--bg-light-panel);
  --bg-dashboard-stats: #dce9fb;
  --bg-task-feed: #dce9fb;
  --bg-alert-center: #dcf3e6;
  --bg-company-tasks: #dcf3e6;
  --bg-sidebar-nav: #dce9fb;
  --bg-company-profile: var(--bg-light-panel);
  --bg-company-ai: var(--bg-light-panel);
  --bg-settings-modal: var(--bg-light-panel);
  --border-task-feed: rgba(37, 99, 235, 0.25);
  --border-alert-center: rgba(34, 197, 94, 0.25);

  /* --sync-*-text were tuned bright/low-saturation for a dark background
     (used by .btn-sync-success/-primary/-danger - "Kết nối Gmail" and
     other sync-status buttons) - on light theme they read as barely-there
     pastel text, same issue already fixed for class-diamond/platinum/gold
     and the feed-filter-btn colors elsewhere in this file. */
  --sync-success-text: #047857;
  --sync-primary-text: #4338ca;
  --sync-danger-text: #b91c1c;

  /* Same fix, extended to the underlying --badge- and --feed-tag- variables
     themselves rather than just the one or two classes that had already
     been patched per-selector (.feed-filter-btn's own overrides further
     down only covered the filter row - the .badge-shipment/.badge-register/
     etc. family used on task cards throughout the app read straight from
     these same variables and were still using the dark-mode pastel values,
     which is what made "category badges" across the app hard to read on
     light theme). Redefining the variable here fixes every consumer at
     once instead of chasing down each class individually. */
  --badge-shipment-text: #0369a1;
  --badge-register-text: #6d28d9;
  --badge-newproduct-text: #a16207;
  --badge-callonline-text: #0f766e;
  --badge-meetfactory-text: #c2410c;
  --badge-pushdeposit-text: #15803d;
  --badge-foc-text: #b91c1c;
  --feed-tag-contact-text: #6d28d9;
  --badge-dm-text: #4338ca;
  --badge-chat-text: #1d4ed8;
}

[data-theme="dark"] {
  --bg: var(--bg-dark);
  --bg-panel: var(--bg-dark-panel);
  --text: var(--text-dark);
  --text-muted: var(--text-dark-muted);
  --text-highlight: var(--text-dark-highlight);
  --border: var(--border-dark);
  --glass-shadow: rgba(0, 0, 0, 0.4);
  --card-glow: transparent;
  --company-item-bg: #141720;
  --task-item-bg: #141720;
  --alert-danger-bg: #1d0f11;
  --alert-warning-bg: #1e160e;
  --alert-info-bg: #09171b;
  --bg-input: var(--bg-dark);

  /* Panel Colors (Dark Theme Defaults) */
  --bg-sidebar-search: var(--bg-dark-panel);
  --bg-sidebar-add: var(--bg-dark-panel);
  --bg-company-list: var(--bg-dark-panel);
  --bg-dashboard-stats: #1b2c4d;
  --bg-task-feed: #1b2c4d;
  --bg-alert-center: #163524;
  --bg-company-tasks: #163524;
  --bg-sidebar-nav: #1b2c4d;
  --bg-company-profile: var(--bg-dark-panel);
  --bg-company-ai: var(--bg-dark-panel);
  --bg-settings-modal: var(--bg-dark-panel);
  --border-task-feed: rgba(59, 130, 246, 0.3);
  --border-alert-center: rgba(34, 197, 94, 0.3);

  --badge-other-bg: rgba(107, 114, 128, 0.1);
  --badge-other-text: #cbd5e1;
  --badge-other-border: rgba(107, 114, 128, 0.25);

  --feed-tag-general-bg: rgba(96, 165, 250, 0.1);
  --feed-tag-general-text: #93c5fd;
  --feed-tag-general-border: rgba(96, 165, 250, 0.3);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh; /* accounts for iOS Safari's dynamic address bar - 100vh alone leaves gaps/overflow as it shows/hides */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  background-image: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-highlight);
  font-family: var(--font-title);
  transition: color 0.4s ease;
}

body[data-theme="light"] {
  background-image: none;
  /* The default --color-warning (#f59e0b) is tuned for dark backgrounds -
     on the light theme's pale card backgrounds it reads as glaring/hard to
     read (e.g. the "Cần chú ý" alert-center text), so light theme gets a
     darker amber here instead. */
  --color-warning: #92400e;
}

/* Scrollbar styling - solid accent color at all times (not just on hover)
   and thick enough to actually notice, so any scrollable box in the app
   (modal lists, task feeds, etc.) reads as "there's more below" instead of
   the near-invisible default thin/dim scrollbar. */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--accent-primary) rgba(0, 0, 0, 0.08);
}
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
  filter: brightness(1.15);
}

/* Custom scroll indicator (JS-drawn, see ensureScrollIndicator in app.js) -
   real mobile browsers don't render ::-webkit-scrollbar at all, so this
   stands in for it on touch devices only. */
.custom-scroll-indicator-track {
  position: absolute;
  top: 0;
  right: 2px;
  width: 5px;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}
.custom-scroll-indicator-thumb {
  position: absolute;
  right: 0;
  width: 5px;
  min-height: 24px;
  background: var(--accent-primary);
  border-radius: 999px;
  opacity: 0.8;
}

/* Glassmorphism Panel style */
.glass-panel {
  background: var(--bg-panel);
  /* No backdrop-filter here on purpose - --bg-panel (#ffffff / #0e1015,
     see :root/theme blocks) is fully opaque, so blurring whatever's behind
     this element has zero visible effect (verified: identical render with
     and without it, even against a vivid gradient background). It still
     costs a real GPU compositing pass on every one of the ~50 places this
     class is used app-wide (every modal, most panels) - disproportionately
     expensive on mobile, and was a real contributor to reported lag in
     Điện thoại view for no visual benefit at all. If a future redesign
     wants a genuinely translucent glass look, --bg-panel needs an alpha
     channel first - re-adding blur to an opaque background is pure waste.
  */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px 0 var(--glass-shadow);
  transition: var(--transition-smooth);
}

.glass-panel:hover {
  border-color: var(--border);
  box-shadow: 0 8px 32px 0 var(--glass-shadow);
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-panel);
}

body[data-theme="light"] header {
  background: var(--bg-panel);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-logo {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1.25rem;
  font-family: var(--font-title);
  box-shadow: none;
}

.logo-text {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
}

.logo-text span {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.user-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.user-display-email {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.8;
  white-space: nowrap;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  padding: 0.25rem;
  border-radius: var(--radius-sm);
}

.zoom-controls .btn-icon {
  padding: 0.25rem 0.4rem;
  height: 26px;
  width: 26px;
}

.zoom-controls #zoom-value {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 38px;
  text-align: center;
}

/* Cài đặt modal - account section (đổi mật khẩu / đăng xuất, moved out of
   the top bar) + section labels separating it from the API/Sheets config
   form below. */
.settings-section-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  margin: 1.25rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-primary);
}

.settings-account-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}

.settings-account-section .settings-section-title {
  margin-top: 0;
}

.settings-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.settings-account-email {
  font-size: 0.9rem;
  font-weight: 600;
  word-break: break-all;
}

.settings-account-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settings-account-actions .btn {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
}

/* Button & Controls */
.btn {
  font-family: var(--font-title);
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), #3b82f6);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
  /* Was transform: translateY(-1px) - a hover-triggered transform paired
     with a box-shadow change on a class used this widely is exactly the
     combination that trips Safari's compositor (see --transition-smooth's
     own comment); the shadow/background change alone still gives clear
     hover feedback without it. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #60a5fa, var(--accent-primary));
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-primary);
}

/* Filter chips (review-queue "Cần phân lại": Lọc theo nước / Lọc theo phân
   loại khách). Deliberately its own class instead of reusing .btn-secondary
   - that class is transparent with only a faint 1px border (by design, for
   full-size buttons sitting on their own), which read as barely-there text
   with no clear boundary once shrunk down to a dense chip row. These get a
   real tinted fill + colored border so each option reads as a distinct,
   clickable box at a glance. */
.filter-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  font-family: var(--font-title);
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1.5px solid rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent-primary);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.filter-chip:hover {
  border-color: var(--accent-primary);
  background: rgba(37, 99, 235, 0.16);
}
.filter-chip.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

/* "Cần phân lại" country chips: orange once every remaining company in that
   country already has a recipient picked (pending_reassignment_to set) -
   only waiting on their confirmation now, nothing left for admin/leader to
   manually assign there. Plain blue .filter-chip means at least one company
   in that country still needs someone picked. */
.filter-chip-done {
  border-color: rgba(217, 119, 6, 0.4);
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}
.filter-chip-done:hover {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.18);
}
.filter-chip-done.active {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}

.btn-outline-primary {
  background: var(--bg-card);
  color: var(--primary-light);
  border: 1px solid var(--primary-light);
}
.btn-outline-primary:hover {
  background: rgba(20, 80, 140, 0.06);
}


.btn-danger {
  background: var(--color-danger);
  color: white;
}

.btn-danger:hover {
  /* Same reasoning as .btn-primary:hover above - transform dropped. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Rendered campaign-email HTML often carries a fixed-width banner image or
   table from whatever authored the Gmail draft - without this the preview
   box grows a horizontal scrollbar under otherwise-normal text content. */
.campaign-preview-box img {
  max-width: 100%;
  height: auto;
}
.campaign-preview-box table {
  max-width: 100%;
}
/* Genuinely-wide content (a heading/table that still doesn't fit even
   after the max-width rules above) stays reachable by scrolling instead of
   silently clipped - kept thin/unobtrusive rather than the browser's
   default full-size scrollbar. */
.campaign-preview-box {
  scrollbar-width: thin;
}
.campaign-preview-box::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.campaign-preview-box::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.btn-sync-success {
  background: var(--sync-success-bg) !important;
  border: 1px solid var(--sync-success-border) !important;
  color: var(--sync-success-text) !important;
}
.btn-sync-success:hover {
  background: var(--sync-success-border) !important;
}

.btn-sync-primary {
  background: var(--sync-primary-bg) !important;
  border: 1px solid var(--sync-primary-border) !important;
  color: var(--sync-primary-text) !important;
}
.btn-sync-primary:hover {
  background: var(--sync-primary-border) !important;
}

.btn-sync-danger {
  background: var(--sync-danger-bg) !important;
  border: 1px solid var(--sync-danger-border) !important;
  color: var(--sync-danger-text) !important;
}
.btn-sync-danger:hover {
  background: var(--sync-danger-border) !important;
}

/* Task Category Badges styling */
.task-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  margin-right: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-shipment {
  background: var(--badge-shipment-bg);
  color: var(--badge-shipment-text);
  border: 1px solid var(--badge-shipment-border);
}

.badge-register {
  background: var(--badge-register-bg);
  color: var(--badge-register-text);
  border: 1px solid var(--badge-register-border);
}

.badge-newproduct {
  background: var(--badge-newproduct-bg);
  color: var(--badge-newproduct-text);
  border: 1px solid var(--badge-newproduct-border);
}

.badge-callonline {
  background: var(--badge-callonline-bg);
  color: var(--badge-callonline-text);
  border: 1px solid var(--badge-callonline-border);
}

.badge-meetfactory {
  background: var(--badge-meetfactory-bg);
  color: var(--badge-meetfactory-text);
  border: 1px solid var(--badge-meetfactory-border);
}

.badge-pushdeposit {
  background: var(--badge-pushdeposit-bg);
  color: var(--badge-pushdeposit-text);
  border: 1px solid var(--badge-pushdeposit-border);
}

.badge-foc5, .badge-foclap {
  background: var(--badge-foc-bg);
  color: var(--badge-foc-text);
  border: 1px solid var(--badge-foc-border);
}

.badge-other {
  background: var(--badge-other-bg);
  color: var(--badge-other-text);
  border: 1px solid var(--badge-other-border);
}

/* Company Badge tag */
.badge-company-tag {
  background: var(--badge-company-bg) !important;
  color: var(--badge-company-text) !important;
  border: 1px solid var(--badge-company-border) !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.theme-toggle {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  transition: var(--transition-smooth);
}

.theme-toggle:hover {
  border-color: var(--accent-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* App Containers */
.app-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Login Page Styles */
.login-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-image: radial-gradient(circle at center, rgba(99, 102, 241, 0.05) 0%, transparent 60%);
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  text-align: center;
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem auto;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.login-card h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.login-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.login-alt-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.login-alt-links a,
.login-back-link {
  display: block;
  font-size: 0.85rem;
  color: var(--accent-primary);
  text-decoration: none;
}

.login-back-link {
  margin-top: 1rem;
  text-align: center;
}

.login-alt-links a:hover,
.login-back-link:hover {
  text-decoration: underline;
}

.form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--text);
  font-family: var(--font-body);
  transition: var(--transition-smooth);
}


/* "Thêm đối tác mới" - denser than the default form-input so the top
   Tên công ty/Quốc gia/Website URL row fits comfortably 3-across without
   fields feeling cramped or labels wrapping awkwardly. */
#add-company-form .form-input {
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
}
#add-company-form .form-group label {
  font-size: 0.72rem;
  margin-bottom: 0.2rem;
}

.password-field-wrap {
  position: relative;
}

.password-field-wrap .form-input {
  padding-right: 2.6rem;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle-btn:hover {
  color: var(--text);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

.google-btn {
  width: 100%;
  background: white;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: var(--transition-smooth);
}

.google-btn:hover {
  /* transform dropped - see --transition-smooth's own comment. */
  background: #f9fafb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  margin: 1.5rem 0;
  font-size: 0.8rem;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}

.divider:not(:empty)::before {
  margin-right: .5em;
}

.divider:not(:empty)::after {
  margin-left: .5em;
}

/* Dashboard Layout */
.dashboard-wrapper {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 1.5rem;
  gap: 1.5rem;
  height: auto;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  overflow: visible;
}

/* Sidebar List */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  position: sticky;
  top: 1.5rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Compact nav menu sidebar (replaces the old always-expanded search/filter/list) */
.sidebar-compact {
  gap: 0.35rem;
  background: var(--navy) !important;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.85rem 0.6rem;
}
.sidebar-brand {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  padding: 0.3rem 0.6rem 1rem 0.6rem;
}
.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--sidebar-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: var(--transition-smooth);
}
.nav-menu-item i {
  width: 18px;
  text-align: center;
  color: var(--sidebar-text);
  transition: var(--transition-smooth);
}
.nav-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.nav-menu-item:hover i {
  color: #ffffff;
}
.nav-menu-item.active {
  background: var(--primary-light);
  color: #ffffff;
}
.nav-menu-item.active i {
  color: #ffffff;
}

/* Clickable stats overview card (opens the full task list modal) */
.dashboard-stats-clickable {
  cursor: pointer;
  transition: var(--transition-smooth);
}
.dashboard-stats-clickable:hover {
  /* transform dropped - see --transition-smooth's own comment. These tiles
     sit adjacent to each other on the very first screen a user sees, so
     this was likely the single biggest contributor to "di chuột vào đâu là
     chỗ đó biến mất" reported on Mac Safari. */
  border-color: var(--accent-primary);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  padding-left: 2.25rem;
}

.search-box i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  display: none;
}

.autocomplete-item {
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.autocomplete-item:hover {
  background: var(--accent-primary);
  color: white;
}

/* The "không tìm thấy"/"chưa tải được" placeholder row (wireLoginNameAutocomplete)
   isn't clickable - must not pick up the hover-highlight above, which would
   make it look selectable like a real suggestion. */
.autocomplete-item.autocomplete-empty:hover {
  background: none;
  color: var(--text-muted);
}

/* Small hover-triggered info bubble - for help text that used to sit
   permanently under a field (e.g. "Ảnh bằng chứng cắm cờ"'s cách cắm cờ
   note), eating vertical space every time the form is open even though
   it's only needed once. The icon is the only thing that stays visible;
   the note appears beside/below it on hover.
   NOT pure CSS :hover - a plain absolutely-positioned box here gets
   clipped (text visibly cut off, reported directly) by .modal-card's own
   overflow-y: auto (which forces overflow-x: auto too per the CSS spec,
   since only one axis was set to non-visible) AND by its
   transform: scale(...) open/close animation, which makes the card the
   containing block for position:fixed descendants too - so neither
   absolute nor fixed positioning nested inside the modal can escape its
   bounds. showInfoTooltip()/hideInfoTooltip() (app.js) instead clone this
   box's content into one shared #global-info-tooltip element appended
   directly to <body>, positioned in real viewport coordinates via
   getBoundingClientRect() - genuinely outside the modal's DOM subtree, so
   nothing about the modal's own size or transform can clip it. */
.info-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.info-tooltip-wrap .info-tooltip-icon {
  color: var(--text-muted);
  cursor: help;
  font-size: 0.85rem;
}

/* Content template only - never shown in place, always display: none.
   showInfoTooltip() reads its innerHTML and renders it via the shared
   #global-info-tooltip element instead (see comment above). */
.info-tooltip-wrap .info-tooltip-box {
  display: none;
}

#global-info-tooltip {
  position: fixed;
  display: none;
  width: 320px;
  max-width: min(90vw, 320px);
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  z-index: 3000;
  pointer-events: none;
}

#global-info-tooltip.visible {
  display: block;
}

/* Review-queue claims/reassign lists: a visibly bordered, always-scrollable
   box (not just overflow-y auto with the default thin browser scrollbar) so
   it reads as its own scroll region separate from the modal's outer scroll,
   and it's obvious there's more to see below the fold. */
.review-queue-scrollbox {
  max-height: 55vh;
  overflow-y: scroll;
  padding-right: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.75rem;
  scrollbar-width: auto;
  scrollbar-color: var(--accent-primary) rgba(0, 0, 0, 0.08);
}
.review-queue-scrollbox::-webkit-scrollbar {
  width: 14px;
}
.review-queue-scrollbox::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Country Auto-suggest */
.country-suggest-container {
  position: relative;
}

.country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  display: none;
}

/* Company list */
.company-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}

.company-item {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--company-item-bg);
  transition: var(--transition-smooth);
}

.company-item:hover, .company-item.active {
  /* transform: translateX(4px) dropped - same hover-transform +
     background/border-color combo already fixed on .btn-primary/.btn-danger/
     .google-btn/.dashboard-stats-clickable, just missed here since this rule
     sits far from those. .company-item is every row in the customer list -
     moving the mouse down a long list kept re-triggering it row after row,
     reported as "di chuột tới đâu là nháy tới đó" (flickers wherever the
     cursor goes) even after the earlier round of fixes. */
  background: var(--accent-primary-glow);
  border-color: var(--accent-primary);
}

.company-item h4 {
  font-family: var(--font-title);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  word-break: break-word;
  white-space: normal;
}

.company-item p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.company-item.active p {
  color: #bfdbfe;
}

/* Compact variant for the "Cần phân lại" review-queue rows - Admin/leader
   scan a long queue (100+ rows) looking for specific companies, so density
   matters more here than the roomier default .company-item spacing built
   for the main "Khách hàng" browsing list. */
.company-item-compact {
  padding: 0.4rem 0.6rem;
}
.company-item-compact h4 {
  font-size: 0.82rem;
  margin-bottom: 0.1rem;
}
.company-item-compact p {
  font-size: 0.72rem;
}

/* Main Dashboard Area */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: auto;
  overflow: visible;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-panel) !important;
}

.btn-navy {
  background: var(--navy) !important;
  color: #ffffff !important;
  border-color: var(--navy) !important;
}
.btn-navy:hover {
  background: var(--navy-light) !important;
  border-color: var(--navy-light) !important;
}

.active-company-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 320px;
  min-width: 0;
}

.btn-back-dashboard {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* The Home button specifically (not "Quay lại") - .btn-secondary's default
   transparent/black-white look made it hard to spot at a glance, so it
   stands out with the same accent color used for primary actions. */
#btn-home-dashboard {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-color: var(--accent-primary) !important;
}
#btn-home-dashboard:hover {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

.active-company-titleblock {
  min-width: 0;
}

.active-company-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.active-company-header h2 {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
  margin: 0;
}

.active-company-header p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.btn-delete-company {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

/* Panel Sections Grid */
.sections-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
  height: auto;
  overflow: visible;
  padding-bottom: 2rem;
}

.dashboard-flat-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: 1.5rem;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-card {
  padding: 1.5rem;
}

.info-card h3 {
  font-family: var(--font-title);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  color: var(--accent-primary);
}

/* KPI Metrics */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric-box {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  text-align: center;
}


.metric-box .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.metric-box .value {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
}

.metric-box.active-special {
  border-color: var(--color-warning);
  background: rgba(245, 158, 11, 0.05);
}

.metric-box.active-special .value {
  color: var(--color-warning);
}

/* Contact List in Card */
.contact-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-card-sub {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.contact-card-sub h5 {
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-card-sub p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.contact-actions {
  display: flex;
  gap: 0.5rem;
}

/* Requested directly: copy chính xác SĐT/email từ danh sách liên hệ mà
   không phải tự bôi đen. */
.contact-copy-icon {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.72rem;
  opacity: 0.7;
  margin-left: 0.1rem;
}
.contact-copy-icon:hover {
  opacity: 1;
  color: var(--accent-primary);
}

/* Reusable Display Components (consolidates repeated inline styles in profile
   panel) - a faint near-invisible rgba(0,0,0,.15)/.04 fill with a plain
   var(--border) edge read as "mờ nhạt" (faint/washed-out), barely distinct
   from the glass-panel behind it. Given a real indigo-tinted fill + a left
   accent bar instead, same "card" treatment already used for the customers
   filter row's inputs and the Task feed panel's border-task-feed variable. */
.info-display-box {
  background: rgba(37, 99, 235, 0.07);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-task-feed);
  border-left: 3px solid var(--accent-primary);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.6;
  box-shadow: 0 1px 3px var(--glass-shadow);
}

body[data-theme="dark"] .info-display-box {
  background: rgba(37, 99, 235, 0.1);
}

.info-display-box--tight {
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
}

.info-display-box--warning {
  background: var(--alert-danger-bg);
  border-color: rgba(239, 68, 68, 0.35);
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

/* Company Profile panel ("Thông tin doanh nghiệp") field cards - each field
   gets its own bordered, tinted tile instead of sitting bare against the
   panel background, so adjacent fields read as distinct boxes at a glance
   ("dùng ô màu để phân biệt rõ các ô"). Cycles through 4 tints that all stay
   in the app's blue/teal family (never leaves "tone màu chủ đạo là xanh").
   Titles inside always use the same bold accent-blue regardless of which
   tint the card itself has - see the ">h4, >label" rule below - so reading
   down the panel stays consistent even as the card backgrounds vary. An
   .info-display-box nested inside gets a lighter, near-neutral fill instead
   of stacking its own tint on top of the card's, which read muddy. */
.profile-field-card {
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  border: 1px solid;
}

.profile-field-card > h4,
.profile-field-card > label {
  color: var(--accent-primary) !important;
  font-weight: 700 !important;
}

.profile-field-card .info-display-box {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="dark"] .profile-field-card .info-display-box {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.08);
}

.profile-field-card--indigo {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.28);
}

.profile-field-card--blue {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.28);
}

.profile-field-card--cyan {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.28);
}

.profile-field-card--teal {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.28);
}

/* Cảnh báo Shipment keeps its own red warning meaning instead of joining the
   blue rotation - still gets the same card padding/radius/border structure,
   just with its title color pinned back to red (this rule's higher source
   order breaks the tie with the base ">h4" rule above, same specificity). */
.profile-field-card--warning {
  background: var(--alert-danger-bg);
  border-color: rgba(239, 68, 68, 0.35);
}

.profile-field-card--warning > h4 {
  color: #f87171 !important;
}

/* "Phân chia địa bàn" - country chips + the 5 fixed tô-màu-nước tiers
   ("Quy tắc tô màu nước" legend from the source sheet). Self-contained
   colors (not theme-variable-dependent), same approach as
   .feed-filter-pushotherdept, so they stay legible on both themes. */
.territory-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}

body[data-theme="dark"] .territory-chip {
  color: #a5b4fc;
}

.territory-chip--extra {
  border-color: rgba(20, 184, 166, 0.35);
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
}

body[data-theme="dark"] .territory-chip--extra {
  color: #5eead4;
}

.territory-chip--leader {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  cursor: pointer;
}

body[data-theme="dark"] .territory-chip--leader {
  color: #fbbf24;
}

.territory-chip--active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

/* "Nước phụ trách của tôi" table - country / vai trò / Team leader / tier /
   số khách hàng in one row each, once the modal was widened to fit it. */
.territory-my-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.territory-my-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 0.4rem 0.6rem;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.territory-my-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.territory-my-table tbody tr {
  cursor: pointer;
  transition: var(--transition-smooth);
}

.territory-my-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.06);
}

.territory-role-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-right: 0.2rem;
  white-space: nowrap;
}

.territory-role-main {
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
}

.territory-role-extra {
  background: rgba(20, 184, 166, 0.15);
  color: #0d9488;
}

.territory-role-leader {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

body[data-theme="dark"] .territory-role-main { color: #a5b4fc; }
body[data-theme="dark"] .territory-role-extra { color: #5eead4; }
body[data-theme="dark"] .territory-role-leader { color: #fbbf24; }

.territory-chip .territory-chip-remove {
  cursor: pointer;
  opacity: 0.7;
}

.territory-chip .territory-chip-remove:hover {
  opacity: 1;
}

.territory-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}

.territory-tier-agreement_deposit {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #9333ea;
}

.territory-tier-commercial_1_2 {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.4);
  color: #0284c7;
}

.territory-tier-commercial_3plus {
  background: rgba(20, 184, 166, 0.15);
  border-color: rgba(20, 184, 166, 0.4);
  color: #0d9488;
}

.territory-tier-commercial_6plus {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #16a34a;
}

.territory-tier-commercial_10plus {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}

.territory-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.territory-row:hover {
  border-color: var(--accent-primary);
  background: rgba(37, 99, 235, 0.05);
}

.panel-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.panel-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

.panel-field-group {
  margin-bottom: 1.5rem;
}

/* Small dot indicator for lower-priority signals (replaces full pill badges where a card already has a primary badge) */
.urgency-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.urgency-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.urgency-dot--urgent { color: var(--color-danger); }
.urgency-dot--warning { color: var(--color-warning); }
.urgency-dot--info { color: var(--color-info); }

/* Badges */
.badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

/* Unchecked state needs to still read as "clickable to select", not
   disabled/decorative - the old #a5b4fc/#93c5fd text (tuned for a dark
   background) turned near-invisible on the light theme's pale tinted chip,
   same dark-mode-pastel-on-light-bg issue fixed for the badge- and sync-
   variables elsewhere in this file. --badge-dm-text/--badge-chat-text default
   to those original dark-theme values and get overridden darker for light. */
.badge-dm {
  background: rgba(99, 102, 241, 0.15);
  color: var(--badge-dm-text, #a5b4fc);
  border: 1px solid rgba(99, 102, 241, 0.4);
  font-weight: 700;
}

.badge-dm.active {
  background: var(--accent-secondary);
  color: white;
  border-color: transparent;
  box-shadow: 0 0 10px var(--accent-secondary-glow);
}

.badge-chat {
  background: rgba(37, 99, 235, 0.15);
  color: var(--badge-chat-text, #93c5fd);
  border: 1px solid rgba(37, 99, 235, 0.4);
  font-weight: 700;
}

.badge-chat.active {
  background: var(--accent-primary);
  color: white;
  border-color: transparent;
  box-shadow: 0 0 10px var(--accent-primary-glow);
}

/* Claude AI panel styling */
.ai-advisor-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-output-area {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  /* Was 250px - dwarfed the panel with empty gray space before any Claude
     output existed. Starts compact and just grows with real content, up to
     the same max-height as before. */
  min-height: 90px;
  max-height: 500px;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}


.ai-output-area h4 {
  color: var(--accent-primary);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-title);
  font-size: 1.05rem;
}

.ai-output-area h4:first-of-type {
  margin-top: 0;
}

.ai-output-area ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.ai-output-area li {
  margin-bottom: 0.35rem;
}

/* Alerts Center */
.alerts-card {
  border-left: 1px solid var(--border);
}

.alert-category-section h4 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: 0.2px;
}

.alert-category-section h4 i {
  font-size: 1.05rem !important;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--alert-danger-bg);
  border: 1px solid rgba(239, 68, 68, 0.35);
  margin-bottom: 0.85rem;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.2);
}

.alert-item.alert-warning {
  border-color: rgba(245, 158, 11, 0.4);
  background: var(--alert-warning-bg);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.15);
}

.alert-item.alert-info {
  border-color: rgba(6, 182, 212, 0.4);
  background: var(--alert-info-bg);
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.15);
}

.alert-content h5 {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.alert-content p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Deadlines & Tasks UI */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
}

.task-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--task-item-bg);
  border: 1px solid var(--border);
}

.task-item.completed {
  opacity: 0.6;
}

.task-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.task-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}

.task-date.urgent {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Shipment roadmap card */
.shipment-roadmap-card {
  display: block !important;
  padding: 0.85rem 1rem;
}

.shipment-roadmap-highlight {
  animation: shipment-highlight-pulse 2s ease-out;
}

@keyframes shipment-highlight-pulse {
  0% { box-shadow: 0 0 0 3px var(--badge-shipment-text, var(--color-warning)); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.shipment-roadmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.shipment-roadmap-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.shipment-index-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.shipment-roadmap-progress {
  font-size: 0.75rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full, 999px);
  margin-left: 0.35rem;
}

/* The vertical rail is now 2 stacked bars: a full-height dim "track" plus a
   colored "fill" whose height is set inline per-render (--shipment-progress-pct,
   done-steps / 21) - a plain uniform-gray line read as "mờ nhạt" (too faint
   to read as an actual roadmap); a fill that visibly grows with progress
   reads instantly as "how far along this order is". */
.shipment-roadmap-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 1.8rem;
  margin-left: 0.4rem;
}
.shipment-roadmap-timeline::before {
  content: '';
  position: absolute;
  left: 0.7rem;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 3px;
  border-radius: 2px;
  background: var(--border);
}
.shipment-roadmap-timeline::after {
  content: '';
  position: absolute;
  left: 0.7rem;
  top: 0.2rem;
  width: 3px;
  height: var(--shipment-progress-pct, 0%);
  border-radius: 2px;
  background: var(--color-success);
  transition: height 0.3s ease;
}

.shipment-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0 0.5rem 0.3rem;
  border-bottom: 1px dashed var(--border);
  position: relative;
}

.shipment-step:last-child {
  border-bottom: none;
}

.shipment-step-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.shipment-step-locked .shipment-step-checkbox-wrap {
  cursor: not-allowed;
  opacity: 0.55;
}

.shipment-step-done .shipment-step-label {
  text-decoration: line-through;
  color: var(--text-muted);
}

.shipment-step-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.shipment-step-meta-done {
  color: var(--color-success);
}

.shipment-step-meta-overdue {
  color: var(--color-danger);
  font-weight: 600;
}

.shipment-step-meta-pending {
  font-style: italic;
}

/* Numbered badge (1, 2, 3...) doubles as the timeline node itself now (sits
   right on top of the progress rail, replacing the old plain 9px dot) -
   bigger + bolder + solid-filled by status so the roadmap reads clearly
   instead of a faint uniform line: done = solid green fill, active =
   white/neutral fill with an accent ring (marks "you are here" without
   breaking the earlier done=green/overdue=red/in-progress=white rule),
   locked = plain gray outline, overdue = red outline. */
.shipment-step-number {
  position: absolute;
  left: -2rem;
  top: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--card-bg, var(--bg-input));
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 1;
}
.shipment-step-active .shipment-step-number {
  border-color: var(--badge-shipment-text, var(--color-warning));
  color: var(--badge-shipment-text, var(--color-warning));
}
.shipment-step-done .shipment-step-number {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
.shipment-step-overdue .shipment-step-number {
  background: var(--card-bg, var(--bg-input));
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Whole-row tint so an overdue step is obvious without reading the meta
   text - done stays green, an in-progress-but-not-overdue step stays plain/
   neutral (no extra tint), matching the app's existing done=green/
   overdue=red/pending=neutral convention (see .hsdk-item-overdue). */
.shipment-step-overdue {
  background: rgba(239, 68, 68, 0.07);
  border-radius: var(--radius-sm);
}

/* Inline "sửa ngày hoàn thành" date input next to a done step's meta text -
   for late-logged or mistyped completion dates. Small + muted so it doesn't
   compete visually with the checkmark/date text it sits beside. */
.shipment-step-completed-date-input {
  padding: 0.1rem 0.3rem;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-muted);
  height: 1.5rem;
}

/* "Ngày cần hàng" banner - top of the Shipment detail view, same 3-tier
   info/warning/danger idiom as .foclap-banner-row-* (danger inside 3 days
   or overdue, warning inside 7, info beyond - tighter than FOC's tiers
   since a delivery date is more operationally urgent). */
/* Sticky so it stays visible while scrolling through the (often long)
   21-step checklist below it - background-color is a solid backing layer
   underneath each tier's translucent tint (background-image below), since a
   plain rgba() background alone would let scrolled-past step rows show
   through it once stuck to the top instead of the panel's own backdrop. */
.shipment-due-date-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  position: sticky;
  top: -1px;
  z-index: 5;
  background-color: var(--bg-panel, var(--card-bg, var(--bg)));
}
.shipment-due-date-label {
  font-weight: 600;
}
.shipment-due-date-input {
  padding: 0.15rem 0.4rem;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
}
.shipment-due-date-countdown {
  margin-left: auto;
  white-space: nowrap;
}
.shipment-due-date-hint {
  color: inherit;
  font-weight: 600;
  font-style: italic;
}
/* Red, not neutral - a Shipment order missing its "ngày cần hàng" is
   something that needs attention, not just an empty/default state. */
.shipment-due-date-banner-empty {
  background-image: linear-gradient(rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.06));
  border: 1px dashed rgba(239, 68, 68, 0.4);
  color: var(--color-danger);
}
.shipment-due-date-banner-info {
  background-image: linear-gradient(rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.12));
  border: 1px solid rgba(20, 184, 166, 0.3);
  color: #0d9488;
}
.shipment-due-date-banner-warning {
  background-image: linear-gradient(rgba(217, 119, 6, 0.12), rgba(217, 119, 6, 0.12));
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #b45309;
}
.shipment-due-date-banner-danger {
  background-image: linear-gradient(rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.12));
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

/* FOC lặp đơn tự động - config panel (inside a Shipment task/product) */
.foclap-config-panel {
  background: rgba(20, 184, 166, 0.06);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
}

.foclap-config-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: #0d9488;
  cursor: pointer;
  user-select: none;
}

.foclap-config-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(20, 184, 166, 0.25);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.foclap-config-options select {
  margin-left: 0.3rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem;
}

/* "Hết FOC" deadline + countdown - always red (not tiered like
   .foclap-status above), same visual weight as the Cảnh báo Shipment
   banner, so it's impossible to miss on a Shipment order's own card. */
.foclap-deadline-banner {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.foclap-deadline-banner-pending {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}

/* FOC lặp đơn tự động - prominent banner at top of company detail page */
.foclap-banner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.foclap-banner-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--transition-smooth);
}
.foclap-banner-row:hover {
  filter: brightness(1.08);
}

.foclap-banner-title {
  flex: 1;
}

.foclap-banner-deadline {
  white-space: nowrap;
  font-size: 0.8rem;
}

.foclap-banner-row-info {
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(20, 184, 166, 0.3);
  color: #0d9488;
}
.foclap-banner-row-warning {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #b45309;
}
.foclap-banner-row-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

/* Hoàn thành / Gia hạn / Dừng - the 3 row-action buttons in the unified
   Tiến độ & Hạn công việc feed. Self-contained colors (not theme-variable-
   dependent) so they read clearly on both light and dark, same approach
   used for .feed-filter-pushotherdept. */
.feed-action-btn {
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
}
.feed-action-complete {
  color: #16a34a !important;
}
.feed-action-complete:hover {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d !important;
}
.feed-action-extend {
  color: #2563eb !important;
}
.feed-action-extend:hover {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8 !important;
}
.feed-action-stop {
  color: #ef4444 !important;
}
.feed-action-stop:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626 !important;
}

.shipment-step-meta-original {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}

.shipment-step-date-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding-left: 1.6rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.shipment-step-date-field input[type="date"] {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

.shipment-extend-btn {
  padding: 0.15rem 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.shipment-extend-btn:hover {
  color: var(--accent-primary);
}

.shipment-extension-history {
  width: 100%;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.shipment-extension-history summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--badge-shipment-text, var(--color-warning));
}

.shipment-extension-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0 0.25rem 0.75rem;
  border-left: 2px dashed var(--border);
  margin-top: 0.25rem;
}

.shipment-extension-date {
  font-weight: 600;
  white-space: nowrap;
}

.shipment-extension-note {
  color: var(--text-muted);
}

/* Multi-product shipment collapse/expand */
.shipment-collapse-toggle {
  padding: 0.15rem 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.shipment-collapse-toggle.expanded {
  transform: rotate(90deg);
}

.shipment-products-list {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Was a single stacked column - each product carries its own full 21-step
   timeline, so an order with several products (reported directly: 3
   products in one shipment, up to 20 on some orders) meant scrolling past
   one product's entire timeline just to reach the next. 3 columns side by
   side cuts that scroll length roughly by 3x; rows auto-size to whichever
   column's product has the most steps, so uneven step counts don't
   misalign the grid. Collapses to fewer columns as the modal narrows
   (mobile view, or a smaller window) so cards never get too cramped for
   their department-chip row / deadline picker to read comfortably. */
.shipment-products-grid {
  display: grid;
  /* auto-fit (not auto-fill) so a 1- or 2-product order still fills the
     wide modal instead of leaving 1-2 visibly empty tracks next to it -
     empty tracks collapse to 0 and the real ones stretch to fill; a
     several/many-product order naturally wraps to ~3 per row once each
     hits its 300px floor. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.6rem;
  align-items: start;
}
@media (max-width: 640px) {
  .shipment-products-grid { grid-template-columns: 1fr; }
}

/* --product-color is set inline per card (cycled by column position, see
   SHIPMENT_PRODUCT_COLORS in app.js) purely to tell neighboring columns
   apart at a glance - not a stored/permanent identity for the product. */
.shipment-product-block {
  border: 1px solid var(--border);
  border-left: 3px solid var(--product-color, var(--border));
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  background: rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .shipment-product-block {
  background: rgba(255, 255, 255, 0.6);
}

.shipment-product-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.shipment-product-name {
  font-weight: 600;
  font-size: 0.85rem;
  flex: 1;
  color: var(--product-color, inherit);
}

.shipment-domestic-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  vertical-align: middle;
}

/* Glance-level "which product is at which step" summary, shown above the
   product grid (see summaryHTML in renderShipmentProductsDetail). */
.shipment-products-summary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.6rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.78rem;
}

body[data-theme="light"] .shipment-products-summary {
  background: rgba(255, 255, 255, 0.5);
}

.shipment-product-summary-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.shipment-product-summary-dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--product-color, var(--text-muted));
  align-self: center;
}

.shipment-add-product-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}

/* Follow HSĐK product detail */
.hsdk-product-cancelled {
  opacity: 0.55;
}

.hsdk-cancelled-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full, 999px);
  margin-left: 0.35rem;
}

.hsdk-type-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full, 999px);
}

.admin-overview-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-overview-summary div {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  text-align: center;
}

.admin-overview-summary strong {
  display: block;
  font-size: 1.4rem;
  font-family: var(--font-title);
}

.admin-overview-summary span {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-overview-counts {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.hsdk-add-product-form {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  margin-top: 0.5rem;
}

.hsdk-add-product-form .form-input {
  border-color: var(--text-muted);
}

.hsdk-add-product-fields {
  margin-top: 0.6rem;
}

.hsdk-add-product-buttons {
  display: flex;
  gap: 0.5rem;
}

.hsdk-catalog-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 0.15rem;
  box-shadow: 0 4px 12px var(--glass-shadow);
}

.hsdk-catalog-suggestion-item {
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.hsdk-catalog-suggestion-item:hover {
  background: var(--accent-primary);
  color: #fff;
}

.hsdk-product-detail {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hsdk-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

.hsdk-items-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hsdk-item-card {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: start;
  gap: 0.3rem 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .hsdk-item-card {
  background: rgba(0, 0, 0, 0.025);
}

.hsdk-item-card.hsdk-item-done {
  border-left-color: var(--color-success);
}

.hsdk-item-card.hsdk-item-overdue {
  border-left-color: var(--color-danger);
  background: rgba(239, 68, 68, 0.08);
}

.hsdk-item-card.hsdk-item-needs-alert {
  border-left-color: var(--color-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
}

@media (max-width: 560px) {
  .hsdk-item-card {
    grid-template-columns: 1fr;
  }
}

.hsdk-item-label-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.82rem;
  padding-top: 0.35rem;
}

.hsdk-item-icon {
  width: 1.1rem;
  text-align: center;
  color: var(--accent-primary);
  opacity: 0.85;
  flex-shrink: 0;
}

.hsdk-item-done-check {
  color: var(--color-success);
  font-size: 0.8rem;
  margin-left: auto;
}

.hsdk-item-control {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 560px) {
  .hsdk-item-control {
    grid-template-columns: 1fr;
  }
}

.hsdk-item-status-select {
  width: 100%;
  padding: 0.3rem 1.6rem 0.3rem 0.5rem;
  font-size: 0.78rem;
  border-color: var(--text-muted);
}

.hsdk-item-days {
  font-size: 0.72rem;
  color: var(--text);
  opacity: 0.75;
}

.hsdk-item-days-overdue {
  color: var(--color-danger);
  font-weight: 600;
  opacity: 1;
}

.hsdk-item-note {
  grid-column: 1 / -1;
  width: 100%;
  font-size: 0.8rem;
  margin-top: 0.15rem;
  border-color: var(--text-muted);
}

.hsdk-item-alert-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--border);
}

.hsdk-item-dept-deadline-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--border);
}

.hsdk-item-dept-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hsdk-item-dept-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.hsdk-dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.hsdk-dept-chip input {
  cursor: pointer;
}

.hsdk-item-deadline-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: auto;
}

.hsdk-item-deadline-input {
  padding: 0.2rem 0.4rem;
  font-size: 0.76rem;
  width: auto;
}

.hsdk-item-alert-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.hsdk-item-alert-active-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-warning, #d97706);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.hsdk-item-alert-note-input {
  flex: 1;
  min-width: 160px;
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
}

/* Follow HSĐK product card (layers on top of the shared .shipment-product-block) */
.hsdk-product-card {
  padding: 0.9rem 1rem;
}

.hsdk-product-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hsdk-product-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hsdk-product-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.hsdk-product-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hsdk-product-badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.hsdk-product-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hsdk-progress-done {
  color: var(--color-success);
  border-color: var(--color-success);
  font-weight: 700;
}

.hsdk-progress-pending {
  color: var(--color-warning, #f59e0b);
  border-color: var(--color-warning, #f59e0b);
  font-weight: 700;
}

.hsdk-feedback-summary-cpc1 {
  color: var(--accent-primary);
}

.hsdk-feedback-summary-customer {
  color: var(--color-warning, #d97706);
}

.hsdk-feedback-section .form-input,
.hsdk-general-note textarea {
  border-color: var(--text-muted);
}

/* Product summary list - the first thing shown when opening an Annexure with
   2+ products, so each product is clearly distinguishable before drilling in. */
.hsdk-product-summary-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: var(--transition-smooth);
}

body[data-theme="light"] .hsdk-product-summary-row {
  background: rgba(0, 0, 0, 0.025);
}

.hsdk-product-summary-row:hover {
  border-color: var(--accent-primary);
}

.hsdk-product-summary-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1.2;
  min-width: 0;
}

.hsdk-product-summary-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

.hsdk-pending-list {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.hsdk-product-summary-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.hsdk-row-chevron {
  color: var(--text-muted);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.hsdk-back-btn {
  align-self: flex-start;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}

.hsdk-general-note {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}

.hsdk-feedback-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .hsdk-feedback-columns {
    grid-template-columns: 1fr;
  }
}

.hsdk-feedback-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.hsdk-feedback-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
}

/* Tabs & Toggles */
.tab-navigation {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  font-family: var(--font-title);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tab-btn.active {
  color: var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary);
}

/* Modals & Popups (Settings/Uploads) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Was backdrop-filter: blur(8px) with a solid rgba(0,0,0,0.7) underneath -
     a full-viewport blur re-composited every frame of the opacity transition
     below, every single time ANY modal opens/closes (this app opens a LOT of
     them). The mobile-only override further down already dropped this exact
     combination for the same reason ("desktop hardware mostly absorbs the
     cost; phones don't") - reported as flickering panels/controls on a
     budget laptop's Chrome (weaker integrated GPU) that "mostly absorbs it"
     didn't actually cover. Darkened the solid background to compensate for
     losing the blur's own visual weight, so content underneath still reads
     as clearly covered. */
  background: rgba(0, 0, 0, 0.82);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  overflow-y: auto;
  padding: 2rem 1rem;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  --modal-card-padding: 2rem;
  width: 100%;
  max-width: 500px;
  padding: var(--modal-card-padding);
  transform: scale(0.9);
  transition: var(--transition-smooth);
  /* Scrolls within its OWN box instead of the full-viewport overlay - a
     scrollbar on the overlay renders at the browser's outer window edge,
     indistinguishable from the page's own scrollbar (that's what looked
     like a redundant double scrollbar before). Capping the card's own
     height means its scrollbar hugs the card's own border instead. */
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  scrollbar-width: thin;
  position: relative;
}
.modal-card::-webkit-scrollbar {
  width: 6px;
}
.modal-card::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.modal-overlay.open .modal-card {
  transform: scale(1);
}

.modal-card-wide {
  max-width: 1200px;
}

.customers-filter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
}

/* The generic .form-input border (var(--border)) is very low-contrast by
   design app-wide - fine for a dense form, but this row is the first thing
   seen on the Khách hàng screen and was reported as hard to tell apart from
   the background. Scoped to just this row rather than changing .form-input
   globally (would touch every input in the app). */
.customers-filter-row .form-input {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.05);
}
.customers-filter-row .form-input:hover {
  border-color: rgba(99, 102, 241, 0.65);
}
.customers-filter-row .form-input:focus {
  border-color: var(--accent-primary);
}

@media (max-width: 900px) {
  .customers-filter-row {
    grid-template-columns: 1fr;
  }
}

.company-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .company-list-grid {
    grid-template-columns: 1fr;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  /* Sticky to the top of .modal-card's own scroll box so the close button
     stays reachable on long modals instead of scrolling away with the
     content (was reported as impossible to close without scrolling back
     up). The negative margin + matching padding pulls the header into the
     card's own padding area and gives it an opaque background, otherwise
     sticky top:0 would leave a permanent gap (the card's top padding)
     that scrolled content peeks through. */
  position: sticky;
  top: calc(-1 * var(--modal-card-padding, 2rem));
  z-index: 10;
  margin: calc(-1 * var(--modal-card-padding, 2rem)) calc(-1 * var(--modal-card-padding, 2rem)) 1.5rem;
  padding: var(--modal-card-padding, 2rem) var(--modal-card-padding, 2rem) 0.75rem;
  background: inherit;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.modal-header h3 {
  font-family: var(--font-title);
  font-size: 1.25rem;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.25rem;
}

/* Website monitor logs list */
.web-monitor-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.web-monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.web-logs-list {
  font-size: 0.75rem;
  max-height: 120px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
}

/* Loading animations */
.skeleton-loader {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: loadingShimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  height: 20px;
  margin-bottom: 10px;
}

@keyframes loadingShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.25rem;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.btn-icon:hover {
  color: var(--accent-primary);
  background: rgba(37, 99, 235, 0.1);
  opacity: 1;
}

/* Rank & Urgency Badges */
.class-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.claim-status-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.claim-status-locked {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.claim-status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.claim-status-unclaimed {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.class-diamond {
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.2);
}
.class-platinum {
  background: rgba(165, 180, 252, 0.08);
  color: #a5b4fc;
  border: 1px solid rgba(165, 180, 252, 0.2);
}
.class-gold {
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.class-active-chat {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}
.class-new {
  background: rgba(59, 130, 246, 0.08);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.class-agreement {
  background: rgba(34, 197, 94, 0.08);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.level-board-group {
  margin-bottom: 1.5rem;
}
.level-board-group-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: none;
}
.level-board-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  table-layout: fixed;
}
.level-board-table th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  /* Sticky within #level-board-container's own scroll - stays readable
     while scrolling through a long group instead of losing track of which
     column is which. Was background: rgba(99,102,241,0.55) + backdrop-filter:
     blur(6px) so rows scrolling underneath wouldn't show through the tinted
     (not fully opaque) background - same "recomposited every scroll frame"
     cost as .modal-overlay's blur above, on an even hotter path (every
     scroll tick, not just modal open/close). Same fix: solid, more opaque
     background instead, no blur. */
  background: rgba(79, 82, 221, 0.92);
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.level-board-table th:last-child {
  border-right: none;
}
.level-board-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: middle;
}
.level-board-table td:last-child {
  border-right: none;
}
.level-board-table tbody tr:nth-child(even) {
  background: rgba(128, 128, 128, 0.035);
}
.level-board-table tbody tr:hover {
  background: rgba(128, 128, 128, 0.08);
}
.level-board-table tbody tr:last-child td {
  border-bottom: none;
}
.level-board-cell-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.level-board-cell-input, .level-board-cell-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.4rem;
  font-size: 0.76rem;
}
.level-board-channel-cell {
  white-space: nowrap;
  font-size: 0.74rem;
}
.level-board-channel-cell label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-right: 0.6rem;
  cursor: pointer;
}
.level-board-channel-cell label:last-child {
  margin-right: 0;
}
.class-draft-agreement {
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.class-churned {
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.class-purchased {
  background: rgba(168, 85, 247, 0.08);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.class-generic {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
body[data-theme="light"] .class-generic {
  background: rgba(0, 0, 0, 0.05);
  color: #111827;
}

.sidebar-task-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.badge-date-urgent {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.badge-date-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge-date-info {
  background: rgba(6, 182, 212, 0.1);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.25);
}

/* Dashboard Analytics & Rings Styling */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

/* Flat solid-colour stat tiles */
.dashboard-stats-flat {
  padding: 0;
}
.dashboard-stats-flat-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-highlight);
  margin-bottom: 0.85rem;
}
.stat-tile {
  position: relative;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.1rem 1rem;
  color: #ffffff;
  overflow: hidden;
}
.stat-tile-icon {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  font-size: 22px;
  color: #ffffff;
  opacity: 1;
}
.stat-tile-num {
  font-family: var(--font-title);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.35rem;
  color: #ffffff;
}
.stat-tile-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  opacity: 1;
}
.stat-tile-orange { background: #B3441F; }
.stat-tile-gold { background: #C77A15; }
.stat-tile-blue { background: var(--primary-light); }
.stat-tile-green { background: #3B6D11; }
.stat-tile-shipment { background: #0e7490; cursor: pointer; }
.stat-tile-hsdk { background: #7c3aed; cursor: pointer; }
.stat-tile-draft { background: #0f766e; cursor: pointer; }

.stat-tile-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-tile-ring-wrapper {
  width: 60px;
  height: 60px;
  margin-bottom: 0.5rem;
}

.stat-tile-ring-wrapper .progress-ring-bar {
  stroke-dasharray: 150.8; /* 2 * PI * r = 2 * 3.14159 * 24 */
  stroke-dashoffset: 150.8;
}

.stat-tile-ring-wrapper .ring-text.stat-tile-ring-text {
  color: #ffffff;
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Email campaign toggle (Add Company modal) */
.mkt-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

body[data-theme="light"] .mkt-switch-row {
  background: rgba(255, 255, 255, 0.9);
}

.mkt-switch-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.mkt-switch-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mkt-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}

.mkt-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mkt-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.3s;
  border-radius: 34px;
  border: 1px solid var(--border);
}

.mkt-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.3s;
  border-radius: 50%;
}

.mkt-switch input:checked + .mkt-slider {
  background-color: var(--accent-primary);
}

.mkt-switch input:checked + .mkt-slider:before {
  transform: translateX(22px);
}

.stat-ring-box {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body[data-theme="light"] .stat-ring-box.box-today {
  background: #fae3e1 !important;
  border-color: #f1b3af !important;
}

body[data-theme="light"] .stat-ring-box.box-3days {
  background: #fae8cd !important;
  border-color: #f0c283 !important;
}

.stat-ring-box.box-today {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}

.stat-ring-box.box-3days {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

.ring-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.progress-ring-svg {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  stroke: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="light"] .progress-ring-bg {
  stroke: rgba(0, 0, 0, 0.08) !important;
}

.progress-ring-bar {
  stroke-dasharray: 226.2; /* 2 * PI * r = 2 * 3.14159 * 36 = 226.19 */
  stroke-dashoffset: 226.2;
  transition: stroke-dashoffset 0.6s ease;
}

.ring-text {
  position: absolute;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

.stat-numeric-box {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body[data-theme="light"] .stat-numeric-box.box-companies {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

body[data-theme="light"] .stat-numeric-box.box-pending {
  background: #dde7f5 !important;
  border-color: #b0c7e3 !important;
}

.stat-numeric-box.box-companies {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
}

.stat-numeric-box.box-pending {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.25);
}

.stat-num {
  font-family: var(--font-title);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--accent-primary);
  margin-bottom: 0.5rem;
}

/* Feed Tag Styling */
.feed-tag-company {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--feed-tag-company-bg);
  color: var(--feed-tag-company-text);
  border: 1px solid var(--feed-tag-company-border);
  cursor: pointer;
  transition: var(--transition-smooth);
  font-weight: 600;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.feed-tag-company:hover {
  background: var(--accent-primary);
  color: white;
}

.feed-tag-contact {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--feed-tag-contact-bg);
  color: var(--feed-tag-contact-text);
  border: 1px solid var(--feed-tag-contact-border);
  transition: var(--transition-smooth);
  font-weight: 600;
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.feed-tag-general {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--feed-tag-general-bg);
  color: var(--feed-tag-general-text);
  border: 1px solid var(--feed-tag-general-border);
  font-weight: 600;
}

/* Zoom Controls Styling */
.zoom-controls button {
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: var(--transition-smooth);
}
.zoom-controls button:hover {
  color: var(--accent-primary);
  background: rgba(37, 99, 235, 0.1);
}
body[data-theme="light"] .zoom-controls {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Dock to Desk Mode */
.layout-dock-to-desk .sidebar {
  display: none !important;
}
.layout-dock-to-desk .dashboard-wrapper {
  grid-template-columns: 1fr !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}
.layout-dock-to-desk #dashboard-overview-container {
  grid-template-columns: 1fr !important;
  max-width: 900px;
  margin: 0 auto;
  gap: 1.5rem;
}
.layout-dock-to-desk #dashboard-overview-container .detail-section:last-of-type {
  display: none !important; /* Hide Alerts Center & General Tasks in Dock focus */
}
.layout-dock-to-desk #unified-task-feed {
  max-height: calc(100vh - 280px) !important;
}
.layout-dock-to-desk .dashboard-stats-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.5rem;
}

/* Dock to Desk Page-level layout shrink (7/8 width layout on right, 1/8 width reserved for Dock on left) */
body.dock-active {
  overflow-x: hidden !important;
}

.app-container, header {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dock-active .app-container {
  width: 87.5% !important;
  margin-left: 12.5% !important;
  border-left: 1px dashed var(--border);
}

body.dock-active header {
  width: 87.5% !important;
  margin-left: 12.5% !important;
  border-left: 1px dashed var(--border);
}

body.dock-active::after {
  content: "👈 VÙNG ĐẶT DOCK\n\n(Đặt cửa sổ nổi Focus Desk tại đây để không bị che khuất nội dung)";
  white-space: pre-line;
  position: fixed;
  left: 0;
  top: 80px;
  width: 12.5%;
  height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-success);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 1.5rem;
  background: rgba(34, 197, 94, 0.03);
  border-right: 2px dashed rgba(34, 197, 94, 0.25);
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease-out;
}

/* Manual "Điện thoại" view mode (state.viewMode, toggled via the header
   button next to theme/zoom controls) - forces a single-column, non-
   overflowing layout regardless of actual viewport width. The handful of
   existing @media breakpoints elsewhere in this file only ever collapsed a
   few small inner grids (HSĐK item rows, feedback columns) - the actual
   page shell never had a mobile fallback at all: dashboard-wrapper's fixed
   220px sidebar + content grid, the 6-column stat tile grid, and company
   detail's 2-column panel grid all kept their desktop column widths no
   matter how narrow the screen got, which is what was actually pushing
   content past the edge of a phone screen (body's overflow-x: hidden then
   clips it instead of letting it scroll into view - "tràn viền").
   Same !important-override convention .layout-dock-to-desk above uses. */
body.view-mode-mobile .dashboard-wrapper {
  grid-template-columns: 1fr !important;
  padding: 0.75rem !important;
  gap: 1rem !important;
}
body.view-mode-mobile .sidebar {
  /* The nav menu (Trang chủ/Đối tác/...) lives at the top of this same
     element - it's the only navigation in the app, so it has to stay
     visible, just stacked above the main content instead of pinned beside
     it (sticky+max-height only make sense in the 2-column desktop shell). */
  position: static !important;
  max-height: none !important;
}
body.view-mode-mobile .dashboard-stats-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.6rem !important;
}
body.view-mode-mobile .sections-grid,
body.view-mode-mobile .dashboard-bottom-grid,
body.view-mode-mobile .customers-filter-row,
body.view-mode-mobile .company-list-grid,
body.view-mode-mobile .metrics-grid,
body.view-mode-mobile .admin-overview-summary,
body.view-mode-mobile .hsdk-feedback-columns,
body.view-mode-mobile .hsdk-item-card,
body.view-mode-mobile .hsdk-item-control {
  grid-template-columns: 1fr !important;
}
body.view-mode-mobile .top-bar {
  flex-direction: column !important;
  align-items: stretch !important;
  /* .top-bar's base style is justify-content: space-between, meant for the
     2-column desktop row - in a column direction that pushes the title
     block to the very top and .user-controls all the way to the bottom of
     whatever height the flex container ends up with, leaving a large
     empty gap between them instead of the two sitting right below each
     other. */
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}
body.view-mode-mobile .active-company-header {
  flex: 0 0 auto !important;
}
body.view-mode-mobile .zoom-controls {
  display: none !important;
}
/* The top-bar (with the ← / theme / view-mode buttons) lives inside
   .main-content, which is DOM-order AFTER the whole nav sidebar - on a
   single-column mobile stack that pushed it (and "Tổng quan hoạt động")
   below the entire nav menu, so the escape hatch back to desktop mode was
   invisible without scrolling past everything first. Reordering the grid
   items puts main-content (and its top-bar) first instead. */
body.view-mode-mobile .main-content {
  order: 1 !important;
  /* The two circular quick-action buttons (Tạo mới / Kiểm tra cắm cờ) are
     position:fixed at bottom:2rem, floating above the page regardless of
     scroll position. On the narrow single-column mobile stack there's a lot
     more scrolling than on desktop, so whatever content happens to land at
     that fixed screen position - e.g. the last row(s) of "Trung tâm cảnh
     báo" - permanently sits underneath and gets its taps eaten by the
     buttons instead. Reserve enough bottom padding (button height + its own
     offset + a margin) so real content never scrolls in behind them. */
  padding-bottom: 6.5rem;
}
body.view-mode-mobile .sidebar {
  order: 2 !important;
}
/* iOS Safari auto-zooms the whole page in whenever a focused input/select/
   textarea has a computed font-size under 16px - several compact fields
   (add-company form, shipment date inputs, HSĐK status/deadline selects,
   level-board cells...) intentionally use smaller text to fit tightly on
   desktop, but on a phone that same field triggers this auto-zoom on tap.
   The page is then left at whatever scale Safari jumped to, and a manual
   pinch back out doesn't reliably restore it - reported as "bị lác, không
   zoom ra zoom vào được". Forcing 16px minimum only in mobile view mode
   avoids the auto-zoom trigger without touching the desktop layout these
   smaller sizes were tuned for. */
body.view-mode-mobile input,
body.view-mode-mobile select,
body.view-mode-mobile textarea {
  font-size: 16px !important;
}
body.view-mode-mobile .modal-card {
  --modal-card-padding: 1.1rem;
  padding: var(--modal-card-padding) !important;
}
body.view-mode-mobile .modal-overlay {
  padding: 0.75rem 0.5rem !important;
}

/* Performance: unlike .glass-panel above, these two DO have a real visible
   blur effect (their own background is semi-transparent, not opaque) - but
   both are exactly the expensive case for backdrop-filter: full-viewport
   (modal-overlay) or position: sticky inside a scrolling table
   (level-board-table th, recomputed every scroll frame). Desktop hardware
   mostly absorbs the cost; phones don't. Traded for a more opaque solid
   background instead of just dropping the tint, so content underneath
   still reads as "covered", just without the compositing cost. */
body.view-mode-mobile .modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.82) !important;
}
body.view-mode-mobile .level-board-table th {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(99, 102, 241, 0.92) !important;
}

/* Feed Filter Styling */
.feed-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border);
}

.feed-filter-btn {
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.feed-filter-count {
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--text-muted);
  background: rgba(128, 128, 128, 0.16);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.4rem;
  min-width: 1.2rem;
  text-align: center;
}

.feed-filter-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(37, 99, 235, 0.08);
}

.feed-filter-btn.active {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 2px 8px var(--accent-primary-glow);
}

.claim-status-filter-btn.active {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-color: var(--accent-primary) !important;
}
.claim-status-filter-btn.active i {
  color: #fff !important;
}

/* Default .btn-secondary is a plain grey outline - these filter/toggle
   buttons only carried color on their icon, so the button itself still
   read as one indistinct grey row. Tint the border+background to match
   each one's own icon color instead. */
.claim-status-filter-btn[data-status="locked"] {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.1);
}
.claim-status-filter-btn[data-status="locked"]:hover {
  border-color: rgba(16, 185, 129, 0.8);
  background: rgba(16, 185, 129, 0.18);
}
.claim-status-filter-btn[data-status="pending"] {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
}
.claim-status-filter-btn[data-status="pending"]:hover {
  border-color: rgba(245, 158, 11, 0.8);
  background: rgba(245, 158, 11, 0.18);
}
.claim-status-filter-btn[data-status="unclaimed"] {
  border-color: rgba(100, 116, 139, 0.5);
  background: rgba(100, 116, 139, 0.1);
}
.claim-status-filter-btn[data-status="unclaimed"]:hover {
  border-color: rgba(100, 116, 139, 0.85);
  background: rgba(100, 116, 139, 0.18);
}
.claim-status-filter-btn[data-status="reassign"] {
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.1);
}
.claim-status-filter-btn[data-status="reassign"]:hover {
  border-color: rgba(139, 92, 246, 0.8);
  background: rgba(139, 92, 246, 0.18);
}
.claim-status-filter-btn[data-status="rejected"] {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.1);
}
.claim-status-filter-btn[data-status="rejected"]:hover {
  border-color: rgba(239, 68, 68, 0.8);
  background: rgba(239, 68, 68, 0.18);
}
#pending-reassignments-filter-btn {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.1);
}
#pending-reassignments-filter-btn:hover {
  border-color: rgba(59, 130, 246, 0.8);
  background: rgba(59, 130, 246, 0.18);
}
.claim-status-filter-btn[data-status="reassigned_to_me"] {
  border-color: rgba(20, 184, 166, 0.45);
  background: rgba(20, 184, 166, 0.1);
}
.claim-status-filter-btn[data-status="reassigned_to_me"]:hover {
  border-color: rgba(20, 184, 166, 0.8);
  background: rgba(20, 184, 166, 0.18);
}
/* :not(.btn-primary) so this doesn't fight the ID's higher specificity
   against .btn-primary's own background once toggleLevelBoardView() swaps
   the class in for the "board is showing" active state. */
#level-board-toggle-btn:not(.btn-primary) {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}
#level-board-toggle-btn:not(.btn-primary):hover {
  border-color: rgba(99, 102, 241, 0.8);
  background: rgba(99, 102, 241, 0.18);
}

.feed-filter-btn.active .feed-filter-count {
  color: #fff;
  background: rgba(255, 255, 255, 0.28);
}

/* Per-category color, same palette as the task-type badges elsewhere in the
   app (badge-shipment, badge-callonline...) so the filter row and the task
   badges always agree on what color = what category. Only applied while
   NOT the active/selected filter - .active's solid blue fill (with
   !important) always wins so the "currently selected" state stays a single,
   unambiguous color regardless of which category it is. */
.feed-filter-btn.feed-filter-all:not(.active) {
  background: var(--badge-company-bg);
  border-color: var(--badge-company-border);
  color: var(--badge-company-text);
}
.feed-filter-btn.feed-filter-general:not(.active) {
  background: var(--feed-tag-general-bg);
  border-color: var(--feed-tag-general-border);
  color: var(--feed-tag-general-text);
}
.feed-filter-btn.feed-filter-callonline:not(.active) {
  background: var(--badge-callonline-bg);
  border-color: var(--badge-callonline-border);
  color: var(--badge-callonline-text);
}
.feed-filter-btn.feed-filter-shipment:not(.active) {
  background: var(--badge-shipment-bg);
  border-color: var(--badge-shipment-border);
  color: var(--badge-shipment-text);
}
.feed-filter-btn.feed-filter-register:not(.active) {
  background: var(--badge-register-bg);
  border-color: var(--badge-register-border);
  color: var(--badge-register-text);
}
.feed-filter-btn.feed-filter-newproduct:not(.active) {
  background: var(--badge-newproduct-bg);
  border-color: var(--badge-newproduct-border);
  color: var(--badge-newproduct-text);
}
.feed-filter-btn.feed-filter-meetfactory:not(.active) {
  background: var(--badge-meetfactory-bg);
  border-color: var(--badge-meetfactory-border);
  color: var(--badge-meetfactory-text);
}
.feed-filter-btn.feed-filter-pushdeposit:not(.active) {
  background: var(--badge-pushdeposit-bg);
  border-color: var(--badge-pushdeposit-border);
  color: var(--badge-pushdeposit-text);
}
.feed-filter-btn.feed-filter-other:not(.active) {
  background: var(--badge-other-bg);
  border-color: var(--badge-other-border);
  color: var(--badge-other-text);
}
.feed-filter-btn.feed-filter-pushotherdept:not(.active) {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.25);
  color: #0d9488;
}
.feed-filter-btn:not(.active) .feed-filter-count {
  background: rgba(128, 128, 128, 0.22);
}

/* The badge-* text colors above (teal/purple/yellow/orange/green) were
   tuned for dark backgrounds - bright and low-saturation, close to
   illegible as text on a near-white light-theme fill. Darken just the text
   (keep the same tinted background/border) for the categories that need
   it, same fix already applied to class-diamond/platinum/gold etc.
   elsewhere in this file. */
body[data-theme="light"] .feed-filter-btn.feed-filter-callonline:not(.active) {
  color: #0f766e !important;
}
body[data-theme="light"] .feed-filter-btn.feed-filter-shipment:not(.active) {
  color: #0369a1 !important;
}
body[data-theme="light"] .feed-filter-btn.feed-filter-register:not(.active) {
  color: #6d28d9 !important;
}
body[data-theme="light"] .feed-filter-btn.feed-filter-newproduct:not(.active) {
  color: #a16207 !important;
}
body[data-theme="light"] .feed-filter-btn.feed-filter-meetfactory:not(.active) {
  color: #c2410c !important;
}
body[data-theme="light"] .feed-filter-btn.feed-filter-pushdeposit:not(.active) {
  color: #15803d !important;
}

body[data-theme="light"] .feed-filter-btn {
  background: #F1F4F9;
  border-color: #C7CEDC;
}
body[data-theme="light"] .feed-filter-btn:hover {
  background: rgba(37, 99, 235, 0.08);
}
body[data-theme="light"] .feed-filter-btn.active {
  background: var(--accent-primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   LIGHT THEME ACCESSIBILITY OVERRIDES (BETTER CONTRAST & LEGIBILITY)
   ========================================================================== */

/* Rank / Classification Badges in Light Theme */
body[data-theme="light"] .class-diamond {
  background-color: rgba(8, 145, 178, 0.1) !important;
  color: #0891b2 !important;
  border: 1px solid rgba(8, 145, 178, 0.25) !important;
}

body[data-theme="light"] .class-platinum {
  background-color: rgba(79, 70, 229, 0.1) !important;
  color: #4338ca !important; /* Slightly darker indigo */
  border: 1px solid rgba(79, 70, 229, 0.25) !important;
}

body[data-theme="light"] .class-gold {
  background-color: rgba(180, 83, 9, 0.1) !important;
  color: #b45309 !important;
  border: 1px solid rgba(180, 83, 9, 0.25) !important;
}

body[data-theme="light"] .class-active-chat {
  background-color: rgba(4, 120, 87, 0.1) !important;
  color: #047857 !important;
  border: 1px solid rgba(4, 120, 87, 0.25) !important;
}

body[data-theme="light"] .class-new {
  background-color: rgba(29, 78, 216, 0.1) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(29, 78, 216, 0.25) !important;
}

body[data-theme="light"] .class-agreement {
  background-color: rgba(21, 128, 61, 0.1) !important;
  color: #15803d !important;
  border: 1px solid rgba(21, 128, 61, 0.25) !important;
}

body[data-theme="light"] .class-draft-agreement {
  background-color: rgba(180, 83, 9, 0.1) !important;
  color: #b45309 !important;
  border: 1px solid rgba(180, 83, 9, 0.25) !important;
}

body[data-theme="light"] .class-churned {
  background-color: rgba(185, 28, 28, 0.1) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(185, 28, 28, 0.25) !important;
}

body[data-theme="light"] .class-purchased {
  background-color: rgba(124, 58, 237, 0.1) !important;
  color: #7c3aed !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
}

body[data-theme="light"] .class-generic {
  background-color: rgba(15, 23, 42, 0.06) !important;
  color: #1e293b !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
}

/* Date Urgency Badges in Sidebar (Light Theme) */
body[data-theme="light"] .badge-date-urgent {
  background-color: rgba(185, 28, 28, 0.1) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(185, 28, 28, 0.25) !important;
}

body[data-theme="light"] .badge-date-warning {
  background-color: rgba(180, 83, 9, 0.1) !important;
  color: #b45309 !important;
  border: 1px solid rgba(180, 83, 9, 0.25) !important;
}

body[data-theme="light"] .badge-date-info {
  background-color: rgba(3, 105, 120, 0.1) !important;
  color: #036978 !important;
  border: 1px solid rgba(3, 105, 120, 0.25) !important;
}

/* Active & Hover states for Company Items (Light Theme) */
body[data-theme="light"] .company-item:hover {
  background-color: rgba(37, 99, 235, 0.08) !important;
  border-color: #2563eb !important;
}

body[data-theme="light"] .company-item.active {
  background-color: rgba(37, 99, 235, 0.15) !important;
  border-color: #2563eb !important;
}

body[data-theme="light"] .company-item.active h4 {
  color: #1e3a8a !important;
}

body[data-theme="light"] .company-item.active p {
  color: #1e40af !important;
}

body[data-theme="light"] .company-item.active i {
  color: #1e40af !important;
}

/* General Text Contrast Enhancements for Muted text inside cards / sections in Light Theme */
body[data-theme="light"] .company-item p {
  color: #000000 !important; /* Crisp black for country and chat details */
}

body[data-theme="light"] .company-item p i {
  color: #111827 !important; /* Dark slate-black for icon color */
}

body[data-theme="light"] .task-item p,
body[data-theme="light"] .alert-content p,
body[data-theme="light"] .metric-box .label,
body[data-theme="light"] .contact-card-sub p {
  color: #000000 !important; /* Crisp black across muted elements */
}

/* "Khách hàng đang có Shipment" modal rows carry deliberate status color
   (progress/warning/current-step) - the blanket .company-item p black
   override above would otherwise flatten all of it back to black. Higher
   specificity (extra class) wins over that rule even though both are
   !important. */
.company-item p.shipment-status-line-progress,
body[data-theme="light"] .company-item p.shipment-status-line-progress {
  color: #0d9488 !important;
  font-weight: 600;
}
.company-item p.shipment-status-line-warning,
body[data-theme="light"] .company-item p.shipment-status-line-warning {
  color: var(--color-danger) !important;
  font-weight: 600;
}
.company-item p.shipment-status-line-current,
body[data-theme="light"] .company-item p.shipment-status-line-current {
  color: #7c3aed !important;
  font-weight: 600;
}
.company-item p i.shipment-plane-icon,
body[data-theme="light"] .company-item p i.shipment-plane-icon {
  color: var(--accent-primary) !important;
}
.company-item p.shipment-status-line-warning i,
body[data-theme="light"] .company-item p.shipment-status-line-warning i,
.company-item p.shipment-status-line-current i,
body[data-theme="light"] .company-item p.shipment-status-line-current i {
  color: inherit !important;
}

/* Each order in "Khách hàng đang có Shipment" is its own clickable block
   now (was one combined title/progress/warning line per company) - a
   subtle hover/radius makes each order read as its own target instead of
   just more text inside the (no longer clickable) outer company card. */
.shipment-order-block {
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.4rem;
  margin: -0.3rem -0.4rem;
  transition: background 0.15s;
}
.shipment-order-block:hover {
  background: rgba(37, 99, 235, 0.08);
}
body[data-theme="light"] .shipment-order-block:hover {
  background: rgba(37, 99, 235, 0.06);
}

/* Custom Multi-select Dropdown options styling */
.class-filter-option {
  padding: 0.35rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text);
  transition: background 0.2s;
}
.class-filter-option:hover {
  background: rgba(37, 99, 235, 0.15);
}
.class-filter-option label {
  color: var(--text) !important;
  cursor: pointer;
  flex: 1;
  margin: 0;
}
body[data-theme="light"] .class-filter-option label {
  color: #0f172a !important; /* Force highly readable dark color in light theme */
}
body[data-theme="dark"] .class-filter-option label {
  color: #f8fafc !important; /* Force readable light color in dark theme */
}

/* Dashboard Colored Panels */
.panel-blue {
  border-left: 4px solid #3b82f6 !important;
}
.panel-blue:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 12px 40px 0 rgba(59, 130, 246, 0.08) !important;
}

.panel-rose {
  border-left: 4px solid #f43f5e !important;
}
.panel-rose:hover {
  border-color: #f43f5e !important;
  box-shadow: 0 12px 40px 0 rgba(244, 63, 94, 0.08) !important;
}

.panel-emerald {
  border-left: 4px solid #10b981 !important;
}
.panel-emerald:hover {
  border-color: #10b981 !important;
  box-shadow: 0 12px 40px 0 rgba(16, 185, 129, 0.08) !important;
}

.panel-amber {
  border-left: 4px solid #f59e0b !important;
}
.panel-amber:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 12px 40px 0 rgba(245, 158, 11, 0.08) !important;
}

/* Light Theme overrides for Colored Panels */
body[data-theme="light"] .panel-blue {
  border-left: 4px solid #3b82f6 !important;
}
body[data-theme="light"] .panel-rose {
  border-left: 4px solid #f43f5e !important;
}
body[data-theme="light"] .panel-emerald {
  border-left: 4px solid #10b981 !important;
}
body[data-theme="light"] .panel-amber {
  border-left: 4px solid #f59e0b !important;
}

/* Alert category rows: collapsible, neutral rows with a small colour-coded icon badge */
.alert-category-section {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-panel);
}
.alert-category-section:last-child {
  margin-bottom: 0;
}
.alert-category-header {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  text-transform: none;
  letter-spacing: normal;
}
.alert-category-label {
  flex: 1;
}
.alert-category-icon-badge {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.alert-category-count {
  font-size: 0.75rem;
  font-weight: 700;
  background: #F1F3F7;
  color: #8A93A6;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  text-transform: none;
  letter-spacing: normal;
}
.alert-category-count.has-alerts {
  background: #FAECE7;
  color: #712B13;
}
.alert-category-chevron {
  font-size: 0.75rem;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.alert-category-body {
  margin-top: 0.6rem;
}
.alert-category-section.collapsed .alert-category-body {
  display: none !important;
}
.alert-category-section.collapsed .alert-category-chevron {
  transform: rotate(-90deg);
}

/* Công việc đến hạn */
.alert-zone-danger .alert-category-icon-badge { background: #FAECE7; color: #B3441F; }
/* Meeting */
.alert-zone-teal .alert-category-icon-badge { background: #EAF1FA; color: #14508C; }
/* Hết hạn FOC */
.alert-zone-rose .alert-category-icon-badge { background: #FAEEDA; color: #C77A15; }
/* Cảnh báo cọc AG/AN (not in spec - extrapolated from the same palette) */
.alert-zone-green .alert-category-icon-badge { background: #E8F3EA; color: #3B6D11; }
/* Nhắc remind khách hàng */
.alert-zone-amber .alert-category-icon-badge { background: #EEEDFE; color: #534AB7; }
/* Cập nhật Website (not in spec - extrapolated from the same palette) */
.alert-zone-blue .alert-category-icon-badge { background: #E6F6F8; color: #0E7C86; }
/* Nhắc sinh nhật đối tác */
.alert-zone-pink .alert-category-icon-badge { background: #EAF3EC; color: #2D6A4F; }

/* Distinct background wash per home-page card, for easier visual separation.
   NOTE: .dashboard-stats-panel and .alerts-card colours are actually driven by
   the --bg-dashboard-stats / --bg-alert-center variables further below (each
   theme block), since those rules come later in the cascade and would
   otherwise silently win over anything declared here. */
.quick-actions-card {
  background: var(--bg-dashboard-stats) !important;
}

/* Panel Background Color Mappings for easy distinction */
.sidebar-search-panel {
  background: var(--bg-sidebar-search) !important;
}
.sidebar-add-panel {
  background: var(--bg-sidebar-add) !important;
}
.company-list {
  background: var(--bg-company-list) !important;
}
body[data-theme="light"] .company-list {
  border-color: var(--border-light) !important;
}
body[data-theme="light"] .company-list h3 {
  color: var(--text-light) !important;
}
body[data-theme="light"] .company-list h3 span span#company-count {
  background: rgba(15, 23, 42, 0.08) !important;
  color: var(--text-light) !important;
}
body[data-theme="light"] .company-list > p {
  color: var(--text-light-muted) !important;
}
.dashboard-stats-panel {
  background: var(--bg-dashboard-stats) !important;
}
.task-feed-panel {
  background: var(--bg-task-feed) !important;
  border-color: var(--border-task-feed) !important;
}
.alerts-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.company-tasks-panel {
  background: var(--bg-company-tasks) !important;
  border-color: var(--border-task-feed) !important;
}
.company-profile-panel {
  background: var(--bg-company-profile) !important;
}
.company-ai-panel {
  background: var(--bg-company-ai) !important;
}
#settings-modal .modal-card {
  background: var(--bg-settings-modal) !important;
}

body[data-theme="light"] .catalog-search-panel {
  background: #faf3e0 !important;
  border-color: #eddcb5 !important;
}

body[data-theme="light"] .general-tasks-panel {
  background: #edf7f2 !important;
  border-color: #d2ebd9 !important;
}

/* Admin overview charts (Tổng kết > Tổng quan) - sequential blue from the
   dataviz skill's validated default palette, single hue since each bar is
   already labeled (magnitude, not per-entity identity). */
.viz-root {
  --viz-bar-color: #2a78d6;
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .viz-root {
    --viz-bar-color: #3987e5;
  }
}
body[data-theme="dark"] .viz-root {
  --viz-bar-color: #3987e5;
}

/* Brief auto-dismissing success/error notice - replaces blocking alert()
   popups for routine confirmations (e.g. "tạo đối tác thành công") that
   don't need an explicit OK click. */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: #1f2937;
  color: #fff;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 90vw;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-success {
  background: #107c41;
}
.toast-error {
  background: #dc2626;
}
.toast-warning {
  background: #b45309;
}
/* Persistent variant (showToast duration:0/null) - stays until "Đã đọc" is
   clicked instead of auto-vanishing, so the notification behind it (already
   deleted server-side the instant it was fetched - see showToast's own
   comment) isn't lost just because nobody was looking at the right moment. */
.toast-persistent {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  max-width: min(90vw, 480px);
}
.toast-persistent-text {
  flex: 1;
}
.toast-ack-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.toast-ack-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ---------------------------------------------------------------------
   Weekly calendar (Lịch làm việc) - #calendar-modal / renderCalendarWeek()
   in app.js. 7 day columns, each split into Sáng/Trưa/Chiều/Tối bands only
   on days that actually have a timed task.
--------------------------------------------------------------------- */
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.cal-day-col {
  background: var(--bg-panel);
  border: 1.5px solid rgba(71, 85, 105, 0.4);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cal-day-today {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px #f59e0b;
}

.cal-day-header {
  padding: 0.55rem 0.5rem;
  color: #fff;
  text-align: center;
}

.cal-day-weekday {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.92;
}

.cal-day-date {
  font-size: 1.1rem;
  font-weight: 800;
}

.cal-day-body {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.cal-day-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 1rem 0;
}

.cal-buoi-band {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.cal-buoi-label {
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cal-buoi-tasks {
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cal-buoi-empty {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.2rem 0;
}

.cal-flat-tasks {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cal-task-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.45rem;
  font-size: 0.75rem;
}

.cal-task-item[onclick] {
  cursor: pointer;
}

.cal-task-item[onclick]:hover {
  border-color: var(--primary-light, #14508C);
}

.cal-task-done {
  opacity: 0.55;
}

.cal-task-done .cal-task-title {
  text-decoration: line-through;
}

.cal-task-icon {
  margin-top: 0.15rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.cal-task-body {
  flex: 1;
  min-width: 0;
}

.cal-task-title {
  font-weight: 600;
  color: var(--text-highlight);
  word-break: break-word;
}

.cal-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.cal-task-time {
  font-weight: 700;
  color: #0d9488;
}

.cal-task-company,
.cal-task-owner {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.cal-task-check {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* Thao tác nhanh trên thẻ việc của Lịch làm việc: xong / gia hạn / tạm dừng /
   xóa.
   Hàng nút chiếm trọn một dòng riêng bên dưới phần chữ. Đặt chung hàng với
   tiêu đề thì 4 nút (không co được) ăn gần hết chiều ngang cột ngày vốn đã
   hẹp, phần chữ bị ép còn vài pixel và xuống dòng mỗi dòng một ký tự.
   Hiện thường trực chứ không chờ trỏ chuột: dòng này dù sao cũng đã chiếm
   chỗ, ẩn đi chỉ để lại một khoảng trống khó hiểu, mà trên màn hình cảm ứng
   thì không có cách nào làm nó hiện ra. */
.cal-task-actions {
  display: flex;
  gap: 0.1rem;
  flex: 0 0 100%;
  justify-content: flex-end;
  margin-top: -0.1rem;
}

.cal-task-act {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.2rem 0.28rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  line-height: 1;
}

.cal-task-act:hover {
  color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.12);
}

.cal-task-act-danger:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.cal-task-act:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

body.view-mode-mobile .cal-week-grid {
  grid-template-columns: 1fr !important;
}

/* Tuần/Tháng toggle */
.cal-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cal-view-toggle-btn {
  border: none;
  background: var(--bg-panel);
  color: var(--text);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.cal-view-toggle-btn.active {
  background: var(--primary-light, #14508C);
  color: #fff;
}

/* Month grid view */
.cal-month-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cal-month-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
}

.cal-month-weekday-header {
  text-align: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0;
  border-radius: var(--radius-sm);
}

.cal-month-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(90px, auto);
  gap: 0.4rem;
}

.cal-month-cell {
  background: var(--bg-panel);
  border: 1.5px solid rgba(71, 85, 105, 0.55);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  padding: 0.35rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.cal-month-cell:hover {
  border-color: var(--primary-light, #14508C);
}

.cal-month-cell-outside {
  opacity: 0.45;
}

.cal-month-cell-today {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px #f59e0b;
}

.cal-month-daynum {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-highlight);
}

.cal-month-chips {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.cal-month-chip {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  white-space: normal;
  word-break: break-word;
  color: var(--text-highlight);
}

.cal-month-chip-main {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.cal-month-chip-company {
  margin-top: 0.1rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
}

.cal-month-chip.cal-task-done {
  opacity: 0.55;
  text-decoration: line-through;
}

.cal-month-more {
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 0 0.3rem;
}

body.view-mode-mobile .cal-month-weekday-row,
body.view-mode-mobile .cal-month-cells {
  grid-template-columns: 1fr !important;
}

/* One ứng viên name inside the header "Chưa cắm cờ" badge, with an
   admin/leader-only × to drop that candidate - see
   candidateNameWithRemoveHTML/removeCandidateFromCompany in app.js. */
.candidate-name-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.candidate-remove-x {
  cursor: pointer;
  opacity: 0.55;
  font-size: 0.85em;
}

.candidate-remove-x:hover {
  opacity: 1;
  color: #ef4444;
}

/* Nhãn [GẤP/THẦU] và hàng lọc của màn hình "Khách hàng đang có Shipment".
   Nhãn dùng đúng sắc đỏ của ô tích "Gấp / Thầu" ở form nhập việc, để người
   dùng nhận ra ngay đây là cùng một thứ họ vừa tích. */
.shipment-urgent-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.3rem;
  vertical-align: middle;
}

.shipment-filter-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.shipment-filter-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.shipment-filter-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

.shipment-filter-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.shipment-filter-count {
  font-weight: 700;
  opacity: 0.75;
}

/* "Nước cay" - nước chưa được xếp vào mức tô màu nào. Chiếm 159/236 nước nên
   đây là nhóm lớn nhất, không phải ngoại lệ hiếm. Màu ớt để tách khỏi 5 mức
   thương mại vốn dùng tím/xanh/lục. */
.territory-tier-none {
  background: rgba(244, 63, 94, 0.13);
  border-color: rgba(244, 63, 94, 0.4);
  color: #e11d48;
}