/*
 * CRM Project overrides — shared design system copied from africom_sites
 * (keep the two in sync; CRM-specific additions live at the end of file).
 * Redefines Bootstrap's p-*/pt-*/pb-*/ps-*/pe-*/px-*/py-* utilities at HALF
 * Bootstrap's default scale. Must be loaded after bootstrap.css.
 *
 * Bootstrap default spacers: 0, .25rem, .5rem, 1rem, 1.5rem, 3rem
 * Half scale:                0, .125rem, .25rem, .5rem, .75rem, 1.5rem
 */

:root {
  --afs-space-0: 0;
  --afs-space-1: 0.125rem;
  --afs-space-2: 0.25rem;
  --afs-space-3: 0.5rem;
  --afs-space-4: 0.75rem;
  --afs-space-5: 1.5rem;
}

.p-0 { padding: var(--afs-space-0) !important; }
.p-1 { padding: var(--afs-space-1) !important; }
.p-2 { padding: var(--afs-space-2) !important; }
.p-3 { padding: var(--afs-space-3) !important; }
.p-4 { padding: var(--afs-space-4) !important; }
.p-5 { padding: var(--afs-space-5) !important; }

.pt-0 { padding-top: var(--afs-space-0) !important; }
.pt-1 { padding-top: var(--afs-space-1) !important; }
.pt-2 { padding-top: var(--afs-space-2) !important; }
.pt-3 { padding-top: var(--afs-space-3) !important; }
.pt-4 { padding-top: var(--afs-space-4) !important; }
.pt-5 { padding-top: var(--afs-space-5) !important; }

.pb-0 { padding-bottom: var(--afs-space-0) !important; }
.pb-1 { padding-bottom: var(--afs-space-1) !important; }
.pb-2 { padding-bottom: var(--afs-space-2) !important; }
.pb-3 { padding-bottom: var(--afs-space-3) !important; }
.pb-4 { padding-bottom: var(--afs-space-4) !important; }
.pb-5 { padding-bottom: var(--afs-space-5) !important; }

.ps-0 { padding-left: var(--afs-space-0) !important; }
.ps-1 { padding-left: var(--afs-space-1) !important; }
.ps-2 { padding-left: var(--afs-space-2) !important; }
.ps-3 { padding-left: var(--afs-space-3) !important; }
.ps-4 { padding-left: var(--afs-space-4) !important; }
.ps-5 { padding-left: var(--afs-space-5) !important; }

.pe-0 { padding-right: var(--afs-space-0) !important; }
.pe-1 { padding-right: var(--afs-space-1) !important; }
.pe-2 { padding-right: var(--afs-space-2) !important; }
.pe-3 { padding-right: var(--afs-space-3) !important; }
.pe-4 { padding-right: var(--afs-space-4) !important; }
.pe-5 { padding-right: var(--afs-space-5) !important; }

.px-0 { padding-left: var(--afs-space-0) !important; padding-right: var(--afs-space-0) !important; }
.px-1 { padding-left: var(--afs-space-1) !important; padding-right: var(--afs-space-1) !important; }
.px-2 { padding-left: var(--afs-space-2) !important; padding-right: var(--afs-space-2) !important; }
.px-3 { padding-left: var(--afs-space-3) !important; padding-right: var(--afs-space-3) !important; }
.px-4 { padding-left: var(--afs-space-4) !important; padding-right: var(--afs-space-4) !important; }
.px-5 { padding-left: var(--afs-space-5) !important; padding-right: var(--afs-space-5) !important; }

.py-0 { padding-top: var(--afs-space-0) !important; padding-bottom: var(--afs-space-0) !important; }
.py-1 { padding-top: var(--afs-space-1) !important; padding-bottom: var(--afs-space-1) !important; }
.py-2 { padding-top: var(--afs-space-2) !important; padding-bottom: var(--afs-space-2) !important; }
.py-3 { padding-top: var(--afs-space-3) !important; padding-bottom: var(--afs-space-3) !important; }
.py-4 { padding-top: var(--afs-space-4) !important; padding-bottom: var(--afs-space-4) !important; }
.py-5 { padding-top: var(--afs-space-5) !important; padding-bottom: var(--afs-space-5) !important; }

/* ==========================================================================
   Design system — soft SaaS-admin look (TailAdmin-inspired), built on
   Bootstrap 5 primitives. Tokens first, then component overrides.
   ========================================================================== */

