/* =====================================
   SAI'DU'A PROFESSIONAL SIDEBAR
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.sidebar{

position:fixed;

top:0;

left:0;

width:260px;

height:100vh;

background:#198754;

overflow-y:auto;

box-shadow:3px 0 12px rgba(0,0,0,.15);

z-index:1000;

}

.sidebar-header{

border-bottom:1px solid rgba(255,255,255,.2);

}

.sidebar-header h4{

font-weight:bold;

margin-bottom:5px;

}

.sidebar-header small{

color:#e9ecef;

}

.sidebar .nav-link{

padding:14px 20px;

font-size:15px;

transition:.3s;

border-left:4px solid transparent;

}

.sidebar .nav-link:hover{

background:rgba(255,255,255,.15);

border-left:4px solid #ffc107;

padding-left:25px;

}

.sidebar .nav-link.active{

background:rgba(255,255,255,.2);

border-left:4px solid #ffc107;

font-weight:bold;

}

.main-content{

margin-left:260px;

padding:20px;

}

@media(max-width:768px){

.sidebar{

width:100%;

height:auto;

position:relative;

}

.main-content{

margin-left:0;

}

}/* ============================================================
   SAI'DU'A PROFESSIONAL UI POLISH — ADMIN / WEBVIEW
   Visual-only enhancement layer. Existing PHP/JS behaviour remains.
============================================================ */
:root{
  --sui-green:#198754;
  --sui-green-dark:#0f5132;
  --sui-green-deep:#0a3d28;
  --sui-soft:#f4f8f6;
  --sui-border:#dfe9e4;
  --sui-text:#20372b;
  --sui-muted:#718179;
  --sui-radius:16px;
  --sui-shadow:0 10px 30px rgba(24,62,44,.08);
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--sui-soft)}
.main-content{min-width:0;overflow-x:clip}
.container-fluid{max-width:1720px;margin-left:auto;margin-right:auto}
.card,.main-card,.executive-toolbar,.toolbar,.filter-card,.table-card,.panel,.box,.content-card{border-color:var(--sui-border);box-shadow:var(--sui-shadow);border-radius:var(--sui-radius)}
.card{overflow:hidden}
.card-header{border-bottom-color:#e8efeb}
.btn{min-height:42px;border-radius:11px;font-weight:700;letter-spacing:.05px}
.form-control,.form-select,.input-group-text,.form-check-input{border-color:#d8e5de}
.form-control,.form-select{min-height:46px;border-radius:11px}
.form-control:focus,.form-select:focus{border-color:#198754;box-shadow:0 0 0 .22rem rgba(25,135,84,.10)}
.table-responsive{border-radius:13px;-webkit-overflow-scrolling:touch}
table{min-width:100%}
thead th{white-space:nowrap}
img{max-width:100%}
.modal-content{border:1px solid var(--sui-border);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.16);overflow:hidden}
.modal-header{border-bottom-color:#e8efeb;background:linear-gradient(180deg,#fff,#f8fbf9)}
.alert{border-radius:12px}
.badge{border-radius:999px;padding:.45em .7em}
.dropdown-menu{border:1px solid var(--sui-border);border-radius:13px;box-shadow:0 14px 36px rgba(26,55,42,.12);padding:.4rem}
.dropdown-item{border-radius:9px;padding:.6rem .75rem}
.dropdown-item:hover{background:#eef7f2}
.pagination .page-link{border-color:#dfe9e4;color:#146c43;border-radius:9px;margin:0 2px}
.pagination .page-item.active .page-link{background:#198754;border-color:#198754}

/* desktop: comfortable width, no stretched controls */
@media (min-width:1200px){
  .container-fluid{padding-left:28px!important;padding-right:28px!important}
  .main-content > *{min-width:0}
}

@media (min-width:769px){
  .main-content{padding-bottom:32px}
  .sai-sidebar-toggle{width:44px;height:44px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.16)}
  .topbar{border-radius:0 0 15px 15px}
}

/* tablet */
@media (min-width:769px) and (max-width:1100px){
  .container-fluid{padding-left:18px!important;padding-right:18px!important}
  .row.g-4{--bs-gutter-x:1rem;--bs-gutter-y:1rem}
  .card-body{padding:18px}
}

/* mobile / Android WebView */
@media (max-width:768px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .container,.container-fluid{width:100%;max-width:100%;padding-left:12px!important;padding-right:12px!important}
  .main-content{padding-bottom:20px}
  .row{--bs-gutter-x:.75rem;--bs-gutter-y:.75rem;margin-left:-.375rem;margin-right:-.375rem}
  [class*="col-"]{min-width:0}
  .card{border-radius:14px}
  .card-body{padding:15px}
  .btn{min-height:44px}
  .btn-group,.header-actions,.actions{flex-wrap:wrap;gap:8px}
  .btn-group .btn{border-radius:10px!important;margin:0 2px 2px 0}
  .table-responsive{width:100%;overflow-x:auto}
  table{white-space:nowrap}
  .modal-dialog{margin:.65rem}
  .modal-body{padding:15px}
  .sai-sidebar-toggle{top:10px;left:10px;width:44px;height:44px;border-radius:12px}
  .sidebar{width:min(86vw,290px)!important}
  .sidebar-link{min-height:46px;padding:10px 12px;font-size:13px}
  .sidebar-user{margin-left:10px;margin-right:10px}
  .sidebar-brand{padding:18px 13px 16px}
  .sidebar-logo,.sidebar-logo-wrap,.sidebar-logo-fallback{width:68px;height:68px}
  .topbar{padding:14px 12px!important;min-height:68px}
  .topbar h2,.page-title,.members-title{font-size:20px!important;line-height:1.2}
  .container-fluid > .row > [class*="col-"]{width:100%;flex:0 0 100%;max-width:100%}
  .dashboard-card{min-height:120px!important}
  .dashboard-chart-container,.dashboard-pie-container{height:260px!important}
  .table-area,.main-container,.summary-section{padding:14px!important}
  .search-area{padding:13px!important}
  .form-control,.form-select{font-size:16px!important;min-height:48px}
  input[type="file"]{font-size:14px}
  .footer{padding-left:10px;padding-right:10px}
}

@media (max-width:420px){
  .container,.container-fluid{padding-left:9px!important;padding-right:9px!important}
  .card-body{padding:13px}
  .topbar h2,.page-title,.members-title{font-size:18px!important}
  .sidebar{width:min(90vw,280px)!important}
  .sidebar-brand-name{font-size:20px}
  .sidebar-user-name{font-size:11px}
  .dashboard-chart-container,.dashboard-pie-container{height:230px!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

@media print{
  .sai-sidebar-toggle,.sai-sidebar-backdrop{display:none!important}
  .main-content{margin-left:0!important;width:100%!important}
}