/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/*
 * NAME DISPLAY STANDARD — toàn bộ site
 * Format: [Title.] FirstName(s) LASTNAME
 * Examples: Phuong Mai DANG  |  Rosalyn Maria LAUDATI  |  Mr. John SMITH
 * Rule: first_name = toTitleCase, last_name = ALL CAPS, title (if any) prefix
 * Implementation: formatCustomerName() in src/lib/formatName.js — dùng mọi nơi
 * Áp dụng: customers, bookings, invoices, staff, agents, dashboard, approvals
 * KHÔNG áp dụng: leads (tên nhập thủ công), vendors, tour names
 */

/* ===== FONT DECLARATIONS ===== */
@font-face {
  font-family: 'FuturaBk';
  src: url('/fonts/FuturaBk.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'VNFFutura';
  src: url('/fonts/VNFFutura.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===== SCROLLBAR GUTTER FIX ===== */
/* Scrollbar-gutter: stable is applied to Main Content div in dashboard/layout.js (the actual scrolling container) */
html, body {
  overflow-x: hidden;
  font-family: 'VNFFutura', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Force scrollbar always visible to reserve space */
:root {
  scrollbar-width: auto;
}

/* Apply fonts to all elements */
* {
  font-family: 'VNFFutura', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===== CSS COLOR VARIABLES ===== */
:root {
  /* Primary colors */
  --color-primary: #0095D9;
  --color-primary-dark: #0077AD;
  --color-secondary: #F5F5F3;
  /* Status colors */
  --color-success: #3B6D11;
  --color-success-bg: #EAF3DE;
  --color-error: #A32D2D;
  --color-error-bg: #FCEBEB;
  /* Finance colors */
  --color-paid: #10b981;
  --color-balance-due: #ef4444;
  --color-credit: #8b5cf6;
  --color-warning: #854F0B;
  --color-warning-bg: #FAEEDA;
  --color-info: #0F6E56;
  --color-info-bg: #E1F5EE;

  /* Text colors */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #555;
  --color-text-tertiary: #666;
  --color-text-muted: #888;
  --color-text-light: #999;
  --color-text-lighter: #aaa;

  /* Border & UI */
  --color-border: #ddd;
  --color-border-light: #e8e6e0;
  --color-border-lighter: #f0ede8;
  --color-bg-light: #eeeeec;
  --color-bg-white: #ffffff;
  --color-amount: var(--color-primary); /* USD amount highlight (financial figures) */

  /* Tier/Badge colors */
  --color-tier-vip: #FAEEDA;
  --color-tier-vip-text: #854F0B;
  --color-tier-gold: #FAEEDA;
  --color-tier-gold-text: #854F0B;
  --color-tier-silver: #E6F1FB;
  --color-tier-silver-text: #185FA5;
  --color-tier-standard: #F1EFE8;
  --color-tier-standard-text: #5F5E5A;

  /* Lead status colors */
  --color-status-contacted: #3498db;
  --color-status-meeting: #f39c12;
  --color-status-proposal: #9b59b6;
  --color-status-negotiation: #1abc9c;
  --color-status-converted: #27ae60;
  --color-status-lost: #e74c3c;
  --color-status-default: #95a5a6;

  /* ===== HEIGHT & SPACING TOKENS ===== */
  /* Desktop heights (match .btn-filter baseline) */
  --height-input:   2.75rem;       /* 44px */
  --height-btn:     2.75rem;       /* 44px - .btn-filter baseline */
  --height-badge:   1.75rem;       /* 28px */

  /* Padding - consistent spacing (baseline from List/Pipeline buttons) */
  --padding-input:  0.625rem 0.75rem;  /* 10px 12px */
  --padding-btn:    0.625rem /* 10px */ 1.25rem /* 20px */;         /* Baseline: List/Pipeline buttons */
  --padding-badge:  2px 0.5rem /* 8px */;           /* Standardized badge padding */
  --padding-table:  0.625rem /* 10px */ 0.75rem /* 12px */;         /* Table cell padding */

  /* Border radius */
  --radius-input:   0.25rem /* 4px */;
  --radius-btn:     0.25rem /* 4px */;
  --radius-badge:   0.25rem /* 4px */;               /* Standardized badge radius (not pill) */
  --radius-table:   0;                 /* Table cells - no radius */

  /* Font sizes */
  --font-size-btn:      0.875rem /* 14px */;          /* Baseline: List/Pipeline buttons */
  --font-size-filter:   0.75rem /* 12px */;          /* Filter buttons */
  --font-size-badge:    0.75rem /* 12px */;          /* Badges */
  --font-size-input:    0.875rem /* 14px */;          /* Input fields */

  /* UNIFIED CONTROL HEIGHT (standardized across site) */
  --control-height:     2.25rem;       /* 36px - balanced height for all controls */
  --control-padding:    0.5625rem /* 9px */ 0.75rem /* 12px */;      /* 9px vertical, 12px horizontal padding */
  --control-font-size:  0.875rem /* 14px */;          /* Standard compact font size */

  /* Content width */
  --content-width: 1000px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem /* 14px */;
  color: var(--color-text-primary);
  background: var(--color-bg-light);
}

input, select, textarea, button {
  font-family: inherit;
  outline: none;
}

button {
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

/* ===== FORM CONTROLS — class-based standard ===== */
/* Shared base for all three control types */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: var(--control-font-size);
  font-family: inherit;
  color: #1a1a2e;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-input);
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 0;
}

.form-input,
.form-select {
  height: var(--control-height);
  padding: var(--control-padding);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #9ca3af;
}

/* Shared: custom arrow layout — used by all styled selects */
.form-select,
.status-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0.375rem /* 6px */ 1.75rem /* 28px */ 0.375rem /* 6px */ 0.75rem /* 12px */;
  background-repeat: no-repeat;
  background-position: right 0.5rem /* 8px */ center;
  background-size: 0.75rem /* 12px */;
  cursor: pointer;
}

/* form-select: grey arrow on white background */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Textarea: no fixed height, vertical resize */
.form-textarea {
  min-height: 5rem /* 80px */;
  padding: 0.75rem;
  resize: vertical;
}


input:disabled,
select:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* ===== FORM FIELD LABEL — label trên ô nhập liệu/select ===== */
.field-label {
  font-size: 0.75rem /* 12px */;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 0.3125rem /* 5px */;
}

/* Hint text inside a label — inherits nothing, stays small+lowercase */
.label-hint {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.75rem /* 12px */;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.25rem;
}



/* ===== INPUT ERROR STYLING ===== */
.input-error {
  border-color: var(--color-error) !important;
  background-color: var(--color-error-bg) !important;
}

.input-error:focus {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.12) !important;
}

/* iOS Safari fix for date input overflow */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Control date picker calendar button - prevent overflow */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 0.25rem /* 4px */;
  margin: 0;
  padding: 0;
  width: 1.25rem /* 20px */;
  height: 1.25rem /* 20px */;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 2px;
}

/* iOS Safari - ensure date input doesn't overflow */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  min-width: 0;
}

/* Date input class for backward compatibility */
.date-input {
  height: var(--control-height);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0.75rem /* 12px */;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem /* 4px */;
  font-size: 0.875rem /* 14px */;
  background: white;
  color: var(--color-text-tertiary);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  overflow: hidden;
}

/* Mobile optimization - scale up for touch targets */
@media (max-width: 768px) {
  :root {
    --height-input: 2.75rem;     /* 44px */
    --height-btn:   2.75rem;     /* 44px */
    --height-badge: 1.75rem;     /* 28px */
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  select {
    font-size: 1rem /* 16px */;
  }

  .btn {
    font-size: 1rem /* 16px */;
    margin-bottom: 0.5rem /* 8px */;
  }
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

a { text-decoration: none; color: inherit; }

h1 {
  font-size: 1.25rem /* 20px */;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

::-webkit-scrollbar { width: 0.3125rem /* 5px */; height: 0.3125rem /* 5px */; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 99px; }

/* Button Styles - Base (UNIFIED CONTROL HEIGHT) */
.btn {
  height: var(--control-height);
  padding: var(--control-padding);
  font-size: var(--control-font-size);
  font-weight: 600;
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  border: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button Variants */
.btn-primary {
  background: var(--color-primary);
  color: white;
  border: none;
  transition: background 0.2s;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: white;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  transition: border-color 0.2s;
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-text-light);
}

.btn-danger {
  background: white;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  transition: background 0.2s;
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-error-bg);
}

.btn-warning {
  background: white;
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  transition: background 0.2s;
}

.btn-warning:hover:not(:disabled) {
  background: var(--color-warning-bg);
}

.btn-success {
  background: #16a34a;
  color: #ffffff;
  border: 1px solid #16a34a;
  transition: background 0.2s;
}

.btn-success:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}

.btn-filter {
  background: white;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: var(--control-padding);
  height: var(--control-height);
  font-size: var(--control-font-size);
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-filter.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
/* Finance status filters */
.btn-filter-paid.active     { background: #d1fae5; color: #065f46; border-color: #10b981; }
.btn-filter-unpaid.active   { background: #fef3c7; color: #92400e; border-color: #d97706; }
.btn-filter-partial.active  { background: #dbeafe; color: #1e40af; border-color: #3b82f6; }
.btn-filter-overdue.active  { background: #fed7aa; color: #c2410c; border-color: #f97316; }

/* Booking status filters — matches badge-status-* */
.btn-filter-pending.active    { background: #fef3c7; color: #92400e;  border-color: #d97706; }
.btn-filter-confirmed.active  { background: #d1fae5; color: #065f46;  border-color: #10b981; }
.btn-filter-in_progress.active{ background: #dbeafe; color: #1e40af;  border-color: #3b82f6; }
.btn-filter-completed.active  { background: #ccfbf1; color: #0f766e;  border-color: #14b8a6; }
.btn-filter-cancelled.active  { background: #fee2e2; color: #991b1b;  border-color: #ef4444; }

/* Agent/vendor active-inactive filters */
.btn-filter.active-status   { background: #d1fae5; color: #065f46; border-color: #065f46; }
.btn-filter.inactive-status { background: #fde68a; color: #78350f; border-color: #d97706; }

/* Customer tier filters — always colored, bolder on active */
.btn-filter.tier-classic         { background: #e7e5e4; color: #292524; border-color: #a8a29e; }
.btn-filter.tier-premium         { background: #e0e7ff; color: #3730a3; border-color: #818cf8; }
.btn-filter.tier-luxury          { background: #fdf4ff; color: #86198f; border-color: #d946ef; }
.btn-filter.tier-elite           { background: #fef9c3; color: #713f12; border-color: #eab308; }
.btn-filter.tier-classic.active  { background: #d6d3d1; color: #1c1917; border-color: #57534e; font-weight: 600; }
.btn-filter.tier-premium.active  { background: #c7d2fe; color: #312e81; border-color: #4f46e5; font-weight: 600; }
.btn-filter.tier-luxury.active   { background: #f5d0fe; color: #701a75; border-color: #a21caf; font-weight: 600; }
.btn-filter.tier-elite.active    { background: #fef08a; color: #78350f; border-color: #ca8a04; font-weight: 600; }

.btn-filter:hover:not(:disabled):not(.active):not(.active-status):not(.inactive-status):not(.tier-classic):not(.tier-premium):not(.tier-luxury):not(.tier-elite) {
  border-color: var(--color-text-light);
}

/* ── FILTER BUTTON TEXT (CSS-driven — edit here to change labels site-wide) ── */
/* Generic: data-label attribute for fully dynamic labels */
.btn-filter[data-label]::before                { content: attr(data-label); }

/* Count badge appended after label */
.btn-filter[data-count]::after                 { content: ' (' attr(data-count) ')'; }

/* Common status */
.btn-filter-all::before                        { content: 'All / Tất Cả'; }
.btn-filter-active::before                     { content: 'Active / Đang HĐ'; }
.btn-filter-inactive::before                   { content: 'Inactive / Ngừng HĐ'; }
.btn-filter-pending::before                    { content: 'Pending / Chờ Xử Lý'; }
.btn-filter-confirmed::before                  { content: 'Confirmed / Đã Xác Nhận'; }
.btn-filter-in_progress::before                { content: 'In Progress / Đang Chạy'; }
.btn-filter-completed::before                  { content: 'Completed / Hoàn Thành'; }
.btn-filter-cancelled::before                  { content: 'Cancelled / Đã Hủy'; }

/* Payment status */
.btn-filter-paid::before                       { content: 'Paid / Đã Thanh Toán'; }
.btn-filter-unpaid::before                     { content: 'Unpaid / Chưa Thanh Toán'; }
.btn-filter-partial::before                    { content: 'Partial / Một Phần'; }
.btn-filter-overdue::before                    { content: 'Overdue / Quá Hạn'; }
.btn-filter-void::before                       { content: 'Void / Vô Hiệu'; }

/* Customer tier */
.btn-filter-all-tiers::before                  { content: 'All Tiers / Tất Cả'; }
.btn-filter-classic::before                    { content: 'Classic / Tiêu Chuẩn'; }
.btn-filter-premium::before                    { content: 'Premium / Cao Cấp'; }
.btn-filter-luxury::before                     { content: 'Luxury / Sang Trọng'; }
.btn-filter-elite::before                      { content: 'Elite / Tinh Anh'; }

/* Lead pipeline */
.btn-filter-new::before                        { content: 'New / Mới'; }
.btn-filter-consulting::before                 { content: 'Consultation / Tư Vấn'; }
.btn-filter-quoted::before                     { content: 'Proposal Sent / Báo Giá'; }
.btn-filter-reviewing::before                  { content: 'Itinerary Review / Xem Lịch'; }
.btn-filter-won::before                        { content: 'Won / Thành Công'; }
.btn-filter-lost::before                       { content: 'Lost / Không Thành'; }

/* Vendor types */
.btn-filter-airline::before                    { content: 'Airline / Hàng Không'; }
.btn-filter-cruise::before                     { content: 'Cruise / Du Thuyền'; }
.btn-filter-guide::before                      { content: 'Guide / HDV'; }
.btn-filter-hotel::before                      { content: 'Hotel / Khách Sạn'; }
.btn-filter-restaurant::before                 { content: 'Restaurant / Nhà Hàng'; }
.btn-filter-transport::before                  { content: 'Transport / Vận Chuyển'; }
.btn-filter-tour_operator::before              { content: 'Tour Operator / Điều Hành'; }
.btn-filter-activities::before                 { content: 'Activities / Hoạt Động'; }
.btn-filter-visa_agent::before                 { content: 'Visa Agent / Đại Lý Visa'; }

/* Tabs */
.btn-filter-tab-detail::before                 { content: '📋 Detail / Chi Tiết'; }
.btn-filter-tab-invoices::before               { content: '📄 Invoice / Hóa Đơn'; }
.btn-filter-tab-bills::before                  { content: '💳 Bills / Phải Trả'; }
.btn-filter-tab-operations::before             { content: 'Operations / Vận Hành'; }
.btn-filter-tab-kpi::before                    { content: 'Sales KPI / Hiệu Suất'; }
.btn-filter-tab-pipeline::before               { content: '🔄 Pipeline / Bảng'; }
.btn-filter-tab-list::before                   { content: '📋 List / Danh Sách'; }
.btn-filter-tab-all-vendors::before            { content: 'All Types / Tất Cả'; }

/* Report group-by */
.btn-filter-year::before                       { content: 'Year / Năm'; }
.btn-filter-month::before                      { content: 'Month / Tháng'; }
.btn-filter-week::before                       { content: 'Week / Tuần'; }
.btn-filter-day::before                        { content: 'Day / Ngày'; }

/* Full width variant for mobile forms */
.btn-full {
  width: 100%;
}

/* Auto width variant - for buttons that shouldn't be full width on mobile */
.btn-auto {
  width: auto;
}

/* Small table action button — compact padding, not overridable by table base font */
.btn-sm {
  font-size: 0.75rem /* 12px */ !important;
  padding: 0.25rem /* 4px */ 0.625rem /* 10px */ !important;
  height: auto;
}

/* Flexible button group row — used in DNA, filter chips, etc. */
.btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Sub-section within a card (e.g. Travel DNA rows) */
.dna-section { margin-bottom: 1.5rem; }
.dna-section:last-child { margin-bottom: 0; }
.dna-section-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Action button group inside table cells */
.table-actions {
  display: flex;
  gap: 0.375rem /* 6px */;
  align-items: center;
  flex-wrap: nowrap;
}

/* Back/Navigation button - icon only, no background */
.btn-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1.25rem /* 20px */;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.btn-back:hover:not(:disabled) {
  color: var(--color-text-tertiary);
}

/* Currency prefix input — symbol sits inside the left of the input box */
.input-currency-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-currency-symbol {
  position: absolute;
  left: 0.75rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  pointer-events: none;
  z-index: 1;
}
.input-currency-wrap .form-input {
  padding-left: 1.75rem;
}

/* Search Input — extends .form-input, only overrides icon-specific properties */
.search-input {
  padding-left: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.75rem center;
  background-size: 0.875rem /* 14px */ 0.875rem /* 14px */;
}

/* ===== BADGE SYSTEM ===== */

/* Base badge - ALL badges must include this class */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  padding: 2px 0.5rem /* 8px */ !important;
  font-size: var(--font-size-badge) !important; /* 12px */
  font-weight: 400 !important;
  border-radius: var(--radius-badge) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}


/* ── LEAD / PIPELINE STATUS ── */
.badge-status-new        { background: #f3f4f6 !important; color: #6b7280 !important; }
.badge-status-consulting { background: #dbeafe !important; color: #1e40af !important; }
.badge-status-quoted     { background: #fef3c7 !important; color: #92400e !important; }
.badge-status-reviewing  { background: #ede9fe !important; color: #5b21b6 !important; }
.badge-status-won        { background: #d1fae5 !important; color: #065f46 !important; }
.badge-status-lost       { background: #fee2e2 !important; color: #991b1b !important; }
.badge-status-converted  { background: #cffafe !important; color: #0e7490 !important; }
/* legacy names */
.badge-status-contacted  { background: #dbeafe !important; color: #1e40af !important; }
.badge-status-qualified  { background: #fef3c7 !important; color: #92400e !important; }
.badge-status-proposal   { background: #ede9fe !important; color: #5b21b6 !important; }

/* ── BOOKING STATUS ── */
.badge-status-pending     { background: #fef3c7 !important; color: #92400e !important; }
.badge-status-confirmed   { background: #d1fae5 !important; color: #065f46 !important; }
.badge-status-in_progress { background: #dbeafe !important; color: #1e40af !important; }
.badge-status-completed   { background: #ccfbf1 !important; color: #0f766e !important; }
.badge-status-cancelled   { background: #fee2e2 !important; color: #991b1b !important; }

/* ── INVOICE / BILL PAYMENT STATUS ── */
.badge-status-unpaid   { background: #fef3c7 !important; color: #92400e !important; }
.badge-status-partial  { background: #dbeafe !important; color: #1e40af !important; }
.badge-status-paid     { background: #d1fae5 !important; color: #065f46 !important; }
.badge-status-overdue  { background: #fed7aa !important; color: #c2410c !important; }
.badge-status-void     { background: #f3e8ff !important; color: #7c3aed !important; }
.badge-status-merged   { background: #f3f4f6 !important; color: #6b7280 !important; }

/* Badge text is rendered in JSX — no ::after needed */
.badge-status-qualified::after   { content: 'Qualified'; }
.badge-status-proposal::after    { content: 'Proposal'; }

/* ── CUSTOMER TIER ── */
.badge-tier-classic { background: #e7e5e4 !important; color: #292524 !important; } /* Stone   — cơ bản */
.badge-tier-premium { background: #e0e7ff !important; color: #3730a3 !important; } /* Indigo  — cao cấp */
.badge-tier-luxury  { background: #fdf4ff !important; color: #86198f !important; } /* Fuchsia — sang trọng */
.badge-tier-elite   { background: #fef9c3 !important; color: #713f12 !important; } /* Gold    — tinh anh */

/* ── VENDOR / AGENT / TOUR STATUS ── */
.badge-status-active   { background: #d1fae5 !important; color: #065f46 !important; }
.badge-status-inactive { background: #fde68a !important; color: #78350f !important; } /* Amber — tạm dừng */

/* ── PASSPORT / DOCUMENT STATUS ── */
.badge-passport-expired  { background: #FCEBEB !important; color: #A32D2D !important; }
.badge-passport-expiring { background: #FAEEDA !important; color: #854F0B !important; }

/* ── SOURCE / CHANNEL ── */
.badge-source-website  { background: #dbeafe !important; color: #1e40af !important; }
.badge-source-facebook { background: #ede9fe !important; color: #4c1d95 !important; }
.badge-source-referral { background: #d1fae5 !important; color: #065f46 !important; }
.badge-source-agent    { background: #fee2e2 !important; color: #991b1b !important; }
.badge-source-walkin   { background: #fef3c7 !important; color: #92400e !important; }
.badge-source-email    { background: #f3f4f6 !important; color: #374151 !important; }
.badge-source-phone    { background: #f0fdf4 !important; color: #166534 !important; }
.badge-source-social   { background: #fce7f3 !important; color: #9d174d !important; }

/* ── SOURCE BADGE TEXT (CSS-driven) ── */
.badge-source-website::after  { content: 'Website'; }
.badge-source-facebook::after { content: 'Facebook'; }
.badge-source-referral::after { content: 'Referral'; }
.badge-source-agent::after    { content: 'Agent'; }
.badge-source-walkin::after   { content: 'Walk-In'; }
.badge-source-email::after    { content: 'Email'; }
.badge-source-phone::after    { content: 'Phone'; }
.badge-source-social::after   { content: 'Social Media'; }

.badge-pax        { background: #95a5a6 !important; color: #ffffff !important; }

/* ── STAFF ROLE ── */
.badge-role-staff       { background: #F0F0F0 !important; color: #666666 !important; }
.badge-role-sales       { background: #E6F1FB !important; color: #185FA5 !important; }
.badge-role-accountant  { background: #FEF3E2 !important; color: #BA7517 !important; }
.badge-role-operator    { background: #E0F7FA !important; color: #0E7490 !important; }
.badge-role-operation   { background: #E0F7FA !important; color: #0E7490 !important; }
.badge-role-manager     { background: #F3E8FF !important; color: #7C3AED !important; }
.badge-role-admin       { background: #FEE2E2 !important; color: #DC2626 !important; }

/* ── VENDOR TYPE ── */
.badge-vendor-airline       { background: #EFF6FF !important; color: #3B82F6 !important; }
.badge-vendor-cruise        { background: #F5F3FF !important; color: #8B5CF6 !important; }
.badge-vendor-guide         { background: #FFF7ED !important; color: #F97316 !important; }
.badge-vendor-hotel         { background: #F0FDF4 !important; color: #22C55E !important; }
.badge-vendor-restaurant    { background: #FEF2F2 !important; color: #EF4444 !important; }
.badge-vendor-transport     { background: #F9FAFB !important; color: #6B7280 !important; }
.badge-vendor-tour_operator { background: #FEFCE8 !important; color: #CA8A04 !important; }
.badge-vendor-activities    { background: #ECFEFF !important; color: #06B6D4 !important; }
.badge-vendor-visa_agent    { background: #FDF2F8 !important; color: #EC4899 !important; }

/* ── CUSTOMER TIER ── */
.badge-tier-standard { background: #F1EFE8 !important; color: #5F5E5A !important; }

/* ── TOUR TYPE ── */
.badge-tourtype-package  { background: #E6F1FB !important; color: #185FA5 !important; }
.badge-tourtype-custom   { background: #CCE9F6 !important; color: #0095D9 !important; }
.badge-tourtype-day-trip { background: #DBEAFE !important; color: #0F6E56 !important; }

/* ── ACTIVITY LOG ACTIONS ── */
.badge-action                    { background: #6b728018 !important; color: #6b7280 !important; }
.badge-action-create             { background: #10b98118 !important; color: #10b981 !important; }
.badge-action-update             { background: #3b82f618 !important; color: #3b82f6 !important; }
.badge-action-delete             { background: #ef444418 !important; color: #ef4444 !important; }
.badge-action-status_change      { background: #f59e0b18 !important; color: #f59e0b !important; }
.badge-action-payment_recorded   { background: #8b5cf618 !important; color: #8b5cf6 !important; }
.badge-action-login              { background: #6b728018 !important; color: #6b7280 !important; }

/* ===== PIPELINE CARD STYLES ===== */
.pipeline-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.75rem;    /* 12px */
}

.pipeline-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
}

.pipeline-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.75rem;    /* 12px */
}

.pipeline-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;    /* 12px */
}

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

/* status-select: white arrow on colored background — arrow layout inherited from shared block above */
.status-select {
  height: var(--control-height);
  font-size: var(--control-font-size);
  border-radius: var(--radius-input);
  border: 1px solid #d1d5db;
  font-weight: 600;
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Status select - background colors matching pipeline stages */
select.status-select.status-new        { background-color: #6b7280; }
select.status-select.status-consulting { background-color: #3b82f6; }
select.status-select.status-quoted     { background-color: #f59e0b; }
select.status-select.status-reviewing  { background-color: #8b5cf6; }
select.status-select.status-won        { background-color: #10b981; }
select.status-select.status-lost       { background-color: #ef4444; }
select.status-select.status-converted  { background-color: #27ae60; }

select.status-select option {
  background-color: #ffffff;
  color: #111827;
}

/* Force select height to match inputs and buttons */
/* SELECT element - already styled above with var(--control-height) */
/* Removed duplicate/conflicting rule that was using !important */

/* ===== UNIFIED SPACING SYSTEM ===== */
/* Single source of truth for all page layouts */
:root {
  /* Page spacing tokens */
  --space-page-x: 1.5rem;          /* 24px — horizontal page padding */
  --space-page-y: 1.5rem;          /* 24px — vertical page padding */
  --space-section: 1.5rem;         /* 24px — gap between sections */
  --space-card: 1.25rem;           /* 20px — inner card spacing: dividers, margins, L/R padding */
  --card-padding: 1.875rem var(--space-card) 2.5rem; /* card padding: top 30px | L/R = --space-card | bottom 40px */
  --space-header: 1.5rem;          /* 24px — header vertical padding */
  --space-page-x-mobile: 0.75rem;  /* 12px — mobile horizontal padding */
  --space-page-y-mobile: 0.75rem;  /* 12px — mobile vertical padding */

  /* Legacy aliases for backwards compatibility */
  --page-padding-x: var(--space-page-x);
  --page-padding-y: var(--space-page-y);
  --page-padding-mobile: var(--space-page-x-mobile);
}

/* Main page wrapper — used by ALL pages */
.page-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  min-width: 0;
}

/* Card / section box — consistent styling (matches Customers page design) */
.card {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: 0.75rem /* 12px */;
  overflow: visible;
  padding: var(--card-padding);
  margin-bottom: var(--space-section);
  width: 100%;
  box-sizing: border-box;
}

.card > *:last-child {
  margin-bottom: 0;
}

.filter-grid .form-field {
  margin-bottom: 0;
}

/* Section inside a card */
.card-section {
  padding: 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}
.card-section:last-child {
  border-bottom: none;
}
.card .card-section:first-child {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}


.card-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0.75rem;   /* 12px */
  margin-bottom: var(--space-card) /* 20px */;
}

.form-section-label {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;    /* 12px */
  margin-top: var(--space-section);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  position: relative;
  margin-bottom: 1.5rem /* 24px */;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0 1rem;
  gap: 0 1rem;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}
.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0 1rem;
  gap: 0 1rem;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .form-grid-3 { grid-template-columns: 1fr; }
}
.form-full-width { grid-column: 1 / -1; }
.form-btn-row {
  display: flex;
  gap: 0.5rem /* 8px */;
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .form-btn-row { flex-direction: column; }
}
/* Add-item inline row (qty + price + calc + button on one line) */
.add-item-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 0;
}
.add-item-row .form-field { margin-bottom: 0; }
.add-item-calc {
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ===== PRICING / SERVICE LIST TABLE ===== */
.table-pricing {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
}
.table-pricing thead tr {
  background: var(--table-th-bg);
}
.table-pricing tbody tr {
  border-bottom: var(--table-border);
  height: 40px;
}
.table-pricing tbody tr:last-child {
  border-bottom: none;
}
.td-th-left,
.td-th.td-th-left {
  padding: var(--table-padding);
  font-size: var(--table-th-size);
  font-weight: 600;
  color: var(--table-th-color);
  background: var(--table-th-bg);
  border-bottom: var(--table-border);
  text-align: left;
  white-space: nowrap;
}
.td-amount.amount-highlight {
  font-weight: 600;
  color: var(--color-amount);
}
.tfoot-total-row {
  border-top: var(--table-border);
  background: var(--table-th-bg);
}
.tfoot-label {
  padding: var(--table-padding);
  font-weight: 600;
  font-size: var(--table-th-size);
  color: var(--color-text-secondary);
  text-align: right;
}
.tfoot-amount {
  padding: var(--table-padding);
  font-weight: 600;
  font-size: var(--table-font-size);
  color: var(--color-amount);
  text-align: right;
  white-space: nowrap;
}
.btn-remove-item {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.btn-remove-item:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-border);
}
.text-medium {
  font-weight: 600;
}
.form-grid-dates {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  grid-gap: 0 1rem;
  gap: 0 1rem;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .form-grid-dates { grid-template-columns: 1fr; }
}
/* Normalize card bottom spacing — last form/detail row's margin-bottom absorbed by card's own padding */
.card > .form-grid-2:last-child > :is(.form-field, .detail-field):nth-last-child(-n+2),
.card > form > .form-grid-2:last-child > :is(.form-field, .detail-field):nth-last-child(-n+2),
.card > .card-inner-divider:last-child > .form-grid-2:last-child > :is(.form-field, .detail-field):nth-last-child(-n+2),
.card > .form-grid-3:last-child > :is(.form-field, .detail-field):nth-last-child(-n+3),
.card > form > .form-grid-3:last-child > :is(.form-field, .detail-field):nth-last-child(-n+3),
.card > .form-grid-4:last-child > :is(.form-field, .detail-field):nth-last-child(-n+4),
.card > form > .form-grid-4:last-child > :is(.form-field, .detail-field):nth-last-child(-n+4),
.card > .form-grid-dates:last-child > :is(.form-field, .detail-field):nth-last-child(-n+3),
.card > form > .form-grid-dates:last-child > :is(.form-field, .detail-field):nth-last-child(-n+3),
.card > :is(.form-field, .detail-field):last-child,
.card > form > :is(.form-field, .detail-field):last-child { margin-bottom: 0; }

.detail-page {
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .detail-page { padding: 0.75rem; }
}
.form-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  padding: 0.625rem /* 10px */ 0.875rem /* 14px */;
  border-radius: 0.25rem /* 4px */;
  margin-bottom: 1rem /* 16px */;
  font-size: var(--control-font-size);
}

/* Inline validation error below a field */
.field-error-text {
  font-size: 0.75rem /* 12px */;
  color: var(--color-error);
  margin-top: 0.25rem /* 4px */;
}

/* Bold name/title in card/mobile list views */
.card-item-name {
  font-size: 0.875rem /* 14px */;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

/* Filter button bar — borderBottom separator inside a card */
.filter-bar {
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem /* 20px */;
  padding-bottom: 0.9375rem /* 15px */;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem /* 16px */;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.card-divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: 0.75rem /* 12px */ 0;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-gap: 1rem /* 16px */;
  gap: 1rem /* 16px */;
  align-items: end;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem /* 16px */;
  gap: 1rem /* 16px */;
  margin-bottom: var(--space-section);
}

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

/* Wrapper margin above/below a search input */
.search-wrapper {
  margin-bottom: 0.9375rem /* 15px */;
}

/* Mobile responsive spacing */
@media (max-width: 640px) {
  :root {
    --space-page-x: var(--space-page-x-mobile);
    --space-page-y: var(--space-page-y-mobile);
  }

  .page-container {
    padding: var(--space-page-y-mobile) var(--space-page-x-mobile);
  }

}

/* ===== EMPTY / LOADING STATE ===== */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
/* Simple text-only loading/empty — use inside any container */
.loading-state {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--control-font-size);
}
/* Full-page loading spinner wrapper */
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--color-text-muted);
  font-size: var(--control-font-size);
}

/* ===== ALERT / INFO BANNERS ===== */
.alert-danger {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: var(--space-section);
  font-size: var(--control-font-size);
  font-weight: 600;
}
.alert-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  border-radius: 0.375rem /* 6px */;
  padding: 0.625rem /* 10px */ 0.875rem /* 14px */;
  margin-bottom: var(--space-section);
  font-size: var(--control-font-size);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.alert-info {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #0ea5e9;
  border-radius: 0.25rem /* 4px */;
  padding: 0.625rem /* 10px */ 0.875rem /* 14px */;
  margin-bottom: 1rem;
  font-size: var(--control-font-size);
}
.alert-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: 0.25rem /* 4px */;
  padding: 0.625rem /* 10px */ 0.875rem /* 14px */;
  margin-bottom: 1rem;
  font-size: var(--control-font-size);
}
.alert-neutral {
  background: #f5f5f3;
  color: var(--color-text-secondary);
  border-radius: 0.25rem /* 4px */;
  padding: 0.625rem /* 10px */ 0.875rem /* 14px */;
  margin-bottom: 1rem;
  font-size: var(--control-font-size);
}

/* ===== KPI / STAT CARDS ===== */
.kpi-card {
  background: white;
  border-radius: 0.5rem /* 8px */;
  padding: 0.9375rem /* 15px */;
  box-shadow: 0 2px 0.5rem /* 8px */ rgba(0,0,0,0.08);
  border-left: 0.25rem /* 4px */ solid var(--color-primary);
  text-align: center;
}
.kpi-label {
  font-size: 0.75rem /* 12px */;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem /* 4px */;
}
.kpi-value {
  font-size: 1.5rem /* 24px */;
  font-weight: 600;
}
.kpi-sub {
  font-size: 0.75rem /* 12px */;
  color: var(--color-text-lighter);
  margin-top: 0.25rem /* 4px */;
}

/* KPI card color modifiers */
.kpi-blue  { border-left-color: #0095D9; }
.kpi-blue  .kpi-value { color: #0095D9; }
.kpi-amber { border-left-color: #f59e0b; }
.kpi-amber .kpi-value { color: #f59e0b; }
.kpi-green { border-left-color: #10b981; }
.kpi-green .kpi-value { color: #10b981; }
.kpi-purple { border-left-color: #7c3aed; }
.kpi-purple .kpi-value { color: #7c3aed; }

/* Leads pipeline grid: 6 cols desktop, 2 cols mobile */
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 640px) {
  .pipeline-grid { grid-template-columns: repeat(2, 1fr); }
}
.pipeline-item { text-align: center; }
.pipeline-bar {
  margin: 6px auto 0;
  width: 36px;
  height: 3px;
  background: var(--color-border-light);
  border-radius: 2px;
  overflow: hidden;
}
.pipeline-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Divider within a card (margin + border-top + top padding) */
.card-inner-divider {
  margin-top: var(--space-card);
  padding-top: var(--space-card);
  border-top: 1px solid var(--color-border-light);
}

/* Title inline (no border-bottom) — used inside flex-between headers */
.card-section-title-inline {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

/* Row with title + action button side-by-side */
.pricing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: var(--space-card);
}

/* Text alignment utility */
.text-right { text-align: right; }

/* Birthday list item */
.birthday-item {
  padding: 0.75rem;
  background: var(--color-birthday-bg);
  border: 1px solid var(--color-birthday-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.birthday-item:hover { background: var(--color-birthday-hover); }

/* Tier stat number inside Customers by Tier */
.tier-stat-value {
  font-size: 1.5rem /* 24px */;
  font-weight: 600;
}

/* ===== COLOR UTILITIES ===== */
.text-muted        { color: var(--color-text-muted); }
.text-secondary    { color: var(--color-text-secondary); }
.text-lead-won     { color: #27ae60; }
.text-error        { color: var(--color-error); }
.text-paid         { color: var(--color-paid); }
.text-credit       { color: var(--color-credit); }
.text-balance-due  { color: var(--color-balance-due); }

/* ===== LAYOUT UTILITIES ===== */
.btn-nowrap { white-space: nowrap; }

/* Alert link — used inside alert-warning banners */
.alert-link { color: #92400e; font-weight: 600; text-decoration: underline; }

/* Lead table cell colors */
.td-lead-month     { color: var(--color-text-secondary); }
.td-lead-consulting { color: #3498db; }
.td-lead-quoted    { color: #f39c12; }
.td-lead-won       { color: #27ae60; }
.td-lead-lost      { color: #e74c3c; }
.td-lead-rate      { color: var(--color-text-secondary); }

/* ===== FLEX UTILITIES ===== */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===== CLICKABLE LIST ITEM (non-table) ===== */
.list-item-clickable {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background 0.15s;
}
.list-item-clickable:hover { background: #f9f9f8; }
.list-item-clickable:last-child { border-bottom: none; }

/* ===== STAT CELL (centered grid item, e.g. dashboard tier grid) ===== */
.stat-cell {
  text-align: center;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 0.25rem /* 4px */;
}

/* ===== ACTIVITY CARD (mini card with left accent) ===== */
.activity-card {
  padding: 0.75rem;
  background: #f9f9f9;
  border-radius: 0.25rem /* 4px */;
  border-left: 3px solid var(--color-primary);
}

/* ===== TABLE STANDARDIZATION ===== */

/* CSS Variables for table - change here = change everywhere */
:root {
  --table-font-size:    0.875rem /* 14px */;   /* td base font size */
  --table-th-size:      0.875rem /* 14px */;   /* th header font size */
  --table-stt-size:     0.75rem /* 12px */;   /* STT / No. column */
  --table-code-size:    0.875rem /* 14px */;   /* Code columns (monospace) */
  --table-padding:      0.625rem /* 10px */ 0.75rem /* 12px */;
  --table-th-color:     #888;
  --table-th-bg:        #fafaf8;
  --table-border:       1px solid var(--color-border-light);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
}

/* Header cells */
table th,
.td-th {
  padding: var(--table-padding);
  text-align: center;
  font-size: var(--table-th-size);
  font-weight: 600;
  color: var(--table-th-color);
  background: var(--table-th-bg);
  border-bottom: var(--table-border);
  white-space: nowrap;
}

/* Data cells — inherit 14px from table */
table td,
.td-cell {
  padding: var(--table-padding);
  font-size: var(--table-font-size);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--table-border);
}

/* STT / No. column — gray, small */
table td.td-stt,
.td-stt {
  padding: var(--table-padding);
  font-size: var(--table-stt-size);
  font-weight: 400;
  color: #999;
  text-align: center !important;
  border-bottom: var(--table-border);
  white-space: nowrap;
}

/* Number / count column — black base color, centered */
table td.td-number,
.td-number {
  padding: var(--table-padding);
  font-size: var(--table-font-size);
  text-align: center !important;
  border-bottom: var(--table-border);
  white-space: nowrap;
}

/* Code columns (Invoice code, Booking code, Tour code…) */
.td-code {
  padding: var(--table-padding);
  font-size: var(--table-code-size);
  font-family: monospace;
  font-weight: 400;
  border-bottom: var(--table-border);
}

/* Badge cell — no font-size override, badge controls its own */
.td-badge {
  padding: var(--table-padding);
  text-align: right;
  border-bottom: var(--table-border);
}

/* Action cell (View / Edit buttons) */
.td-action {
  padding: var(--table-padding);
  text-align: center;
  border-bottom: var(--table-border);
  white-space: nowrap;
}

/* Sub-text inside a table cell — secondary line below main content */
.td-subtext {
  font-size: 0.625rem /* 10px */ !important;
  color: var(--color-text-light) !important;
  margin-top: 2px;
}

/* Sub-amount: absolute so it never adds to form-field height / grid row sizing */
.field-subtext {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--color-text-light);
}
/* Only fields with a sub-text get extra bottom margin to make room for it */
.form-field:has(.field-subtext) {
  margin-bottom: 2rem;
}

/* Muted / secondary text cell */
.td-muted {
  padding: var(--table-padding);
  font-size: var(--table-font-size);
  color: #666;
  border-bottom: var(--table-border);
}

/* Date cell — center-aligned */
.td-date {
  padding: var(--table-padding);
  font-size: var(--table-font-size);
  color: #666;
  text-align: center;
  border-bottom: var(--table-border);
  white-space: nowrap;
}

/* Amount / currency cell */
.td-amount {
  padding: var(--table-padding);
  font-size: var(--table-font-size);
  font-weight: 400;
  text-align: right;
  border-bottom: var(--table-border);
}

/* Link / email cell — Amasia blue */
.td-link {
  padding: var(--table-padding);
  font-size: var(--table-font-size);
  color: var(--color-primary);
  border-bottom: var(--table-border);
}

.detail-link {
  color: var(--color-primary);
  text-decoration: none;
}
.detail-link:hover {
  text-decoration: underline;
}

/* Empty / loading state */
.td-empty {
  padding: 2rem;
  text-align: center;
  color: #aaa;
}

/* Kanban board grid — responsive 4→2→1 cols, row+col gap */
.kanban-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--space-section) 1rem;
  gap: var(--space-section) 1rem;
  margin-bottom: var(--space-section);
}
@media (max-width: 1024px) {
  .kanban-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kanban-grid { grid-template-columns: 1fr; }
}

/* Kanban column card — no padding (header+body handle spacing internally) */
.kanban-col {
  background: white;
  border: 1px solid var(--color-border-light);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* ===== PIPELINE STATUS BUTTONS (lead detail progress bar) ===== */
.pipeline-column-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-weight: 600;
  font-size: 1rem /* 16px */;
  padding: 0.9375rem /* 15px */;
  cursor: default;
}
.pipeline-column-header .badge {
  background: rgba(255,255,255,0.3);
  color: white;
  margin-left: auto;
}
.pipeline-column-header .pipeline-toggle {
  font-size: 1rem;
}

/* Status background colors */
.pipeline-column-header.status-new        { background-color: #999; }
.pipeline-column-header.status-consulting { background-color: #3498db; }
.pipeline-column-header.status-quoted     { background-color: #f39c12; }
.pipeline-column-header.status-reviewing  { background-color: #9b59b6; }
.pipeline-column-header.status-won        { background-color: #27ae60; }
.pipeline-column-header.status-lost       { background-color: #e74c3c; }

@media (max-width: 640px) {
  .pipeline-column-header { font-size: 0.75rem; padding: 0.75rem /* 12px */; cursor: pointer; }
}

.pipeline-column-body {
  padding: 0.9375rem /* 15px */;
  min-height: 300px;
}
.pipeline-column-body .empty-state {
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 50px;
}
@media (max-width: 640px) {
  .pipeline-column-body { padding: 0.75rem /* 12px */; min-height: auto; }
  .pipeline-column-body .empty-state { margin-top: 10px; }
}

.pipeline-btn {
  flex: 1 1;
  padding: 0.5rem 0.5rem;
  border: none;
  border-radius: 0.375rem /* 6px */;
  cursor: pointer;
  font-size: var(--font-size-filter);
  font-weight: 600;
  transition: all 0.2s;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipeline-btn:hover { opacity: 0.8; }
@media (max-width: 640px) {
  .pipeline-btn { padding: 0.375rem 0.25rem; font-size: 0.625rem /* 10px */; }
}

/* ===== CLICKABLE TABLE ROW ===== */
.table-row-clickable {
  cursor: pointer;
  transition: background 0.15s;
}

.table-row-clickable:hover {
  background-color: #f9f9f8;
}

/* ===== INPUT FIELD STANDARDIZATION ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
select {
  font-size: var(--control-font-size);
}

/* ===== PAGE HEADER BAR (NEW STANDARD) ===== */
.page-header-bar {
  padding: var(--space-header) var(--space-card);
  border: 1px solid var(--color-border-light);
  border-radius: 0 0 0.75rem 0.75rem /* bottom corners only */;
  background: white;
  margin-bottom: var(--space-section);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* ===== PAGE HEADER INNER LAYOUT (detail pages) ===== */
.page-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem /* 12px */;
  min-width: 0;
  flex: 1 1;
}
.page-header-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ===== BREADCRUMB ===== */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem /* 6px */;
  font-size: 0.75rem /* 12px */;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}
.page-breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb-sep { color: var(--color-text-light); }

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-card) 0;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.pagination-info {
  font-size: 0.75rem /* 12px */;
  color: var(--color-text-muted);
}

.pagination-buttons {
  display: flex;
  gap: 0.375rem /* 6px */;
  align-items: center;
}

.pagination-btn {
  padding: 0.3125rem /* 5px */ 0.625rem /* 10px */;
  font-size: 0.75rem /* 12px */;
  border: 1px solid var(--color-border-light);
  background: white;
  border-radius: var(--radius-btn);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: all 0.15s;
  font-family: inherit;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--color-bg-hover, #f5f5f3);
}

.pagination-btn.active {
  background: var(--color-primary, #2563eb);
  color: white;
  border-color: var(--color-primary, #2563eb);
  font-weight: 600;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-ellipsis {
  padding: 0 0.25rem /* 4px */;
  color: var(--color-text-muted);
}

/* ===== COMPREHENSIVE FONT SIZE UTILITY CLASSES ===== */

/* 9px - Extra small */
/* 10px - Very small */
.text-sm-10 {
  font-size: 0.625rem /* 10px */;
}



/* 12px - Table headers, breadcrumb, pagination, status badges, secondary text */
.text-sm-12 {
  font-size: 0.75rem /* 12px */;
}

/* 14px - Base text, main content */
.text-sm-14 {
  font-size: 0.875rem /* 14px */;
}

/* 16px - Large text, main headings */
.text-sm-16 {
  font-size: 1rem /* 16px */;
}

/* 20px - Big headings, large icons */
.text-sm-20 {
  font-size: 1.25rem /* 20px */;
}

/* 24px - Page titles */
.text-sm-24 {
  font-size: 1.5rem /* 24px */;
}

/* 32px - Major headings */
.text-sm-32 {
  font-size: 2rem /* 32px */;
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.modal-box {
  background: white;
  border-radius: 0.75rem /* 12px */;
  padding: var(--space-card);
  width: 90%;
  box-shadow: 0 1.25rem /* 20px */ 3.75rem /* 60px */ rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

/* ===== 4-COLUMN STAT GRID ===== */
.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0 1rem;
  gap: 0 1rem;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .form-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ===== READ-ONLY DETAIL FIELDS (view pages, not edit forms) ===== */
.detail-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem /* 4px */;
  margin-bottom: 1.5rem;
}
.detail-value {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.875rem /* 14px */;
}

/* ===== STAT CELLS (commission / summary grids) ===== */
.stat-value {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.25rem /* 4px */;
  font-size: 1rem /* 16px */;
}
.stat-label {
  font-size: 0.75rem /* 12px */;
  color: var(--color-text-tertiary);
}

/* ===== TAB NAVIGATION ===== */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem /* 8px */;
  margin-bottom: var(--space-section);
}

/* ============================================================
   COMBOBOX — custom searchable select (NationalitySelect, agent dropdowns)
   ============================================================ */

.combobox-wrapper {
  position: relative;
}

/* Trigger box (looks like .form-input) */
.combobox-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem /* 8px */;
  height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem /* 4px */;
  background: #fff;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: var(--control-font-size);
  color: var(--color-text-primary);
  box-sizing: border-box;
  width: 100%;
}
.combobox-trigger:hover  { border-color: #aaa; }
.combobox-trigger.has-error { border-color: var(--color-error); }
.combobox-trigger.disabled  { background: #f5f5f5; cursor: not-allowed; opacity: 0.7; }

.combobox-trigger-text        { flex: 1 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-trigger-placeholder { color: var(--color-text-lighter); }
.combobox-trigger-icons       { display: flex; align-items: center; gap: 0.25rem /* 4px */; flex-shrink: 0; }

.combobox-clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1rem /* 16px */;
  color: var(--color-text-muted);
  line-height: 1;
  display: flex;
  align-items: center;
}
.combobox-clear-btn:hover { color: var(--color-text-primary); }

.combobox-arrow {
  font-size: 0.625rem /* 10px */;
  color: var(--color-text-muted);
}

/* Dropdown panel */
.combobox-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem /* 4px */;
  box-shadow: 0 0.25rem /* 4px */ 0.75rem /* 12px */ rgba(0,0,0,0.12);
  margin-top: 2px;
  overflow: hidden;
}
.combobox-dropdown--lg { max-height: 380px; display: flex; flex-direction: column; }

/* Search input inside dropdown */
.combobox-search-wrap {
  padding: 0.5rem /* 8px */;
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.combobox-search {
  width: 100%;
  height: var(--control-height);
  padding: var(--control-padding);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem /* 4px */;
  font-size: var(--control-font-size);
  box-sizing: border-box;
  outline: none;
}
.combobox-search:focus { border-color: var(--color-primary); }

/* Scrollable list */
.combobox-list { overflow-y: auto; max-height: 280px; flex: 1 1; }

/* Group headers */
.combobox-group-label {
  padding: 0.375rem /* 6px */ 0.75rem /* 12px */ 0.25rem /* 4px */;
  font-size: 0.75rem /* 12px */;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
}
.combobox-separator {
  margin-top: 0.25rem /* 4px */;
  border-top: 1px solid var(--color-border-light);
}

/* Individual option */
.combobox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem /* 8px */;
  padding: 0.5rem /* 8px */ 0.75rem /* 12px */;
  cursor: pointer;
  font-size: var(--control-font-size);
  color: var(--color-text-primary);
  transition: background 0.1s;
}
.combobox-option:hover   { background: #f0f7ff; }
.combobox-option.selected { background: #e8f3ff; font-weight: 600; }

.combobox-option-flag  { font-size: 1rem /* 16px */; line-height: 1; flex-shrink: 0; }
.combobox-option-name  { flex: 1 1; }
.combobox-option-sub   { color: var(--color-text-muted); font-size: 0.75rem /* 12px */; }
.combobox-option-check { color: var(--color-primary); font-weight: 600; margin-left: auto; }

/* Empty / no results */
.combobox-empty, .combobox-no-results {
  padding: 0.75rem /* 12px */;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.75rem /* 12px */;
}

/* ============================================================
   MOBILE CARD — dùng trong các list page khi isMobile
   ============================================================ */
.mobile-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: 0.5rem /* 8px */;
  padding: 0.75rem /* 12px */;
  display: flex;
  flex-direction: column;
  gap: 0.375rem /* 6px */;
}

/* ============================================================
   DETAIL PAGE GRID — 2-col grid for detail/edit pages
   ============================================================ */
.detail-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.75rem /* 12px */;
  gap: 0.75rem /* 12px */;
}

/* ============================================================
   EXCHANGE RATE BANNER
   ============================================================ */
.exchange-rate-banner {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 0.75rem /* 12px */;
  padding: 1.25rem /* 20px */;
  margin-bottom: var(--space-section);
}
.exchange-rate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem /* 16px */;
  flex-wrap: wrap;
  gap: 0.5rem /* 8px */;
  font-weight: 600;
}
.exchange-rate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem /* 16px */;
  gap: 1rem /* 16px */;
}
.rate-cell {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem /* 8px */;
  padding: 0.75rem /* 12px */ 1rem /* 16px */;
}
.exchange-rate-footer {
  opacity: 0.8;
  margin-top: 0.75rem /* 12px */;
}
.btn-rate-update {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  padding: 0.375rem /* 6px */ 0.75rem /* 12px */;
  border-radius: 0.375rem /* 6px */;
  font-size: 0.875rem /* 14px */;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-rate-update:hover { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 640px) {
  .exchange-rate-banner { padding: 1rem /* 16px */; }
  .exchange-rate-grid { grid-template-columns: 1fr; }
}

/* ── Invoice ──────────────────────────────────────────── */
.inv-page .card { margin-bottom: 0.375rem; }
.inv-title {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #111;
  text-align: left;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.inv-header-grid {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}
.inv-meta-grid {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  line-height: 1.5;
}
.inv-meta-grid-auto {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-column-gap: 1.5rem;
  column-gap: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.inv-meta-grid-auto .inv-meta-label {
  min-width: 0;
}
.inv-meta-row {
  display: flex;
  gap: var(--inv-row-gap, 0);
}
.inv-meta-label {
  min-width: var(--inv-label-min, 7.5rem);
  flex-shrink: 0;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.inv-meta-value {
  color: var(--color-text-primary);
  font-weight: 400;
}
.inv-meta-value.bold {
  font-weight: 600;
  color: #111;
}
.inv-manual-input {
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--color-border);
  outline: none;
  resize: none;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  vertical-align: baseline;
}
input.inv-manual-input {
  height: 1.5em;
  display: block;
}
.inv-manual-input::placeholder { color: var(--color-text-muted); opacity: 0.5; }
@media print {
  .inv-manual-input {
    border: none !important;
  }
  .inv-manual-input::placeholder {
    color: transparent !important;
  }
}
.inv-section-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}
.inv-footer-card {
  border-top: 1px solid #e5e7eb !important;
}
.inv-footer-note {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  font-style: italic;
}
.inv-footer-terms {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.inv-legal-text {
  margin-top: 2rem;
  font-size: 0.625rem;
  color: #555;
  line-height: 1.8;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}
.inv-legal-text p { margin-bottom: 0.5rem; color: #555; }
.inv-customer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem 2rem;
  gap: 1rem 2rem;
}
.inv-field {
  margin-bottom: 0.75rem;
}
.inv-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.inv-field-value {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 600;
}
.inv-company-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  margin-bottom: 0.2rem;
}
.inv-company-line {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.bank-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.3rem 1.5rem;
  gap: 0.3rem 1.5rem;
  font-size: 0.875rem;
}
.bank-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-top: 2px;
}
.bank-value {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
}
.bank-value.strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Invoice layout helpers ── */
.inv-header-card          { border-top: 4px solid #111; }
.inv-logo-wrap            { overflow: hidden; height: 6.25rem; }
.inv-logo-img             { width: 12.5rem; display: block; margin-top: -3.125rem; margin-left: -0.5rem; }
.inv-company-block        { padding-top: calc(1.5rem * 1.2 + 1rem); }
.inv-meta-grid-company    { --inv-label-min: 5.5rem; --inv-row-gap: 1.5rem; }
.inv-header-right         { padding-top: 6.25rem; }
.inv-header-right .inv-meta-value { font-weight: 600; }
.page-header-right        { display: flex; align-items: center; gap: 0.75rem; }
.inv-header-subtitle      { color: var(--color-text-muted); margin-top: 2px; }
.td-th-no,
table thead tr th.td-th:first-child { width: 2.75rem; text-align: center !important; }
.td-th-qty                { width: 3.75rem; text-align: right !important; }
.inv-stage-date           { margin-right: 8px; }
.td-th-price              { text-align: right; width: 8.125rem; }
.tfoot-amount-grand       { font-size: 0.875rem; }
.tfoot-stage-active       { font-weight: 400; color: var(--color-text-primary); }
.tfoot-stage-other        { font-weight: 400; color: var(--color-text-secondary); }
.tfoot-amount-stage-active  { color: var(--color-text-primary); font-weight: 600; }
.tfoot-amount-stage-other   { color: var(--color-text-muted); font-weight: 600; }
.tfoot-label-sub          { background: none; font-weight: 600; color: var(--color-text-secondary); }
.inv-sig-grid   { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem; gap: 2rem; margin-top: 1rem; }
.inv-sig-col    { text-align: center; }
.inv-sig-header { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 0.25rem; }
.inv-sig-space  { height: 5rem; }
.inv-sig-line   { border-top: 1px solid #333; padding-top: 0.5rem; width: 70%; margin: 0 auto; font-size: 0.875rem; }
.inv-sig-name   { font-weight: 600; }
.inv-sig-role   { color: #666; font-size: 0.875rem; }
.table-scroll-wrap { overflow-x: auto; width: 100%; }
.inv-notes-body    { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.8; }
.modal-box-sm      { max-width: 25rem; }

/* ── Print styles ─────────────────────────────────────── */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 15mm 20mm; }

  /* Lock base font to match screen so rem values don't shift */
  html { font-size: 16px; }
  body { color: #000; }

  .no-print { display: none !important; }
  .print-only { display: block !important; }
  .dashboard-sidebar { display: none !important; }
  .page-header-bar { display: none !important; }
  .main-content { overflow: visible !important; height: auto !important; }
  .page-container { padding: 0 !important; max-width: 100% !important; }
  .detail-page { max-width: 100% !important; padding: 0 !important; }
  .card {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    page-break-inside: avoid;
    margin-bottom: 0 !important;
  }

  /* Invoice header: stable columns for A4 */
  .inv-header-grid { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
  .inv-meta-label { white-space: nowrap; }
  .inv-meta-value { white-space: nowrap; }

  /* Force invoice amounts to black — no blue/green in print */
  .amount-highlight, .tfoot-amount { color: #111 !important; }

  /* Footer note and terms — explicit dark colors for PDF */
  .inv-footer-note { color: #111 !important; }
  .inv-footer-terms { color: #555 !important; }

  /* Page break: keep bank info + signature together */
  .inv-footer-card { page-break-after: avoid; }

  /* Force all print-only text to dark — override any CSS variable color */
  .print-only, .print-only * { color: #333 !important; }
  .inv-legal-text, .inv-legal-text p { color: #333 !important; }
  .inv-footer-note { color: #111 !important; font-style: italic; }
  .inv-footer-terms { color: #444 !important; }
}