:root {
  --afs-primary: #465fff;
  --afs-primary-dark: #3641d6;
  --afs-primary-light: #ecf0ff;

  --afs-success: #12b76a;
  --afs-success-bg: #ecfdf3;
  --afs-warning: #f79009;
  --afs-warning-bg: #fffaeb;
  --afs-danger: #f04438;
  --afs-danger-bg: #fef3f2;
  --afs-info: #0ba5ec;
  --afs-info-bg: #f0f9ff;

  --afs-gray-25: #fcfcfd;
  --afs-gray-50: #f9fafb;
  --afs-gray-100: #f2f4f7;
  --afs-gray-200: #e4e7ec;
  --afs-gray-300: #d0d5dd;
  --afs-gray-400: #98a2b3;
  --afs-gray-500: #667085;
  --afs-gray-600: #475467;
  --afs-gray-700: #344054;
  --afs-gray-800: #1d2939;
  --afs-gray-900: #101828;

  --afs-radius-sm: 0.5rem;
  --afs-radius: 0.75rem;
  --afs-radius-lg: 1rem;
  --afs-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* --- Base / typography --- */

body {
  padding-bottom: 0;
  background-color: var(--afs-gray-50);
  color: var(--afs-gray-800);
  font-family: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Nothing should ever cause the whole page to scroll sideways — any
     element needing horizontal scroll (e.g. .afs-tab-scroll, .table-
     responsive) handles it within its own bounds instead. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--afs-gray-900);
}

a { color: var(--afs-primary); }

.text-muted { color: var(--afs-gray-500) !important; }

/* --- Buttons --- */

.btn {
  border-radius: var(--afs-radius-sm);
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.btn-sm { border-radius: 0.375rem; }

.btn-primary {
  background-color: var(--afs-primary);
  border-color: var(--afs-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--afs-primary-dark) !important;
  border-color: var(--afs-primary-dark) !important;
}

.btn-outline-secondary {
  color: var(--afs-gray-600);
  border-color: var(--afs-gray-300);
  background: #fff;
}

.btn-outline-secondary:hover {
  background: var(--afs-gray-50);
  color: var(--afs-gray-800);
  border-color: var(--afs-gray-300);
}

.btn-outline-danger { border-radius: var(--afs-radius-sm); }

.text-primary { color: var(--afs-primary) !important; }
.bg-primary { background-color: var(--afs-primary) !important; }

/* --- Cards --- */

.card {
  border: 1px solid var(--afs-gray-200);
  border-radius: var(--afs-radius-lg);
  box-shadow: var(--afs-shadow-card);
}

.card-body { padding: 1.25rem; }

.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--afs-gray-900);
  margin-bottom: 1rem;
}

/* --- KPI / stat cards --- */

.afs-kpi-card {
  border: 1px solid var(--afs-gray-200);
  border-radius: var(--afs-radius-lg);
  box-shadow: var(--afs-shadow-card);
  transition: box-shadow 0.15s ease;
}

.afs-kpi-card:hover {
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}

.afs-kpi-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--afs-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--afs-primary-light);
  color: var(--afs-primary);
  margin-bottom: 0.75rem;
}

.afs-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--afs-gray-900);
  line-height: 1.2;
}

.afs-kpi-label {
  font-size: 0.8125rem;
  color: var(--afs-gray-500);
  font-weight: 500;
}

.afs-kpi-trend {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.afs-kpi-trend.up { background: var(--afs-success-bg); color: var(--afs-success); }
.afs-kpi-trend.down { background: var(--afs-danger-bg); color: var(--afs-danger); }

/* --- Badges / status pills --- */

.badge {
  font-weight: 500;
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
}

.badge.text-bg-success { background-color: var(--afs-success-bg) !important; color: var(--afs-success) !important; }
.badge.text-bg-warning { background-color: var(--afs-warning-bg) !important; color: var(--afs-warning) !important; }
.badge.text-bg-danger { background-color: var(--afs-danger-bg) !important; color: var(--afs-danger) !important; }
.badge.text-bg-info { background-color: var(--afs-info-bg) !important; color: var(--afs-info) !important; }
.badge.text-bg-secondary { background-color: var(--afs-gray-100) !important; color: var(--afs-gray-600) !important; }
.badge.text-bg-primary { background-color: var(--afs-primary-light) !important; color: var(--afs-primary) !important; }

/* --- Forms --- */

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--afs-gray-700);
  margin-bottom: 0.375rem;
}

.form-control,
.form-select {
  border: 1px solid var(--afs-gray-300);
  border-radius: var(--afs-radius-sm);
  padding: 0.5625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--afs-gray-800);
  background-color: #fff;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--afs-primary);
  box-shadow: 0 0 0 0.2rem rgba(70, 95, 255, 0.15);
}

.form-control::placeholder { color: var(--afs-gray-400); }

.form-control-sm, .form-select-sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: 0.375rem;
}

/* --- Tables --- */

.table {
  --bs-table-hover-bg: var(--afs-gray-25);
  color: var(--afs-gray-700);
  margin-bottom: 0;
}

.table > thead {
  background: var(--afs-gray-50);
}

.table > thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--afs-gray-500);
  border-bottom: 1px solid var(--afs-gray-200);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.table > tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--afs-gray-100);
  vertical-align: middle;
  font-size: 0.875rem;
}

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

/* --- Nav tabs (project detail) --- */

.nav-tabs {
  border-bottom: 1px solid var(--afs-gray-200);
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--afs-gray-500);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
}

.nav-tabs .nav-link.active {
  color: var(--afs-primary);
  border-bottom-color: var(--afs-primary);
  background: transparent;
}

.tab-content {
  border: 1px solid var(--afs-gray-200);
  border-top: none;
  border-radius: 0 0 var(--afs-radius-lg) var(--afs-radius-lg);
  background: #fff;
}

