/* COMPANY THEME */
:root {
  --sbit-font: "Open Sans", sans-serif;
  --sbit-heading-font: "Libre Franklin", sans-serif;
  --sbit-primary: #012c66;
  --sbit-secondary: #ff9900;
  --sbit-accent: #aab9ced5;
  --sbit-blue: #0073ec;
  --sbit-blue-dark: #0073ec;
  --sbit-tertiary: #2513d1;
  --sbit-green: #41c281;
  --sbit-text: #363636;
  --sbit-heading: #1b1c4a;
  --sbit-white: #ffffff;
  --sbit-black: #000000;
  --sbit-gray: #eceeef;
  --sbit-section-bg-one: #f4f7fa;
  --sbit-section-bg-two: #edf9f2;
  --sbit-section-bg-three: #eaf9fe;
  --sbit-section-bg-four: #f1f7ff;
  --sbit-section-bg-five: #eff4ff;
  --sbit-section-bg-six: #f4f7f0;
  --sbit-section-bg-seven: #dfecfc;
  --sbit-border-color: #d9dadb;
  --sbit-light-primary: #d1e4fd;
}

/* APP THEME */
:root {
  --body-color: #edf0f5;
  /* Automation */
  --status-success: #2dc76b;
  --status-failed: #d9252e;
  --status-pending: #f6bb42;

  /* Payment Status */
  --status-paid: var(--status-success);
  --status-cancelled: #6b7280;
  --status-unpaid: var(--status-failed);

  /* Workflow Status */
  --status-suspended: #f6bb42;
  --status-notice: #ff9900;
  --status-queued: #343a40;
  --status-terminated: #6c757d;

  /* Due Status */
  --status-due-today: #d9252e;
  --status-due-tomorrow: #ff9900;

  /* Text Variants */
  --text-muted: #6c757d;
}

/* BASE */

html,
body {
  height: 100%;
}

body {
  background-color: var(--body-color);
  font-family: var(--sbit-font);
  font-size: 14px;
  color: var(--sbit-text);
  line-height: 1.5;

  min-height: 100vh;

  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  height: auto;
  overflow: visible;
}

.card {
  height: auto !important;
}

.card-body {
  height: auto !important;
}

.card-body-overflow-visible {
  overflow: visible !important;
}

/* TYPOGRAPHY SYSTEM */

.page-title h2 {
  color: var(--sbit-primary);
  font-weight: bold;
}

/* Headings */
.heading-lg {
  font-family: var(--sbit-heading-font);
  font-size: 1.5rem;
  font-weight: 600;
}

.heading-md {
  font-family: var(--sbit-heading-font);
  font-size: 1.25rem;
  font-weight: 600;
}

