/* ============================================================
   CRM SYSTEM — COMPLETE STYLESHEET
   Compatible with: AdminLTE 3 + Bootstrap 5
   Covers: Layout, Cards, Buttons, Forms, Tables, DataTables,
           Filter Panel, Status Badges, Modals, Sidebar,
           Line Items, Dark Mode
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. CSS VARIABLES (Light + Dark)
───────────────────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --crm-primary:       #4f8ef7;
  --crm-primary-light: rgba(79, 142, 247, 0.12);
  --crm-primary-ring:  rgba(79, 142, 247, 0.30);
  --crm-success:       #38d9a9;
  --crm-warning:       #f7c94f;
  --crm-danger:        #f7806a;
  --crm-info:          #38b2f7;
  --crm-purple:        #b87cf7;

  /* Surface / BG */
  --crm-bg:            #f4f6fb;
  --crm-surface:       #ffffff;
  --crm-surface2:      #f0f4ff;
  --crm-border:        rgba(99, 130, 191, 0.18);
  --crm-border-strong: rgba(99, 130, 191, 0.35);

  /* Text */
  --crm-text:          #1e2a3a;
  --crm-muted:         #6b7fa3;
  --crm-label:         #4a5578;

  /* Sidebar */
  --crm-sidebar-bg:    #1a2236;
  --crm-sidebar-text:  #8a9bb8;
  --crm-sidebar-hover: rgba(79, 142, 247, 0.14);
  --crm-sidebar-active:#4f8ef7;

  /* Table */
  --crm-table-header-bg: #f8faff;
  --crm-table-row-hover: rgba(79, 142, 247, 0.04);
  --crm-table-border:    rgba(99, 130, 191, 0.12);

  /* Inputs */
  --crm-input-bg:      #ffffff;
  --crm-input-border:  rgba(99, 130, 191, 0.45);
  --crm-input-focus:   #4f8ef7;
  --crm-input-text:    #1e2a3a;

  /* Shadows */
  --crm-shadow-sm:  0 2px 8px rgba(15, 23, 42, 0.06);
  --crm-shadow-md:  0 6px 18px rgba(15, 23, 42, 0.09);
  --crm-shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.13);

  /* Border radius */
  --crm-radius-sm: 6px;
  --crm-radius:    10px;
  --crm-radius-lg: 14px;

  /* Transitions */
  --crm-transition: all 0.18s ease;
}

/* Dark Mode overrides */
body.dark-mode {
  --crm-bg:            #0c0f1a;
  --crm-surface:       #111827;
  --crm-surface2:      #1a2236;
  --crm-border:        rgba(99, 130, 191, 0.20);
  --crm-border-strong: rgba(99, 130, 191, 0.40);
  --crm-text:          #e2e8f8;
  --crm-muted:         #6b7fa3;
  --crm-label:         #8a9bb8;
  --crm-table-header-bg: #131929;
  --crm-table-row-hover: rgba(79, 142, 247, 0.07);
  --crm-table-border:    rgba(99, 130, 191, 0.10);
  --crm-input-bg:      #0c1221;
  --crm-input-border:  rgba(99, 130, 191, 0.35);
  --crm-input-text:    #e2e8f8;
  --crm-shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.35);
  --crm-shadow-md:  0 6px 20px rgba(0, 0, 0, 0.45);
  --crm-shadow-lg:  0 12px 36px rgba(0, 0, 0, 0.60);
}


/* ─────────────────────────────────────────────────────────────
   2. BASE RESET & BODY
───────────────────────────────────────────────────────────── */
body {
  background-color: var(--crm-bg);
  color: var(--crm-text);
  font-size: 14px;
  line-height: 1.6;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99, 130, 191, 0.28); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 130, 191, 0.45); }


/* ─────────────────────────────────────────────────────────────
   3. CONTENT HEADER (breadcrumb + title area)
───────────────────────────────────────────────────────────── */
.content-header {
  padding: 14px 20px 10px;
  background: var(--crm-surface);
  border-bottom: 1px solid var(--crm-border);
  margin-bottom: 0;
}

.content-header h1,
.content-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--crm-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.content-header #po_no_display,
.content-header #so_no_display,
.content-header #invoice_no_display {
  color: var(--crm-primary);
  font-weight: 800;
}