/* --- Modal --- */

.modal-content {
  border: none;
  border-radius: var(--afs-radius-lg);
  box-shadow: 0 20px 25px -5px rgba(16, 24, 40, 0.1);
}

.modal-header, .modal-footer {
  border-color: var(--afs-gray-200);
}

/* --- Pagination --- */

.pagination .page-link {
  border-color: var(--afs-gray-200);
  color: var(--afs-gray-600);
  border-radius: var(--afs-radius-sm);
  margin: 0 0.125rem;
}

.pagination .page-item.active .page-link {
  background-color: var(--afs-primary);
  border-color: var(--afs-primary);
}

/* --- Page header (icon chip inline with title + eyebrow breadcrumb link) --- */

.afs-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--afs-gray-200);
  /* border-radius: var(--afs-radius-lg); */
  box-shadow: var(--afs-shadow-card);
}

.afs-page-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--afs-radius-sm);
  background: var(--afs-primary-light);
  color: var(--afs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  flex-shrink: 0;
  vertical-align: middle;
}

.afs-page-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--afs-primary);
  margin-bottom: 0.25rem;
  text-decoration: none;
}

a.afs-page-eyebrow {
  transition: color 0.15s ease;
}

a.afs-page-eyebrow:hover {
  color: var(--afs-primary-dark);
  text-decoration: underline;
}

.afs-page-header h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.125rem;
}

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

/* --- Abbreviated money (hover to see the full comma-grouped amount) --- */

.afs-money {
  cursor: help;
  border-bottom: 1px dotted var(--afs-gray-300);
}

/* --- Dashboard task-report rows --- */

.afs-task-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--afs-radius);
  background: var(--afs-gray-50);
  transition: background 0.15s ease;
}

.afs-task-row:hover {
  background: var(--afs-gray-100);
}

.afs-task-status-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.afs-task-status-icon.completed { background: var(--afs-success-bg); color: var(--afs-success); }
.afs-task-status-icon.in-progress { background: var(--afs-info-bg); color: var(--afs-info); }
.afs-task-status-icon.pending { background: var(--afs-gray-100); color: var(--afs-gray-500); }

.afs-task-meta a {
  color: var(--afs-gray-500);
  text-decoration: none;
  font-weight: 500;
}

.afs-task-meta a:hover {
  color: var(--afs-primary);
}

/* --- Wizard stepper --- */

.afs-step-dot {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--afs-gray-100);
  color: var(--afs-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  border: 2px solid transparent;
}

.afs-step-dot.active {
  background: var(--afs-primary-light);
  color: var(--afs-primary);
  border-color: var(--afs-primary);
}

.afs-step-dot.done {
  background: var(--afs-success);
  color: #fff;
}

.afs-step-line {
  flex: 1;
  height: 2px;
  background: var(--afs-gray-200);
  margin: 0 0.5rem;
  margin-bottom: 1.6rem;
}

.afs-step-line.done {
  background: var(--afs-success);
}

/* --- Auth pages (login, etc.) --- */

.afs-auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 12% 15%, rgba(70, 95, 255, 0.14), transparent 40%),
    radial-gradient(circle at 88% 85%, rgba(18, 183, 106, 0.12), transparent 40%),
    var(--afs-gray-50);
}

.afs-auth-card {
  background: #fff;
  border-radius: var(--afs-radius-lg);
  box-shadow: 0 20px 25px -5px rgba(16, 24, 40, 0.1), 0 8px 10px -6px rgba(16, 24, 40, 0.06);
  max-width: 440px;
  width: 100%;
  overflow: hidden;
}

.afs-auth-card-accent {
  height: 0.3125rem;
  background: linear-gradient(90deg, var(--afs-primary), var(--afs-success));
}

.afs-auth-card-body {
  padding: 2.5rem 2.25rem;
}

@media (min-width: 768px) {
  .afs-auth-card-body {
    padding: 3rem 2.75rem;
  }
}

.afs-auth-logo {
  max-width: 220px;
  width: 100%;
  height: auto;
}

.afs-auth-card .input-group-text {
  background: var(--afs-gray-50);
  border-color: var(--afs-gray-300);
  color: var(--afs-gray-400);
}

.afs-auth-card .input-group .form-control {
  border-left: none;
}

.afs-auth-card .input-group .btn-outline-secondary {
  border-color: var(--afs-gray-300);
  color: var(--afs-gray-400);
}

.afs-auth-card .form-check-input:checked {
  background-color: var(--afs-primary);
  border-color: var(--afs-primary);
}

/* --- App chrome --- */

.afs-sidebar {
  height: 100vh;
  width: 260px;
  background: #fff;
  border-right: 1px solid var(--afs-gray-200);
  position: sticky;
  top: 0;
  transition: width 0.18s ease;
  overflow-x: hidden;
}

.afs-sidebar-scroll {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--afs-gray-300) transparent;
}

.afs-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.afs-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.afs-sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: var(--afs-gray-300);
  border-radius: 999px;
}