.heading-sm {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Muted variants */
.text-muted-sm {
  font-size: 0.85rem;
  color: var(--text-muted);
}

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

/* LAYOUT UTILITIES */

.empty-state-icon {
  font-size: 2rem;
}

.invoice-grid {
  width: 100%;
}

.template-select {
  width: 180px;
}

.filter-label {
  min-width: 70px;
  letter-spacing: 0.04em;
}

.small-icon {
  font-size: 0.75rem;
}

/* HEADER */

.main-header {
  position: sticky;
  top: 0;
  z-index: 1055;

  background: white;

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  overflow: visible !important;
}

.nav-pill-group {
  background: #f5f7fb;
  padding: 6px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-pill {
  display: flex;
  align-items: center;
  text-decoration: none !important;

  border: solid 2px var(--sbit-blue);

  color: var(--sbit-text) !important;

  padding: 8px 14px;
  border-radius: 3px;

  font-size: 0.9rem;
  font-weight: 500;

  transition: all 0.2s ease;
}

.nav-pill:hover {
  background-color: var(--sbit-blue);
  border: solid 2px var(--sbit-blue);
  color: var(--sbit-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.nav-pill-active {
  background-color: var(--sbit-primary);
  border: solid 2px var(--sbit-primary);
  color: var(--sbit-white) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dropdown .dropdown-toggle {
  background-color: var(--sbit-blue);

  color: var(--sbit-white);

  transition: all 0.2s ease;
}

.dropdown .dropdown-toggle:hover,
.dropdown .dropdown-toggle:focus,
.dropdown .dropdown-toggle:active,
.dropdown .show > .dropdown-toggle {
  background-color: var(--sbit-blue) !important;

  border-color: var(--sbit-primary) !important;

  color: var(--sbit-accent) !important;

  box-shadow: none;
}

.dropdown-menu {
  padding: 4px 0;
  z-index: 1055;
  min-width: 180px;
  width: max-content;
  z-index: 2100;
}

.dropdown-menu li {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
}

.dropdown-menu .dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  box-sizing: border-box;
  white-space: nowrap;
}

.dropdown-menu .dropdown-divider {
  margin: 4px 0;
}
/* FOOTER */

.footer-copyright-area {
  position: sticky;
  background-color: var(--sbit-primary);

  padding: 1rem 1.5rem;

  text-align: center;

  height: auto;
}

.footer-copyright-area p {
  margin: 0;

  color: var(--sbit-white);

  font-size: 0.9rem;
}

.footer-copyright-area p a {
  color: var(--sbit-white);

  font-weight: bolder;

  text-decoration: none;
}

.footer-copyright-area p a:hover {
  opacity: 0.9;
}

/* BADGE SYSTEM */

/* Base */
.badge {
  text-decoration: none !important;
}

.badge-status {
  cursor: pointer;
  font-size: 0.75rem;
}

.badge-count {
  font-size: 0.82rem;
  min-width: 42px;
  text-align: center;
  display: inline-block;
  padding: 4px 10px;
}

.icon-badge {
  width: 30px;
  height: 30px;

  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 !important;
}

.icon-badge i {
  font-size: 1.5rem;
  line-height: 1;
}

/* Generic */
.badge-info {
  background-color: var(--sbit-blue);
  color: var(--sbit-white);
}

.badge-active {
  background-color: var(--sbit-blue);
  color: var(--sbit-white);
}

.badge-inactive {
  background-color: var(--sbit-gray);
  color: var(--sbit-black);
}

.badge-neutral {
  background-color: var(--sbit-gray);
  color: var(--sbit-black);
}

/* Payment */
.badge-paid {
  background-color: var(--status-paid);
  color: var(--sbit-white);
}

.badge-cancelled {
  background: var(--status-cancelled);
  color: var(--sbit-white);
}

.badge-unpaid {
  background-color: var(--status-unpaid);
  color: var(--sbit-white);
}

/* Workflow */
.badge-suspended {
  background-color: var(--status-suspended);
  color: var(--sbit-black);
}

.badge-notice {
  background-color: var(--status-notice);
  color: var(--sbit-white);
}

.badge-queued {
  background-color: var(--status-queued);
  color: var(--sbit-white);
}

.badge-terminated {
  background-color: var(--status-terminated);
  color: var(--sbit-white);
}

/* Due */
.badge-due-today {
  background-color: var(--status-due-today);
  color: var(--sbit-white);
}

.badge-due-tomorrow {
  background-color: var(--status-due-tomorrow);
  color: var(--sbit-white);
}

/* System */
.badge-success {
  background-color: var(--status-success);
  color: var(--sbit-white);
}

.badge-pending {
  background-color: var(--status-pending);
  color: var(--sbit-black);
}

.badge-failed {
  background-color: var(--status-failed);
  color: var(--sbit-white);
}

/* BUTTON SYSTEM */

/* Base */
.btn-custom {
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-custom.btn-sm {
  padding: 4px 10px;
  font-size: 0.78rem;
  border-radius: 5px;
  white-space: nowrap;
}

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

/* Filled */

.btn-primary-custom {
  background-color: var(--sbit-primary);
  color: var(--sbit-white);
}

.btn-primary-custom:hover {
  opacity: 0.9;
}

.btn-secondary-custom {
  background-color: var(--sbit-blue);
  color: white;
  text-align: center;
  align-items: center;
}

.btn-suspend-custom {
  background-color: var(--status-suspended);
  color: var(--sbit-black);
}

.btn-suspend-custom:hover {
  background-color: #e0a930;
}

.btn-warning-custom {
  background-color: var(--status-notice);
  color: var(--sbit-white);
}

.btn-warning-custom:hover {
  background-color: #e68900;
}

.btn-danger-custom {
  background-color: var(--status-failed);
  color: var(--sbit-white);
}

.btn-danger-custom:hover {
  background-color: #b71c1c;
}

.btn-neutral-custom {
  background-color: var(--status-queued);
  color: var(--sbit-white);
}

.btn-neutral-custom:hover {
  background-color: #23272b;
}

/* Outline */
.btn-outline-custom {
  background-color: transparent;
  border: 1px solid var(--sbit-border-color);
  color: var(--sbit-text);
}

.btn-outline-custom:hover {
  background-color: var(--sbit-gray);
}

.btn-outline-warning-custom {
  background-color: transparent;
  border: 1px solid var(--status-notice);
  color: var(--status-notice);
}

.btn-outline-warning-custom:hover {
  background-color: var(--status-notice);
  color: var(--sbit-white);
}

.btn-outline-danger-custom {
  background-color: transparent;
  border: 1px solid var(--status-failed);
  color: var(--status-failed);
}

.btn-outline-danger-custom:hover {
  background-color: var(--status-failed);
  color: var(--sbit-white);
}

/* ALERTS / TOASTS */

.manual-mode-alert {
  background: #fff8e6;

  border: 1.5px solid #ffd97a;

  border-radius: 10px;

  font-size: 0.85rem;
}

.manual-alert-icon {
  color: #ff9900;

  font-size: 1.1rem;
}

.manual-alert-title {
  color: #7a5000;
}

.manual-alert-text {
  color: #6b5500;
}

.toast-container-custom {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 2000;
  width: 320px;
  pointer-events: none;
}

.toast-container-custom .toast {
  pointer-events: auto;
}

/* MANUAL / AUTO MODE */

.manual-mode-badge {
  background: #fff8e6;

  color: #8a5c00;

  border: 1.5px solid #ffd97a;

  font-size: 0.8rem;

  font-weight: 600;
}

.auto-mode-badge {
  background: #edf9f2;

  color: #1a7a45;

  border: 1.5px solid #a3e6c3;

  font-size: 0.8rem;

  font-weight: 600;
}

/* FORMS */

.form-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sbit-text);
}

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

.form-control:focus {
  border-color: var(--sbit-blue);
  box-shadow: 0 0 0 3px rgba(0, 115, 236, 0.12);
}

/* AUTH */

.auth-card .form-control {
  background-color: var(--sbit-accent);
  border-radius: 6px;
  border: 1px solid var(--sbit-border-color);
  font-size: 0.9rem;
}

.auth-container {
  min-height: calc(100vh - 120px);
  padding: 2rem;
}

.auth-card {
  width: 100%;
  max-width: 520px;
  padding: 2.5rem !important;
  border-radius: 24px;
  background: var(--sbit-white);
  border: 1px solid rgba(1, 44, 102, 0.08) !important;
  box-shadow:
    0 10px 30px rgba(1, 44, 102, 0.06),
    0 2px 8px rgba(1, 44, 102, 0.04) !important;
}

.auth-card h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--sbit-primary);
  margin-bottom: 2rem !important;
}

.floating-group {
  position: relative;
}

.floating-group .form-control {
  height: 62px;
  padding: 1.4rem 1rem 0.5rem 1rem;
}

.floating-group label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #4f6480;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
}

