:root{
  --kw-green:#0f6b46;
  --kw-green-2:#13a66e;
  --kw-green-dark:#062d22;
  --kw-soft:#eef9f3;
  --kw-soft-2:#f6fbf8;
  --kw-gold:#d6a02f;
  --kw-ink:#0f172a;
  --kw-muted:#64748b;
  --kw-border:#e2e8f0;
}
html,body{min-height:100%;}
body{
  background:linear-gradient(180deg,#f2f7f4 0,#f7fafc 45%,#f4f7fb 100%)!important;
  color:var(--kw-ink);
  font-size:14px;
  font-family:"Poppins","Open Sans",Arial,sans-serif;
}
a{color:var(--kw-green);}a:hover{color:#0a4b34;}
.kw-topbar,#app-topbar,.navbar.fixed-top.bg-primary{
  background:linear-gradient(135deg,#062d22 0%,#0f6b46 58%,#13a66e 100%)!important;
  min-height:66px;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 30px rgba(6,45,34,.22);
}
#view-panel{
  margin-left:200px!important;
  width:calc(100% - 200px)!important;
  padding:88px 22px 1.8rem 22px!important;
  min-height:100vh;
  max-width:none!important;
}
#sidebar{
  background:linear-gradient(180deg,#051f18 0%,#073b2b 48%,#0f6b46 100%)!important;
  box-shadow:10px 0 28px rgba(15,23,42,.16);
  padding-top:78px!important;
}
#sidebar .nav-item{
  border-radius:14px;
  margin:.28rem .78rem;
  padding:.82rem .92rem!important;
  color:rgba(255,255,255,.9)!important;
  font-weight:600;
  letter-spacing:.01em;
}
#sidebar .nav-item .icon-field{width:28px;display:inline-flex;justify-content:center;margin-right:.3rem;}
#sidebar .nav-item:hover,#sidebar .nav-item.active{
  background:rgba(255,255,255,.15)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  text-decoration:none;
}
#sidebar .mx-2.text-white,
#sidebar .mx-2.text-white p{
  margin:.95rem .95rem .35rem!important;
  color:rgba(255,255,255,.65)!important;
  text-transform:uppercase;
  font-size:.7rem;
  letter-spacing:.08em;
  font-weight:800;
}
#sidebar .dropdown{background:transparent!important;width:100%;position:relative;display:block;}
#sidebar .dropbtn{
  width:auto!important;
  margin:.55rem .78rem .25rem!important;
  padding:.72rem .85rem!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  box-shadow:none!important;
}
#sidebar .dropbtn p{padding-left:0!important;margin:0!important;color:#fff!important;font-family:inherit!important;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;}
.dropdown-content{
  background:#073b2b!important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  margin-left:.8rem;
  min-width:220px;
  box-shadow:0 18px 35px rgba(0,0,0,.24);
}
.dropdown-content a{color:rgba(255,255,255,.88)!important;font-weight:600;}
.dropdown-content a:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;text-decoration:none;}
.card{
  border:0!important;
  border-radius:22px!important;
  box-shadow:0 16px 36px rgba(15,23,42,.09)!important;
  overflow:hidden;
  background:#fff;
}
.card-header{
  border-bottom:1px solid var(--kw-border)!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%)!important;
  border-radius:22px 22px 0 0!important;
  padding:1.15rem 1.45rem!important;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.card-header h1,.card-header h2,.card-header h3,.card-header h4,.card-header h5,