.afs-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--afs-gray-400);
}

.afs-sidebar.afs-collapsed {
  width: 4.75rem;
}

.afs-sidebar.afs-collapsed .afs-sidebar-brand {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.afs-sidebar.afs-collapsed .afs-logo-text,
.afs-sidebar.afs-collapsed .afs-sidebar-group-label,
.afs-sidebar.afs-collapsed .afs-nav-label {
  display: none;
}

.afs-sidebar.afs-collapsed .nav-link {
  justify-content: center;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.afs-sidebar.afs-collapsed .nav-link i {
  width: auto;
}

.afs-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.5rem 1.25rem 1rem;
}

.afs-sidebar-brand .afs-logo-mark {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.afs-logo-mark-lg {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}

.afs-sidebar-brand .afs-logo-text {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--afs-gray-900);
}

.afs-sidebar-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--afs-gray-400);
  padding: 0 1.25rem;
  margin: 1rem 0 0.5rem;
}

.afs-sidebar .nav {
  padding: 0 0.75rem;
}

.afs-sidebar .nav-link {
  color: var(--afs-gray-600);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--afs-radius-sm);
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.afs-sidebar .nav-link i {
  font-size: 1.125rem;
  width: 1.25rem;
  text-align: center;
  color: var(--afs-gray-400);
}

.afs-sidebar .nav-link.active,
.afs-sidebar .nav-link:hover {
  color: var(--afs-primary);
  background: var(--afs-primary-light);
}

.afs-sidebar .nav-link.active i,
.afs-sidebar .nav-link:hover i {
  color: var(--afs-primary);
}

.afs-sidebar .afs-submenu-toggle {
  border: none;
  background: none;
  cursor: pointer;
}

.afs-submenu-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.afs-submenu-toggle[aria-expanded="true"] .afs-submenu-chevron {
  transform: rotate(180deg);
}

.afs-sidebar-submenu {
  padding-left: 1.25rem;
  margin-top: 0.25rem;
}

.afs-sidebar-submenu .nav-link {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

.afs-content {
  flex: 1;
  min-width: 0;
}

.afs-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  border-bottom: 1px solid var(--afs-gray-200);
  padding: 0.875rem 1.5rem;
}

.afs-topbar .afs-page-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--afs-gray-900);
  margin: 0;
}

.afs-user-trigger {
  background: #fff;
  border: 1px solid var(--afs-gray-200);
  border-radius: 999px;
  padding: 0.3125rem 0.75rem 0.3125rem 0.3125rem;
}

.afs-sidebar-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--afs-radius-sm);
  background: var(--afs-gray-50);
  border: 1px solid var(--afs-gray-200);
  color: var(--afs-gray-500);
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.afs-sidebar-toggle:hover {
  background: var(--afs-primary-light);
  color: var(--afs-primary);
}

.afs-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--afs-primary-light);
  color: var(--afs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8125rem;
  overflow: hidden;
  object-fit: cover;
}

.afs-notif-trigger {
  background: #fff;
  border: 1px solid var(--afs-gray-200);
  border-radius: 999px;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--afs-gray-600, #495057);
}