.floating-group .form-control:focus + label,
.floating-group .form-control:not(:placeholder-shown) + label {
  top: 2px;
  transform: translateY(0);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sbit-blue);
}

.auth-card .form-control {
  height: 58px;
  border-radius: 18px;
  border: none;
  background: #dfeaf8;
  padding: 0 1rem;
  font-size: 1rem;
  box-shadow: none;
}

.auth-card .form-control:focus {
  background: #dfeaf8;
  border: 1px solid rgba(1, 44, 102, 0.15);
  box-shadow: 0 0 0 4px rgba(1, 44, 102, 0.08);
}

.auth-card .btn-primary-custom {
  height: 54px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.alert-danger-custom {
  background-color: #fdeaea;
  color: var(--status-failed);
  border: 1px solid #f5c2c7;
  border-radius: 6px;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

/* Nav utility classes used in some templates */
.nav-link-custom {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--sbit-text);
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-link-custom:hover {
  background-color: var(--sbit-section-bg-one);
  color: var(--sbit-primary);
}

.nav-link-active {
  background-color: var(--sbit-light-primary);
  color: var(--sbit-primary);
  font-weight: 600;
}

.form-label-placeholder {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--sbit-primary);
}

/* SEARCH BAR */

.search-bar-wrapper {
  position: relative;

  width: 100%;
}

.search-input {
  width: 100%;

  height: 72px;

  border: solid 1px var(--sbit-black);

  border-radius: 10px;

  background-color: var(--sbit-white);

  padding: 0 240px 0 1.5rem;

  font-size: 1.05rem;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);

  outline: none;

  transition:
    box-shadow 0.25s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.search-input:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.08);
}