.card-header .card-title{margin:0;font-weight:800;color:var(--kw-ink);}
.card-body{
  padding:1.65rem!important;
  min-height:130px;
}
.card-body.p-0{padding:0!important;min-height:0;}
.metric-card .card-body{
  min-height:132px;
  padding:1.45rem!important;
  align-items:center!important;
}
.metric-icon{
  width:56px!important;
  height:56px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#e9f8ef,#dff4e8)!important;
  color:var(--kw-green)!important;
  flex:0 0 56px;
}
.metric-value{font-size:1.95rem!important;line-height:1.1;color:var(--kw-ink)!important;}
.metric-label{font-size:.75rem!important;color:var(--kw-muted)!important;}
.btn-primary,.bg-primary{
  background:linear-gradient(135deg,var(--kw-green),var(--kw-green-2))!important;
  border-color:var(--kw-green)!important;
}
.btn-primary{
  border:0!important;
  border-radius:11px!important;
  box-shadow:0 8px 18px rgba(15,107,70,.18)!important;
  font-weight:700;
}
.btn-success{border-radius:11px!important;font-weight:700;}
.btn-outline-primary{border-color:var(--kw-green)!important;color:var(--kw-green)!important;border-radius:10px!important;font-weight:700;}
.btn-outline-primary:hover{background:var(--kw-green)!important;border-color:var(--kw-green)!important;color:#fff!important;}
.table{background:#fff;font-size:.92rem;}
.table th{
  font-size:.76rem!important;
  text-transform:uppercase;
  letter-spacing:.035em;
  color:#475569;
  background:#f8fafc!important;
  border-top:0!important;
}
.table td,.table th{padding:.95rem!important;vertical-align:middle!important;}
.table tbody tr:hover{background:#fbfdfc;}
.dataTables_wrapper{padding:.25rem 0;}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.form-control,.custom-select,.select2-container .select2-selection--single{
  border-radius:12px!important;
  border:1px solid #dbe4ee!important;
  min-height:42px;
}
.form-control:focus,.custom-select:focus{
  border-color:var(--kw-green)!important;
  box-shadow:0 0 0 .18rem rgba(15,107,70,.12)!important;
}
.modal-content{border:0!important;border-radius:20px!important;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,42,.24)!important;}
.modal-header{background:linear-gradient(135deg,var(--kw-green-dark),var(--kw-green))!important;color:#fff!important;padding:1.15rem 1.35rem!important;}
.modal-body{padding:1.55rem!important;}
.modal-footer{background:#f8fafc!important;padding:1rem 1.35rem!important;}
.badge.bg-success,.badge-success{background:#16a34a!important;}
.badge.bg-danger,.badge-danger{background:#dc2626!important;}
.badge.bg-primary,.badge-primary{background:var(--kw-green)!important;}
.alert-info,.bg-info{background:#e8f7ef!important;color:#075235!important;border-color:#bfe8d1!important;}
.dashboard-shell{padding:0!important;max-width:none!important;width:100%!important;}
.hero-card .card-body{min-height:190px!important;padding:1.8rem!important;}
@media(max-width:900px){
  #view-panel{margin-left:0!important;width:100%!important;padding:82px 1rem 1rem 1rem!important;}
  #sidebar{padding-top:70px!important;}
  .modal-dialog.mid-large,.modal-dialog.large{width:94%!important;}
  .card-body{padding:1.2rem!important;}
  .kw-topbar,#app-topbar{min-height:62px;}
}


/* ===============================
   v3 layout correction: remove large space after sidebar
   =============================== */
main#view-panel{
  margin-left:200px!important;
  width:calc(100% - 200px)!important;
  padding-left:22px!important;
  padding-right:22px!important;
  max-width:none!important;
}
#view-panel > .container,
#view-panel > .container-fluid,
#view-panel .dashboard-shell{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
#view-panel .dashboard-shell{
  padding-left:0!important;
  padding-right:0!important;
}
.dashboard-shell .row{
  margin-left:-12px!important;
  margin-right:-12px!important;
}
.dashboard-shell [class*="col-"]{
  padding-left:12px!important;
  padding-right:12px!important;
}
.hero-card{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.metric-card .card-body{
  min-height:150px!important;
}
@media(max-width:900px){
  main#view-panel{
    margin-left:0!important;
    width:100%!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}


/* ===============================
   v4 fix: proper card header actions
   =============================== */
.page-card-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  min-height:96px!important;
  padding:1.45rem 1.6rem!important;
}
.page-card-header h5{
  font-size:1.05rem!important;
  font-weight:800!important;
  color:var(--kw-ink)!important;
}
.page-card-header .add-record-btn{
  width:auto!important;
  min-width:148px!important;
  max-width:none!important;
  height:42px!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
  line-height:1!important;
  text-align:center!important;
}
.card-header .btn,
.card-header .add-record-btn{
  position:relative!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
}
@media(max-width:576px){
  .page-card-header{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .page-card-header .add-record-btn{
    width:100%!important;
  }
}

/* ===============================
   v5: apply proper page headers/actions everywhere
   =============================== */
.card-header{
  flex-wrap:wrap!important;
  gap:14px!important;
}
.card-header > b,
.card-header > strong{
  font-size:1.05rem!important;
  font-weight:800!important;
  color:var(--kw-ink)!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}
.card-header .float-right,
.card-header .btn-block,
.card-header .col-sm-2,
.card-header .col-md-2,
.card-header .col-sm-3{
  float:none!important;
  width:auto!important;
  max-width:none!important;
  flex:0 0 auto!important;
}
.card-header .btn{
  min-width:118px!important;
  white-space:nowrap!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:.58rem .95rem!important;
}
.page-card-header .header-title-wrap small,
.card-header small.text-muted{display:block;line-height:1.45;}
.page-toolbar{
  display:flex!important;
  align-items:end!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:14px!important;
  width:100%!important;
}
.page-toolbar .toolbar-fields{
  display:flex!important;
  align-items:end!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}
.page-toolbar .form-group{margin-bottom:0!important;min-width:170px;}
.page-toolbar label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--kw-muted);margin-bottom:.3rem;}
.table-responsive-modern{width:100%;overflow-x:auto;}
.table-responsive-modern table{min-width:860px;}
.action-stack{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.action-stack .btn{min-width:auto!important;}
.report-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px;margin-bottom:18px;}
.report-summary-card{background:#fff;border:1px solid var(--kw-border);border-radius:18px;padding:18px;box-shadow:0 10px 25px rgba(15,23,42,.06);}
.report-summary-card .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--kw-muted);}
.report-summary-card .value{font-size:1.45rem;font-weight:900;color:var(--kw-ink);line-height:1.2;margin-top:6px;}
.report-filter-card{background:linear-gradient(180deg,#f8fffb,#fff);border:1px solid var(--kw-border);border-radius:18px;padding:16px;margin-bottom:18px;}
.report-filter-card .form-control{min-width:190px;}
.report-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
tr.clickable-row{cursor:pointer;}
tr.clickable-row:hover{background:#f2fbf6!important;}
@media(max-width:992px){
  .report-summary-grid{grid-template-columns:repeat(2,minmax(160px,1fr));}
  .page-toolbar{align-items:stretch!important;}
  .page-toolbar .toolbar-fields,.report-actions{width:100%;}
}
@media(max-width:576px){
  .report-summary-grid{grid-template-columns:1fr;}
  .card-header .btn{width:100%!important;}
}

/* ===============================
   v6: flexible homepage KPI figures
   Prevent money/count figures from clipping or overflowing inside cards.
   =============================== */
.kpi-flex-row{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
}
.kpi-flex-col{
  display:flex!important;
}
.kpi-flex-col > .metric-card{
  width:100%!important;
}
.metric-card{
  overflow:visible!important;
}
.metric-card .metric-body,
.metric-body{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
}
.metric-content{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
}
.metric-value{
  font-size:clamp(1.18rem, 1.75vw, 1.95rem)!important;
  line-height:1.15!important;
  font-weight:900!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  letter-spacing:-.035em!important;
  max-width:100%!important;
}
.metric-money{
  font-size:clamp(1.05rem, 1.55vw, 1.72rem)!important;
  letter-spacing:-.05em!important;
  font-variant-numeric:tabular-nums!important;
}
.metric-label{
  white-space:normal!important;
  line-height:1.25!important;
  margin-bottom:4px!important;
}
.metric-icon{
  flex:0 0 52px!important;
}
@media (max-width:1400px){
  .kpi-flex-row .col-xl-3{
    flex:0 0 50%!important;
    max-width:50%!important;
  }
}
@media (max-width:768px){
  .kpi-flex-row .col-xl-3,
  .kpi-flex-row .col-lg-6,
  .kpi-flex-row .col-md-6{
    flex:0 0 100%!important;
    max-width:100%!important;
  }
  .metric-value{font-size:1.65rem!important;}
  .metric-money{font-size:1.45rem!important;}
}

/* ===============================
   v8: horizontal navigation for wide tables
   Ensures users can scroll to hidden/right-side columns instead of losing cells.
   =============================== */
@media screen {
  #view-panel .card,
  #view-panel .card-body,
  #view-panel .table-area,
  #view-panel .report-filter-card {
    max-width: 100% !important;
  }

  #view-panel .card {
    overflow: visible !important;
  }

  #view-panel .card-body {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #view-panel .table-scroll-x,
  #view-panel .table-responsive,
  #view-panel .table-responsive-modern,
  #view-panel .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #view-panel table.table,
  #view-panel table.dataTable,
  #view-panel .dataTables_wrapper table {
    width: 100% !important;
    min-width: 1050px !important;
    margin-bottom: 0 !important;
  }

  /* Keep action buttons visible and prevent narrow action cells from breaking badly */
  #view-panel table td:last-child,
  #view-panel table th:last-child,
  #view-panel table .action,
  #view-panel table .actions,
  #view-panel table .action-stack {
    white-space: nowrap !important;
  }

  /* Wide report/data pages need more room than normal lists */
  #view-panel #report-list,
  #view-panel #payment-list,
  #view-panel #bill-list,
  #view-panel #organization-list,
  #view-panel #user-list {
    min-width: 1180px !important;
  }

  /* A subtle visible scrollbar so users know there are more cells to the right */
  #view-panel .card-body::-webkit-scrollbar,
  #view-panel .table-scroll-x::-webkit-scrollbar,
  #view-panel .dataTables_wrapper::-webkit-scrollbar {
    height: 10px;
  }
  #view-panel .card-body::-webkit-scrollbar-track,
  #view-panel .table-scroll-x::-webkit-scrollbar-track,
  #view-panel .dataTables_wrapper::-webkit-scrollbar-track {
    background: #edf2f7;
    border-radius: 999px;
  }
  #view-panel .card-body::-webkit-scrollbar-thumb,
  #view-panel .table-scroll-x::-webkit-scrollbar-thumb,
  #view-panel .dataTables_wrapper::-webkit-scrollbar-thumb {
    background: rgba(15,107,70,.55);
    border-radius: 999px;
  }

  /* DataTables controls should stay usable above a wide table */
  #view-panel .dataTables_length,
  #view-panel .dataTables_filter,
  #view-panel .dataTables_info,
  #view-panel .dataTables_paginate {
    position: relative;
    z-index: 2;
  }
}