/* Breadcrumb */
.content-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}
.content-header .breadcrumb-item a {
  color: var(--crm-primary);
  text-decoration: none;
  transition: var(--crm-transition);
}
.content-header .breadcrumb-item a:hover { opacity: 0.75; }
.content-header .breadcrumb-item.active { color: var(--crm-muted); }
.content-header .breadcrumb-item + .breadcrumb-item::before {
  color: var(--crm-muted);
}


/* ─────────────────────────────────────────────────────────────
   4. SECTION CONTENT WRAPPER
───────────────────────────────────────────────────────────── */
.content-wrapper {
  background: var(--crm-bg);
  min-height: calc(100vh - 57px);
}
.content { padding: 20px; }


/* ─────────────────────────────────────────────────────────────
   5. CARDS — BASE
───────────────────────────────────────────────────────────── */
.card {
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius-lg);
  box-shadow: var(--crm-shadow-sm);
  margin-bottom: 1.25rem;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--crm-border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--crm-radius-lg) var(--crm-radius-lg) 0 0;
}

.card-header h5,
.card-header .card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--crm-text);
  margin: 0;
}

.card-body { padding: 1.1rem 1.25rem; }

.card-footer {
  background: transparent;
  border-top: 1px solid var(--crm-border);
  padding: 12px 20px;
  border-radius: 0 0 var(--crm-radius-lg) var(--crm-radius-lg);
}

/* Card variants */
.card.card-outline {
  border-top: 3px solid var(--crm-primary);
  box-shadow: var(--crm-shadow-md);
}
.card.card-outline-success { border-top-color: var(--crm-success); }
.card.card-outline-warning  { border-top-color: var(--crm-warning); }
.card.card-outline-danger   { border-top-color: var(--crm-danger);  }
.card.card-outline-info     { border-top-color: var(--crm-info);    }

/* Quotes / module card style (used in PO, SO pages) */
.quotes-card {
  border-radius: var(--crm-radius-lg);
  border: 1px solid var(--crm-border);
  box-shadow: var(--crm-shadow-md);
  background: var(--crm-surface);
}
.quotes-card .card-header {
  border-bottom: 1px solid var(--crm-border);
  background: transparent;
}
.quotes-card .card-body { padding: 1rem 1.25rem; }
.quotes-card label.form-label {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--crm-label);
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   6. FORM CONTROLS
───────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  min-height: 40px;
  border-radius: var(--crm-radius);
  border: 1px solid var(--crm-input-border);
  background-color: var(--crm-input-bg);
  color: var(--crm-input-text);
  font-size: 0.88rem;
  box-shadow: none;
  transition: var(--crm-transition);
  padding: 8px 12px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--crm-input-focus);
  box-shadow: 0 0 0 3px var(--crm-primary-ring);
  background-color: var(--crm-input-bg);
  color: var(--crm-input-text);
  outline: none;
}

.form-control::placeholder { color: var(--crm-muted); opacity: 0.7; }

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--crm-surface2);
  color: var(--crm-muted);
  cursor: not-allowed;
}

/* Small variant */
.form-control-sm,
.form-select-sm {
  min-height: 34px;
  font-size: 0.83rem;
  padding: 5px 10px;
  border-radius: var(--crm-radius-sm);
}

/* Textarea */
textarea.form-control {
  min-height: 80px;
  resize: vertical;
  line-height: 1.55;
}

/* Form label */
.form-label,
label.col-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--crm-label);
  margin-bottom: 4px;
}
label.form-label.small,
label.form-label.fw-semibold {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--crm-muted);
}

/* Row form groups (AdminLTE style) */
.form-group.row {
  margin-bottom: 1rem;
  align-items: center;
}
.form-group.row label.col-form-label {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Dark mode form controls */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: var(--crm-input-bg);
  border-color: var(--crm-input-border);
  color: var(--crm-input-text);
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: var(--crm-info);
  box-shadow: 0 0 0 3px rgba(56, 178, 247, 0.25);
}
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
  background-color: #0a101e;
  color: var(--crm-muted);
}