.search-input:focus {
  border-color: rgba(0, 0, 0, 0.15);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.12),
    0 0 0 4px rgba(0, 0, 0, 0.05);

  transform: translateY(-1px);
}

.search-btn-inside {
  position: absolute;

  top: 50%;
  right: 10px;

  transform: translateY(-50%);

  height: 52px;

  min-width: 200px;

  border: none;

  border-radius: 8px;

  background-color: var(--sbit-blue);

  color: var(--sbit-white);

  font-size: 1rem;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  transition: all 0.2s ease;
}

.search-btn-inside:hover {
  background-color: var(--sbit-primary);
}

/* AG GRID */

.ag-row:hover {
  border-left-color: var(--sbit-blue);
}

.ag-row.status-paid {
  border-left: 4px solid var(--status-paid);
}

.ag-row.status-unpaid {
  border-left: 4px solid var(--status-unpaid);
}

.ag-row.status-suspended {
  border-left: 4px solid var(--status-suspended);
}

.ag-row.status-terminated {
  border-left: 4px solid var(--status-terminated);
}

#invoiceGrid.ag-theme-material {
  --ag-font-family: var(--sbit-font);
  --ag-font-size: 13px;
  --ag-row-background-color: #ffffff;

  /* Header */
  --ag-header-background-color: var(--sbit-primary);
  --ag-header-foreground-color: var(--sbit-white);
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-color: rgba(255, 255, 255, 0.15);
  --ag-header-column-separator-height: 100%;
  --ag-header-column-resize-handle-color: rgba(255, 255, 255, 0.3);

  /* Rows */
  --ag-background-color: #ffffff;
  --ag-odd-row-background-color: var(--sbit-section-bg-four);
  --ag-row-hover-color: var(--sbit-section-bg-seven);
  --ag-selected-row-background-color: var(--sbit-light-primary);

  /* Borders */
  --ag-border-color: var(--sbit-border-color);
  --ag-row-border-color: var(--sbit-border-color);
  --ag-row-border-style: solid;
  --ag-row-border-width: 1px;

  /* Cell spacing — material uses larger padding by default, pull it in */
  --ag-cell-horizontal-padding: 10px;
  --ag-row-height: 56px;
  --ag-header-height: 44px;
  --ag-list-item-height: 36px;

  /* Material accent — replaces the teal ripple with your primary */
  --ag-material-primary-color: var(--sbit-primary);
  --ag-material-accent-color: var(--sbit-primary);
  --ag-input-focus-border-color: var(--sbit-primary);
  --ag-checkbox-checked-color: var(--sbit-primary);
  --ag-range-selection-border-color: var(--sbit-primary);

  border-radius: 8px;
  border: 1px solid var(--sbit-border-color);
  box-shadow: 0 1px 4px rgba(1, 44, 102, 0.06);
}

#invoiceGrid.ag-theme-material .ag-overlay-loading-wrapper {
  background: rgba(255, 255, 255, 0.85);
}

#invoiceGrid.ag-theme-material .ag-overlay-loading-center {
  background: var(--sbit-white);
  border: 1px solid var(--sbit-border-color);
  border-radius: 8px;
  padding: 1rem 2rem;
  color: var(--sbit-primary);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(1, 44, 102, 0.08);
}

/* Material adds a bottom border underline on header — remove it */
#invoiceGrid.ag-theme-material .ag-header {
  border-bottom: none;
}

#invoiceGrid.ag-theme-material .ag-header-cell:hover,
#invoiceGrid.ag-theme-material .ag-header-group-cell:hover,
#invoiceGrid.ag-theme-material .ag-header-cell:focus,
#invoiceGrid.ag-theme-material .ag-header-group-cell:focus {
  background-color: var(--sbit-accent) !important;
  box-shadow: none !important;
}

/* Header label */
#invoiceGrid.ag-theme-material .ag-header-cell-text {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sbit-white);
}

/* Header sort + filter icons */
#invoiceGrid.ag-theme-material .ag-header-icon,
#invoiceGrid.ag-theme-material .ag-sort-indicator-icon,
#invoiceGrid.ag-theme-material .ag-header-cell-menu-button {
  color: rgba(255, 255, 255, 0.7);
}