.afs-draft-trigger-active {
  border-color: var(--bs-primary, #465fff);
  color: var(--bs-primary, #465fff);
}

.afs-draft-item {
  border-left: 3px solid transparent;
}

.afs-draft-item:hover {
  border-left-color: var(--bs-primary, #465fff);
  background-color: var(--bs-primary-bg-subtle, #eef1ff);
}

.afs-notif-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.25rem;
  line-height: 1.4;
  padding: 0.15em 0.45em;
  box-shadow: 0 0 0 2px #fff;
}

.afs-notif-menu {
  width: 320px;
  max-width: 90vw;
  overflow-x: hidden;
}

.afs-notif-menu > div:first-child {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.afs-notif-list {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

.afs-notif-list .dropdown-item {
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.afs-badge-orange {
  background-color: #fd7e14;
  color: #fff;
}

.afs-row-clickable {
  cursor: pointer;
}

/* Inline attachment preview chips (Office Task activity checklist) */
.afs-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 10rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: 1px solid var(--afs-gray-200);
  border-radius: var(--afs-radius-sm);
  background: var(--afs-gray-50);
  text-decoration: none;
  color: var(--afs-gray-700);
  font-size: 0.75rem;
}

.afs-attachment-chip:hover {
  background: var(--afs-gray-100);
  color: var(--afs-gray-900);
}

.afs-attachment-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--afs-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.afs-attachment-thumb-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--afs-primary-light);
  color: var(--afs-primary);
}

.afs-attachment-name {
  max-width: 6.5rem;
}

/* Forces the Add Expense line-items table to its natural width so
   .table-responsive's horizontal scrollbar engages on narrow screens (and
   in the modal's constrained width generally), instead of the browser
   squeezing every column — Store Item, Item name, Subcontractor — down
   to illegible slivers. */
.afs-line-items-table {
  min-width: 1020px;
}

.afs-line-items-table .store-item-select {
  min-width: 210px;
}

.afs-line-items-table input[name$="-item_name"] {
  min-width: 210px;
}

.afs-line-items-table .line-item-subcontractor-select {
  min-width: 160px;
}

/* Project detail tabs (Team/Activities/Expenses/.../Files) — on narrow
   screens there are too many tabs to wrap onto multiple lines cleanly, so
   scroll them horizontally in one row instead, with the active tab still
   reachable via a swipe/scroll rather than an awkward multi-row wrap. */
.afs-tab-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0 0.75rem;
}

.afs-tab-scroll .nav-tabs {
  flex-wrap: nowrap;
}

.afs-tab-scroll .nav-item,
.afs-tab-scroll .nav-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.afs-tab-scroll .nav-link {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 575.98px) {
  .afs-tab-scroll {
    padding: 0 0.5rem;
  }

  .afs-tab-scroll .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.afs-profile-avatar {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--afs-primary-light);
}

.afs-profile-avatar-sm {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.afs-profile-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--afs-primary-light);
  color: var(--afs-primary);
  font-weight: 700;
  font-size: 2.25rem;
}

.afs-profile-avatar-sm.afs-profile-avatar-fallback {
  font-size: 1.375rem;
}

/* Company logos are usually rectangular/wide banners, not square headshots
   — so unlike the circular user avatar, these stay boxy with contain-fit. */
.afs-company-logo {
  width: 100%;
  max-width: 10rem;
  height: 7rem;
  border-radius: var(--afs-radius);
  object-fit: contain;
  background: var(--afs-gray-50);
  border: 1px solid var(--afs-gray-200);
  padding: 0.5rem;
}

.afs-company-logo-sm {
  width: 5rem;
  height: 4rem;
  border-radius: var(--afs-radius-sm);
  object-fit: contain;
  background: var(--afs-gray-50);
  border: 1px solid var(--afs-gray-200);
  padding: 0.375rem;
  flex-shrink: 0;
}

.afs-company-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--afs-primary-light);
  color: var(--afs-primary);
  font-size: 2.25rem;
}

/* Reset a <button> to look like the surrounding link so logout forms
   (POST-only in Django 5+) can drop in wherever a plain <a> used to be. */
.afs-btn-link-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  width: 100%;
  text-align: inherit;
}

/* .afs-btn-link-reset's padding:0 strips Bootstrap's own .dropdown-item
   padding, leaving the Logout entry flush against the dropdown's left
   edge instead of aligned with Profile above it — restore it here. */
.dropdown-item.afs-btn-link-reset {
  padding: 0.25rem 1rem;
}

.afs-mobile-nav {
  display: none;
}

main.container-fluid {
  max-width: 1600px;
}

@media (max-width: 767.98px) {
  .afs-sidebar {
    display: none !important;
  }

  .afs-mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid var(--afs-gray-200);
    box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.06);
  }

  .afs-mobile-nav .nav-link {
    flex: 1;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--afs-gray-500);
    padding: 0.5rem var(--afs-space-2);
  }

  .afs-mobile-nav .nav-link.active {
    color: var(--afs-primary);
  }

  body {
    padding-bottom: 3.75rem;
  }

  /* Every table in the app is already wrapped in .table-responsive, but
     the browser's default column-shrinking/wrapping on narrow screens
     still squishes cell content illegibly instead of scrolling. Forcing
     cells to keep their natural width makes the table exceed its
     container when it has to, so .table-responsive's own overflow-x:auto
     engages properly — a horizontal scrollbar instead of squished text,
     for every table site-wide with no per-template changes. */
  .table-responsive .table th,
  .table-responsive .table td {
    white-space: nowrap;
  }

  /* The "More" panel is a vertical sidebar-style slide-in (not a bottom
     sheet) — narrower than Bootstrap's 400px offcanvas default so it reads
     like a compact nav drawer on a phone. */
  #afsMoreOffcanvas {
    width: 280px;
    max-width: 85vw;
  }
}

/* Tighter spacing for phones specifically (the 767.98px breakpoint above
   only handles the sidebar<->bottom-nav swap) — keeps the Staff/Supervisor
   dashboard (and every other page) clean and uncramped on small screens. */