/* ─────────────────────────────────────────────────────────────
   7. DATE RANGE PICKER WRAPPER (y5-date-range-wrap)
───────────────────────────────────────────────────────────── */
.y5-date-range-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.y5-date-range-wrap .form-control {
  padding-right: 60px; /* room for icons */
}

.y5-date-cal-icon {
  position: absolute;
  right: 34px;
  color: var(--crm-muted);
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 2;
}

.y5-date-clear-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  padding: 4px 6px;
  color: var(--crm-muted);
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  z-index: 2;
  transition: var(--crm-transition);
}
.y5-date-clear-btn:hover {
  color: var(--crm-danger);
  background: rgba(247, 128, 106, 0.1);
}

/* Collapsible field animation (y5-field-collapse) */
.y5-field-collapse {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
}
.y5-field-collapse-visible {
  max-height: 200px;
  opacity: 1;
  margin-bottom: 0.75rem;
}
.y5-field-collapse-hidden {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────
   8. FILTER PANEL (y5-filter-card)
───────────────────────────────────────────────────────────── */
.y5-filter-card {
  border-radius: var(--crm-radius-lg);
  border: 1px solid var(--crm-border);
  box-shadow: var(--crm-shadow-sm);
  background: var(--crm-surface);
}

.y5-filter-card .card-header {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--crm-text);
  padding: 12px 18px;
  cursor: pointer;
}

.y5-filter-card .card-body {
  padding: 18px 20px;
}

/* Filter form grid */
#poFilterForm,
#soFilterForm,
#invoiceFilterForm,
#bookingFilterForm,
#containerFilterForm {
  row-gap: 14px;
}

/* Filter toggle button */
.y5-filter-card [data-bs-toggle="collapse"] {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--crm-radius-sm);
  transition: var(--crm-transition);
}

/* Search & Reset button row in filter */
.y5-filter-card .col-md-3.d-flex {
  gap: 8px;
}


/* ─────────────────────────────────────────────────────────────
   9. BUTTONS
───────────────────────────────────────────────────────────── */

/* Base button reset + shared styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.86rem;
  border-radius: var(--crm-radius);
  padding: 8px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--crm-transition);
  white-space: nowrap;
  line-height: 1.4;
}
.btn:focus { box-shadow: none; outline: none; }
.btn-sm {
  padding: 5px 12px;
  font-size: 0.80rem;
  border-radius: var(--crm-radius-sm);
  gap: 5px;
}
.btn-lg {
  padding: 11px 26px;
  font-size: 0.96rem;
  border-radius: var(--crm-radius-lg);
}

/* Primary */
.btn-primary {
  background: var(--crm-primary);
  border-color: var(--crm-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: #3a7ae8;
  border-color: #3a7ae8;
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 142, 247, 0.35);
}
.btn-primary:active { background: #2d69d4; }

/* Success */
.btn-success {
  background: var(--crm-success);
  border-color: var(--crm-success);
  color: #0d2018;
}
.btn-success:hover, .btn-success:focus {
  background: #27c49a;
  border-color: #27c49a;
  color: #0d2018;
  box-shadow: 0 4px 12px rgba(56, 217, 169, 0.35);
}

/* Info */
.btn-info {
  background: var(--crm-info);
  border-color: var(--crm-info);
  color: #fff;
}
.btn-info:hover, .btn-info:focus {
  background: #25a3e8;
  border-color: #25a3e8;
  color: #fff;
  box-shadow: 0 4px 12px rgba(56, 178, 247, 0.35);
}

/* Warning */
.btn-warning {
  background: var(--crm-warning);
  border-color: var(--crm-warning);
  color: #2a1e00;
}
.btn-warning:hover, .btn-warning:focus {
  background: #e8b82e;
  border-color: #e8b82e;
  color: #2a1e00;
  box-shadow: 0 4px 12px rgba(247, 201, 79, 0.35);
}

/* Danger */
.btn-danger {
  background: var(--crm-danger);
  border-color: var(--crm-danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
  background: #e86550;
  border-color: #e86550;
  color: #fff;
  box-shadow: 0 4px 12px rgba(247, 128, 106, 0.35);
}

/* Secondary */
.btn-secondary {
  background: #e2e8f4;
  border-color: #d0d8ee;
  color: #4a5578;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: #d4ddf0;
  border-color: #c0cadf;
  color: #2a3455;
}
body.dark-mode .btn-secondary {
  background: #1e2d48;
  border-color: rgba(99, 130, 191, 0.3);
  color: #8a9bb8;
}
body.dark-mode .btn-secondary:hover {
  background: #253454;
  color: #c8d4f0;
}

/* Outline variants */
.btn-outline-primary {
  background: transparent;
  border-color: var(--crm-primary);
  color: var(--crm-primary);
}
.btn-outline-primary:hover {
  background: var(--crm-primary-light);
  color: var(--crm-primary);
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--crm-border-strong);
  color: var(--crm-muted);
}
.btn-outline-secondary:hover {
  background: var(--crm-surface2);
  color: var(--crm-text);
  border-color: var(--crm-primary);
}

.btn-outline-danger {
  background: transparent;
  border-color: var(--crm-danger);
  color: var(--crm-danger);
}
.btn-outline-danger:hover {
  background: rgba(247, 128, 106, 0.1);
  color: var(--crm-danger);
}

/* disabled state */
.btn:disabled,
.btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* d-none pattern for edit-mode buttons */
.btn.d-none { display: none !important; }


/* ─────────────────────────────────────────────────────────────
   10. DATATABLES (listing tables)
───────────────────────────────────────────────────────────── */
table.dataTable,
.table {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 0.86rem;
  color: var(--crm-text);
}

/* Header */
table.dataTable thead th,
.table thead th {
  background: var(--crm-table-header-bg);
  color: var(--crm-label);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  border-bottom: 2px solid var(--crm-border-strong);
  white-space: nowrap;
}

body.dark-mode table.dataTable thead th,
body.dark-mode .table thead th {
  background: var(--crm-table-header-bg);
  color: var(--crm-muted);
  border-bottom-color: rgba(99, 130, 191, 0.25);
}

/* Body rows */
table.dataTable tbody td,
.table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--crm-table-border);
  vertical-align: middle;
  color: var(--crm-text);
}