#invoiceGrid.ag-theme-material .ag-header-icon:hover,
#invoiceGrid.ag-theme-material .ag-header-cell-menu-button:hover {
  color: var(--sbit-white);
}

/* Vertically center all cell content */
#invoiceGrid.ag-theme-material .ag-cell {
  display: flex;
  align-items: center;
  line-height: normal;
  /* material adds extra padding — normalise */
  padding-top: 0;
  padding-bottom: 0;
}

/* Material ripple on rows is teal by default — override */
#invoiceGrid.ag-theme-material .ag-row-selected::before {
  background-color: var(--sbit-light-primary);
}

/* Status stripe */
#invoiceGrid.ag-theme-material .ag-row.status-paid {
  border-left: 4px solid var(--status-paid) !important;
}

#invoiceGrid.ag-theme-material .ag-row.status-unpaid {
  border-left: 4px solid var(--status-unpaid) !important;
}

#invoiceGrid.ag-theme-material .ag-row.status-suspended {
  border-left: 4px solid var(--status-suspended) !important;
}

#invoiceGrid.ag-theme-material .ag-row.status-terminated {
  border-left: 4px solid var(--status-terminated) !important;
}

/* Kill the material focus underline on cells */
#invoiceGrid.ag-theme-material
  .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Pagination */
#invoiceGrid.ag-theme-material .ag-paging-panel {
  border-top: 1px solid var(--sbit-border-color);
  background-color: var(--sbit-section-bg-one);
  color: var(--sbit-text);
  font-size: 0.82rem;
  height: 44px;
  padding: 0 16px;
}

#invoiceGrid.ag-theme-material .ag-paging-button .ag-icon {
  color: var(--sbit-primary);
}

#invoiceGrid.ag-theme-material .ag-paging-button.ag-disabled .ag-icon {
  color: var(--text-muted);
  opacity: 0.5;
}

#invoiceGrid.ag-theme-material .ag-paging-page-summary-panel {
  color: var(--sbit-text);
}

/* No-rows overlay */
#invoiceGrid.ag-theme-material .ag-overlay-no-rows-wrapper {
  font-size: 0.9rem;
  color: var(--text-muted);
}

#invoiceGrid.ag-theme-material .ag-header-group-cell {
  background-color: var(--sbit-primary) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Group header label text */
#invoiceGrid.ag-theme-material .ag-header-group-cell-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.62);
  justify-content: center;
}

/* Invoice Details group */
#invoiceGrid.ag-theme-material .ag-header-group-cell.col-group-info,
#invoiceGrid.ag-theme-material .ag-header-group-cell.col-group-status,
#invoiceGrid.ag-theme-material .ag-header-group-cell.col-group-actions,
#invoiceGrid.ag-theme-material .ag-header-group-cell.col-group-auto {
  background-color: var(--sbit-primary) !important;
}

#invoiceGrid.ag-theme-material .ag-header-group-cell.col-group-reminders {
  background-color: #2a4a7f !important;
}

/* Suspend — amber */
#invoiceGrid.ag-theme-material .ag-header-cell.col-hdr-suspend {
  background-color: #fff3e0 !important;
  border-bottom: 3px solid #ef9f27 !important;
}
#invoiceGrid.ag-theme-material
  .ag-header-cell.col-hdr-suspend
  .ag-header-cell-text {
  color: #854f0b !important;
}
#invoiceGrid.ag-theme-material .ag-header-cell.col-hdr-suspend .ag-header-icon {
  color: #c27e1b !important;
}

/* Notice — blue */
#invoiceGrid.ag-theme-material .ag-header-cell.col-hdr-notice {
  background-color: #e6f1fb !important;
  border-bottom: 3px solid #378add !important;
}
#invoiceGrid.ag-theme-material
  .ag-header-cell.col-hdr-notice
  .ag-header-cell-text {
  color: #185fa5 !important;
}
#invoiceGrid.ag-theme-material .ag-header-cell.col-hdr-notice .ag-header-icon {
  color: #2a6fa8 !important;
}

