/* =====================================================
   SACCOFIN – GLOBAL THEME (main.css)
   Single Source of Truth for the whole project
   ===================================================== */

/* =====================
   BRAND VARIABLES
   ===================== */
:root{
  --brand-blue:#243E8B;
  --brand-blue-2:#3A5FB5;
  --brand-green:#6BA539;
  --brand-green-2:#9BCB4E;

  --bg:#F5F7FA;
  --card:#FFFFFF;
  --text:#1F2A37;
  --muted:#6B7280;
  --border:#E5E7EB;

  --shadow:0 10px 25px rgba(36,62,139,.10);
  --shadow-strong:0 18px 40px rgba(0,0,0,.22);

  /* Professional gradients (blue family only) */
  --grad-primary: linear-gradient(180deg, #243E8B 0%, #1D3372 100%);
  --grad-primary-soft: linear-gradient(135deg, #3A5FB5 0%, #243E8B 100%);

  /* Surfaces */
  --surface: #FFFFFF;
  --surface-2: #FBFCFF;

  --thead: #f3f4f6;
  --thead-border: #e5e7eb;
  --row-hover: rgba(36,62,139,.04);

  /* Sidebar */
  --sidebar-bg: #243E8B;
  --sidebar-bg-2: #1D3372;
  --sidebar-hover: rgba(255,255,255,0.10);
  --sidebar-active: rgba(107,165,57,0.18);


  /* Focus */
  --focus: rgba(107,165,57,.18);
}

/* =====================
   BASE
   ===================== */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--bg); /* no global gradient */
  color: var(--text);
}

table{ border-collapse: separate; border-spacing: 0; }
table[align="center"]{ width: 98% !important; max-width: 1800px; }
td{ vertical-align: top; }

h1,h2,h3{
  color: var(--brand-blue);
  font-weight: 800;
}
h2{
  margin: 6px 0 14px;
  letter-spacing: .2px;
}
a{ color: var(--brand-blue); }
a:hover{ text-decoration: underline; }

/* =====================
   BUTTONS
   ===================== */
.btn{
  background: var(--grad-primary-soft);
  color:#fff;
  border:none;
  border-radius: 12px;
  padding: 10px 16px;
  cursor:pointer;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(36,62,139,.18);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.btn:hover{
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(36,62,139,.22);
}
.btn:active{ transform: translateY(1px); }

.btn-secondary,
.btn.btn-secondary{
  background: #ffffff;
  color: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  box-shadow: none;
}

.btn-secondary:hover{
  background: rgba(36,62,139,.06);
}

/* =====================
   FORMS
   ===================== */


input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
select,
textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: #fff;
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px var(--focus);
}

.small-hint{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.page-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.page-head h2{
  color: var(--brand-blue);
}

.page-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-col{ min-width: 0; }
.form-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 800px){
  .form-grid{ grid-template-columns: 1fr; }
  .page-head{ flex-direction: column; align-items: flex-start; }
}

/* =====================
   MODALS
   ===================== */
.modal{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(17,24,39,0.55);
  backdrop-filter: blur(2px);
  overflow:auto;
  padding: 40px 0;
}

.modal-content{
  background: var(--card);
  width: min(720px, 92%);
  margin: 4vh auto;
  padding: 18px;
  border-radius: 16px;
  box-shadow: var(--shadow-strong);
  border-top: 6px solid var(--brand-green); /* accent only */
  position: relative;
}

.close{
  position:absolute;
  top: 10px;
  right: 14px;
  font-size: 26px;
  cursor:pointer;
  color: var(--muted);
}
.close:hover{ color: var(--brand-blue); }

#modalTitle{
  margin: 4px 0 14px;
  color: var(--brand-blue);
  font-weight: 900;
}

/* =====================
   INDEX LAYOUT + SIDEBAR
   ===================== */
.header-image{
  width: 200px;
  max-width: 200px;
  height: auto;
  display:block;
  padding: 10px 0;
}

.action-dropdown{
  z-index: 99999 !important;
}


