@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');
/* ============================================
   Customs Clearance Broker Invoice System
   Dark Theme — Trading Terminal Style
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  --bg-primary: #f4f6fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef1f7;
  --bg-hover: #e8ecf5;
  --border-color: #e1e6f0;
  --border-light: #eef1f7;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-light: #0f172a;
  --gold: #b8860b;
  --gold-dim: rgba(184, 134, 11, 0.12);
  --green: #059669;
  --green-dim: rgba(5, 150, 105, 0.12);
  --red: #dc2626;
  --red-dim: rgba(220, 38, 38, 0.12);
  --blue: #2563eb;
  --blue-dim: rgba(37, 99, 235, 0.12);
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
  --transition: all 0.2s ease;
  --sidebar-width: 240px;
  --header-height: 60px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: #a16207;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ---------- Layout ---------- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.sidebar-logo {
  width: 48px;
  height: 48px;
  background: var(--gold);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 24px;
  font-weight: 700;
  color: var(--bg-primary);
}

.sidebar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.sidebar-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  direction: rtl;
}

.sidebar-nav {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 20px;
}

.nav-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 8px 12px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--gold-dim);
  color: var(--gold);
  font-weight: 600;
}

.nav-item .nav-icon {
  width: 20px;
  text-align: center;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-item .nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.active .nav-icon svg {
  stroke: var(--gold);
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Main Content ---------- */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
}

/* ---------- Header ---------- */
.header {
  height: var(--header-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.header-title span {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 14px;
  margin-left: 8px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- Page Content ---------- */
.page-content {
  padding: 24px;
}

/* ---------- Stats Cards ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: var(--transition);
}

.stat-card:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-card-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.stat-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-card-icon.gold {
  background: var(--gold-dim);
  color: var(--gold);
}

.stat-card-icon.green {
  background: var(--green-dim);
  color: var(--green);
}

.stat-card-icon.red {
  background: var(--red-dim);
  color: var(--red);
}

.stat-card-icon.blue {
  background: var(--blue-dim);
  color: var(--blue);
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-card-value .currency {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 400;
}

.stat-card-change {
  font-size: 12px;
  margin-top: 4px;
}

.stat-card-change.positive {
  color: var(--green);
}

.stat-card-change.negative {
  color: var(--red);
}

/* ---------- Card / Panel ---------- */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.card-body {
  padding: 20px;
}

.card-body.no-padding {
  padding: 0;
}

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Search Box ---------- */
.search-box {
  position: relative;
}

.search-box input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 8px 12px 8px 36px;
  color: var(--text-primary);
  font-size: 13px;
  width: 280px;
  transition: var(--transition);
}

.search-box input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.search-box .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.search-box .search-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Filter Buttons ---------- */
.filter-group {
  display: flex;
  gap: 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  padding: 3px;
}

.filter-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.filter-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.filter-btn:hover {
  color: var(--text-primary);
}

.filter-btn.active {
  background: var(--gold);
  color: var(--bg-primary);
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  white-space: nowrap;
  min-height: 36px;
  text-decoration: none;
  line-height: 1.4;
}

.btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.btn-primary {
  background: var(--gold);
  color: #1f2937;
  border-color: var(--gold);
  font-weight: 600;
}

.btn-primary:hover {
  background: #d4a106;
  border-color: #d4a106;
}

.btn-success {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.btn-success:hover {
  background: #2bc4b6;
  border-color: #2bc4b6;
}

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.btn-danger:hover {
  background: #f46b68;
  border-color: #f46b68;
}

.btn-outline {
  background: transparent;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 15px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}

.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
}

/* ---------- Table ---------- */
.table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: var(--bg-tertiary);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-primary);
  vertical-align: middle;
}

tbody tr {
  transition: var(--transition);
}

tbody tr:hover {
  background: var(--bg-hover);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Status Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-draft {
  background: var(--blue-dim);
  color: var(--blue);
}

.badge-sent {
  background: var(--gold-dim);
  color: var(--gold);
}

.badge-paid {
  background: var(--green-dim);
  color: var(--green);
}

.badge-pending {
  background: rgba(251, 191, 36, 0.15);
  color: #f59e0b;
}

.badge-cash {
  background: var(--green-dim);
  color: var(--green);
}

.badge-credit {
  background: var(--gold-dim);
  color: var(--gold);
}

.badge-partial {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Forms ---------- */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-label .label-ar {
  display: block;
  direction: rtl;
  text-align: right;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

.form-control {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  transition: var(--transition);
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

.form-control::placeholder {
  color: var(--text-muted);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23787b86' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.form-row-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}

.form-section {
  margin-bottom: 24px;
}

.form-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Invoice Form Specific ---------- */
.invoice-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.invoice-form-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.invoice-preview-panel {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

/* ---------- Service Items Table ---------- */
.items-table {
  width: 100%;
  border-collapse: collapse;
}

.items-table thead th {
  background: var(--bg-primary);
  font-size: 10px;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border-color);
}

.items-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
}

.items-table .item-number {
  width: 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.items-table .item-name {
  min-width: 200px;
}

.items-table .item-amount {
  width: 140px;
}

.items-table .item-amount input {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
  text-align: right;
}

.items-table .item-amount input:focus {
  border-color: var(--gold);
  outline: none;
}

.items-table .item-remarks {
  width: 160px;
}

.items-table .item-remarks input {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
}

.items-table .item-remarks input:focus {
  border-color: var(--gold);
  outline: none;
}

.items-table .item-total {
  text-align: right;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

/* ---------- Totals ---------- */
.totals-section {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.totals-table {
  width: 300px;
}

.totals-table tr td {
  padding: 6px 0;
  font-size: 13px;
  border: none;
}

.totals-table tr td:first-child {
  color: var(--text-secondary);
}

.totals-table tr td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
}

.totals-table .total-row td {
  border-top: 2px solid var(--border-color);
  padding-top: 10px;
  font-size: 16px;
}

.totals-table .total-row td:last-child {
  color: var(--gold);
  font-weight: 700;
}

/* ---------- Preview Panel (Invoice Preview) ---------- */
.preview-container {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  color: #333;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  min-height: 600px;
  position: relative;
  border: 2px solid #0b0e14;
}

.preview-container .preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 3px solid #0b0e14;
}

.preview-container .preview-logo {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border: 2px solid #0b0e14;
  border-radius: 50%;
  padding: 6px;
  background: #fff;
}
.preview-container .preview-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
  color: #0b0e14;
}

.preview-container .preview-company {
  text-align: right;
}

.preview-container .preview-company-name {
  font-size: 18px;
  font-weight: 700;
  color: #0b0e14;
}

.preview-container .preview-company-name-ar {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  direction: rtl;
}

.preview-container .preview-company-details {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

.preview-container .preview-title {
  text-align: center;
  margin: 20px 0;
}

.preview-container .preview-title h2 {
  font-size: 20px;
  color: #0b0e14;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.preview-container .preview-title .ar-title {
  font-size: 18px;
  direction: rtl;
  color: #333;
}

.preview-container .preview-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px;
  background: #f8f8f8;
  border-radius: 4px;
}

.preview-container .preview-meta-item {
  font-size: 11px;
}

.preview-container .preview-meta-label {
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
}

.preview-container .preview-meta-value {
  color: #333;
  font-weight: 500;
}

.preview-container .preview-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.preview-container .preview-items-table th {
  background: #0b0e14;
  color: #fff;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: left;
}

.preview-container .preview-items-table th:last-child {
  text-align: right;
}

.preview-container .preview-items-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 11px;
  color: #333;
}

.preview-container .preview-items-table td:last-child {
  text-align: right;
  font-weight: 600;
}

.preview-container .preview-items-table tr:nth-child(even) {
  background: #f9f9f9;
}

.preview-container .preview-totals {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.preview-container .preview-totals-table {
  width: 250px;
}

.preview-container .preview-totals-table td {
  padding: 4px 0;
  font-size: 12px;
  border: none;
}

.preview-container .preview-totals-table td:first-child {
  color: #666;
}

.preview-container .preview-totals-table td:last-child {
  text-align: right;
  font-weight: 600;
}

.preview-container .preview-totals-table .grand-total td {
  border-top: 2px solid #0b0e14;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0b0e14;
}

.preview-container .preview-qr {
  width: 60px;
  height: 60px;
  background: #fff;
  padding: 3px;
  border: 2px solid #0b0e14;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.preview-container .preview-qr img { width: 100% !important; height: 100% !important; }

.preview-container .preview-invoice-number {
  color: #cc0000;
  font-size: 16px;
  font-weight: 700;
}

.preview-container .preview-airplane {
  font-size: 28px;
  margin-bottom: 4px;
}

.preview-container .preview-services {
  margin-bottom: 16px;
  padding: 10px 12px;
  background: #f0f7ff;
  border: 1px solid #d0e3f5;
  border-radius: 4px;
}

.preview-container .preview-services-title {
  font-size: 11px;
  font-weight: 700;
  color: #003366;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.preview-container .preview-services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.preview-container .preview-service-item {
  font-size: 9px;
  color: #444;
  background: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
}

.preview-container .preview-words {
  margin: 12px 0;
  padding: 8px 12px;
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.preview-container .preview-words-label {
  font-size: 10px;
  font-weight: 700;
  color: #003366;
  margin-bottom: 4px;
}

.preview-container .preview-words-en {
  font-size: 10px;
  color: #333;
  margin-bottom: 2px;
  font-style: italic;
}

.preview-container .preview-words-ar {
  font-size: 11px;
  color: #333;
  direction: rtl;
}

.preview-container .preview-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  font-size: 10px;
  color: #888;
  text-align: center;
}

.preview-container .preview-footer-office {
  margin-bottom: 4px;
}

.preview-container .preview-footer-vat {
  font-weight: 600;
  color: #003366;
  margin-bottom: 2px;
}

.preview-container .preview-footer-cheque {
  font-style: italic;
  color: #666;
  font-size: 9px;
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
}

.pagination-info {
  font-size: 12px;
  color: var(--text-secondary);
}

.pagination-controls {
  display: flex;
  gap: 4px;
}

.pagination-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}

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

.pagination-btn.active {
  background: var(--gold);
  color: var(--bg-primary);
  border-color: var(--gold);
  font-weight: 600;
}

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

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 18px;
  transition: var(--transition);
  flex-shrink: 0;
}

.modal-close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-close:hover {
  background: var(--red-dim);
  color: var(--red);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
}

/* ---------- Empty State ---------- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-icon svg {
  width: 48px;
  height: 48px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.empty-state-desc {
  font-size: 13px;
  margin-bottom: 20px;
}

/* ---------- Loading ---------- */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 14, 20, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* ---------- Toast Notifications ---------- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  max-width: 420px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  animation: slideIn 0.3s ease;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.toast.success {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}

.toast.error {
  border-left: 4px solid #ef4444;
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.toast.warning {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ---------- Utility ---------- */
.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.awb-sub { font-size: 11px; color: #64748b; margin-top: 3px; letter-spacing: 0.3px; }
.awb-raw { font-weight: 600; font-size: 12px; color: var(--text-light); font-variant-numeric: tabular-nums; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.mb-2 { margin-bottom: 8px; }
.gap-12 { gap: 12px; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden { display: none !important; }

/* ---------- Action Dots Menu ---------- */
.action-menu {
  position: relative;
  display: inline-block;
  z-index: 999;
}

.action-menu.open {
  z-index: 9999;
}

.action-menu-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition);
}

.action-menu-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.action-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 4px;
  min-width: 160px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  display: none;
}

.action-dropdown.show {
  display: block;
}

.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  min-height: 36px;
}

.action-dropdown-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.action-dropdown-item:hover {
  background: var(--bg-hover);
}

.action-dropdown-item.danger {
  color: var(--red);
}

.action-dropdown-item.danger:hover {
  background: var(--red-dim);
}

/* ---------- Settings Page ---------- */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}

.settings-nav {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 8px;
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.settings-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.settings-nav-item.active {
  background: var(--gold-dim);
  color: var(--gold);
  font-weight: 600;
}

.settings-section {
  display: none;
}

.settings-section.active {
  display: block;
}

/* ---------- Hamburger Menu Button ---------- */
.hamburger-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.hamburger-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.hamburger-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

/* SVG icon helper for inline use */
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}

.svg-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Settings nav icon support */
.settings-nav-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Client info icons (phone/email/etc) */
.client-info-icon,
.inv-meta-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 4px;
}

.client-info-icon svg,
.inv-meta-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Responsive: Comprehensive Mobile-First ---------- */

/* Tablet / Small Desktop (≤1200px) */
@media (max-width: 1200px) {
  .invoice-layout {
    grid-template-columns: 1fr;
  }
  .invoice-preview-panel {
    position: static;
    max-height: 400px;
    overflow-y: auto;
  }
  .header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    transition: transform 0.3s ease;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
    width: 100%;
  }
  .hamburger-btn {
    display: flex;
  }
  .settings-layout {
    flex-direction: column;
  }
  .settings-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border-color);
    padding: 0 0 8px;
    margin-bottom: 16px;
  }
  .settings-nav-item {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .header {
    padding: 0 16px;
  }
  .header-right {
    gap: 6px;
  }
  .header-right .btn {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 36px;
  }
  .stat-card-value {
    font-size: 22px;
  }
  .form-row, .form-row-3, .form-row-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .card-body {
    padding: 16px;
  }
}