/* Queue — green */
#invoiceGrid.ag-theme-material .ag-header-cell.col-hdr-queue {
  background-color: #eaf3de !important;
  border-bottom: 3px solid #639922 !important;
}
#invoiceGrid.ag-theme-material
  .ag-header-cell.col-hdr-queue
  .ag-header-cell-text {
  color: #3b6d11 !important;
}
#invoiceGrid.ag-theme-material .ag-header-cell.col-hdr-queue .ag-header-icon {
  color: #4d7c1a !important;
}

/* Terminate — red */
#invoiceGrid.ag-theme-material .ag-header-cell.col-hdr-terminate {
  background-color: #fcebeb !important;
  border-bottom: 3px solid #e24b4a !important;
}
#invoiceGrid.ag-theme-material
  .ag-header-cell.col-hdr-terminate
  .ag-header-cell-text {
  color: #a32d2d !important;
}
#invoiceGrid.ag-theme-material
  .ag-header-cell.col-hdr-terminate
  .ag-header-icon {
  color: #b53535 !important;
}

/* ── SCROLLABLE GRIDS ──────────────────────────────────────────────────────── */

.grid-scroll-wrap {
  overflow: visible;
  border-radius: 8px;
  width: 100%;
}

.grid-scroll-wrap .ag-theme-material {
  height: 500px;
  width: 100%;
}

/* But keep the grid itself clipping its own rows */
.grid-scroll-wrap .ag-root-wrapper {
  overflow: hidden;
  border-radius: 8px;
}

.grid-scroll-wrap #invoiceGrid.ag-theme-material {
  height: 700px;
}

.grid-scroll-wrap .ag-overlay-no-rows-wrapper {
  padding: 2rem 0;
}

#invoiceGrid.ag-theme-material .ag-overlay-no-rows-wrapper {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 2rem 0;
}

/* ── Action Column Cells ──────────────────────────────── */
.ac-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px; /* ← replaces height: 100% */
  padding: 6px 4px;
  width: 100%;
}

.ac-done {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px; /* ← same */
  padding: 4px;
  width: 100%;
}

/* ADD these — they're missing */
.ac-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ac-meta {
  display: flex;
  flex-direction: column;
  align-items: center; /* ← center sender + date text */
  gap: 1px;
}

.ac-sender {
  font-size: 0.72rem;
  font-weight: 600;
  color: #2c2c2a;
  line-height: 1.2;
  text-align: center;
}

.ac-date {
  font-size: 0.65rem;
  color: #888780;
  line-height: 1.2;
  text-align: center;
}

.ac-mail-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex; /* ← flex instead of block */
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s,
    opacity 0.15s;
}

.ac-mail-btn:hover {
  transform: scale(1.12);
  opacity: 0.9;
}
.ac-mail-btn:active {
  transform: scale(0.96);
}

.ac-locked,
.ac-restricted {
  opacity: 0.45;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
}

.ac-na {
  color: #b4b2a9;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* AG GRID utility classess */
.ag-cell-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ag-cell-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ag-cell-wrap {
  display: block;
  white-space: normal;
  line-height: 1.5;
  padding-top: 8px;
  padding-bottom: 8px;
}

.cell-empty {
  color: #aaa;
}

.inv-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  justify-content: center;
}

.inv-desc-cell {
  font-size: 0.75rem;
  color: #555;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  padding: 0;
  white-space: normal;
}

.inv-id {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap;
}

.inv-desc {
  font-size: 0.7rem;
  color: #888780;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* MODAL */
.modal-content {
  border-top: 4px solid var(--sbit-blue);
}

#modalBody {
  white-space: pre-wrap;
  font-size: 0.9rem;
}

/* Client pages (used by otp_verify.html and confirmation_response.html) */
.status-page-wrapper {
  min-height: 100vh;
}

.status-card {
  width: 100%;
  max-width: 480px;
}

.otp-card {
  width: 100%;
  max-width: 440px;
}

.status-icon {
  font-size: 3rem;
}

.otp-input {
  font-size: 2rem;
  letter-spacing: 0.8rem;
  text-align: center;
  font-weight: 600;
}

/* My Work / Templates table */
.table td,
.table th {
  padding: 10px 10px;
  vertical-align: middle;
  white-space: nowrap;
}

.table-header th {
  background-color: var(--sbit-primary) !important;
  color: var(--sbit-white);
}

.table tbody tr {
  transition: background-color 0.2s ease;
}

.table tbody tr:hover td {
  filter: brightness(0.98);
}

.status-cell {
  min-width: 140px;
}