@media (max-width: 575.98px) {
  main.container-fluid {
    padding: 0.75rem !important;
  }

  .afs-page-header {
    padding: 0.75rem 1rem;
  }

  .afs-page-header h3 {
    font-size: 1.25rem;
  }

  .afs-page-header-actions {
    width: 100%;
  }

  .afs-page-header-actions .btn {
    flex: 1 1 auto;
  }

  .afs-kpi-card .card-body,
  .card .card-body {
    padding: 0.875rem;
  }
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

.afs-submit-spinner {
  display: none;
}

.afs-submitting .afs-submit-spinner {
  display: inline-block;
}

.afs-submitting .afs-submit-label {
  opacity: 0.7;
}

/* ==========================================================================
   CRM-specific additions
   ========================================================================== */

/* Brand mark fallback when no company logo is uploaded in Site Settings. */
.afs-logo-chip {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--afs-radius-sm);
  background: var(--afs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.afs-auth-logo-chip {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.625rem;
  border-radius: var(--afs-radius);
}

/* Deal pipeline summary: one segment per stage, sized by deal count. */
.afs-pipeline {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.afs-pipeline-stage {
  flex: 1 0 9rem;
  border: 1px solid var(--afs-gray-200);
  border-radius: var(--afs-radius);
  background: #fff;
  padding: 0.75rem 0.875rem;
  text-decoration: none;
  color: inherit;
  border-top: 3px solid var(--afs-primary);
  transition: box-shadow 0.15s ease;
}

.afs-pipeline-stage:hover {
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
  color: inherit;
}

.afs-pipeline-stage.stage-won { border-top-color: var(--afs-success); }
.afs-pipeline-stage.stage-lost { border-top-color: var(--afs-danger); }
.afs-pipeline-stage.stage-negotiation { border-top-color: var(--afs-warning); }
.afs-pipeline-stage.stage-proposal { border-top-color: var(--afs-info); }

.afs-pipeline-stage .stage-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--afs-gray-500);
}

.afs-pipeline-stage .stage-count {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--afs-gray-900);
}

/* Customer/lead detail: label/value list inside a card. */
.afs-detail-list dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--afs-gray-500);
}

.afs-detail-list dd {
  font-size: 0.875rem;
  color: var(--afs-gray-800);
  margin-bottom: 0.75rem;
}

/* Message body preview in the communications log. */
.afs-message-preview {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Line-numbered textarea (terms & conditions editor) */
.afs-numbered-textarea {
  display: flex;
  border: 1px solid var(--afs-gray-300);
  border-radius: var(--afs-radius-sm);
  background: #fff;
  overflow: hidden;
}

.afs-numbered-textarea:focus-within {
  border-color: var(--afs-primary);
  box-shadow: 0 0 0 0.2rem rgba(70, 95, 255, 0.15);
}

.afs-line-gutter {
  flex: 0 0 2.5rem;
  padding: 0.5625rem 0.5rem 0.5625rem 0;
  background: var(--afs-gray-50);
  border-right: 1px solid var(--afs-gray-200);
  color: var(--afs-gray-400);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: right;
  overflow: hidden;
  user-select: none;
}

.afs-numbered-textarea textarea {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: vertical;
  overflow-x: auto;
  white-space: pre;
}

/* ==========================================================================
   Compact density — tighter component padding/margins across the app to
   fit more information on screen (especially phones). Utility spacing
   (p-*, px-*…) is already at half scale at the top of this file.
   ========================================================================== */

.card-body { padding: 0.875rem 1rem; }
.card-title { margin-bottom: 0.625rem; }

.table > thead th { padding: 0.5rem 0.75rem; }
.table > tbody td { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.table-sm > tbody td, .table-sm > thead th { padding: 0.375rem 0.5rem; }

.form-label { margin-bottom: 0.25rem; }
.form-control, .form-select { padding: 0.4375rem 0.75rem; font-size: 0.8125rem; }
.form-select { padding-right: 2.25rem; }
.mb-3:has(> .form-label) { margin-bottom: 0.75rem !important; }

.btn { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

.modal-header, .modal-footer { padding: 0.625rem 1rem; }
.modal-body { padding: 0.875rem 1rem; }

.afs-page-header { padding: 0.75rem 1rem; margin-bottom: 1rem; }
.afs-topbar { padding: 0.5rem 1rem; }
main.container-fluid.p-4 { padding: 1rem !important; }

.afs-kpi-icon { width: 2.5rem; height: 2.5rem; font-size: 1.0625rem; margin-bottom: 0.5rem; }
.afs-kpi-value { font-size: 1.3125rem; }

.nav-tabs .nav-link { padding: 0.5rem 0.875rem; }
.afs-sidebar .nav-link { padding: 0.5rem 0.75rem; }
.badge { padding: 0.25rem 0.625rem; }

@media (max-width: 575.98px) {
  main.container-fluid.p-4 { padding: 0.625rem !important; }
  .card-body, .afs-kpi-card .card-body { padding: 0.75rem; }
  .table > tbody td, .table > thead th { padding: 0.4375rem 0.625rem; }
  .modal-body { padding: 0.75rem; }
}

/* Spec: data tables scroll horizontally inside their card on small screens. */
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Catalog thumbnails & line items --- */
.afs-product-thumb {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--afs-radius-sm);
  object-fit: cover;
  border: 1px solid var(--afs-gray-200);
  background: #fff;
  flex-shrink: 0;
}

.afs-product-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--afs-gray-50);
  color: var(--afs-gray-400);
}

.afs-line-item {
  border: 1px solid var(--afs-gray-200);
  border-radius: var(--afs-radius);
  padding: 0.625rem;
  background: var(--afs-gray-25);
}

.afs-line-item textarea { resize: vertical; min-height: 2rem; }

.afs-totals td { border: none !important; padding: 0.25rem 0.5rem !important; }
.afs-totals tr:last-child td { border-top: 2px solid var(--afs-gray-200) !important; padding-top: 0.5rem !important; }