/* Mobile Large (≤768px) */
@media (max-width: 768px) {
  html { font-size: 14px; }
  body { overflow-x: hidden; }

  /* Layout */
  .page-content { padding: 12px; }
  .header-title { font-size: 15px; }
  .header-title span { display: none; }
  
  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px; }
  .stat-card-value { font-size: 20px; }
  
  /* Toolbar */
  .toolbar { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 10px; 
  }
  .toolbar-left, .toolbar-right { 
    width: 100%; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    gap: 6px; 
  }
  .search-box input { 
    width: 100%; 
    min-height: 44px; 
    font-size: 16px; 
  }
  .filter-group { 
    width: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
  }
  .filter-btn { 
    flex-shrink: 0; 
    min-height: 40px; 
    padding: 8px 14px; 
  }

  /* Header */
  .header { padding: 0 12px; height: 52px; }
  .header-right .btn { 
    min-width: 40px; 
    min-height: 40px; 
    padding: 6px 8px; 
    justify-content: center; 
  }
  .header-right .btn .btn-label { display: none; }
  .header-right .btn svg { width: 20px; height: 20px; }

  /* Card */
  .card { border-radius: 12px; }
  .card-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .card-title { font-size: 14px; }
  .card-body { padding: 14px; }
  .card-body.no-padding { padding: 0; }

  /* Form */
  .form-row, .form-row-3, .form-row-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .form-group { margin-bottom: 12px; }
  .form-label { font-size: 12px; margin-bottom: 4px; }
  .form-control { 
    padding: 12px 14px; 
    font-size: 16px; 
    min-height: 46px; 
    border-radius: 8px; 
  }
  select.form-control { min-height: 46px; font-size: 16px; }
  textarea.form-control { min-height: 90px; }
  .btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .btn-lg { min-height: 48px; padding: 12px 20px; font-size: 15px; }

  /* Invoice Layout */
  .invoice-layout { grid-template-columns: 1fr; gap: 16px; }
  .invoice-preview-panel { 
    position: static; 
    max-height: 350px; 
    overflow-y: auto; 
  }

  /* Items Table → Card */
  .items-table thead { display: none; }
  .items-table, .items-table tbody, .items-table tr, .items-table td {
    display: block; width: 100%;
  }
  .items-table tr {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 12px;
  }
  .items-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
    gap: 8px;
  }
  .items-table td:last-child { border-bottom: none; }
  .items-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    min-width: 70px;
  }
  .items-table .item-number { 
    justify-content: flex-start; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 8px; 
    margin-bottom: 4px; 
  }
  .items-table .item-number::before { content: '#'; }
  .items-table .item-amount input { 
    width: 110px; 
    padding: 6px 8px; 
    font-size: 15px; 
    min-height: 36px; 
  }
  .items-table .item-remarks input { 
    width: 100%; 
    min-height: 36px; 
    font-size: 13px; 
    padding: 6px 8px; 
  }
  .items-table .item-name input { 
    font-size: 13px; 
    padding: 6px 8px; 
    min-height: 36px; 
  }
  .items-table .item-total { justify-content: flex-end; }
  .items-table td[style*="text-align:center"] { justify-content: center; padding-top: 2px; }

  /* Charge file list */
  .charge-file-list {
    max-width: 140px;
  }
  .charge-file-item {
    font-size: 10px !important;
    border-radius: 4px !important;
  }
  .charge-file-item a:hover {
    color: var(--gold) !important;
  }

  /* Totals */
  .totals-section { padding: 14px; }
  .discount-input { width: 100% !important; margin: 8px 0 0 !important; }

  /* Action buttons full width */
  .invoice-form-panel > div:last-child { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
  }
  .invoice-form-panel > div:last-child .btn,
  .invoice-form-panel > div:last-child a.btn { 
    width: 100%; 
    justify-content: center; 
    min-height: 44px; 
    padding: 12px 16px; 
  }

  /* Modal full screen */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { 
    width: 100%; 
    max-width: 100%; 
    max-height: 90vh; 
    border-radius: 16px 16px 0 0; 
    margin: 0; 
  }
  .modal-header { padding: 16px; position: sticky; top: 0; z-index: 10; }
  .modal-body { padding: 16px; overflow-y: auto; max-height: calc(90vh - 120px); }
  .modal-footer { padding: 12px 16px; position: sticky; bottom: 0; }

  /* Upload choice */
  #upload-choice-modal .modal-body .btn { 
    min-height: 52px; 
    font-size: 16px; 
    border-radius: 12px; 
    margin-bottom: 8px; 
  }
  #upload-choice-modal .modal { border-radius: 16px !important; }

  /* Settings */
  .settings-nav { 
    display: flex; 
    overflow-x: auto; 
    gap: 6px; 
    padding: 0 0 10px; 
    -webkit-overflow-scrolling: touch; 
    border-bottom: 1px solid var(--border-color); 
    margin-bottom: 16px; 
  }
  .settings-nav-item { 
    white-space: nowrap; 
    padding: 8px 14px; 
    font-size: 12px; 
    flex-shrink: 0; 
    min-height: 40px; 
  }

  /* Clients table → cards */
  .table-mobile-card thead { display: none; }
  .table-mobile-card, .table-mobile-card tbody, .table-mobile-card tr, .table-mobile-card td {
    display: block; width: 100%;
  }
  .table-mobile-card tr {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 12px;
  }
  .table-mobile-card td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
  }
  .table-mobile-card td:last-child { border-bottom: none; }
  .table-mobile-card td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
  }
}

