/* ═══════════════════════════════════════════════════════════
   FINIX MVP — Custom Stylesheet
   ═══════════════════════════════════════════════════════════ */

/* ── Number input — hide spinners globally ──────────────── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ── Dates: DD/MM/YYYY box in front of every date input (public/js/date-input.js) ── */
input.fx-date-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
input.fx-date-text {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 14px 14px;
}
input.fx-date-text[readonly],
input.fx-date-text:disabled { background-image: none; padding-right: .75rem; }
.input-group > input.fx-date-text.fx-last {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}
.input-group-sm > input.fx-date-text.fx-last {
  border-top-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}

/* ── CSS Variables ──────────────────────────────────────── */
:root {
  --sidebar-width:     260px;
  --sidebar-collapsed-width: 68px;
  --navbar-height:     58px;
  --sidebar-bg:        #0d1b2a;
  --sidebar-hover:     rgba(255,255,255,0.07);
  --sidebar-active:    #1565c0;
  --primary:           #1565c0;
  --font-en:           'Inter', sans-serif;
  --font-gu:           'Noto Sans Gujarati', 'Inter', sans-serif;
  --bg-page:           #f0f4f8;
}

/* ── Base ───────────────────────────────────────────────── */
body {
  background-color: var(--bg-page);
  overflow-x: hidden;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--sidebar-bg);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.25s ease;
  /* Reserve scrollbar space so content width never shifts */
  scrollbar-gutter: stable;
}

/* Thin dark scrollbar — blends with sidebar, doesn't shrink content */
.sidebar::-webkit-scrollbar        { width: 4px; }
.sidebar::-webkit-scrollbar-track  { background: transparent; }
.sidebar::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

.sidebar-header {
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.sidebar-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.sidebar-brand-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.sidebar-brand-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,0.45);
  margin-top: 1px;
}

/* ── Sidebar Nav ────────────────────────────────────────── */
.sidebar-nav { margin-top: 8px; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  margin: 2px 6px;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link i { font-size: 16px; flex-shrink: 0; }

.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: #fff !important;
}

.sidebar-link.active {
  background: var(--sidebar-active);
  color: #fff !important;
  font-weight: 600;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 20px 6px;
}

/* ── Sidebar accordion (conflict-free, no Bootstrap nav) ── */
.sb-wrap { padding: 6px 0 28px; }