.container{
  background: transparent;
  min-height: 80vh;
  width: 100% !important;
  max-width: 1800px;
  margin: 0 auto;
  padding: 14px 14px 18px;
  /* allow wide DataTables (Loans) to scroll horizontally */
  overflow-x: auto;
}

.sidebar{
  min-height: 100vh;
  top: 10px;
  padding: 16px 12px;
  background: var(--grad-primary);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 12px 28px rgba(36, 62, 139, 0.22);
  position: relative;
}

.sidebar nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
}


.sidebar nav > a{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  font-size: 0.98rem;
  transition: background 0.2s ease, transform 0.05s ease, color 0.2s ease;
}

.sidebar nav > a i{
  width: 18px;
  text-align:center;
  color: rgba(255,255,255,0.95);
}

.sidebar nav > a:hover{
  background: var(--sidebar-hover);
  color:#fff;
}

.sidebar nav > a.active{
  background: var(--sidebar-active);
  border: 1px solid rgba(107,165,57,0.35);
  color:#fff;
}

.sidebar nav .dropdown-content a{
  color: var(--text) !important;
  background: #fff !important;
}

.sidebar nav .dropdown-content a i{
  color: var(--brand-blue) !important;
}
/* User Menu */
.user-menu{ position: relative; margin-top: 14px; }

.user-icon{
  cursor:pointer;
  padding: 10px 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  user-select:none;
}

.user-icon i{ color: var(--brand-green-2); }

.dropdown-content{
  display:none;
  position:absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  overflow:hidden;
  z-index: 999;
}

.dropdown-content a{
  color: var(--text);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(229,231,235,0.8);
  transition: background 0.15s ease;
}

.dropdown-content a:last-child{ border-bottom:none; }
.dropdown-content a i{ width: 18px; text-align:center; color: var(--brand-blue); }
.dropdown-content a:hover{ background: rgba(107,165,57,0.10); }
.show-dropdown{ display:block; }

.user-info{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-size: 0.85rem;
  line-height: 1.35;
}
.user-info strong{ color:#fff; }

@media (max-width: 900px){
  table[align="center"]{ width: 98% !important; }
  .header-image{ width: 200px; max-width: 200px; }
}

/* =====================
   DATATABLES + TABLES
   ===================== */
table.dataTable{ width: 100% !important; position: relative;z-index: 1;}
.dataTables_wrapper{ width: 100% !important; position: relative; z-index: 1; }




/* Clean executive table head (no gradients) */
table.dataTable thead th,
table.dataTable thead td,
table.display thead th,
table.display thead td{

  background-color: #f3f4f6 !important;   /* light grey */
  color: var(--brand-blue) !important;
  font-weight: 900 !important;
  border-color: var(--thead-border) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--thead-border) !important;
  box-shadow: none;
  position: relative;

}


/* =====================
   DATATABLES SORT ICONS
   - darker
   - no shadow
   - reserve space so icons don't collide with header labels
   ===================== */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc{
  background-image: none !important; /* remove default DataTables icon */
  padding-right: 30px !important;    /* reserve room for our icon */
  white-space: nowrap;
}