/* Mobile Small (≤480px) */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; gap: 8px; }
  .page-content { padding: 10px; }
  .header { height: 48px; padding: 0 10px; }
  .header-title { font-size: 14px; }
  .header-right .btn { 
    min-width: 36px; 
    min-height: 36px; 
    padding: 4px 6px; 
  }
  .card { border-radius: 10px; }
  .card-header { padding: 10px 12px; }
  .card-body { padding: 12px; }
  .form-control { 
    padding: 10px 12px; 
    font-size: 15px; 
    min-height: 42px; 
  }
  .btn { min-height: 38px; padding: 6px 12px; font-size: 12px; }
  .items-table tr { padding: 10px; }
  .items-table td { font-size: 12px; }
  .items-table td::before { min-width: 60px; font-size: 9px; }
  .modal { max-height: 95vh; border-radius: 12px 12px 0 0; }
  .modal-body { max-height: calc(95vh - 100px); }
  .table-mobile-card tr { padding: 10px; }
  .invoice-preview-panel { max-height: 250px; }
}
/* ---------- Print Styles ---------- */
@media print {
  * {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  
  body {
    font-size: 12px;
    line-height: 1.4;
    background: #fff !important;
  }
  
  /* Hide ALL web UI elements */
  .sidebar, .header, .toolbar, .pagination,
  .btn, .no-print, .action-menu, .toast-container,
  .app-layout > aside, .main-content > header,
  .main-content > .page-content > .card:not(.preview-container),
  .invoice-form, .form-group, .form-row,
  .items-section, .client-modal,
  #invoice-form, .settings-nav, .settings-section,
  .stat-card, .filter-group, .search-box,
  nav, .nav-item, .nav-section,
  .sidebar-nav, .sidebar-header, .sidebar-footer,
  .page-header, .page-title {
    display: none !important;
    visibility: hidden !important;
  }
  
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  .app-layout {
    display: block !important;
  }
  
  /* Show ONLY the preview */
  .preview-container {
    display: block !important;
    visibility: visible !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-height: auto;
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  .preview-container .preview-items-table th {
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .card {
    border: 1px solid #ccc !important;
  }
  
  table {
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc !important;
    padding: 6px 8px !important;
  }
  
  @page {
    size: A4;
    margin: 12mm;
  }

  .preview-stamp, #print-stamp img, #company-stamp img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Stamp / Company Seal ---------- */
.preview-stamp {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  max-width: 100%;
  max-height: 100%;
}

/* Client Mode Toggle Buttons */
.client-mode-btn {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.2s ease;
}

.client-mode-btn:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

.client-mode-btn.active {
  background: var(--gold-dim) !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  font-weight: 600;
}

/* ---------- Toggle Switch ---------- */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 26px;
  transition: var(--transition);
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-secondary);
  border-radius: 50%;
  transition: var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--gold-dim);
  border-color: var(--gold);
}

.toggle-switch input:checked + .toggle-slider::before {
  left: 23px;
  background: var(--gold);
}

.toggle-switch input:focus-visible + .toggle-slider {
  box-shadow: 0 0 0 3px var(--gold-dim);
}

/* ══ Dashboard Reports — Paid/Pending Amounts + Chart ══ */

/* Stat card variants */
.stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.stat-card-green { border-top: 3px solid #10b981; }
.stat-card-red { border-top: 3px solid #ef5350; }
.stat-card-collection { border-top: 3px solid #f59e0b; }
.text-green { color: #10b981 !important; }
.text-red { color: #ef5350 !important; }
.stat-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Collection rate bar */
.collection-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}
.collection-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  background: #10b981;
}

/* ══ System-wide animations ══ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,185,11,0.4); }
  50% { box-shadow: 0 0 12px 3px rgba(240,185,11,0.25); }
}
.stat-card { animation: fadeInUp 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.stat-card:nth-child(1) { animation-delay: 0.03s; }
.stat-card:nth-child(2) { animation-delay: 0.09s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.21s; }
.stat-card:nth-child(5) { animation-delay: 0.27s; }
.stat-card:nth-child(6) { animation-delay: 0.33s; }
#invoice-table-body tr { animation: fadeIn 0.35s ease both; }
#invoice-table-body tr:nth-child(1) { animation-delay: 0.02s; }
#invoice-table-body tr:nth-child(2) { animation-delay: 0.05s; }
#invoice-table-body tr:nth-child(3) { animation-delay: 0.08s; }
#invoice-table-body tr:nth-child(4) { animation-delay: 0.11s; }
#invoice-table-body tr:nth-child(5) { animation-delay: 0.14s; }
#invoice-table-body tr:nth-child(6) { animation-delay: 0.17s; }
#invoice-table-body tr:nth-child(7) { animation-delay: 0.20s; }
#invoice-table-body tr:nth-child(8) { animation-delay: 0.23s; }
#invoice-table-body tr:nth-child(9) { animation-delay: 0.26s; }
#invoice-table-body tr:nth-child(10) { animation-delay: 0.29s; }
.stat-card:hover { animation: pulseGlow 1.2s ease-in-out infinite; }
.btn { transition: transform 0.15s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }
.toast { animation: fadeInUp 0.3s cubic-bezier(0.22,1,0.36,1) both; }

/* ══ Blink animations for paid/due amounts ══ */
@keyframes blinkGreen {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes blinkRed {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes glowGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  50% { box-shadow: 0 0 10px 2px rgba(16,185,129,0.5); }
}
@keyframes glowRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,83,80,0); }
  50% { box-shadow: 0 0 10px 2px rgba(239,83,80,0.5); }
}
.blink-paid { animation: blinkGreen 1.6s ease-in-out infinite; }
.blink-due { animation: blinkRed 1.2s ease-in-out infinite; }
.stat-paid-glow { animation: glowGreen 2s ease-in-out infinite; border-radius: 8px; }
.stat-due-glow { animation: glowRed 2s ease-in-out infinite; border-radius: 8px; }

/* ══ Agent badges ══ */
.agent-badge {
  display: inline-block;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
.agent-badge.is-agent {
  background: rgba(240, 185, 11, 0.15);
  border-color: rgba(240, 185, 11, 0.5);
  color: var(--gold);
}

/* =====================================================================
   PREMIUM LIGHT REDESIGN — cohesive polish layer (appended on top)
   Staging-only. Gold-brand premium look for the dashboard.
   ===================================================================== */

/* ---- App background: soft, airy, with a faint warm glow ---- */
body {
  background:
    radial-gradient(1100px 400px at 85% -10%, rgba(247, 201, 72, 0.10), transparent 60%),
    radial-gradient(900px 380px at -10% -20%, rgba(37, 99, 235, 0.07), transparent 55%),
    linear-gradient(165deg, #f4f6fb 0%, #eceff7 100%);
  background-attachment: fixed;
}

.page-content { padding: 26px 28px 40px; }

/* ---- Header: frosted glass, soft shadow, gradient brand title ---- */
.header {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
}
.header-title {
  background: linear-gradient(135deg, #b8860b 0%, #8a6506 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.2px;
}
.header-title span {
  -webkit-text-fill-color: var(--text-secondary);
}

/* ---- Sidebar: crisp white with depth + premium active pill ---- */
.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border-color);
  box-shadow: 10px 0 34px -22px rgba(15, 23, 42, 0.25);
}
.sidebar-logo {
  background: linear-gradient(135deg, #f7c948 0%, #d4a106 100%);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(184, 134, 11, 0.55);
  font-weight: 800;
}
.nav-item { border-radius: 10px; }
.nav-item.active {
  background: linear-gradient(135deg, rgba(247, 201, 72, 0.28), rgba(212, 161, 6, 0.16));
  color: #8a6506;
  border-left: 3px solid #d4a106;
  font-weight: 700;
}

/* ---- Stats: premium fintech cards with gradient icon chips ---- */
.stats-grid { gap: 18px; }
.stat-card {
  position: relative;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -20px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  padding: 20px;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05), 0 26px 44px -24px rgba(184, 134, 11, 0.4);
}
.stat-card:hover .stat-card-icon { transform: scale(1.06); }
.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease;
}
.stat-card-icon svg { width: 22px; height: 22px; }
.stat-card-icon.gold  { background: linear-gradient(135deg, #fdeab9, #f0c24b); color: #8a6506; }
.stat-card-icon.green { background: linear-gradient(135deg, #d3f3e6, #79d7b9); color: #056249; }
.stat-card-icon.red   { background: linear-gradient(135deg, #fde3e0, #f5a3a0); color: #a3160f; }
.stat-card-icon.blue  { background: linear-gradient(135deg, #dde7ff, #9db9f5); color: #1d4fb8; }
.stat-card-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #0f172a 0%, #33415a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card-value .currency {
  background: none;
  -webkit-text-fill-color: var(--text-secondary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
}
.stat-card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #64748b;
}
.stat-card-sub { color: #94a3b8; }

/* ---- Panels ---- */
.card {
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px -24px rgba(15, 23, 42, 0.3);
}
.card-header { border-bottom: 1px solid var(--border-color); }
.card-title { font-weight: 800; letter-spacing: -0.2px; }

/* ---- Toolbar / search / filters ---- */
.search-box input {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.search-box input:focus {
  border-color: #d4a106;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.16);
  background: #fff;
}
.filter-group {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.filter-btn { border-radius: 8px; }
.filter-btn.active {
  background: linear-gradient(135deg, #f7c948, #d4a106);
  color: #3f2d00;
  box-shadow: 0 4px 10px -4px rgba(184, 134, 11, 0.5);
}

/* ---- Buttons ---- */
.btn { border-radius: 10px; }
.btn-primary {
  background: linear-gradient(135deg, #f7c948 0%, #d4a106 100%);
  color: #3f2d00;
  border: none;
  box-shadow: 0 6px 16px -6px rgba(184, 134, 11, 0.55);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #ffd35c, #dca60a);
  color: #3f2d00;
}

/* ---- Table: clean premium data surface ---- */
.table-wrapper {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px -26px rgba(15, 23, 42, 0.3);
}
.table-wrapper thead th {
  background: #f8fafc;
  color: #64748b;
}
.table-wrapper tbody tr { transition: background 0.15s ease; }
.table-wrapper tbody tr:hover { background: #f7f9fc; }
tbody td { border-bottom: 1px solid #eef1f6; }

/* ---- Badges: refine pill ---- */
.badge { border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }

/* ---- Pagination / misc polish ---- */
.pagination-btn { border-radius: 8px; }
/* overflow fix: let wide table scroll inside, not the page */
.main-content { min-width: 0; }

/* =====================================================================
   VIBRANT & EXPRESSIVE REDESIGN (Notion/Airtable vibe)
   Bold colors, playful accents, bigger status colors, smooth motion.
   ===================================================================== */

/* missing legacy theme vars the inline sort-select relies on */
:root { --card:#ffffff; --fg:#0f172a; --border:#e1e6f0; --muted:#64748b; }

/* playful fresh page */
body {
  background:
    radial-gradient(900px 380px at 100% -5%, rgba(147, 51, 234, 0.10), transparent 55%),
    radial-gradient(800px 360px at -5% -10%, rgba(234, 179, 8, 0.10), transparent 50%),
    radial-gradient(1000px 420px at 60% 110%, rgba(6, 182, 212, 0.07), transparent 55%),
    linear-gradient(165deg, #f7f8fc 0%, #f0f2f9 100%);
  background-attachment: fixed;
}

/* ---- Hero panel ---- */
.hero-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 30px;
  border-radius: 20px;
  margin-bottom: 22px;
  background:
    radial-gradient(420px 200px at 85% 12%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(120deg, #312e81 0%, #6d28d9 52%, #a21caf 100%);
  color: #fff;
  box-shadow: 0 18px 44px -24px rgba(109, 40, 217, 0.65);
}
.hero-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #facc15, #f59e0b, #fbbf24);
}
.hero-glow {
  position: absolute;
  right: -60px; top: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.28);
  filter: blur(60px);
  pointer-events: none;
}
.hero-left { position: relative; z-index: 1; min-width: 220px; }
.hero-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.14);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.hero-title {
  font-size: 26px; font-weight: 800; margin: 0 0 4px;
  letter-spacing: -0.4px;
}
.hero-title span { font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.hero-sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
}
.hero-btn:active { transform: scale(0.97); }
.hero-btn-primary { background: #fff; color: #4c1d95; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.35); }
.hero-btn-primary:hover { transform: translateY(-2px); }
.hero-btn-ghost { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.35); }

/* ---- Stat cards (vibrant, icon-left) ---- */
.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 14px 30px -24px rgba(15,23,42,0.3);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px -6px rgba(15,23,42,0.12), 0 26px 48px -26px rgba(124,58,237,0.45);
}
.stat-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.s-violet .stat-accent { background: linear-gradient(90deg,#c4b5fd,#7c3aed); }
.s-blue   .stat-accent { background: linear-gradient(90deg,#93c5fd,#2563eb); }
.s-green  .stat-accent { background: linear-gradient(90deg,#6ee7b7,#059669); }
.s-red    .stat-accent { background: linear-gradient(90deg,#fca5a5,#dc2626); }
.s-cyan   .stat-accent { background: linear-gradient(90deg,#67e8f9,#0891b2); }
.s-gold   .stat-accent { background: linear-gradient(90deg,#fcd34d,#b45309); }

.stat-card-icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  flex-shrink: 0;
  box-shadow: 0 10px 20px -8px rgba(15,23,42,0.45);
  transition: transform 0.2s ease;
}
.stat-card-icon svg { width: 26px; height: 26px; stroke-width: 2.1; }
.stat-card:hover .stat-card-icon { transform: scale(1.08) rotate(-3deg); }
.stat-card-icon.violet { background: linear-gradient(135deg,#a78bfa,#7c3aed); color: #fff; }
.stat-card-icon.blue   { background: linear-gradient(135deg,#60a5fa,#2563eb); color: #fff; }
.stat-card-icon.green  { background: linear-gradient(135deg,#34d399,#059669); color: #fff; }
.stat-card-icon.red    { background: linear-gradient(135deg,#f87171,#dc2626); color: #fff; }
.stat-card-icon.cyan   { background: linear-gradient(135deg,#22d3ee,#0891b2); color: #fff; }
.stat-card-icon.gold   { background: linear-gradient(135deg,#fbbf24,#b45309); color: #fff; }

.stat-info { flex: 1; min-width: 0; }
.stat-card-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #64748b;
  display: flex; flex-direction: column; gap: 1px;
}
.stat-card-label em { font-style: normal; text-transform: none; font-size: 10px; color: #94a3b8; font-weight: 600; }
.stat-card-value {
  font-size: 27px; font-weight: 800; letter-spacing: -0.5px;
  color: #0f172a; line-height: 1.15; margin-top: 4px;
  background: none; -webkit-text-fill-color: currentColor;
}
.stat-card-value .currency { font-size: 14px; -webkit-text-fill-color: currentColor; color: #64748b; font-weight: 600; }
.stat-card-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }

.collection-bar { margin-top: 8px; background: #eef2f7; }

/* ---- Toolbar / sort / search ---- */
#sort-select {
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 12px; font-size: 13px; cursor: pointer;
}
.search-box input { border-radius: 12px; }
.filter-btn.active {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(124,58,237,0.55);
}

/* ---- Buttons (playful) ---- */
.btn-primary {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff; border: none;
  box-shadow: 0 8px 18px -8px rgba(124,58,237,0.55);
}
.btn-primary:hover { background: linear-gradient(135deg,#b79cff,#6d28d9); color: #fff; }

/* ---- Table (vibrant, clean) ---- */
.table-wrapper { border-radius: 18px; border: 1px solid var(--border-color); }
.table-wrapper thead th {
  background: #f7f8fc;
  color: #64748b; letter-spacing: 0.6px;
}
tbody td { border-bottom: 1px solid #eef1f6; }
tbody tr { transition: background 0.15s ease, transform 0.15s ease; }
tbody tr:hover { background: #f6f3ff; }

/* ---- Bigger, bolder status colors ---- */
.badge {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.badge-paid { background: rgba(16,185,129,0.16); color: #047857; border: 1px solid rgba(16,185,129,0.35); }
.badge-pending { background: rgba(250,204,21,0.18); color: #b45309; border: 1px solid rgba(250,204,21,0.4); }
.badge-credit { background: rgba(245,158,11,0.18); color: #b45309; border: 1px solid rgba(245,158,11,0.4); }
.badge-partial { background: rgba(245,158,11,0.22); color: #b45309; border: 1px solid rgba(245,158,11,0.5); }
.badge-draft { background: rgba(148,163,184,0.16); color: #475569; border: 1px solid rgba(148,163,184,0.4); }
.badge-unpaid { background: rgba(239,68,68,0.14); color: #dc2626; border: 1px solid rgba(239,68,68,0.32); }

/* ---- Smooth entrance animations ---- */
@keyframes popIn {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-panel { animation: popIn 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.stat-card { animation: popIn 0.42s cubic-bezier(0.22,1,0.36,1) both; }
.stat-card:nth-child(1){ animation-delay: .04s }
.stat-card:nth-child(2){ animation-delay: .08s }
.stat-card:nth-child(3){ animation-delay: .12s }
.stat-card:nth-child(4){ animation-delay: .16s }
.stat-card:nth-child(5){ animation-delay: .20s }
.stat-card:nth-child(6){ animation-delay: .24s }
.card { animation: popIn 0.4s 0.28s cubic-bezier(0.22,1,0.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .stat-card, .hero-panel, .card { animation: none; }
}
/* =====================================================================
   INVOICES LISTING — visual upgrade + EXTRA SMOOTHNESS & GRAPHICS
   ===================================================================== */

/* status-colored left accent per row (driven by the status badge) */
#invoice-table-body tr td:first-child { border-left: 3px solid transparent; }
#invoice-table-body tr:has(.badge-paid)     td:first-child { border-left-color: #10b981; }
#invoice-table-body tr:has(.badge-pending)  td:first-child { border-left-color: #f59e0b; }
#invoice-table-body tr:has(.badge-partial)  td:first-child { border-left-color: #f97316; }
#invoice-table-body tr:has(.badge-credit)   td:first-child { border-left-color: #b45309; }
#invoice-table-body tr:has(.badge-unpaid)   td:first-child { border-left-color: #ef4444; }
#invoice-table-body tr:has(.badge-draft)    td:first-child { border-left-color: #94a3b8; }

/* row polish + entrance */
#invoice-table-body tr {
  background: #fff;
  transition: background 0.15s ease;
}
#invoice-table-body tr:nth-child(even) { background: #fbfcfe; }
#invoice-table-body tr:hover { background: #f5f2ff; }
#invoice-table-body tr { animation: rowIn 0.35s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes rowIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

/* amount emphasized */
#invoice-table-body td:nth-child(7) {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

/* sticky translucent table header for long lists */
.table-wrapper thead th { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); }

/* ---- extra smoothness / micro-interactions ---- */
.btn { transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .hero-btn:focus-visible, .nav-item:focus-visible, .filter-btn:focus-visible {
  outline: 2px solid rgba(124,58,237,0.6); outline-offset: 2px;
}

/* glowing collection bar fill */
.collection-bar-fill { background: linear-gradient(90deg,#34d399,#10b981); box-shadow: 0 0 10px rgba(16,185,129,0.5); }

/* soft page transition */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-content > * { animation: fadeUp 0.35s ease both; }

/* friendly realized-on-hover on stat icons already present; add subtle logo shine */
.sidebar-logo { position: relative; overflow: hidden; }
.sidebar-logo::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0% { left: -80%; } 55% { left: 130%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  #invoice-table-body tr, .page-content > *, .sidebar-logo::after { animation: none; }
}
/* =====================================================================
   INVOICE LIST (new) + SIDE PREVIEW DRAWER
   ===================================================================== */

/* rows are click-openable */
.inv-row { cursor: pointer; }
.inv-chip {
  display: inline-block; font-weight: 800; letter-spacing: -.2px;
  font-variant-numeric: tabular-nums; color: #6d28d9;
  background: rgba(167,139,250,0.14); border: 1px solid rgba(167,139,250,0.25);
  padding: 3px 9px; border-radius: 8px; font-size: 12px;
}

/* client avatar (table + preview) */
.client-cell { display: flex; align-items: center; gap: 10px; }
.client-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.15);
}
.av-0 { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.av-1 { background: linear-gradient(135deg,#60a5fa,#2563eb); }
.av-2 { background: linear-gradient(135deg,#34d399,#059669); }
.av-3 { background: linear-gradient(135deg,#f87171,#dc2626); }
.av-4 { background: linear-gradient(135deg,#fbbf24,#d97706); }
.av-5 { background: linear-gradient(135deg,#22d3ee,#0891b2); }
.client-meta { min-width: 0; }
.client-name { font-weight: 600; color: #0f172a; font-size: 13px; }

/* ---- Side preview drawer ---- */
.invoice-preview {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 92vw;
  background: #fff; z-index: 400;
  box-shadow: -20px 0 60px -20px rgba(15,23,42,0.35);
  transform: translateX(105%);
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
}
.invoice-preview.open { transform: translateX(0); }
.preview-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.42); z-index: 350;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
}
.preview-overlay.show { opacity: 1; pointer-events: auto; }

.preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--border-color);
  box-shadow: 0 6px 18px -18px rgba(15,23,42,0.3);
}
.pv-title { display: flex; align-items: center; gap: 10px; }
.pv-num { font-weight: 800; font-size: 16px; color: #0f172a; letter-spacing: -.3px; }

.preview-body { flex: 1; overflow-y: auto; padding: 18px; }

.pv-client { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pv-client-name { font-weight: 800; font-size: 16px; color: #0f172a; }
.pv-agent { font-size: 12px; color: #7c3aed; margin-top: 2px; }

.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.pv-cell {
  background: #f8fafc; border: 1px solid var(--border-color);
  border-radius: 12px; padding: 10px 12px;
}
.pv-cell span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; font-weight: 700; }
.pv-cell b { font-size: 13px; color: #0f172a; font-weight: 700; }

.pv-overdue {
  background: rgba(239,68,68,0.12); color: #dc2626; font-weight: 700;
  padding: 8px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 13px;
}

.pv-money {
  background: #f8fafc; border: 1px solid var(--border-color);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.pv-money-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.pv-money-row span { color: #64748b; }
.pv-money-row b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pv-total { color: #0f172a; }
.pv-paidme { color: #10b981; }
.pv-due { color: #ef4444; }

.pv-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pv-act {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--border-color); background: #fff;
  color: #0f172a; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.pv-act:hover { background: #f6f4ff; }
.pv-act:active { transform: scale(0.98); }
.pv-pay { background: linear-gradient(135deg,#f7c948,#d4a106); color: #3f2d00; border: none; }
.pv-done { background: linear-gradient(135deg,#34d399,#059669); color: #fff; border: none; }
.pv-danger { color: #dc2626; border-color: rgba(239,68,68,0.3); }

@media (max-width: 720px) {
  .invoice-preview { width: 100vw; max-width: 100vw; }
}
/* ===== Real invoice embed + clearer badges ===== */
.badge-lg { font-size: 12px; padding: 6px 12px; }
.pv-frame-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; font-weight: 700; margin: 6px 0 8px; display: flex; align-items: center; gap: 6px; }
.pv-frame-label::before { content: "📄"; }
.pv-frame-wrap { position: relative; overflow: hidden; border: 1px solid var(--border-color); border-radius: 14px; background: #fff; box-shadow: 0 12px 30px -22px rgba(15,23,42,0.5); }
.pv-frame { display: block; }
.badge-unpaid { background: rgba(239,68,68,0.18); color: #b91c1c; border: 1px solid rgba(239,68,68,0.5); }
.badge-paid { background: rgba(16,185,129,0.18); color: #047857; border: 1px solid rgba(16,185,129,0.45); }

/* =====================================================================
   FINAL CLEAN LIGHT — professional, gold-brand, restrained (NOT AI-looking)
   Removes neon/purple gradients, gimmick animations; clean & refined.
   ===================================================================== */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --line: #e7e9f0;
  --ink: #1a2233;
  --ink2: #5b6472;
  --ink3: #8a93a3;
  --gold: #b8860b;
  --gold2: #8a6506;
  --grn: #16a34a;
  --red: #dc2626;
  --blu: #2563eb;
}

/* ---- calm neutral page ---- */
body { background: var(--bg) !important; }
.page-content { padding: 24px; }

/* ---- Hero: clean light panel (no neon gradient) ---- */
.hero-panel {
  background: linear-gradient(180deg, #ffffff, #f6f8fc) !important;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(22,34,51,.04), 0 16px 34px -28px rgba(22,34,51,.3) !important;
  padding: 24px 28px;
  margin-bottom: 22px;
}
.hero-panel::after { height: 3px; background: linear-gradient(90deg, #d4a106, #b8860b); }
.hero-glow { display: none !important; }
.hero-eyebrow { color: var(--gold2); background: rgba(184,134,11,.10); }
.hero-title { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; font-weight: 800; }
.hero-title span { color: var(--ink3); -webkit-text-fill-color: currentColor; }
.hero-sub { color: var(--ink2); }
.hero-btn { border-radius: 11px; padding: 10px 16px; font-size: 13px; }
.hero-btn-primary { background: linear-gradient(180deg,#d4a106,#b8860b); color: #fff !important; box-shadow: 0 8px 18px -10px rgba(184,134,11,.6); }
.hero-btn-primary:hover { transform: translateY(-1px); }
.hero-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* ---- Stat cards: clean, restrained, subtle ---- */
.stats-grid { gap: 16px; }
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(22,34,51,.04);
  padding: 18px;
  transition: transform .18s ease, box-shadow .22s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(22,34,51,.28); }
.stat-accent { display: none !important; }
.stat-card-icon {
  width: 40px; height: 40px; border-radius: 11px;
  box-shadow: none !important; transition: none !important;
}
.stat-card-icon svg { width: 20px; height: 20px; }
.stat-card-icon.violet { background: rgba(124,58,237,.10); color: #6d28d9; }
.stat-card-icon.blue   { background: rgba(37,99,235,.10);  color: var(--blu); }
.stat-card-icon.green  { background: rgba(22,163,74,.10);  color: var(--grn); }
.stat-card-icon.red    { background: rgba(220,38,38,.10);  color: var(--red); }
.stat-card-icon.cyan   { background: rgba(8,145,178,.10);  color: #0891b2; }
.stat-card-icon.gold   { background: rgba(184,134,11,.12); color: var(--gold); }
.stat-card-value { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; font-size: 26px; }
.stat-card-value .currency { color: var(--ink2); -webkit-text-fill-color: currentColor; }
.stat-card-label { color: var(--ink3); }
.stat-card-label em { color: var(--ink3); }

/* ---- kill gimmick animations ---- */
.stat-card, .hero-panel, .card { animation: none !important; }
.stat-card:hover .stat-card-icon, .stat-card-icon { transform: none !important; }
.sidebar-logo::after { display: none !important; }
.page-content > * { animation: fadeUp .38s ease both; }

/* ---- Sidebar: clean white, gold active ---- */
.sidebar { border-right: 1px solid var(--line); box-shadow: none !important; }
.nav-item { border-radius: 9px; }
.nav-item.active { background: rgba(184,134,11,.10); color: var(--gold2); border-left: 3px solid var(--gold); font-weight: 700; }

/* ---- Buttons + filters: gold brand (not purple) ---- */
.btn-primary, .filter-btn.active {
  background: linear-gradient(180deg,#d4a106,#b8860b) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px -8px rgba(184,134,11,.55);
}
.btn-primary:hover { color: #fff; }

/* ---- Table: clean ---- */
.table-wrapper { border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(22,34,51,.04); }
#invoice-table-body tr:hover { background: #f7f8fb; }
thead th { background: #f7f8fb; }
.badge-lg { font-weight: 700; }

/* ---- invoice logo in sidebar ---- */
.sidebar-brand-logo { width: 150px; height: 78px; object-fit: contain; display: block; margin: 4px auto 8px; }
.sidebar-title { color: var(--ink); }

/* ---- paid read-only banner ---- */
.paid-lock-banner {
  background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.35);
  color: #047857; padding: 11px 13px; border-radius: 10px;
  font-weight: 700; font-size: 13px; margin-bottom: 16px;
}
/* avatar slightly bigger + clear */
.client-avatar { width: 42px; height: 42px; font-size: 16px; box-shadow: 0 2px 6px rgba(15,23,42,.12); }

/* =====================================================================
   PREMIUM GLASS (Reference: jobfile.qgocargo.cloud/analytics3)
   Glassmorphism + cyan→indigo→violet gradient + glow, LIGHT variant
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(30, 64, 175, 0.14);
  --txtl: #101731;
  --txtl-dim: #51608c;
  --txtl-faint: #8d99bd;
  --glass-accent: #0891b2;
  --glass-good: #059669;
  --glass-bad: #e11d48;
  --glass-warn: #d97706;
  --glow-a: rgba(8, 145, 178, 0.28);
  --grad-main: linear-gradient(135deg, #22d3ee 0%, #6366f1 55%, #a78bfa 100%);
  --grad-hot: linear-gradient(135deg, #f472b6, #fb923c);
  --shadow-g: 0 16px 40px -20px rgba(30, 58, 138, 0.28);
}

/* ---- Aurora page background (light navy glass) ---- */
body {
  color: var(--txtl);
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(99,102,241,0.16), transparent 60%),
    radial-gradient(800px 480px at -8% -12%, rgba(34,211,238,0.18), transparent 55%),
    radial-gradient(820px 460px at 52% 112%, rgba(167,139,250,0.14), transparent 60%),
    linear-gradient(160deg, #eef2fb 0%, #e5ecf9 100%) !important;
  background-attachment: fixed;
}

/* ---- Shared glass surface ---- */
.hero-panel, .stat-card, .card, .table-wrapper,
.card-header, .toast {
  background: var(--glass) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-border) !important;
}

/* ---- Hero: glass + gradient title + dot ---- */
.hero-panel {
  border-radius: 22px !important;
  box-shadow: var(--shadow-g) !important;
  color: var(--txtl);
  padding: 26px 28px;
}
.hero-panel::after { display: none; }
.hero-title {
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title span { -webkit-text-fill-color: var(--txtl-dim); }
.hero-eyebrow { color: #2563eb; background: rgba(37,99,235,0.10); }
.hero-sub { color: var(--txtl-dim); }
.hero-btn-primary { background: var(--grad-main); color: #fff !important; box-shadow: 0 10px 22px -12px rgba(99,102,241,0.6); }
.hero-btn-ghost { background: var(--glass-strong); color: var(--txtl); border: 1px solid var(--glass-border); }

/* ---- Stat cards: glass cubes with per-card accent dot + gradient value ---- */
.stat-card {
  border-radius: 20px !important;
  box-shadow: var(--shadow-g) !important;
}
.stat-card::before {
  content: ""; position: absolute; top: 12px; right: 14px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad-main); box-shadow: 0 0 12px var(--glow-a);
}
.s-violet .stat-card::before { background: linear-gradient(135deg,#22d3ee,#7c3aed); }
.s-blue   .stat-card::before { background: linear-gradient(135deg,#22d3ee,#2563eb); }
.s-green  .stat-card::before { background: linear-gradient(135deg,#34d399,#059669); }
.s-red    .stat-card::before { background: linear-gradient(135deg,#fb7185,#e11d48); }
.s-cyan   .stat-card::before { background: linear-gradient(135deg,#67e8f9,#0891b2); }
.s-gold   .stat-card::before { background: linear-gradient(135deg,#fbbf24,#d97706); }
.stat-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--glass-accent) 45%, transparent) !important;
  box-shadow: 0 22px 55px -16px var(--glow-a) !important;
}

/* gradient icon chips */
.stat-card-icon {
  border-radius: 13px; box-shadow: 0 10px 22px -10px rgba(99,102,241,0.5) !important;
}
.stat-card-icon.violet { background: linear-gradient(135deg,#22d3ee,#7c3aed); color:#fff; }
.stat-card-icon.blue   { background: linear-gradient(135deg,#22d3ee,#2563eb); color:#fff; }
.stat-card-icon.green  { background: linear-gradient(135deg,#34d399,#059669); color:#fff; }
.stat-card-icon.red    { background: linear-gradient(135deg,#fb7185,#e11d48); color:#fff; }
.stat-card-icon.cyan   { background: linear-gradient(135deg,#67e8f9,#0891b2); color:#fff; }
.stat-card-icon.gold   { background: linear-gradient(135deg,#fbbf24,#d97706); color:#fff; }

/* gradient value text */
.stat-card-value {
  color: var(--txtl);
  background: linear-gradient(135deg,#101731,#3b4a7a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card-value.text-green { background: linear-gradient(135deg,#059669,#10b981); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.stat-card-value.text-red { background: linear-gradient(135deg,#e11d48,#fb7185); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.stat-card-label { color: var(--txtl-dim); }
.stat-card-label em { color: var(--txtl-faint); }

/* ---- Buttons: gradient main ---- */
.btn-primary, .filter-btn.active {
  background: var(--grad-main) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(99,102,241,0.6);
}

/* ---- Sidebar: glass ---- */
.sidebar { background: rgba(255,255,255,0.6) !important; backdrop-filter: blur(18px); border-right: 1px solid var(--glass-border); }
.nav-item.active { background: var(--grad-main); color: #fff !important; border-left: 3px solid transparent; box-shadow: 0 8px 18px -10px rgba(99,102,241,0.5); }
.nav-item.active .nav-icon svg { stroke: #fff; }
.sidebar-brand-logo { filter: none; }

/* ---- Status pills: glass + glow ---- */
.badge {
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.badge-paid { background: rgba(5,150,105,0.16); color:#047857; }
.badge-pending { background: rgba(217,119,6,0.16); color:#b45309; }
.badge-partial { background: rgba(217,119,6,0.2); color:#b45309; }
.badge-credit { background: rgba(217,119,6,0.18); color:#b45309; }
.badge-draft { background: rgba(141,153,189,0.2); color:#51608c; }
.badge-unpaid { background: rgba(225,29,72,0.15); color:#be123c; }

/* ---- Table rows on glass ---- */
#invoice-table-body tr { background: rgba(255,255,255,0.5); }
#invoice-table-body tr:nth-child(even) { background: rgba(255,255,255,0.32); }
#invoice-table-body tr:hover { background: rgba(236,240,255,0.55); }
thead th { background: rgba(255,255,255,0.45); color: var(--txtl-dim); }

/* ---- Preview drawer glass ---- */
.invoice-preview { background: var(--glass-strong); backdrop-filter: blur(20px); }
.pv-cell, .pv-money { background: rgba(255,255,255,0.6); border-color: var(--glass-border); }
/* =====================================================================
   FINAL POLISH — layout rhythm, animated hover, micro-interactions
   (applies to the Premium-Glass light theme)
   ===================================================================== */
:root {
  --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px;
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .25s;
}

/* ---- consistent layout rhythm ---- */
.page-content { padding: 28px 32px 52px; max-width: 1500px; margin: 0 auto; width: 100%; }
.stats-grid { gap: 20px; margin-bottom: 28px; }
.stat-card { padding: 22px; }
.hero-panel { padding: 28px 32px; margin-bottom: 26px; }
.card { overflow: visible; }
.card-header { padding: 18px 22px; }
.card-body.no-padding { padding: 0; }
.toolbar { padding: 16px 22px !important; }

/* ---- base micro-interaction smoothing ---- */
.btn, .hero-btn, .filter-btn, .nav-item, .stat-card, .badge, #invoice-table-body tr, .pagination-btn, .search-box input {
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease);
}
* { -webkit-tap-highlight-color: transparent; }

/* ---- buttons: press + focus ---- */
.btn:active, .hero-btn:active, .filter-btn:active, .pagination-btn:active { transform: scale(.96); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); transition: none;
}
.btn-primary:hover::after { animation: btnShine .8s ease; }
@keyframes btnShine { from { left: -120%; } to { left: 130%; } }

/* ---- stat cards: refined hover lift + glow + icon motion ---- */
.stat-card { will-change: transform; }
.stat-card:hover { transform: translateY(-4px); }
.stat-card:hover .stat-card-icon { transform: translateY(-2px) scale(1.05); }
.stat-card-icon { transition: transform var(--dur) var(--ease); }

/* ---- nav items: slide-in hover ---- */
.nav-item { position: relative; }
.nav-item::before { content:""; position:absolute; left:8px; top:50%; width:4px; height:0; border-radius:4px; background:var(--grad-main); transform:translateY(-50%); transition:height var(--dur) var(--ease); }
.nav-item:hover::before { height:16px; }
.nav-item.active::before { height:20px; }

/* ---- table rows: gentle lift on hover ---- */
#invoice-table-body tr { position: relative; }
#invoice-table-body tr:hover td { background: rgba(238,242,255,0.65); }
#invoice-table-body tr:hover { box-shadow: 0 6px 18px -12px rgba(99,102,241,0.35); }

/* ---- form inputs: focus glow ---- */
.form-control, .search-box input, #sort-select { transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease; }
.form-control:focus, #sort-select:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.14); outline: none; }

/* ---- pagination ---- */
.pagination { padding: 16px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pagination-btn { min-width: 34px; height:34px; padding:0 10px; border-radius:10px; }
.pagination-btn.active { background: var(--grad-main); color:#fff; }

/* ---- toast: refined entrance ---- */
.toast { animation: toastIn .4s var(--ease) both; }
@keyframes toastIn { from { opacity:0; transform: translateX(24px); } to { opacity:1; transform: translateX(0); } }

/* ---- global accessible focus ring ---- */
:focus-visible { outline: 2px solid rgba(99,102,241,0.7); outline-offset: 2px; }

/* ---- gentle page load fade ---- */
.page-content > * { animation: secFade .5s var(--ease) both; }
@keyframes secFade { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }

/* ---- selection + scrollbar flourish ---- */
::selection { background: rgba(99,102,241,0.25); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.35); border-radius:6px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.55); background-clip:content-box; }

/* ---- reduced motion: kill all decorative motion ---- */
@media (prefers-reduced-motion: reduce) {
  .stat-card, .hero-panel, .page-content > *, .btn-primary::after, .nav-item::before, .toast, #invoice-table-body tr { animation: none !important; transition-duration: .01ms !important; }
}
.stat-card-icon { transition: transform .25s cubic-bezier(.22,1,.36,1) !important; }

/* =====================================================================
   FIX GAP + FONTS + CLEAN CARDS + DARK/LIGHT THEME
   ===================================================================== */
/* ---- 1) Fix layout gap/shrink (full-width content, no centering gap) ---- */
.page-content { max-width: 100% !important; margin: 0 !important; }
.main-content { min-width: 0; }

/* ---- 2) Fonts: Space Grotesk (display/numbers) + Inter (body) ---- */
body { font-family: 'Inter', 'Segoe UI', ui-sans-serif, system-ui, sans-serif; }
.hero-title, .header-title, .card-title, .stat-card-value, .stat-card-label,
.nav-item, .badge, h1, h2, h3, .page-header h1, .settings-nav .tab {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.015em;
}
.stat-card-value { font-variant-numeric: tabular-nums; }
.nav-badge { font-family: 'Space Grotesk', sans-serif; }

/* ---- 3) Clean-up stat cards (remove clutter, solid values) ---- */
.stat-card::before { display: none !important; }
.stat-card { padding: 20px; gap: 15px; }
.stat-card-icon { width: 44px; height: 44px; }
.stat-card-value {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #101731;
}
.stat-card-value.text-green { color: #059669; }
.stat-card-value.text-red   { color: #e11d48; }
.stat-card-label { color: #51608c; }
.stat-card-label em { color: #8d99bd; }

/* =====================================================================
   DARK THEME (html.dark) — navy glass, matches reference
   ===================================================================== */
html.dark {
  --glass: rgba(14,22,40,.62);
  --glass-strong: rgba(22,32,56,.9);
  --glass-border: rgba(120,150,255,.16);
  --txtl: #eaf0ff;
  --txtl-dim: #8b96b8;
  --txtl-faint: #5a6584;
  --shadow-g: 0 18px 50px -18px rgba(0,0,0,.75);
  color-scheme: dark;
}
html.dark body {
  color: var(--txtl);
  background:
    radial-gradient(950px 520px at 88% -8%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(800px 480px at -8% -12%, rgba(34,211,238,.2), transparent 55%),
    radial-gradient(840px 460px at 52% 112%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(160deg, #071018 0%, #0a1220 100%) !important;
}
html.dark .sidebar { background: rgba(10,18,32,.62) !important; border-right-color: var(--glass-border); }
html.dark .hero-panel, html.dark .stat-card, html.dark .card,
html.dark .table-wrapper, html.dark .card-header { background: var(--glass) !important; }
html.dark .hero-title { color: #eaf0ff; }
html.dark .hero-title span { -webkit-text-fill-color: var(--txtl-dim); }
html.dark .hero-sub, html.dark .card-title { color: var(--txtl-dim); }
html.dark .hero-btn-ghost { background: var(--glass-strong); color: var(--txtl); }
html.dark .stat-card-value { color: #eaf0ff; }
html.dark .stat-card-value.text-green { color: #34d399; }
html.dark .stat-card-value.text-red   { color: #fb7185; }
html.dark .stat-card-label, html.dark .stat-card-label em { color: var(--txtl-dim); }
html.dark .nav-item { color: var(--txtl-dim); }
html.dark .nav-item:hover { color: #eaf0ff; background: rgba(255,255,255,.05); }
html.dark .nav-item.active { color: #fff; }
html.dark .sidebar-title { color: #eaf0ff; }
html.dark .sidebar-footer { color: var(--txtl-faint); }
html.dark #invoice-table-body tr { background: rgba(255,255,255,.03); }
html.dark #invoice-table-body tr:nth-child(even) { background: rgba(255,255,255,.015); }
html.dark #invoice-table-body tr:hover { background: rgba(120,150,255,.08); }
html.dark #invoice-table-body td { color: #dbe3ff; }
html.dark thead th { background: rgba(255,255,255,.04); color: var(--txtl-dim); }
html.dark .form-control, html.dark .search-box input, html.dark #sort-select { background: rgba(255,255,255,.06); color: var(--txtl); border-color: var(--glass-border); }
html.dark .search-box input::placeholder { color: var(--txtl-faint); }
html.dark .form-label { color: var(--txtl-dim); }
html.dark .filter-group { background: rgba(255,255,255,.04); border-color: var(--glass-border); }
html.dark .filter-btn { color: var(--txtl-dim); }
html.dark .filter-btn.active { color: #fff; }
html.dark .invoice-preview, html.dark .pv-cell, html.dark .pv-money { background: rgba(14,22,40,.92); color: var(--txtl); }
html.dark .pv-client-name, html.dark .pv-cell b { color: #eaf0ff; }
html.dark .pw-title, html.dark .pv-num { color: #eaf0ff; }
html.dark .toast { background: var(--glass-strong); color: var(--txtl); border-color: var(--glass-border); }
html.dark .client-name { color: #eaf0ff; }
html.dark .pagination-info { color: var(--txtl-dim); }
html.dark .modal-content { background: var(--glass-strong); color: var(--txtl); }

/* theme toggle button */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--glass-border); background: var(--glass-strong);
  color: var(--txtl); transition: transform .18s var(--ease), background .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px) rotate(8deg); }
.theme-toggle:active { transform: scale(.95); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ico-sun { display: none; }
html.dark .theme-toggle .ico-sun { display: block; }
html.dark .theme-toggle .ico-moon { display: none; }
/* ===== EXACT reference dark tokens (analytics3) ===== */
html.dark {
  --glass: rgba(148,178,255,0.055);
  --glass-strong: rgba(148,178,255,0.12);
  --glass-border: rgba(148,178,255,0.16);
  --txtl: #eaf0ff; --txtl-dim: #8b96b8; --txtl-faint: #5a6584;
  --shadow-g: 0 18px 50px -18px rgba(0,0,0,0.75);
  --grad-main: linear-gradient(135deg,#22d3ee 0%,#6366f1 55%,#a78bfa 100%);
}
html.dark body {
  background:
    radial-gradient(1000px 560px at 88% -10%, rgba(99,102,241,0.22), transparent 60%),
    radial-gradient(860px 500px at -8% -12%, rgba(34,211,238,0.16), transparent 55%),
    radial-gradient(900px 480px at 55% 115%, rgba(124,58,237,0.20), transparent 60%),
    linear-gradient(160deg, #05070f 0%, #070b17 100%) !important;
}
html.dark .hero-panel, html.dark .stat-card, html.dark .card,
html.dark .table-wrapper { background: var(--glass) !important; border-color: var(--glass-border) !important; border-radius: 20px; }
html.dark .stat-card:hover { box-shadow: 0 22px 60px -18px rgba(99,102,241,0.35), var(--shadow-g) !important; }

/* ===== FIX INVISIBLE TEXT IN DARK: override shared theme vars ===== */
html.dark, html.dark :root {
  --bg-primary: #070b17;
  --bg-secondary: rgba(148,178,255,0.05);
  --bg-tertiary: rgba(148,178,255,0.08);
  --bg-hover: rgba(148,178,255,0.10);
  --border-color: rgba(148,178,255,0.16);
  --border-light: rgba(148,178,255,0.22);
  --text-primary: #eaf0ff;
  --text-secondary: #8b96b8;
  --text-muted: #5a6584;
  --text-light: #eaf0ff;
  --card: rgba(148,178,255,0.05);
  --fg: #eaf0ff;
  --border: rgba(148,178,255,0.16);
  --muted: #5a6584;
}
html.dark .btn { color: var(--text-primary); }
html.dark .header { background: rgba(10,17,30,0.55) !important; border-bottom-color: var(--border-color); }
.header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html.dark .header .btn { color: #eaf0ff; }
html.dark .header .btn-danger { color: #fff; }

/* ===== INVOICE LIST polish ===== */
.filter-btn.active { background: var(--grad-main) !important; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(99,102,241,.55); }
.filter-group { border-radius: 13px; padding: 6px; }

/* overdue rows: red accent + subtle tint */
tr.inv-row td:first-child { border-left: 3px solid transparent; }
tr.inv-row.overdue td { background: rgba(239,83,80,.06); }
tr.inv-row.overdue td:first-child { border-left-color: #ef5350; }
html.dark tr.inv-row.overdue td { background: rgba(239,83,80,.10); }

/* overdue badge pill */
.overdue-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(239,83,80,.15); color: #d32f2f;
  font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 20px;
  margin-left: 8px; white-space: nowrap;
}
html.dark .overdue-tag { background: rgba(239,83,80,.22); color: #fb7185; }
.pv-overdue { background: rgba(239,83,80,.14); color:#d32f2f; font-weight:700; padding:8px 12px; border-radius:10px; font-size:12px; text-align:center; margin-bottom:8px; }
html.dark .pv-overdue { background: rgba(239,83,80,.2); color:#fb7185; }

/* table header cleaner */
.table-wrapper thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
#invoice-table-body td { padding: 13px 14px; }
.inv-chip { font-family: 'Space Grotesk', sans-serif; }
#invoice-table-body tr.inv-row.overdue td:first-child { border-left-color: #ef5350 !important; }

/* shared floating theme toggle (injected by /static/js/ui.js) */
.theme-toggle-float {
  position: fixed; bottom: 18px; right: 18px; z-index: 1200;
  width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.35);
  background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--txtl);
}

/* ===== HEADER BRAND (contact) ===== */
.header-brand { display: flex; flex-direction: column; line-height: 1.15; gap: 2px; }
.header-url { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 14px; color: var(--text-primary, #1a2233); letter-spacing: -0.01em; }
.header-email { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted, #5b6472); }
.header-email a { color: inherit; text-decoration: none; }
.header-email a:hover { color: #2563eb; text-decoration: underline; }
.header-email svg { opacity: .7; flex-shrink: 0; }

/* ===== HERO ART: floating orbs + animated medallion ===== */
.hero-panel { position: relative; overflow: hidden; }
.hero-left, .hero-actions { position: relative; z-index: 2; }
.hero-art { position: absolute; top: 0; right: 0; width: 260px; height: 100%; pointer-events: none; z-index: 1; }

.art-orb { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .5; will-change: transform; }
.art-orb-1 { width: 120px; height: 120px; right: 24px; top: 10px; background: radial-gradient(circle, #22d3ee, #6366f1); animation: artFloat 9s ease-in-out infinite; }
.art-orb-2 { width: 92px; height: 92px; right: 108px; bottom: 4px; background: radial-gradient(circle, #a78bfa, #7c3aed); animation: artFloat 11s ease-in-out infinite reverse; }
.art-orb-3 { width: 72px; height: 72px; right: 205px; top: 34px; background: radial-gradient(circle, #34d399, #059669); animation: artFloat 8s ease-in-out infinite 1s; }
.art-orb-4 { width: 62px; height: 62px; right: 182px; bottom: 30px; background: radial-gradient(circle, #fbbf24, #d97706); animation: artFloat 10s ease-in-out infinite 2s; }

.art-medallion {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  width: 86px; height: 86px; border-radius: 24px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg, #22d3ee, #6366f1, #a78bfa);
  box-shadow: 0 18px 40px -14px rgba(99, 102, 241, .55);
  animation: artBob 5s ease-in-out infinite;
}
.art-medallion svg { width: 40px; height: 40px; }
.art-ring { position: absolute; inset: -9px; border-radius: 30px; border: 2px dashed rgba(99, 102, 241, .35); animation: artSpin 14s linear infinite; }
.art-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px currentColor; }
.art-dot-1 { right: 168px; top: 20px; color: #22d3ee; animation: artPulse 3s ease-in-out infinite; }
.art-dot-2 { right: 34px; bottom: 32px; color: #a78bfa; animation: artPulse 3.4s ease-in-out infinite .5s; }
.art-dot-3 { right: 224px; bottom: 78px; color: #34d399; animation: artPulse 2.8s ease-in-out infinite 1s; }

@keyframes artFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes artBob { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 7px)); } }
@keyframes artSpin { to { transform: rotate(360deg); } }
@keyframes artPulse { 0%, 100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } }

/* dark theme: orbs a bit stronger, medallion pops */
html.dark .art-orb { opacity: .6; }
html.dark .hero-email a { color: #93c5fd; }

@media (prefers-reduced-motion: reduce) {
  .art-orb, .art-medallion, .art-ring, .art-dot { animation: none !important; }
}
@media (max-width: 900px) { .hero-art { opacity: .4; } }
@media (max-width: 560px) { .hero-art { opacity: .22; } }
/* subtle single animated hero emblem (1 element, minimal, reference-like) */
.hero-live { position:absolute; top:16px; right:18px; width:56px; height:56px; pointer-events:none; opacity:.95; z-index:3; }
.hl-ring {
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, #22d3ee, #6366f1, #a78bfa, #22d3ee);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: hlspin 6s linear infinite;
}
.hl-core {
  position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:linear-gradient(135deg, #22d3ee, #a78bfa);
  box-shadow:0 0 16px rgba(99,102,241,.6);
  animation: hlpulse 2.4s ease-in-out infinite;
}
@keyframes hlspin { to { transform: rotate(360deg); } }
@keyframes hlpulse { 0%,100% { transform: scale(.9); opacity:.9; } 50% { transform: scale(1.12); opacity:1; } }
html.dark .hero-live { opacity:1; }
@media (prefers-reduced-motion: reduce) { .hl-ring, .hl-core { animation:none !important; } }

/* =====================================================================
   REDESIGN-FINALE — ONE coherent professional theme (flattens the mess)
   Resets all accumulated conflicting overrides into a single clean identity.
   ===================================================================== */
:root {
  --rd-bg: #f4f6fb;
  --rd-card: #ffffff;
  --rd-line: #e7eaf2;
  --rd-ink: #141a2b;
  --rd-ink2: #4b5673;
  --rd-ink3: #8a93b0;
  --rd-pri: linear-gradient(135deg,#22d3ee,#6366f1,#a78bfa);
  --rd-pri-grad: linear-gradient(135deg,#22d3ee 0%,#6366f1 55%,#a78bfa 100%);
  --rd-green: #059669;
  --rd-red: #e11d48;
  --rd-amber: #d97706;
  --rd-shadow: 0 1px 2px rgba(20,26,43,.04), 0 10px 30px -18px rgba(20,26,43,.18);
}

/* ====================== LIGHT (default) ====================== */
html:not(.dark) { background:#f4f6fb !important; }
html:not(.dark) .sidebar {
  background:#ffffff !important; border-right:1px solid var(--rd-line) !important; box-shadow:none !important;
}
html:not(.dark) .nav-item { color:var(--rd-ink2); }
html:not(.dark) .nav-item:hover { background:#f1f4fb; color:var(--rd-ink); }
html:not(.dark) .nav-item.active { background:rgba(99,102,241,.10) !important; color:#4338ca !important; border-left:3px solid #6366f1 !important; box-shadow:none !important; }
html:not(.dark) .sidebar-title { color:var(--rd-ink); }
html:not(.dark) .sidebar-footer { color:var(--rd-ink3); }

html:not(.dark) .header { background:rgba(255,255,255,.82) !important; border-bottom:1px solid var(--rd-line) !important; backdrop-filter:blur(12px); }

html:not(.dark) .hero-panel {
  background:linear-gradient(150deg,#ffffff 0%,#f6f8ff 100%) !important; border:1px solid var(--rd-line) !important;
  box-shadow:var(--rd-shadow) !important; border-radius:20px !important;
}
html:not(.dark) .hero-eyebrow { background:rgba(99,102,241,.10) !important; color:#4338ca !important; }
html:not(.dark) .hero-sub { color:var(--rd-ink2); }
html:not(.dark) .hero-btn-primary { background:var(--rd-pri-grad); color:#fff !important; }
html:not(.dark) .hero-btn-ghost { background:#fff; color:var(--rd-ink); border:1px solid var(--rd-line); }

html:not(.dark) .stat-card, html:not(.dark) .card, html:not(.dark) .table-wrapper {
  background:#ffffff !important; border:1px solid var(--rd-line) !important; border-radius:16px !important; box-shadow:var(--rd-shadow) !important;
}
html:not(.dark) .stat-card-icon { box-shadow:none !important; }
html:not(.dark) .stat-card-icon svg { width:20px; height:20px; }
html:not(.dark) .stat-card-value { color:var(--rd-ink) !important; -webkit-text-fill-color:var(--rd-ink) !important; }
html:not(.dark) .stat-card-value.text-green { color:var(--rd-green) !important; -webkit-text-fill-color:var(--rd-green) !important; }
html:not(.dark) .stat-card-value.text-red { color:var(--rd-red) !important; -webkit-text-fill-color:var(--rd-red) !important; }
html:not(.dark) .stat-card-label { color:var(--rd-ink3) !important; }

html:not(.dark) .btn-primary, html:not(.dark) .filter-btn.active { background:var(--rd-pri-grad) !important; color:#fff !important; box-shadow:none !important; }
html:not(.dark) .filter-group { background:#eef1f8 !important; border-color:transparent !important; }
html:not(.dark) .filter-btn { color:var(--rd-ink2); }
html:not(.dark) #sort-select { background:#fff !important; color:var(--rd-ink) !important; border-color:var(--rd-line) !important; }

html:not(.dark) thead th { color:var(--rd-ink3) !important; background:#fbfcfe !important; }
html:not(.dark) #invoice-table-body tr { background:#fff !important; }
html:not(.dark) #invoice-table-body tr:nth-child(even) { background:#fbfcfe !important; }
html:not(.dark) #invoice-table-body tr:hover { background:#f3f6fe !important; }

/* ====================== DARK (html.dark) ====================== */
html.dark body { color:#eaf0ff; }
html.dark .sidebar { background:rgba(12,20,38,.72) !important; border-right-color:rgba(120,150,255,.16) !important; }
html.dark .stat-card-value { -webkit-text-fill-color:#eaf0ff !important; color:#eaf0ff !important; }
html.dark .stat-card-value.text-green { -webkit-text-fill-color:#34d399 !important; color:#34d399 !important; }
html.dark .stat-card-value.text-red { -webkit-text-fill-color:#fb7185 !important; color:#fb7185 !important; }
html.dark .stat-card-label { color:#8b96b8 !important; }

/* ===== shared tokens used by scaffold ===== */
html.dark { --rd-card: rgba(148,178,255,.06); }
/* =====================================================================
   REDESIGN-FINALE (part 2) — remaining components, coherent both themes
   ===================================================================== */
/* ---- badges / status pills (coherent) ---- */
.badge-lg { font-weight:700; border-radius:20px; }
.badge-paid { background:rgba(5,150,105,.14) !important; color:#047857 !important; }
.badge-pending, .badge-partial, .badge-credit { background:rgba(217,119,6,.15) !important; color:#b45309 !important; }
.badge-unpaid { background:rgba(225,29,72,.13) !important; color:#be123c !important; }
.badge-draft { background:rgba(141,153,189,.16) !important; color:#5b6472 !important; }
html.dark .badge-paid { background:rgba(52,211,153,.16) !important; color:#34d399 !important; }
html.dark .badge-unpaid, html.dark .badge-pending, html.dark .badge-partial, html.dark .badge-credit { color:#f6c06a !important; }
html.dark .badge-draft { color:#8b96b8 !important; }

/* ---- avatar initials ---- */
.client-avatar { width:38px; height:38px; font-size:15px; font-weight:700; }

/* ---- preview drawer ---- */
.invoice-preview { border-left:1px solid var(--rd-line, rgba(120,150,255,.16)) !important; }
.invoice-preview h3, .invoice-preview .pv-client-name { font-family:'Space Grotesk',Inter,sans-serif; }
.pv-cell { border:1px solid var(--rd-line) !important; border-radius:12px; }
.pv-act { border-radius:11px; }
html.dark .invoice-preview { border-left-color:rgba(120,150,255,.16) !important; }

/* ---- inputs ---- */
.form-control, .search-box input, select {
  border:1px solid var(--rd-line) !important; border-radius:11px !important; background:#fff !important; color:var(--rd-ink) !important; font-size:14px;
}
.form-control:focus, .search-box input:focus { border-color:#6366f1 !important; box-shadow:0 0 0 3px rgba(99,102,241,.15) !important; }
html.dark .form-control, html.dark .search-box input, html.dark select { background:rgba(148,178,255,.07) !important; color:#eaf0ff !important; border-color:rgba(120,150,255,.18) !important; }
html.dark select option { background:#0b1220; color:#eaf0ff; }

/* ---- toast ---- */
.toast { border-radius:13px !important; box-shadow:0 12px 30px -14px rgba(20,26,43,.28) !important; }

/* ---- modal ---- */
.modal-content { border-radius:18px !important; box-shadow:0 24px 60px -24px rgba(20,26,43,.4) !important; }

/* ---- pagination ---- */
.pagination-btn { min-width:34px; height:34px; border-radius:10px; border:1px solid var(--rd-line); background:#fff; }
html.dark .pagination-btn { background:rgba(148,178,255,.07); border-color:rgba(120,150,255,.18); color:#eaf0ff; }
.pagination-btn.active { background:var(--rd-pri-grad) !important; color:#fff !important; }

/* ---- collection bar / cash ---- */
.text-gold { color:#b45309; }
html.dark .text-gold { color:#f6c06a; }

/* ---- empty state ---- */
.empty-state { color:var(--rd-ink3); }

/* ---- toolbars / header buttons consistent ---- */
.header .btn { border-radius:10px; }
.header .btn-primary { background:var(--rd-pri-grad) !important; color:#fff !important; }
.header .btn-danger { background:rgba(225,29,72,.1) !important; color:#be123c !important; border:1px solid rgba(225,29,72,.2); }
html.dark .header .btn-danger { background:rgba(251,113,133,.14) !important; color:#fb7185 !important; border-color:rgba(251,113,133,.22); }
html.dark .header .btn { color:#eaf0ff !important; }

/* ---- scrollbar consistent ---- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:rgba(99,102,241,.3); border-radius:6px; border:2px solid transparent; background-clip:content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}