/* --- Document "paper" preview (detail page & public link) --- */
.afs-paper {
  background: #fff;
  border: 1px solid var(--afs-gray-200);
  border-radius: var(--afs-radius);
  padding: 1.5rem;
}

.afs-paper-logo { max-height: 3.5rem; max-width: 11rem; object-fit: contain; }
.afs-paper h2 { font-size: 1.375rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--afs-primary); }
.afs-paper .afs-paper-meta dt { font-size: 0.6875rem; color: var(--afs-gray-500); text-transform: uppercase; font-weight: 600; }
.afs-paper .afs-paper-meta dd { font-size: 0.8125rem; margin-bottom: 0.375rem; }
.afs-paper .afs-terms li { font-size: 0.8125rem; color: var(--afs-gray-600); margin-bottom: 0.125rem; }

@media (max-width: 575.98px) {
  .afs-paper { padding: 0.875rem; }
}

/* --- Dashboard swiper: pending quotations & invoices --- */
.afs-pending-swiper { padding-bottom: 1.75rem !important; }
.afs-pending-swiper .swiper-slide { height: auto; }
.afs-pending-swiper .swiper-pagination-bullet-active { background: var(--afs-primary); }

.afs-doc-card {
  display: block;
  height: 100%;
  border: 1px solid var(--afs-gray-200);
  border-left: 4px solid var(--afs-warning);
  border-radius: var(--afs-radius);
  background: #fff;
  padding: 0.75rem 0.875rem;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.afs-doc-card.kind-invoice { border-left-color: var(--afs-primary); }
.afs-doc-card.is-late { border-left-color: var(--afs-danger); }

.afs-doc-card:hover {
  color: inherit;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.1);
  transform: translateY(-1px);
}

.afs-doc-card .doc-number { font-weight: 700; font-size: 0.9375rem; color: var(--afs-gray-900); }
.afs-doc-card .doc-total { font-size: 1.125rem; font-weight: 700; color: var(--afs-gray-900); }

/* --- Sidebar dropdown groups & phone menu drawer --- */
.afs-sidebar .nav-link.afs-group-active,
.afs-drawer-nav .nav-link.afs-group-active { color: var(--afs-gray-900); font-weight: 600; }
.afs-sidebar .nav-link.afs-group-active > i:first-child,
.afs-drawer-nav .nav-link.afs-group-active > i:first-child { color: var(--afs-primary); }

/* The phone "More" drawer reuses the sidebar's nav markup (the sidebar
   itself is hidden below 768px), so mirror its link styles here. */
.afs-drawer-nav .nav { padding: 0; }
.afs-drawer-nav .nav-link {
  color: var(--afs-gray-600);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--afs-radius-sm);
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.afs-drawer-nav .nav-link i { font-size: 1.125rem; width: 1.25rem; text-align: center; color: var(--afs-gray-400); }
.afs-drawer-nav .nav-link.active,
.afs-drawer-nav .nav-link:hover { color: var(--afs-primary); background: var(--afs-primary-light); }
.afs-drawer-nav .nav-link.active i,
.afs-drawer-nav .nav-link:hover i { color: var(--afs-primary); }
.afs-drawer-nav .afs-submenu-toggle { border: none; background: none; cursor: pointer; }
.afs-drawer-nav .afs-sidebar-submenu { padding-left: 1.25rem; margin-top: 0.25rem; }
.afs-drawer-nav .afs-sidebar-submenu .nav-link { font-size: 0.8125rem; padding: 0.4375rem 0.75rem; }
.afs-drawer-nav .afs-sidebar-group-label { padding: 0 0.75rem; }

/* Collapsed (icon-only) sidebar: keep dropdown children tight under the group icon. */
.afs-sidebar.afs-collapsed .afs-sidebar-submenu { padding-left: 0; }
.afs-sidebar.afs-collapsed .afs-submenu-chevron { display: none; }

/* --- Searchable dropdowns (Choices.js) — match the form-select look --- */
.choices { margin-bottom: 0; font-size: 0.8125rem; }
.choices__inner {
  min-height: auto;
  padding: 0.3125rem 0.625rem !important;
  border: 1px solid var(--afs-gray-300);
  border-radius: var(--afs-radius-sm);
  background-color: #fff;
  font-size: 0.8125rem;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--afs-primary);
  box-shadow: 0 0 0 0.2rem rgba(70, 95, 255, 0.15);
}
.choices.is-open .choices__inner { border-radius: var(--afs-radius-sm) var(--afs-radius-sm) 0 0; }
.choices__list--single { padding: 0.125rem 1.25rem 0.125rem 0.125rem; }
.choices__list--dropdown, .choices__list[aria-expanded] {
  border-color: var(--afs-primary);
  border-radius: 0 0 var(--afs-radius-sm) var(--afs-radius-sm);
  z-index: 1060; /* above modals' content and sticky headers */
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--afs-primary-light); }
.choices__input { font-size: 0.8125rem; margin-bottom: 0; }
.choices[data-type*="select-one"]::after { border-color: var(--afs-gray-500) transparent transparent; }