/* Default (unsorted) */
table.dataTable thead th.sorting::after{
  content: "\f0dc"; /* sort */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(36,62,139,.70);
  opacity: 1;
  text-shadow: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Ascending */
table.dataTable thead th.sorting_asc::after{
  content: "\f0de"; /* up */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--brand-blue);
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Descending */
table.dataTable thead th.sorting_desc::after{
  content: "\f0dd"; /* down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--brand-blue);
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Wide tables (e.g., Loans) */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table{ min-width: 1100px; }

table.dataTable td:last-child,
table.dataTable td.amount{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

table.display tbody td,
table.dataTable tbody td{
  padding: 8px 10px !important;
  border-color: rgba(229,231,235,.85) !important;
  color: var(--text);
  vertical-align: middle;
  background: #fff;
}

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

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  outline: none;
  background: #fff;
}
.dataTables_wrapper .dataTables_filter input:focus{
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px var(--focus) !important;
}

/* DataTables export buttons */
.dt-button{
  background: var(--grad-primary-soft) !important;
  color:#fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: 0 6px 14px rgba(36,62,139,0.18) !important;
}
.dt-button:hover{ filter: brightness(1.05); }

/* =====================
   ACTION MENU (ELLIPSIS + DROPDOWN)
   ===================== */
td, th{ overflow: visible !important;; }

.action-menu{
  position: relative;
  display: inline-block;
  z-index: 10000;
}

.ellipsis-btn{
  background: rgba(36,62,139,.08);
  border: 1px solid rgba(36,62,139,.18);
  color: var(--brand-blue);
  border-radius: 10px;
}
.ellipsis-btn:hover{
  background: rgba(36,62,139,.12);
}

.action-dropdown{
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background-color: #fff;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,.9);
  z-index: 10001 !important;
  overflow: hidden;
}

.dropdown-btn,
.action-dropdown form button,
.action-dropdown form button.dropdown-btn{
  all: unset;
  display:flex;
  align-items:center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  cursor:pointer;
}

.dropdown-btn i,
.action-dropdown form button i{
  width: 18px;
  text-align:center;
  color: var(--brand-blue);
}

.dropdown-btn:hover,
.action-dropdown form button:hover{
  background: rgba(107,165,57,.10);
}

.action-dropdown form{
  margin:0;
  padding:0;
  border:none;
}

.dropdown-btn:not(:last-child){
  border-bottom: 1px solid rgba(229,231,235,.85);
}

/* Logo thumbnail in table */
.table-logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 10px;
  background: #fff;
}

/* =====================
   SACCO INFO: LOGO PREVIEW
   ===================== */
.logo-preview{
  display:flex;
  gap: 14px;
  align-items:center;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(229,231,235,.85);
  border-radius: 12px;
  background: var(--surface-2);
}
.logo-preview img{
  width: 74px;
  height: 74px;
  object-fit: contain;
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 12px;
  background: #fff;
}

/* =====================
   DASHBOARD (Namespaced: dash-*)
   ===================== */
.dash-wrap{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 6px 20px;
}

.dash-header{
  background: var(--grad-primary-soft);
  color:#fff;
  padding: 18px 16px;
  text-align:center;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border-top: 5px solid var(--brand-green); /* accent */
  margin-bottom: 18px;
}
.dash-header h1{
  margin:0;
  font-size: 1.6rem;
  letter-spacing: .6px;
  color:#fff;
  font-weight: 900;
}

.dash-kpis{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.dash-card{
  background: var(--card);
  padding: 16px 14px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(229,231,235,.85);
  text-align:center;
  position: relative;
  overflow:hidden;
}
.dash-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:5px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-2)); /* accent strip */
}
.dash-card i{
  font-size: 1.9rem;
  color: var(--brand-blue);
  display:block;
  margin: 6px 0 8px;
}
.dash-card h2{
  font-size: 1.5rem;
  margin: 6px 0 4px;
  color: var(--brand-blue);
  font-weight: 900;
}
.dash-card p{
  margin:0;
  font-size: .92rem;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dash-charts{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}

.dash-panel{
  background: var(--card);
  padding: 16px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(229,231,235,.85);
  min-height: 520px;
}
.dash-panel h2{
  margin: 2px 0 12px;
  text-align:center;
  color: var(--brand-blue);
  font-size: 1.05rem;
  font-weight: 900;
}

.dash-tablebox{
  width:100%;
  overflow-x:auto;
  padding: 8px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid rgba(229,231,235,.85);
}
.dash-table{
  width:100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.dash-table th,
.dash-table td{
  padding: 8px 10px;
  border: 1px solid rgba(229,231,235,.85);
  font-size: .9rem;
}
.dash-table th{
  background: var(--thead);
  color: var(--brand-blue);
  text-align:left;
  font-weight: 900;
}
.dash-table td:first-child{ text-align:left; }
.dash-table td:last-child{ text-align:right; font-variant-numeric: tabular-nums;}
.dash-table tr:hover td{ background: var(--row-hover); }

.dash-chart-spacer{ margin-top:14px; height: 280px; }
#savingsChart{ width:100% !important; height:100% !important; }

.dash-pie-wrap{ height: 420px; }
#pieChart{ width:100% !important; height:100% !important; }

.dash-marquee{
  margin: 16px 0 0;
  background: var(--grad-primary-soft);
  color:#fff;
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border-left: 6px solid var(--brand-green);
  overflow:hidden;
}
.dash-marquee h2{
  margin:0;
  color:#fff;
  font-size:1.05rem;
  font-weight:900;
}
.dash-marquee-content{
  margin-top:8px;
  display:inline-block;
  white-space:nowrap;
  animation: dash-scroll-left 18s linear infinite;
  opacity:.95;
}
@keyframes dash-scroll-left{
  0%{ transform: translateX(100%); }
  100%{ transform: translateX(-100%); }
}

@media (max-width:1100px){
  .dash-charts{ grid-template-columns: 1fr; }
  .dash-panel{ min-height: 420px; }
  .dash-pie-wrap{ height: 340px; }
}

/* ===== Flex App Shell (replaces table.app-shell) ===== */
.app-shell{
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.app-left{
  width: 240px;
  flex: 0 0 240px;
  padding: 12px;
  background: transparent;
}

.app-main{
  flex: 1;
  min-width: 0; /* critical: prevents horizontal overflow + flicker */
}

/* Sidebar sticky is safe in flex layout */
.sidebar{
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* Optional: reduce repaints (still looks good) */
.sidebar{
  box-shadow: 0 8px 18px rgba(36,62,139,.14);
}

/* =====================
   AUTH PAGE LAYOUT
   ===================== */
.auth-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  padding: 100px 16px 20px;
}

/* Push footer to bottom */
.auth-footer{
  margin-top: auto;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 0px 10px;
  max-width: 640px;
}

.auth-footer a{
  color: var(--brand-blue);
  font-weight: 500;
  text-decoration: none;
}

.auth-footer a:hover{
  text-decoration: underline;
}

/* Optional title spacing */
.auth-title{
  margin: 6px 0 16px;
}


.auth-card{
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 20px;
  text-align: center;
  border-top: 6px solid var(--brand-green);
}
.auth-logo{
  width: 170px;
  max-width: 170px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}
.auth-links{
  margin-top: 12px;
  text-align: right;
  font-weight: 800;
}

.auth-links a{
  font-size: .95rem;
  color: var(--brand-green);
  text-decoration: none;
  font-weight: 100;
}
.auth-links a:hover{ text-decoration: underline; }
/* Alerts (also used across app) */
.alert{
  padding: 10px 12px;
  margin-top: 12px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid rgba(229,231,235,.9);
  text-align: left;
}

/* =====================================
   AUTH LOGIN – 80% CANVAS, 50/50 SPLIT
   ===================================== */

.auth-overlay {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: 10%; /* 20% total padding */
  box-sizing: border-box;
  background: var(--bg);

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

/* 80% INNER CANVAS */
.auth-overlay::before {
  content: "";
  position: absolute;
  inset: 10%;
  background-image: url("../images/login.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24px;
  z-index: 0;
}

/* Soft readability overlay */
.auth-overlay::after {
  content: "";
  position: absolute;
  inset: 10%;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.25)
  );
  border-radius: 24px;
  z-index: 0;
}

/* LOGIN CARD – 50% OF 80% */
.auth-card-overlay {
  position: relative;
  z-index: 1;
  width: 50%;          /* ← key rule */
  max-width: 500px;   /* safety cap */
  min-width: 360px;
  margin-left: auto;  /* push to right */
  margin-right: 64px;   /* ✅ key adjustment */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 40px;
  border-radius: 20px;
  box-shadow: var(--shadow-strong);
}

/* FOOTER – INSIDE 80% */
.auth-footer-overlay {
  position: absolute;
  bottom: calc(10% + 16px);
  right: calc(10% + 32px);
  z-index: 1;

  font-size: 13px;
  color: #ffffff;
  opacity: 0.9;
}

.auth-footer-overlay a {
  color: #ffffff;
  text-decoration: underline;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px) {
  .auth-card-overlay {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .auth-footer-overlay {
    position: static;
    margin-top: 24px;
    text-align: center;
    color: var(--muted);
  }

  .auth-footer-overlay a {
    color: var(--brand-blue);
  }
}

.alert-success{ background: rgba(107,165,57,.12); color:#14532d; border-color: rgba(107,165,57,.25); }
.alert-danger{  background: rgba(239,68,68,.10);  color:#7f1d1d; border-color: rgba(239,68,68,.25); }
.alert-info{    background: rgba(59,130,246,.10); color:#1e3a8a; border-color: rgba(59,130,246,.22); }

/* =====================
   PRINT FORMS (Loan / Withdrawal / Allotment)
   ===================== */
.print-page{
  font-family: Arial, sans-serif;
  background: #fff;
  color: var(--text);
  padding: 28px;
}

.print-wrap{
  max-width: 900px;
  margin: 0 auto;
}

.print-header{
  text-align: center;
  margin-bottom: 18px;
}

.print-logo{
  width: 70px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

.print-title,
.print-subtitle{
  margin: 0;
  font-weight: 900;
  color: var(--brand-blue);
}

.print-subtitle{ margin-top: 4px; }

.print-section{ margin: 18px 0; }

.print-section h3{
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--brand-blue);
  font-weight: 900;
}

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

.print-table td{
  padding: 7px 8px;
  vertical-align: top;
  border-bottom: 1px solid rgba(229,231,235,.6);
}

.print-label{
  font-weight: 900;
  width: 240px;
  white-space: nowrap;
  color: var(--text);
}

.print-box{
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}

.print-note{
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.signature-line{ margin-top: 12px; }
.signature-line span{
  display: inline-block;
  border-top: 1px solid #000;
  width: 220px;
  margin-right: 26px;
  text-align: center;
  padding-top: 3px;
}

.page-break{
  page-break-before: always;
  break-before: page;
}

.print-actions{
  text-align: center;
  margin-top: 18px;
}

@media print{
  .print-actions{ display:none !important; }
  body{ background:#fff !important; }
  .print-page{ padding: 0 !important; }
}

/* =====================
   SAVINGS FILTER BUTTON
   ===================== */
.filter-btn{
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 800;
}
.filter-btn:hover{ background: rgba(36,62,139,.06); }
.active-filter{
  background: var(--brand-green);
  color: #fff;
  border-color: var(--brand-green);
}

/* =====================
   STATUS BADGES
   ===================== */
.status-badge{
  display:inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}

.status-approved{ background: #28a745; color:#fff; }
.status-rejected{ background: #dc3545; color:#fff; }
.status-cancelled{ background:#6c757d; color:#fff; }
.status-pending{ background:#ffc107; color:#212529; }

/* =====================================================
   SACCOFIN – INDEX / SIDEBAR OVERRIDES
   (Use ONLY if index.html still has header+sidebar layout)
   ===================================================== */

/* Base page */
body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

/* Fixed header */
header{
  background: var(--grad-primary-soft);
  color:#fff;
  min-height: 70px;
  padding: 10px 16px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  display:flex;
  align-items:center;
  gap: 14px;
  box-shadow: 0 10px 22px rgba(36,62,139,.18);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

header h1{
  margin:0;
  font-size: 18px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color:#fff;
  font-weight: 900;
}

/* Header logo */
.header-image{
  width: 200px;
  height: auto;
  display:block;
}

/* App layout container */
.container{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 14px 18px;
  overflow-x: auto;
}

/* Sidebar */
.sidebar{
  width: 220px;
  min-height: 100vh;
  background: var(--grad-primary);
  color:#fff;
  padding: 14px 12px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: 0 12px 28px rgba(36,62,139,.20);
  position: sticky; /* stays visible while scrolling */
  top: 10px;
  overflow: auto;
}

/* Sidebar links */
.sidebar nav a{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.98rem;
  margin: 4px 0;
  transition: background .2s ease, transform .05s ease;
}

.sidebar nav a:hover{
  background: var(--sidebar-hover);
  color:#fff;
}

.sidebar nav a.active{
  background: var(--sidebar-active);
  border: 1px solid rgba(107,165,57,0.35);
  color:#fff;
}

/* User info block in sidebar */
.user-info{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-size: 0.85rem;
  line-height: 1.35;
}
.user-info p{ margin: 0; }

/* Forms */
form{
  background: var(--card);
  padding: 18px;
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow);
}

form label{
  display:block;
  margin-bottom: 6px;
  color: var(--brand-blue);
  font-weight: 900;
}

form input[type="text"],
form input[type="email"],
form input[type="date"],
form input[type="password"],
form input[type="number"],
form select{
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

form input:focus, form select:focus{
  outline:none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px var(--focus);
}

/* Buttons (ensure we use main theme) */
.btn{
  background: var(--grad-primary-soft);
  color:#fff;
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  box-shadow: 0 6px 14px rgba(36,62,139,.16);
}

.btn:hover{ filter: brightness(1.05); }

.btn-secondary{
  background: #fff;
  color: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  box-shadow: none;
}
.btn-secondary:hover{ background: rgba(36,62,139,.06); }

.btn-group{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tables */
table{
  width: 100%;
  margin-top: 10px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 12px;
  overflow: hidden;
}

table, th, td{ border: none; }

th, td{
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(229,231,235,.85);
}

th{
  background: var(--thead);
  color: var(--brand-blue);
  font-weight: 900;
}

tr:hover td{
  background: var(--row-hover);
}

/* Modal */
.modal{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0,0,0,0.45);
  overflow: auto;
  padding-top: 60px;
}

.modal-content{
  background: var(--card);
  margin: 5% auto;
  padding: 18px;
  border: 1px solid rgba(229,231,235,.9);
  width: min(840px, 92%);
  border-radius: 16px;
  box-shadow: var(--shadow-strong);
  border-top: 6px solid var(--brand-green);
}

.close{
  color: var(--muted);
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus{
  color: var(--brand-blue);
  cursor: pointer;
  text-decoration: none;
}

/* Keep your nowrap rules */
#loansTable td, #loansTable th,
#savingsTable td, #savingsTable th,
#membersTable td, #membersTable th{
  white-space: nowrap;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc{
  position: relative !important;
  padding-right: 34px !important; /* reserves room for icon (prevents label collision) */
  white-space: nowrap;
  background-image: none !important; /* disable DataTables default sort sprites */
  background: none !important;
    box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}


/* Default (unsorted) */
table.dataTable thead th.sorting::after{
  content: "\f0dc"; /* sort */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(36,62,139,.55);   /* darker */
  opacity: 1;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  background: none !important;
}

/* Ascending */
table.dataTable thead th.sorting_asc::after{
  content: "\f0de"; /* up */
  color: #243E8B;   /* brand blue */
}

/* Descending */
table.dataTable thead th.sorting_desc::after{
  content: "\f0dd"; /* down */
  color: #243E8B;   /* brand blue */
}

/* Horizontal scroll for wide DataTables */
.dt-hscroll{
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;   /* important for dropdown */
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

/* Ensure table keeps its width and doesn't crush columns */
.dt-hscroll table.dataTable{
  width: 100% !important;
  min-width: 1200px;     /* adjust if needed */
}

/* Keep dropdowns from being clipped by table wrappers */
.dt-hscroll,
.dt-hscroll *{
  overflow: visible !important
}

/* ✅ DataTables: keep scroll containers stable (prevents flicker/crash) */
.dataTables_wrapper{
  overflow: visible; /* wrapper can be visible */
}

.dataTables_scroll{
  overflow: hidden !important; /* prevents header/body thrash */
}
.dataTables_scrollHead{
  overflow: hidden !important;
}
.dataTables_scrollBody{
  overflow: auto !important;
}

/* =========================
   USER DROPDOWN (FIXED)
   ========================= */

.user-menu {
  position: relative;
}
.user-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
}

/* Dropdown container */
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% - 4px); /* 👈 pulls it up to touch user badge */

  background: #ffffff;
  min-width: 220px;

  /* Rounded bottom, flatter top for docking */
  border-radius: 10px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.08);

  z-index: 9999;
  overflow: hidden;
}

/* Visible state */
.show-dropdown {
  display: block;
}

/* Dropdown links */
.dropdown-content a {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;
  color: #1f2937;
  font-size: 14px;
  text-decoration: none;
}

.dropdown-content a:hover {
  background: #f3f4f6;
}

/* Optional divider line */
.dropdown-content a + a {
  border-top: 1px solid #e5e7eb;
}

/* =========================
   MEMBER DASHBOARD (clone of dash-*)
   ========================= */
.member-dash-wrap{
  padding: 18px;
  max-width: 1200px;
  margin: 0 auto;
}

.member-dash-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}
.member-dash-header h1{
  margin:0;
  font-size: 20px;
  letter-spacing: .4px;
  color: var(--brand-blue);
  text-transform: uppercase;
}

/* KPI cards */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1200px){
  .kpi-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kpi-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:center;
}
.kpi-card i{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  box-shadow: 0 10px 22px rgba(36,62,139,.18);
}
.kpi-body h2{
  margin:0;
  font-size: 18px;
  color: var(--text);
  line-height: 1.1;
}
.kpi-body p{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* Charts grid */
.charts-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .charts-grid{ grid-template-columns: 1fr; }
}

.chart-panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.chart-panel-head{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(36,62,139,.06), rgba(255,255,255,0));
}
.chart-panel-head h2{
  margin:0;
  font-size: 14px;
  color: var(--brand-blue);
}

.chart-canvas{
  height: 300px;
  padding: 12px 14px 14px;
}
.chart-canvas canvas{
  width: 100% !important;
  height: 100% !important;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.chart-canvas.pie{
  height: 320px;
}

/* Marquee */
.marquee-card{
  margin-top: 14px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.marquee-card h2{
  margin:0 0 6px;
  font-size: 13px;
  letter-spacing: .3px;
}
.marquee-content{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .95;
  font-size: 13px;
}


/* =========================
   TOP BAR (SACCO NAME)
   ========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-blue);
  font-weight: 800;
}

.topbar-title{
  font-size: 15px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.topbar-role{
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  color: var(--brand-blue);
}

.topbar-user{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

  /* Stretch this dashboard to full page width (override .container limits) */
  .super-dash-wrap{
    width: 100%;
    max-width: 100%;
  }

  /* If your global .container has a max-width, neutralize it inside this page */
  .super-dash-wrap .container,
  .app-main > .container{
    width: 100%;
    max-width: 100%;
  }

  /* Give the grid more room and consistent padding */
  .super-dash-pad{
    width: 100%;
    padding: 14px 16px 18px;
  }

  /* Make chart panels taller so they fill space nicely */
  .super-dash-pad .chart-canvas{
    height: 320px;
  }
  .super-dash-pad .chart-canvas.pie{
    height: 320px;
  }

  /* Ensure DataTables/table doesn’t get squeezed */
  #superSaccoSummaryTable{
    width: 100% !important;
  }

.app-content.fullwidth { max-width: 100%; width: 100%; }

.app-content-fluid{
  width: 100%;
  max-width: 100% !important;
  padding-left: 16px;
  padding-right: 16px;
}

.dataTables_length {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}


.dataTables_length select {
  margin: 0;
  padding: 6px 4px;
  min-width: 70px;
  width: 70px;
  border-radius: 3px;
  border: 2px solid #dbe7d3; /* matches your screenshot */
  background: #fff;
  font-size: 15px;
}


/* Ensure borders actually render */
table.dataTable{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Row separators (td lines) */
table.dataTable tbody td thead th{
  border-bottom: 1px solid var(--border) !important; /* or var(--thead-border) */
}

/* Optional: add vertical separators too */
table.dataTable tbody td + td, thead, th{
  border-left: 1px solid rgba(0,0,0,0.06) !important;
}

/* Optional: keep last row clean */
table.dataTable tbody tr:last-child td{
  border-bottom: none !important;
}


.sidebar-divider {
  height: 1px;
  margin: 12px 0;
  background: rgba(255, 255, 255, 0.35); /* white but soft */
}