table.dataTable tbody tr:hover td,
.table-hover tbody tr:hover td {
  background: var(--crm-table-row-hover);
}

/* Bordered variant */
.table-bordered,
table.dataTable.table-bordered {
  border: 1px solid var(--crm-border);
}
.table-bordered td,
.table-bordered th {
  border: 1px solid var(--crm-table-border);
}

/* Striped */
.table-striped tbody tr:nth-of-type(odd) td {
  background: rgba(79, 142, 247, 0.025);
}

/* Small variant (line items table) */
.table-sm td,
.table-sm th {
  padding: 7px 10px;
  font-size: 0.83rem;
}

/* DataTables toolbar */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.82rem;
  color: var(--crm-muted);
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--crm-input-border);
  border-radius: var(--crm-radius-sm);
  background: var(--crm-input-bg);
  color: var(--crm-input-text);
  padding: 4px 8px;
  font-size: 0.82rem;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--crm-primary);
  outline: none;
  box-shadow: 0 0 0 2px var(--crm-primary-ring);
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--crm-radius-sm) !important;
  border: 1px solid var(--crm-border) !important;
  color: var(--crm-muted) !important;
  background: transparent !important;
  padding: 4px 10px !important;
  font-size: 0.82rem !important;
  margin: 0 2px !important;
  transition: var(--crm-transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--crm-primary-light) !important;
  border-color: var(--crm-primary) !important;
  color: var(--crm-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--crm-primary) !important;
  border-color: var(--crm-primary) !important;
  color: #fff !important;
  font-weight: 700;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.35;
  cursor: default;
  background: transparent !important;
}

/* Action column buttons in DataTable rows */
.dt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--crm-transition);
  text-decoration: none;
}
.dt-action-btn.view   { color: var(--crm-info);    background: rgba(56,178,247,0.1);   border-color: rgba(56,178,247,0.2); }
.dt-action-btn.edit   { color: var(--crm-warning);  background: rgba(247,201,79,0.1);  border-color: rgba(247,201,79,0.2); }
.dt-action-btn.delete { color: var(--crm-danger);   background: rgba(247,128,106,0.1); border-color: rgba(247,128,106,0.2); }
.dt-action-btn:hover  { transform: scale(1.1); box-shadow: var(--crm-shadow-sm); }