/* Direct link — e.g. Dashboard */
.sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  margin: 2px 6px;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sb-item i { font-size: 16px; flex-shrink: 0; }
.sb-item:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }
.sb-item.active { background: #1565c0; color: #fff; font-weight: 600; }

/* Group container */
.sb-group { margin: 1px 0; }

/* Group header button — full reset, no browser defaults */
.sb-grp-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: calc(100% - 12px);
  margin: 0 6px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  background: none;
  border: 0;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  transition: background 0.15s, color 0.15s;
}
.sb-grp-btn .sb-icon { font-size: 16px; flex-shrink: 0; }
.sb-grp-btn .sb-label { flex: 1; }
.sb-grp-btn .sb-chev {
  font-size: 11px;
  opacity: 0.4;
  transition: transform 0.22s, opacity 0.15s;
  flex-shrink: 0;
}
.sb-grp-btn:hover,
.sb-grp-btn:focus { background: rgba(255,255,255,0.07); color: #fff; outline: 0; box-shadow: none; }
.sb-grp-btn.is-open { color: #fff; }
.sb-grp-btn.is-open .sb-chev { transform: rotate(180deg); opacity: 0.85; }

/* Sub-menu body */
.sb-body {
  display: none;
  flex-direction: column;
  padding: 2px 6px 4px 16px;
  border-left: 2px solid rgba(255,255,255,0.09);
  margin: 0 6px 2px 20px;
}
.sb-body.open { display: flex; }

/* Sub link */
.sb-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sb-sub i { font-size: 13px; flex-shrink: 0; }
.sb-sub:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }
.sb-sub.active { background: rgba(21,101,192,0.5); color: #fff; font-weight: 600; }

/* Thin section divider */
.sb-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 16px; }

.sb-section-label {
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Collapsible sidebar (icon-only rail, desktop only) ─────── */
.sidebar-collapse-row { display: flex; justify-content: flex-end; padding: 4px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-collapse-btn {
  background: none; border: 0; color: rgba(255,255,255,0.6);
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.sidebar-collapse-btn i { transition: transform .25s ease; }
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

@media (min-width: 992px) {
  html.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
  html.sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed-width); }
  html.sidebar-collapsed .sidebar-collapse-row { justify-content: center; }
  html.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }

  html.sidebar-collapsed .sidebar-brand,
  html.sidebar-collapsed .sb-item span,
  html.sidebar-collapsed .sb-grp-btn .sb-label,
  html.sidebar-collapsed .sb-grp-btn .sb-chev,
  html.sidebar-collapsed .sb-section-label,
  html.sidebar-collapsed .sb-divider { display: none; }

  html.sidebar-collapsed .sb-item,
  html.sidebar-collapsed .sb-grp-btn { justify-content: center; padding-left: 0; padding-right: 0; }

  /* Flyout submenu on hover, replacing the inline accordion body.
     position:fixed (not absolute) — .sidebar has overflow-x:hidden, which
     would silently clip an absolutely-positioned flyout to invisible even
     though its computed style/box model looks correct. Fixed positioning
     escapes that; top/left are set by JS (main.js) from the hovered
     button's real on-screen position, since fixed has no .sb-group anchor. */
  html.sidebar-collapsed .sb-body {
    display: none; position: fixed;
    min-width: 210px; background: var(--sidebar-bg); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35); padding: 6px; border-left: 0; z-index: 1060;
    /* A long submenu opened near the bottom of the screen used to run off it
       with no way to reach the hidden items. JS keeps the flyout inside the
       viewport where it can; when the list is genuinely taller than the
       screen, cap it here and let it scroll instead of being cut off. */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Opening/closing is driven from JS (main.js), not plain :hover — the
     flyout is position:fixed and sits a few px away from the trigger
     button, so a pure :hover chain drops out while the cursor crosses that
     gap on its way into the submenu, closing it before it can be used. */
  html.sidebar-collapsed .sb-group.flyout-open .sb-body { display: flex; }

  /* Match the sidebar's own thin dark scrollbar (a default light one would
     look pasted onto the dark flyout). */
  html.sidebar-collapsed .sb-body::-webkit-scrollbar        { width: 4px; }
  html.sidebar-collapsed .sb-body::-webkit-scrollbar-track  { background: transparent; }
  html.sidebar-collapsed .sb-body::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 4px; }
  html.sidebar-collapsed .sb-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
}

/* ── Main Content ───────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s ease;
}

/* ── Top Navbar ─────────────────────────────────────────── */
.top-navbar {
  min-height: var(--navbar-height);
  position: sticky;
  top: 0;
  z-index: 1040;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  flex-wrap: nowrap;
}

.top-navbar-start {
  min-width: 0;
}

.top-navbar-end {
  margin-left: auto;
}

.page-title-text {
  font-size: 15px;
  color: #1e293b;
  min-width: 0;
  max-width: 100%;
}

.top-navbar .top-navbar-user {
  min-height: 0;
  padding: 4px 8px;
}

/* Quick Actions header dropdown */
.quick-actions-dropdown .quick-actions-btn {
  min-height: 0;
  padding: 4px 10px;
  white-space: nowrap;
}

.quick-actions-menu {
  min-width: 240px;
  max-width: min(300px, calc(100vw - 1.5rem));
  margin-top: 0.35rem;
  display: none;
}

.quick-actions-menu.show {
  display: block;
}