/* ── REPORTS PAGE ────────────────────────────────────────────────────────── */

/* Summary Cards */
.report-card {
  background: var(--sbit-white);
  border-radius: 10px;
  border: 1px solid var(--sbit-border-color);
  padding: 1rem 1.25rem;
  height: 100%;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  transition: box-shadow 0.2s ease;
}

.report-card:hover {
  box-shadow: 0 4px 16px rgba(1, 44, 102, 0.08);
}

.report-card-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.report-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.report-card-value.color-primary {
  color: var(--sbit-primary);
}
.report-card-value.color-paid {
  color: var(--status-paid);
}
.report-card-value.color-unpaid {
  color: var(--status-unpaid);
}
.report-card-value.color-cancelled {
  color: var(--status-cancelled);
}
.report-card-value.color-secondary {
  color: var(--sbit-secondary);
}
.report-card-value.color-blue {
  color: var(--sbit-blue);
}

.report-card.border-primary {
  border-left-color: var(--sbit-primary) !important;
}
.report-card.border-paid {
  border-left-color: var(--status-paid) !important;
}
.report-card.border-unpaid {
  border-left-color: var(--status-unpaid) !important;
}
.report-card.border-cancelled {
  border-left-color: var(--status-cancelled) !important;
}
.report-card.border-secondary {
  border-left-color: var(--sbit-secondary) !important;
}
.report-card.border-blue {
  border-left-color: var(--sbit-blue) !important;
}

/* Stage Table */
.stage-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.stage-row:hover td {
  background-color: var(--sbit-section-bg-four);
}

.stage-progress-wrap {
  width: 80px;
  background: var(--sbit-gray);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.stage-progress-fill {
  height: 8px;
  border-radius: 4px;
  background: var(--sbit-primary);
  transition: width 0.4s ease;
}

.stage-progress-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  vertical-align: middle;
  margin-left: 6px;
}

.stage-progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Category & Drilldown AG Grid */
#categoryGrid.ag-theme-material,
#drilldownGrid.ag-theme-material {
  --ag-font-family: var(--sbit-font);
  --ag-font-size: 13px;
  --ag-row-background-color: var(--sbit-white);
  --ag-header-background-color: var(--sbit-primary);
  --ag-header-foreground-color: var(--sbit-white);
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-color: rgba(255, 255, 255, 0.15);
  --ag-background-color: var(--sbit-white);
  --ag-odd-row-background-color: var(--sbit-section-bg-four);
  --ag-row-hover-color: var(--sbit-section-bg-seven);
  --ag-selected-row-background-color: var(--sbit-light-primary);
  --ag-border-color: var(--sbit-border-color);
  --ag-row-border-color: var(--sbit-border-color);
  --ag-row-border-style: solid;
  --ag-row-border-width: 1px;
  --ag-cell-horizontal-padding: 10px;
  --ag-row-height: 48px;
  --ag-header-height: 44px;
  --ag-material-primary-color: var(--sbit-primary);
  --ag-material-accent-color: var(--sbit-primary);
  --ag-input-focus-border-color: var(--sbit-primary);
  --ag-checkbox-checked-color: var(--sbit-primary);
  border-radius: 8px;
  border: 1px solid var(--sbit-border-color);
  box-shadow: 0 1px 4px rgba(1, 44, 102, 0.06);
}

#categoryGrid.ag-theme-material .ag-header-cell-text,
#drilldownGrid.ag-theme-material .ag-header-cell-text {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sbit-white);
}

#categoryGrid.ag-theme-material .ag-header,
#drilldownGrid.ag-theme-material .ag-header {
  border-bottom: none;
}

#categoryGrid.ag-theme-material .ag-cell,
#drilldownGrid.ag-theme-material .ag-cell {
  display: flex;
  align-items: center;
  line-height: normal;
  padding-top: 0;
  padding-bottom: 0;
}

#categoryGrid.ag-theme-material .ag-header-icon,
#drilldownGrid.ag-theme-material .ag-header-icon {
  color: rgba(255, 255, 255, 0.7);
}

#categoryGrid.ag-theme-material .ag-paging-panel,
#drilldownGrid.ag-theme-material .ag-paging-panel {
  display: none !important;
}

#categoryGrid.ag-theme-material .ag-row,
#drilldownGrid.ag-theme-material .ag-row {
  cursor: pointer;
}