/* Table responsive wrapper */
.table-responsive {
  border-radius: var(--crm-radius);
  overflow-x: auto;
}


/* ─────────────────────────────────────────────────────────────
   11. PO / SO LINE ITEMS TABLE (poItemsTable, soItemsTable)
───────────────────────────────────────────────────────────── */
#poItemsTable,
#soItemsTable,
#invoiceItemsTable {
  font-size: 0.85rem;
}

#poItemsTable thead th,
#soItemsTable thead th,
#invoiceItemsTable thead th {
  background: var(--crm-table-header-bg);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--crm-label);
  padding: 9px 10px;
}

#poItemsTable tbody td input,
#soItemsTable tbody td input,
#invoiceItemsTable tbody td input {
  border: 1px solid var(--crm-input-border);
  border-radius: 6px;
  padding: 5px 8px;
  width: 100%;
  background: var(--crm-input-bg);
  color: var(--crm-input-text);
  font-size: 0.84rem;
  transition: var(--crm-transition);
}

#poItemsTable tbody td input:focus,
#soItemsTable tbody td input:focus,
#invoiceItemsTable tbody td input:focus {
  border-color: var(--crm-primary);
  box-shadow: 0 0 0 2px var(--crm-primary-ring);
  outline: none;
}

/* No column (read-only row number) */
#poItemsTable td:first-child,
#soItemsTable td:first-child,
#invoiceItemsTable td:first-child {
  text-align: center;
  font-weight: 600;
  color: var(--crm-muted);
  font-size: 0.78rem;
  width: 42px;
}

/* Total column (calculated) */
#poItemsTable td:last-child input,
#soItemsTable td:last-child input,
#invoiceItemsTable td:last-child input {
  background: var(--crm-surface2);
  color: var(--crm-muted);
  cursor: default;
  pointer-events: none;
}

/* Add row button group */
#poAddRowButtons,
#soAddRowButtons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────
   12. STATUS BADGES
───────────────────────────────────────────────────────────── */
.crm-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Open */
.crm-badge.s-open,
.badge-open {
  background: rgba(79, 142, 247, 0.13);
  color: #4f8ef7;
  border-color: rgba(79, 142, 247, 0.28);
}

/* Confirmed */
.crm-badge.s-confirmed,
.badge-confirmed {
  background: rgba(56, 217, 169, 0.13);
  color: #27c49a;
  border-color: rgba(56, 217, 169, 0.28);
}

/* Closed */
.crm-badge.s-closed,
.badge-closed {
  background: rgba(106, 116, 140, 0.15);
  color: #7a8aac;
  border-color: rgba(106, 116, 140, 0.28);
}

/* Pending / Unpaid */
.crm-badge.s-pending,
.badge-pending,
.badge-unpaid {
  background: rgba(247, 201, 79, 0.13);
  color: #c89b20;
  border-color: rgba(247, 201, 79, 0.28);
}

body.dark-mode .crm-badge.s-pending,
body.dark-mode .badge-pending {
  color: #fad46b;
}

/* Partial */
.crm-badge.s-partial,
.badge-partial {
  background: rgba(247, 201, 79, 0.08);
  color: #d4a017;
  border-color: rgba(247, 201, 79, 0.20);
}

/* Paid */
.crm-badge.s-paid,
.badge-paid {
  background: rgba(56, 217, 169, 0.10);
  color: #1fa07e;
  border-color: rgba(56, 217, 169, 0.22);
}
body.dark-mode .crm-badge.s-paid { color: var(--crm-success); }