.quick-actions-menu .dropdown-item {
  font-size: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.quick-actions-menu .dropdown-item span {
  line-height: 1.3;
}

@media (max-width: 575.98px) {
  .quick-actions-dropdown .quick-actions-menu {
    position: fixed;
    right: 0.75rem;
    left: auto;
    top: calc(var(--navbar-height, 56px) + 2px);
    transform: none;
  }
}

/* ── Language Toggle ────────────────────────────────────── */
.btn-xs {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}

/* ── Flash Alert ────────────────────────────────────────── */
.flash-alert { border-radius: 10px; }

/* ── Page Content ───────────────────────────────────────── */
.page-content { flex: 1; }

/* ── Stat Cards ─────────────────────────────────────────── */
.stat-card {
  border-radius: 14px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.09) !important;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  margin: 8px 0 3px;
  line-height: 1;
}

.stat-label {
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 500;
}

/* Dashboard charts — fixed-height containers for Chart.js */
.dashboard-chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
}
.dashboard-chart-wrap--collections {
  height: 260px;
}
.dashboard-chart-wrap--portfolio {
  height: 220px;
  max-width: 260px;
  margin: 0 auto;
}
.dashboard-chart-wrap--disburse {
  height: 300px;
}
.dashboard-chart-header {
  flex-wrap: wrap;
  gap: 8px;
}
.dashboard-chart-legend {
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* ── Cards ──────────────────────────────────────────────── */
.card { border-radius: 12px; }
.card-header {
  border-radius: 12px 12px 0 0 !important;
  font-size: 14px;
  padding: 12px 16px;
}

/* ── Tables ─────────────────────────────────────────────── */
.table-finix thead th {
  background-color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  border-top: none;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.table-finix tbody td {
  font-size: 13.5px;
  vertical-align: middle;
  border-color: #f1f5f9;
}

.table-finix tbody tr:hover { background-color: #f8fafc; }

/* ── Badges ─────────────────────────────────────────────── */
.badge { font-weight: 500; border-radius: 6px; }

/* KYC Status Badges */
.badge-verified { background: #d1fae5; color: #065f46; }
.badge-pending  { background: #fef3c7; color: #92400e; }
.badge-rejected { background: #fee2e2; color: #991b1b; }

/* Loan Status */
.badge-active   { background: #dbeafe; color: #1e40af; }
.badge-npa      { background: #fee2e2; color: #991b1b; }
.badge-closed   { background: #f3f4f6; color: #374151; }

/* ── Forms ──────────────────────────────────────────────── */
.form-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e0eaff;
  margin-bottom: 18px;
}

.form-label { font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 5px; }
.form-control, .form-select { font-size: 14px; border-radius: 8px; }
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary   { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: #1251a3; border-color: #1251a3; }

/* ── Auth Layout ────────────────────────────────────────── */
.auth-body {
  background: linear-gradient(135deg, #0d1b2a 0%, #1565c0 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-wrapper { width: 100%; max-width: 420px; }

.auth-card {
  border-radius: 18px;
  overflow: hidden;
}

.auth-card-header {
  background: linear-gradient(135deg, #0d1b2a, #1565c0);
  color: #fff;
  padding: 28px 24px 20px;
}

.auth-card-header .text-muted { color: rgba(255,255,255,0.65) !important; }

.auth-logo {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.auth-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Passbook Table ─────────────────────────────────────── */
.passbook-table th { background: #1565c0; color: #fff; }

/* ── Responsive — Mobile Sidebar ───────────────────────── */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.sidebar-open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0 !important;
  }
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1049;
}

/* ── Utility ────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.text-rupee::before { content: '₹'; }
.fw-600 { font-weight: 600; }
.rounded-10 { border-radius: 10px; }
.min-w-0 { min-width: 0; }

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL FINANCIAL COLOUR SYSTEM
   Replaces Bootstrap's bright/fruity defaults with a clean,
   banking-grade palette. No template changes needed — these
   overrides cascade onto every existing class usage.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Navy blue — primary brand (already set above, repeated for clarity) */
  --f-blue:        #1565c0;
  --f-blue-dark:   #0d47a1;
  --f-blue-bg:     #e8f0fe;
  --f-blue-border: #b3cef6;

  /* Forest green — positive / credit / active / verified */
  --f-green:        #1a6b3c;
  --f-green-dark:   #14532d;
  --f-green-bg:     #eef7f1;
  --f-green-border: #a7d6b8;

  /* Dark crimson — negative / debit / overdue / rejected */
  --f-red:          #9b2335;
  --f-red-dark:     #7b1d29;
  --f-red-bg:       #fdf2f3;
  --f-red-border:   #f0b8be;

  /* Dark amber — pending / caution / partial */
  --f-amber:        #8a5700;
  --f-amber-dark:   #6d4300;
  --f-amber-bg:     #fdf8ec;
  --f-amber-border: #e6cc87;

  /* Slate grey — closed / inactive / secondary text */
  --f-gray:         #475569;
  --f-gray-bg:      #f1f5f9;
  --f-gray-border:  #cbd5e1;
}

/* ── Text colours ───────────────────────────────────────── */
.text-primary   { color: var(--f-blue)  !important; }
.text-success   { color: var(--f-green) !important; }
.text-danger    { color: var(--f-red)   !important; }
.text-warning   { color: var(--f-amber) !important; }
.text-info      { color: var(--f-blue)  !important; }
.text-secondary { color: var(--f-gray)  !important; }

/* ── Solid badge / background fills ─────────────────────── */
.bg-success { background-color: var(--f-green) !important; color: #fff !important; }
.bg-danger  { background-color: var(--f-red)   !important; color: #fff !important; }
.bg-warning { background-color: var(--f-amber) !important; color: #fff !important; }
.bg-info    { background-color: var(--f-blue)  !important; color: #fff !important; }
.bg-secondary { background-color: var(--f-gray) !important; color: #fff !important; }

/* ── Subtle (pastel) backgrounds — BS5 compatibility ────── */
.bg-primary-subtle { background-color: var(--f-blue-bg)  !important; }
.bg-success-subtle { background-color: var(--f-green-bg) !important; }
.bg-danger-subtle  { background-color: var(--f-red-bg)   !important; }
.bg-warning-subtle { background-color: var(--f-amber-bg) !important; }
.bg-info-subtle    { background-color: var(--f-blue-bg)  !important; }
.bg-secondary-subtle { background-color: var(--f-gray-bg) !important; }

/* Ensure text inside subtle badges reads correctly */
.badge.bg-success-subtle, .text-success.bg-success-subtle { color: var(--f-green) !important; }
.badge.bg-danger-subtle,  .text-danger.bg-danger-subtle   { color: var(--f-red)   !important; }
.badge.bg-warning-subtle, .text-warning.bg-warning-subtle { color: var(--f-amber) !important; }
.badge.bg-info-subtle,    .text-info.bg-info-subtle       { color: var(--f-blue)  !important; }
.badge.bg-secondary-subtle                                 { color: var(--f-gray)  !important; }
.badge.bg-primary-subtle                                   { color: var(--f-blue)  !important; }

/* ── Solid action buttons ────────────────────────────────── */
.btn-success {
  background-color: var(--f-green) !important;
  border-color:     var(--f-green) !important;
  color: #fff !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--f-green-dark) !important;
  border-color:     var(--f-green-dark) !important;
}

.btn-danger {
  background-color: var(--f-red) !important;
  border-color:     var(--f-red) !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: var(--f-red-dark) !important;
  border-color:     var(--f-red-dark) !important;
}

.btn-warning {
  background-color: var(--f-amber) !important;
  border-color:     var(--f-amber) !important;
  color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: var(--f-amber-dark) !important;
  border-color:     var(--f-amber-dark) !important;
  color: #fff !important;
}

.btn-info {
  background-color: var(--f-blue) !important;
  border-color:     var(--f-blue) !important;
  color: #fff !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: var(--f-blue-dark) !important;
  border-color:     var(--f-blue-dark) !important;
}

.btn-secondary {
  background-color: var(--f-gray) !important;
  border-color:     var(--f-gray) !important;
  color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: #334155 !important;
  border-color:     #334155 !important;
}

/* ── Outline action buttons ──────────────────────────────── */
.btn-outline-success {
  color: var(--f-green) !important;
  border-color: var(--f-green) !important;
  background: transparent !important;
}
.btn-outline-success:hover, .btn-outline-success:active {
  background-color: var(--f-green) !important;
  color: #fff !important;
}

.btn-outline-danger {
  color: var(--f-red) !important;
  border-color: var(--f-red) !important;
  background: transparent !important;
}
.btn-outline-danger:hover, .btn-outline-danger:active {
  background-color: var(--f-red) !important;
  color: #fff !important;
}

.btn-outline-warning {
  color: var(--f-amber) !important;
  border-color: var(--f-amber) !important;
  background: transparent !important;
}
.btn-outline-warning:hover, .btn-outline-warning:active {
  background-color: var(--f-amber) !important;
  color: #fff !important;
}

.btn-outline-info {
  color: var(--f-blue) !important;
  border-color: var(--f-blue) !important;
  background: transparent !important;
}
.btn-outline-info:hover, .btn-outline-info:active {
  background-color: var(--f-blue) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: var(--f-gray) !important;
  border-color: var(--f-gray-border) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background-color: var(--f-gray-bg) !important;
  color: var(--f-gray) !important;
}

/* Report PDF download — outline style (not alert red) */
.btn-download-pdf {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  font-weight: 500;
  white-space: nowrap;
}
.btn-download-pdf:hover,
.btn-download-pdf:focus,
.btn-download-pdf:active {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #111827 !important;
}
.btn-download-pdf .bi-file-earmark-pdf {
  color: #dc2626;
}

/* Report page headers — compact action toolbar */
.report-header {
  flex-wrap: wrap;
  gap: 12px;
}
.report-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.report-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Alert boxes ─────────────────────────────────────────── */
.alert-success {
  background-color: var(--f-green-bg)     !important;
  border-color:     var(--f-green-border) !important;
  color:            var(--f-green-dark)   !important;
}
.alert-danger {
  background-color: var(--f-red-bg)     !important;
  border-color:     var(--f-red-border) !important;
  color:            var(--f-red-dark)   !important;
}
.alert-warning {
  background-color: var(--f-amber-bg)     !important;
  border-color:     var(--f-amber-border) !important;
  color:            var(--f-amber-dark)   !important;
}
.alert-info {
  background-color: var(--f-blue-bg)     !important;
  border-color:     var(--f-blue-border) !important;
  color:            var(--f-blue-dark)   !important;
}

/* ── Table status rows ───────────────────────────────────── */
.table-success { background-color: var(--f-green-bg) !important; }
.table-danger  { background-color: var(--f-red-bg)   !important; }
.table-warning { background-color: var(--f-amber-bg) !important; }
.table-info    { background-color: var(--f-blue-bg)  !important; }

/* ── Form validation ─────────────────────────────────────── */
.form-control.is-valid,   .form-select.is-valid   { border-color: var(--f-green) !important; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--f-red)   !important; }
.valid-feedback   { color: var(--f-green) !important; }
.invalid-feedback { color: var(--f-red)   !important; }

/* ── Nav pills (scheme tabs etc.) ────────────────────────── */
.nav-pills .nav-link.active {
  background-color: var(--f-blue) !important;
}
.nav-pills .nav-link:not(.active) {
  color: var(--f-gray) !important;
}

/* ── Progress bars ───────────────────────────────────────── */
.progress-bar.bg-success { background-color: var(--f-green) !important; }
.progress-bar.bg-danger  { background-color: var(--f-red)   !important; }
.progress-bar.bg-warning { background-color: var(--f-amber) !important; }
.progress-bar.bg-info    { background-color: var(--f-blue)  !important; }

/* ── Dropdown active item ────────────────────────────────── */
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--f-blue) !important;
}

/* ── Mobile layout utilities (rolled out module-by-module) ── */
@media (max-width: 991.98px) {
  .page-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .page-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .card-header-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 767.98px) {

  .dashboard-chart-wrap--collections { height: 220px; }
  .dashboard-chart-wrap--disburse { height: 280px; }
  .dashboard-chart-wrap--portfolio { height: 200px; }
  .dashboard-chart-header {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .dashboard-chart-legend {
    font-size: 10px !important;
  }

  /* Report headers: keep Download / Print as a compact horizontal row */
  .report-header {
    flex-direction: column;
    align-items: stretch !important;
  }
  .report-header-actions {
    flex-direction: row !important;
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px !important;
  }
  .report-header-actions .btn,
  .report-header > .btn-download-pdf {
    flex: 1 1 0;
    min-height: 36px !important;
    width: auto !important;
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
    justify-content: center;
  }

  /* Page header: stack title block and action buttons */
  .page-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }
  .page-header-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px !important;
  }
  .page-header-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* Card toolbars (e.g. RD bulk collect Select All) */
  .card-header-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }
  .card-header-toolbar .toolbar-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .card-header-toolbar .toolbar-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* Sticky submit bar for field collection screens */
  .mobile-sticky-submit {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  }
  .mobile-sticky-submit .card-body {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }
  .mobile-sticky-submit .btn {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }

  /* Horizontal scroll for wide tables only — not the whole page */
  .table-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Modals: full-width buttons, fit viewport (Bootstrap fullscreen-sm-down handles shell) */
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-footer .btn {
    width: 100%;
    min-height: 44px;
    margin: 0;
  }

  /* RD / loan / savings schedule action cells */
  .action-cell .d-flex,
  .rd-action-cell .d-flex {
    flex-direction: column;
    gap: 6px;
  }
  .action-cell .btn,
  .rd-action-cell .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .action-cell form,
  .rd-action-cell form {
    width: 100%;
  }

  /* Locker card action row */
  .locker-card-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .locker-card-actions .btn,
  .locker-card-actions form {
    width: 100%;
  }
  .locker-card-actions form .btn {
    width: 100%;
  }

  /* Inline filter bars (lockers rent search, etc.) */
  .mobile-filter-form {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .mobile-filter-form .form-control,
  .mobile-filter-form .form-select {
    width: 100% !important;
    max-width: none !important;
  }
  .mobile-filter-form .btn {
    width: 100%;
    min-height: 44px;
  }

  /* Card footer pagination */
  .card-footer.d-flex {
    flex-wrap: wrap;
    gap: 8px;
  }
  .card-footer .btn-sm {
    min-height: 44px;
    flex: 1 1 calc(50% - 4px);
  }

  /* Alert banners with side actions */
  .alert-mobile-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
  }
  .alert-mobile-stack .btn {
    width: 100%;
    min-height: 44px;
  }

  /* Stat cards: tighten padding and shrink value font */
  .stat-value  { font-size: 18px; }
  .stat-icon   { width: 36px; height: 36px; font-size: 16px; }
  .card-body.py-3 { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* Tables: reduce cell padding & font so more fits inside scroll container */
  .table-finix thead th,
  .table-finix tbody td { font-size: 12.5px; padding: 7px 8px; }

  /* Touch targets — minimum 44px for primary actions */
  .btn-xs {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm {
    min-height: 40px;
  }

  /* Top navbar — compact; must follow global .btn-xs/.btn-sm touch rules */
  .top-navbar {
    min-height: 52px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .top-navbar .top-navbar-user.btn-sm {
    min-height: 34px;
    min-width: 34px;
    padding: 4px 6px;
  }
  .top-navbar .top-navbar-user.dropdown-toggle::after {
    margin-left: 0;
  }
  .top-navbar .page-title-text {
    font-size: 13px;
  }

  .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
  }

  /* Form action button row: stack on mobile */
  .form-btn-row { flex-direction: column !important; }
  .form-btn-row .btn { width: 100%; min-height: 44px; }

  /* Member profile tabs: allow scrolling on small screen */
  #memberTabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .member-tab { white-space: nowrap; padding: 10px 12px; }
}

/* ── Member Profile ─────────────────────────────────────── */
.info-label { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 3px; }
.info-value  { font-size: 14.5px; color: #1e293b; }

.member-tab {
  display: flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 500; color: #6b7280;
  border: none; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 10px 16px;
  transition: color .15s, border-color .15s;
}
.member-tab:hover { color: #1565c0; border-bottom-color: #bfdbfe; background: transparent; }
.member-tab.active {
  color: #1565c0 !important; border-bottom-color: #1565c0 !important;
  background: transparent !important; font-weight: 600;
}

.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11px; font-weight: 700; border-radius: 10px;
  background: #e2e8f0; color: #475569; line-height: 1;
  transition: background .15s, color .15s;
}
.member-tab.active .tab-count { background: #1565c0; color: #fff; }

/* ── Inline Form Validation ─────────────────────────────── */
.field-error {
  display: block;
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.35;
}

.field-char-count {
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.form-control.finix-field-invalid,
.form-select.finix-field-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.15);
}

.form-control.finix-field-valid,
.form-select.finix-field-valid {
  border-color: #198754 !important;
  box-shadow: 0 0 0 0.15rem rgba(25, 135, 84, 0.12);
}

.input-group .form-control.finix-field-invalid {
  z-index: 3;
}

/* ── Print Styles ───────────────────────────────────────── */
@media print {
  /* Landscape A4, tight margins */
  @page { size: A4 landscape; margin: 10mm 8mm; }

  /* Force background colors to print */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Hide all UI chrome */
  .sidebar,
  .sidebar-overlay,
  .top-navbar,
  .btn,
  .btn-xs,
  .btn-sm,
  form,
  .alert-info,
  .flash-alert,
  .no-print,
  .page-header .d-flex > a,
  .page-header .d-flex > button { display: none !important; }

  /* Reset layout — content fills full page width */
  body { background: #fff !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; min-height: unset !important; }
  .page-content  { padding: 0 !important; }

  /* Remove overflow so table fits page — THIS fixes the scrollbar */
  .table-responsive { overflow: visible !important; width: 100% !important; }

  /* Scale table to fit landscape width */
  .table {
    width: 100% !important;
    font-size: 9.5px !important;
    border-collapse: collapse !important;
  }
  .table th,
  .table td {
    padding: 4px 6px !important;
    white-space: normal !important;
    word-break: break-word;
  }

  /* Hide action columns tagged no-print */
  .no-print { display: none !important; }

  /* Clean cards for print */
  .card { border: 1px solid #dee2e6 !important; box-shadow: none !important; break-inside: avoid; }
  .card-header { border-radius: 0 !important; background: #f8fafc !important; }
  .card-body { padding: 0 !important; }

  /* Table header background */
  .table thead th { background: #e2e8f0 !important; color: #1e293b !important; font-size: 9px !important; }
  .table-dark th, .table-dark td { color: #000 !important; background-color: #dee2e6 !important; }

  /* Society name at top */
  .page-content::before {
    content: "The Finix Supply And Credit Co-Operative Society Ltd.";
    display: block;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    border-bottom: 2px solid #1a3a6b;
    padding-bottom: 6px;
    color: #1a3a6b;
  }
}

/* ── Narration quick-pick chips ─────────────────────────────────
   Approved counter phrasings offered above the Narration / Special
   Instruction boxes. Chips stay compact so a row of them costs less
   vertical space than the field it serves. */
.narration-picker .np-chip {
  font-size: 11.5px;
  line-height: 1.35;
  text-align: left;
  border-radius: 12px;
  white-space: normal;
}
.narration-picker .np-chip .np-gu,
.np-more-menu .np-gu {
  font-size: 10.5px;
  line-height: 1.3;
}
.np-more-menu {
  max-height: 300px;
  overflow-y: auto;
  min-width: 260px;
}
@media print {
  .narration-picker { display: none !important; }
}

/* A chip whose {tokens} cannot resolve yet (no member selected) stays visible
   so the operator can see the phrasing exists, but is not clickable — picking
   it would write a truncated sentence onto the passbook. */
.narration-picker .np-chip.np-pending,
.np-more-menu .np-pending {
  opacity: .5;
  cursor: not-allowed;
  border-style: dashed;
}