/* Compact variant for the filter bars (was .form-select-sm) */
.afs-choices-sm { min-width: 11rem; }
.afs-choices-sm .choices__inner { padding: 0.1875rem 0.5rem !important; min-height: 0; }
.afs-choices-sm .choices__list--single { padding-top: 0.0625rem; padding-bottom: 0.0625rem; }

/* --- File tracking --- */
.afs-file-result { border-left: 4px solid var(--afs-primary); }
.afs-file-result.in-store { border-left-color: var(--afs-warning); }

.afs-file-location {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--afs-radius);
  background: var(--afs-primary-light);
  color: var(--afs-primary);
}
.afs-file-result.in-store .afs-file-location,
.afs-file-location.in-store { background: var(--afs-warning-bg); color: #b54708; }
.afs-file-location > i { font-size: 1.375rem; }
.afs-file-location .loc-main { font-weight: 700; font-size: 0.9375rem; line-height: 1.2; }
.afs-file-location .loc-sub { font-size: 0.8125rem; color: var(--afs-gray-600); }
.afs-file-location-lg { padding: 0.875rem 1rem; }
.afs-file-location-lg > i { font-size: 2rem; }
.afs-file-location-lg .loc-main { font-size: 1.25rem; }

/* Cabinet cell grid */
.afs-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}
.afs-cell {
  border: 1px solid var(--afs-gray-200);
  border-radius: var(--afs-radius);
  background: #fff;
  padding: 0.625rem 0.75rem;
  text-align: left;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.afs-cell:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08); }
.afs-cell.has-files { border-left: 4px solid var(--afs-primary); }
.afs-cell.active { border-color: var(--afs-primary); background: var(--afs-primary-light); }
.afs-cell .cell-name { font-weight: 600; font-size: 0.875rem; color: var(--afs-gray-900); }
.afs-cell .cell-count { font-size: 0.75rem; color: var(--afs-gray-500); }

/* --- Line item image picker (quotations / invoices) --- */
.afs-photo-picker { position: relative; display: inline-block; cursor: pointer; margin: 0; }
.afs-photo-picker .afs-product-thumb { width: 3.25rem; height: 3.25rem; }
.afs-photo-picker-badge {
  position: absolute;
  right: -0.375rem;
  bottom: -0.375rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--afs-primary);
  color: #fff;
  font-size: 0.6875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.afs-photo-picker:hover .afs-product-thumb { border-color: var(--afs-primary); }

/* Line item image panel — right side of each line, size S / M / L
   (preview scales with the choice; M is the default). */
.afs-line-image-panel { --afs-line-img: 6rem; width: max(var(--afs-line-img), 8rem); }
.afs-line-image-panel[data-size="S"] { --afs-line-img: 3.75rem; }
.afs-line-image-panel[data-size="M"] { --afs-line-img: 6rem; }
.afs-line-image-panel[data-size="L"] { --afs-line-img: 9.5rem; }
.afs-line-image-panel .afs-photo-picker { display: flex; justify-content: center; width: 100%; }
.afs-line-photo {
  width: var(--afs-line-img);
  height: var(--afs-line-img);
  object-fit: contain;
  border: 1px solid var(--afs-gray-200);
  border-radius: var(--afs-radius-sm);
  background: #fff;
  transition: width 0.15s ease, height 0.15s ease;
}
.afs-line-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  color: var(--afs-gray-400);
  background: var(--afs-gray-50);
  border-style: dashed;
  font-size: 0.6875rem;
}
.afs-line-photo-empty i { font-size: 1.25rem; }
.afs-photo-picker:hover .afs-line-photo { border-color: var(--afs-primary); }
.afs-line-image-panel .afs-photo-picker-badge { right: calc(50% - var(--afs-line-img) / 2 - 0.375rem); }
.afs-line-image-tools { margin-top: 0.375rem; }
.afs-line-image-tools .form-select-sm { padding-top: 0.125rem; padding-bottom: 0.125rem; font-size: 0.75rem; }

@media (max-width: 767.98px) {
  /* Phone: panel spans the row under the fields, image + tools side by side. */
  .afs-line-image-panel { width: 100%; display: flex; gap: 0.75rem; align-items: flex-start; }
  .afs-line-image-panel .afs-photo-picker { width: auto; }
  .afs-line-image-panel .afs-photo-picker-badge { right: -0.375rem; }
  .afs-line-image-tools { margin-top: 0; flex: 1; max-width: 12rem; }
}

/* Document page / customer link: item text left, image right. */
.afs-item-cell { display: flex; gap: 0.75rem; justify-content: space-between; align-items: flex-start; }
.afs-item-image { flex-shrink: 0; object-fit: contain; border: 1px solid var(--afs-gray-200); border-radius: var(--afs-radius-sm); background: #fff; height: auto; }

/* Company payment details box (right of Terms & Conditions on quotes/invoices) */
.afs-payment-box {
  background: var(--afs-gray-50);
  border: 1px solid var(--afs-gray-200);
  border-left: 3px solid var(--afs-primary);
  border-radius: var(--afs-radius-sm);
  padding: 0.75rem 0.875rem;
}