/* Cancelled */
.crm-badge.s-cancelled,
.badge-cancelled {
  background: rgba(247, 128, 106, 0.13);
  color: #e0604a;
  border-color: rgba(247, 128, 106, 0.28);
}
body.dark-mode .crm-badge.s-cancelled { color: #f9a08a; }

/* Shipped */
.crm-badge.s-shipped,
.badge-shipped {
  background: rgba(184, 124, 247, 0.13);
  color: #9553e0;
  border-color: rgba(184, 124, 247, 0.28);
}
body.dark-mode .crm-badge.s-shipped { color: #cba4f9; }

/* Draft */
.crm-badge.s-draft,
.badge-draft {
  background: rgba(106, 116, 140, 0.10);
  color: var(--crm-muted);
  border-color: rgba(106, 116, 140, 0.20);
  font-style: italic;
}

/* Bootstrap badge overrides */
.badge.bg-primary   { background: var(--crm-primary) !important; }
.badge.bg-success   { background: var(--crm-success) !important; color: #0d2018 !important; }
.badge.bg-warning   { background: var(--crm-warning) !important; color: #2a1e00 !important; }
.badge.bg-danger    { background: var(--crm-danger)  !important; }
.badge.bg-info      { background: var(--crm-info)    !important; }
.badge.bg-secondary { background: #8a9bb8 !important; }


/* ─────────────────────────────────────────────────────────────
   13. KPI / STAT CARDS (Dashboard)
───────────────────────────────────────────────────────────── */
.crm-kpi-card {
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius-lg);
  padding: 20px 22px;
  box-shadow: var(--crm-shadow-sm);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--crm-transition);
}
.crm-kpi-card:hover {
  box-shadow: var(--crm-shadow-md);
  border-color: var(--crm-primary);
  transform: translateY(-1px);
}

.crm-kpi-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.crm-kpi-icon.blue   { background: rgba(79,142,247,0.13);  color: var(--crm-primary); }
.crm-kpi-icon.green  { background: rgba(56,217,169,0.13);  color: var(--crm-success); }
.crm-kpi-icon.yellow { background: rgba(247,201,79,0.13);  color: #c89b20; }
.crm-kpi-icon.red    { background: rgba(247,128,106,0.13); color: var(--crm-danger); }
.crm-kpi-icon.purple { background: rgba(184,124,247,0.13); color: var(--crm-purple); }

.crm-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--crm-muted);
  margin-bottom: 2px;
}
.crm-kpi-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--crm-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.crm-kpi-sub {
  font-size: 0.76rem;
  color: var(--crm-muted);
  margin-top: 2px;
}
.crm-kpi-trend-up   { color: var(--crm-success); font-weight: 700; }
.crm-kpi-trend-down { color: var(--crm-danger);  font-weight: 700; }


/* ─────────────────────────────────────────────────────────────
   14. MODALS
───────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius-lg);
  box-shadow: var(--crm-shadow-lg);
}

.modal-header {
  background: transparent;
  border-bottom: 1px solid var(--crm-border);
  padding: 16px 20px;
  border-radius: var(--crm-radius-lg) var(--crm-radius-lg) 0 0;
}
.modal-header .modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--crm-text);
}
.modal-header .btn-close {
  opacity: 0.5;
  transition: opacity 0.15s;
}
.modal-header .btn-close:hover { opacity: 1; }
body.dark-mode .modal-header .btn-close { filter: invert(1); }

.modal-body {
  padding: 20px;
  color: var(--crm-text);
  font-size: 0.88rem;
}

.modal-footer {
  background: transparent;
  border-top: 1px solid var(--crm-border);
  padding: 14px 20px;
  gap: 8px;
  border-radius: 0 0 var(--crm-radius-lg) var(--crm-radius-lg);
}

.modal-backdrop { backdrop-filter: blur(2px); }

body.dark-mode .modal-content {
  background: var(--crm-surface);
  border-color: var(--crm-border-strong);
}


/* ─────────────────────────────────────────────────────────────
   15. TOASTS / ALERTS
───────────────────────────────────────────────────────────── */
.toast {
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow-md);
  font-size: 0.86rem;
  color: var(--crm-text);
}
.toast-header {
  background: transparent;
  border-bottom: 1px solid var(--crm-border);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--crm-text);
}

/* Toast accent left border by type */
.toast.toast-success { border-left: 3px solid var(--crm-success); }
.toast.toast-danger  { border-left: 3px solid var(--crm-danger); }
.toast.toast-warning { border-left: 3px solid var(--crm-warning); }
.toast.toast-info    { border-left: 3px solid var(--crm-info); }