/* Category grid cell helpers */
.cat-plan-name {
  font-weight: 600;
  color: var(--sbit-text);
}

.cat-paid-val {
  font-weight: 600;
  color: var(--status-paid);
}
.cat-unpaid-val {
  color: var(--status-unpaid);
}
.cat-cancelled-val {
  color: var(--status-cancelled);
}

.cat-revenue {
  font-weight: 600;
  color: var(--status-paid);
}

.cat-rate-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-rate-bar-track {
  width: 60px;
  background: var(--sbit-gray);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.cat-rate-bar-fill {
  height: 8px;
  border-radius: 4px;
  background: var(--sbit-primary);
}

/* Drilldown cell helpers */
.drill-invoice-id {
  font-weight: 600;
  color: var(--sbit-text);
}
.drill-amount {
  font-weight: 600;
  color: var(--status-paid);
}
.drill-date {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.drill-reminder-date {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Report section title */
.report-section-title {
  color: var(--sbit-primary);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.grid-scroll-wrap-modal {
  overflow: visible;
  border-radius: 8px;
  width: 100%;
}

.grid-scroll-wrap-modal .ag-theme-material {
  height: 450px;
  width: 100%;
}

.grid-scroll-wrap .ag-root-wrapper {
  overflow: visible !important;
  border-radius: 8px;
}

.grid-scroll-wrap .ag-body-viewport {
  overflow-y: auto !important;
}

.spin-icon {
  animation: spin 1s linear infinite;
}

/* ── Staff Report Grids ──────────────────────────────────────────────────── */

#allStaffGrid.ag-theme-material,
#activityGrid.ag-theme-material {
  --ag-font-family: var(--sbit-font);
  --ag-font-size: 13px;
  --ag-row-background-color: var(--sbit-white);
  --ag-header-background-color: var(--sbit-primary);
  --ag-header-foreground-color: var(--sbit-white);
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-color: rgba(255, 255, 255, 0.15);
  --ag-background-color: var(--sbit-white);
  --ag-odd-row-background-color: var(--sbit-section-bg-four);
  --ag-row-hover-color: var(--sbit-section-bg-seven);
  --ag-selected-row-background-color: var(--sbit-light-primary);
  --ag-border-color: var(--sbit-border-color);
  --ag-row-border-color: var(--sbit-border-color);
  --ag-row-border-style: solid;
  --ag-row-border-width: 1px;
  --ag-cell-horizontal-padding: 10px;
  --ag-row-height: 48px;
  --ag-header-height: 44px;
  --ag-material-primary-color: var(--sbit-primary);
  --ag-material-accent-color: var(--sbit-primary);
  --ag-input-focus-border-color: var(--sbit-primary);
  border-radius: 8px;
  border: 1px solid var(--sbit-border-color);
  box-shadow: 0 1px 4px rgba(1, 44, 102, 0.06);
}

#allStaffGrid.ag-theme-material .ag-header-cell-text,
#activityGrid.ag-theme-material .ag-header-cell-text {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sbit-white);
}

#allStaffGrid.ag-theme-material .ag-header,
#activityGrid.ag-theme-material .ag-header {
  border-bottom: none;
}

#allStaffGrid.ag-theme-material .ag-cell,
#activityGrid.ag-theme-material .ag-cell {
  display: flex;
  align-items: center;
  line-height: normal;
  padding-top: 0;
  padding-bottom: 0;
}

#allStaffGrid.ag-theme-material .ag-header-icon,
#activityGrid.ag-theme-material .ag-header-icon {
  color: rgba(255, 255, 255, 0.7);
}

#allStaffGrid.ag-theme-material .ag-paging-panel,
#activityGrid.ag-theme-material .ag-paging-panel {
  border-top: 1px solid var(--sbit-border-color);
  background-color: var(--sbit-section-bg-one);
  color: var(--sbit-text);
  font-size: 0.82rem;
  height: 44px;
  padding: 0 16px;
}

#allStaffGrid.ag-theme-material .ag-row,
#activityGrid.ag-theme-material .ag-row {
  cursor: pointer;
}

#allStaffGrid.ag-theme-material .ag-header-cell:hover,
#activityGrid.ag-theme-material .ag-header-cell:hover {
  background-color: var(--sbit-accent) !important;
  box-shadow: none !important;
}

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

/* RESPONSIVE */