/* Alert boxes */
.alert {
  border-radius: var(--crm-radius);
  font-size: 0.86rem;
  padding: 12px 16px;
  border: 1px solid transparent;
}
.alert-primary { background: rgba(79,142,247,0.10); border-color: rgba(79,142,247,0.25); color: var(--crm-primary); }
.alert-success { background: rgba(56,217,169,0.10); border-color: rgba(56,217,169,0.25); color: #1c9a74; }
.alert-warning { background: rgba(247,201,79,0.10); border-color: rgba(247,201,79,0.25); color: #a07f10; }
.alert-danger  { background: rgba(247,128,106,0.10); border-color: rgba(247,128,106,0.25); color: #c24832; }




/* ─────────────────────────────────────────────────────────────
   17. BREADCRUMB (standalone module)
───────────────────────────────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: 6px 0;
  margin: 0;
  font-size: 0.82rem;
}
.breadcrumb-item a {
  color: var(--crm-primary);
  text-decoration: none;
}
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--crm-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--crm-muted); }


/* ─────────────────────────────────────────────────────────────
   18. COLLAPSE TRANSITIONS
───────────────────────────────────────────────────────────── */
.collapse { transition: none; }
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease;
}


/* ─────────────────────────────────────────────────────────────
   19. INCOTERM SELECT — full options list
───────────────────────────────────────────────────────────── */
/* No special CSS needed — just a regular .form-select */
/* Values: EXW, FCA, FOB, CFR, CIF, DAP, DDP */
/* Applied class: #incoterm.form-control / .form-select */


/* ─────────────────────────────────────────────────────────────
   20. UTILITY CLASSES (CRM-specific)
───────────────────────────────────────────────────────────── */

/* Muted text */
.crm-muted  { color: var(--crm-muted) !important; }
.crm-text   { color: var(--crm-text)  !important; }
.crm-accent { color: var(--crm-primary) !important; }

/* Section heading */
.crm-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--crm-text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.crm-section-sub {
  font-size: 0.80rem;
  color: var(--crm-muted);
  margin-bottom: 16px;
}

/* Divider */
.crm-divider {
  height: 1px;
  background: var(--crm-border);
  margin: 16px 0;
}

/* Read-only total row (invoice) */
.crm-total-row td {
  font-weight: 700;
  background: var(--crm-surface2);
  font-size: 0.90rem;
}
.crm-grand-total td {
  font-size: 1rem;
  font-weight: 800;
  color: var(--crm-primary);
  background: var(--crm-primary-light);
}

/* Empty state */
.crm-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--crm-muted);
}
.crm-empty-state i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.4;
  display: block;
}
.crm-empty-state p {
  font-size: 0.88rem;
  margin: 0;
}

/* Loading spinner */
.crm-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  width: 100%;
  color: var(--crm-muted);
  font-size: 0.85rem;
  gap: 10px;
}


/* ─────────────────────────────────────────────────────────────
   21. RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .content { padding: 14px; }
  .card-body { padding: 0.85rem 1rem; }
  .content-header { padding: 10px 14px 8px; }
  .content-header h1 { font-size: 1.05rem; }
}

@media (max-width: 767.98px) {
  .quotes-card .card-body { padding: 0.9rem; }

  /* Stack filter form on mobile */
  #poFilterForm .col-md-3,
  #soFilterForm .col-md-3,
  #invoiceFilterForm .col-md-3,
  #bookingFilterForm .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Compact breadcrumb */
  .content-header .breadcrumb { display: none; }

  /* Make DataTable horizontally scrollable */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Stack card footer buttons */
  .card-footer { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 575.98px) {
  .crm-kpi-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .crm-kpi-value { font-size: 1.4rem; }
}


/* ─────────────────────────────────────────────────────────────
   22. PRINT STYLES (Invoice PDF)
───────────────────────────────────────────────────────────── */
@media print {
  .main-sidebar,
  .main-header,
  .content-header .breadcrumb,
  .y5-filter-card,
  .btn,
  #poAddRowButtons,
  .card-footer { display: none !important; }

  body, .content-wrapper {
    background: #fff !important;
    color: #000 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .table thead th { background: #f5f5f5 !important; }
  .crm-badge { border: 1px solid #ccc !important; color: #333 !important; background: #f5f5f5 !important; }
}