/*
 * MADAKARU Modern Green UI
 * Front-end theme for PHP 8.3+ / Bootstrap 5.3+
 */
:root {
  --mad-green-950:#073b2a;
  --mad-green-900:#075e3f;
  --mad-green-800:#087f50;
  --mad-green-700:#0b9a61;
  --mad-green-600:#16a66a;
  --mad-green-500:#28bd7d;
  --mad-green-100:#dff7eb;
  --mad-green-50:#effbf5;
  --mad-bg:#f5faf7;
  --mad-card:#fff;
  --mad-text:#1d2d25;
  --mad-muted:#708077;
  --mad-border:#e0eee7;
  --mad-shadow:0 10px 30px rgba(7,94,63,.08);
  --mad-shadow-lg:0 20px 55px rgba(7,94,63,.14);
  --mad-radius:18px;
  --mad-radius-sm:12px;
  --mad-header:70px;
  --mad-sidebar:280px;
  --mad-transition:180ms ease;
}

html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; min-width:320px; background:var(--mad-bg); color:var(--mad-text);
  font-family:"Inter","Nunito","Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--mad-green-800);text-decoration:none;transition:color var(--mad-transition)}
a:hover{color:var(--mad-green-950)}
img,svg,video,canvas{max-width:100%;height:auto}
button,.btn,input,select,textarea{touch-action:manipulation}

/* Header */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1030; min-height:var(--mad-header);
  display:flex; align-items:center; gap:14px; padding:10px 20px;
  background:rgba(255,255,255,.88)!important; border:0!important;
  box-shadow:0 4px 24px rgba(7,94,63,.08)!important;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.header .toggle-sidebar-btn{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;
  border-radius:12px;color:var(--mad-green-900);font-size:25px;cursor:pointer;
  transition:background var(--mad-transition),transform var(--mad-transition);
}
.header .toggle-sidebar-btn:hover{background:var(--mad-green-50);transform:scale(1.04)}
.logo{display:flex;align-items:center;gap:8px;line-height:1;white-space:nowrap}
.logo img{width:36px;height:36px;object-fit:contain;margin:0}
.logo span:first-of-type{font-family:"Nunito",sans-serif;font-size:24px;font-weight:800;color:var(--mad-green-950)}
.header .badge{font-size:10px;letter-spacing:.04em}
.header .header-subtitle{min-width:0}
.header .header-subtitle h6{font-size:14px}
.header .header-subtitle small{font-size:11px}
.header-nav{margin-left:auto}
.header-nav ul{list-style:none;margin:0;padding:0}
.header-nav .user-chip{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--mad-border);
  border-radius:999px;background:#fff;box-shadow:0 3px 12px rgba(7,94,63,.05);
}
.header-nav .user-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--mad-green-900),var(--mad-green-500))}

/* Main layout */
#main{margin:var(--mad-header) 0 0 var(--mad-sidebar);padding:28px;min-width:0;transition:margin-left var(--mad-transition),padding var(--mad-transition)}
.pagetitle{margin-bottom:22px}
.pagetitle h1{margin:0;font-family:"Nunito",sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--mad-green-950)}
.breadcrumb{margin:.35rem 0 0;font-size:13px}
.breadcrumb a{font-weight:600}

/* Sidebar */
.sidebar{
  position:fixed;top:var(--mad-header);left:0;bottom:0;width:var(--mad-sidebar);z-index:1025;
  padding:18px 14px;overflow-y:auto;background:rgba(255,255,255,.96);
  border-right:1px solid var(--mad-border);box-shadow:8px 0 28px rgba(7,94,63,.05);
  transition:transform var(--mad-transition),left var(--mad-transition);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:#b8ddca;border-radius:99px}
.sidebar-nav{list-style:none;margin:0;padding:0}
.sidebar-nav li{list-style:none;margin:0 0 5px;padding:0}
.sidebar-nav .nav-heading{padding:15px 12px 6px;color:#8a9c93;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.sidebar-nav .nav-link{
  display:flex;align-items:center;gap:11px;min-height:46px;padding:10px 13px;border-radius:12px;
  color:#476057;background:transparent;font-size:14px;font-weight:650;
  transition:background var(--mad-transition),color var(--mad-transition),transform var(--mad-transition);
}
.sidebar-nav .nav-link i{margin:0;color:#769087;font-size:18px;line-height:1;flex:0 0 auto}
.sidebar-nav .nav-link:hover{background:var(--mad-green-50);color:var(--mad-green-800);transform:translateX(2px)}
.sidebar-nav .nav-link:hover i{color:var(--mad-green-700)}
.sidebar-nav .nav-link:not(.collapsed){background:linear-gradient(135deg,var(--mad-green-950),var(--mad-green-800));color:#fff;box-shadow:0 7px 18px rgba(7,94,63,.18)}
.sidebar-nav .nav-link:not(.collapsed) i{color:#fff}
.sidebar-nav .nav-link .bi-chevron-down{margin-left:auto;transition:transform .2s ease}
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down{transform:rotate(180deg)}
.sidebar-nav .nav-content{list-style:none;margin:4px 0 7px;padding:4px 0 4px 17px;border-left:2px solid var(--mad-green-100)}
.sidebar-nav .nav-content a{display:flex;align-items:center;gap:9px;padding:8px 10px;color:#61746b;font-size:13px;font-weight:600;border-radius:9px}
.sidebar-nav .nav-content a i{font-size:7px;color:#9ab0a5}
.sidebar-nav .nav-content a:hover{background:var(--mad-green-50);color:var(--mad-green-800)}

/* Cards / dashboard */
.card{margin-bottom:22px;border:1px solid var(--mad-border);border-radius:var(--mad-radius);background:var(--mad-card);box-shadow:var(--mad-shadow);overflow:hidden}
.card:hover{box-shadow:var(--mad-shadow-lg)}
.card-header,.card-footer{background:transparent;border-color:var(--mad-border)}
.card-title{font-family:"Nunito",sans-serif;font-size:18px;font-weight:800;color:var(--mad-green-950)}
.dashboard .metric-card{position:relative;overflow:hidden}
.dashboard .metric-card::after{content:"";position:absolute;width:90px;height:90px;right:-28px;bottom:-35px;border-radius:50%;background:var(--mad-green-100)}
.dashboard .metric-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--mad-green-50);color:var(--mad-green-800);font-size:22px}
.dashboard .metric-value{font-family:"Nunito",sans-serif;font-size:30px;font-weight:900;color:var(--mad-green-950);line-height:1}
.dashboard .metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mad-muted);font-weight:800}

/* Forms / buttons */
.form-control,.form-select{min-height:44px;border-radius:11px;border-color:var(--mad-border)}
.form-control:focus,.form-select:focus{border-color:var(--mad-green-500);box-shadow:0 0 0 .22rem rgba(22,166,106,.13)}
.input-group-text{border-color:var(--mad-border);background:var(--mad-green-50);color:var(--mad-green-800);border-radius:11px}
.btn{min-height:42px;border-radius:11px;font-weight:700;padding:.55rem 1rem;transition:transform var(--mad-transition),box-shadow var(--mad-transition),background var(--mad-transition)}
.btn:hover{transform:translateY(-1px)}
.btn-primary,.bg-primary{background:var(--mad-green-700)!important;border-color:var(--mad-green-700)!important}
.btn-primary:hover{background:var(--mad-green-900)!important;border-color:var(--mad-green-900)!important;box-shadow:0 8px 18px rgba(7,94,63,.2)}
.btn-outline-primary{color:var(--mad-green-800);border-color:#8bd3b1}.btn-outline-primary:hover{background:var(--mad-green-800);border-color:var(--mad-green-800)}
.text-success{color:var(--mad-green-800)!important}.bg-success{background:var(--mad-green-700)!important}

/* Tables */
.table-container{width:100%;overflow:auto;border:1px solid var(--mad-border);border-radius:14px;background:#fff;box-shadow:var(--mad-shadow);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.table-container table{width:100%;min-width:680px;margin:0;border-collapse:separate;border-spacing:0;font-size:14px}
.table-container thead th{position:sticky;top:0;z-index:2;padding:13px 14px;background:linear-gradient(135deg,var(--mad-green-950),var(--mad-green-700));color:#fff;border:0;white-space:nowrap;font-weight:800}
.table-container tbody td{padding:12px 14px;border:0;border-bottom:1px solid #edf4ef;color:#40554b;vertical-align:middle}
.table-container tbody tr:nth-child(even){background:#fbfefc}.table-container tbody tr:hover{background:#edf9f2}
.table-container tbody tr:last-child td{border-bottom:0}
.table-container a{color:var(--mad-green-800);font-weight:700}

/* Alerts / utilities */
.alert{border:0;border-radius:12px}.bg-success-subtle{background:#e7f8ee!important}.text-success-emphasis{color:var(--mad-green-950)!important}
.badge{border-radius:999px;padding:.5em .75em}
.dropdown-menu{border:1px solid var(--mad-border);border-radius:13px;box-shadow:var(--mad-shadow-lg);padding:7px}
.dropdown-item{border-radius:9px;padding:.55rem .7rem}.dropdown-item:hover{background:var(--mad-green-50);color:var(--mad-green-800)}

/* Footer */
.footer{margin-left:var(--mad-sidebar);padding:18px 28px;background:transparent!important;border-top:1px solid var(--mad-border)!important;color:var(--mad-muted);transition:margin-left var(--mad-transition)}

/* Mobile overlay */
body::after{content:"";position:fixed;inset:var(--mad-header) 0 0 0;background:rgba(3,33,23,.42);z-index:1020;opacity:0;visibility:hidden;transition:opacity var(--mad-transition),visibility var(--mad-transition)}
body.toggle-sidebar::after{opacity:1;visibility:visible}

@media (min-width:1200px){
  body.toggle-sidebar .sidebar{transform:translateX(-105%)}
  body.toggle-sidebar #main,body.toggle-sidebar .footer{margin-left:0}
}
@media (max-width:1199.98px){
  .sidebar{transform:translateX(-105%);left:0}
  body.toggle-sidebar .sidebar{transform:translateX(0)}
  #main,.footer{margin-left:0}
  #main{padding:22px}
}
@media (max-width:767.98px){
  :root{--mad-header:60px}
  .header{height:60px;padding:8px 10px;gap:7px}
  .header .toggle-sidebar-btn{width:40px;height:40px;flex-basis:40px}
  .logo span:first-of-type{font-size:19px}
  .header .logo .badge{display:none}
  .header .header-subtitle{display:none!important}
  .header-nav .user-chip{border:0;padding:3px;background:transparent;box-shadow:none}
  .header-nav .user-chip .user-name{display:none}
  #main{margin-top:60px;padding:14px 11px}
  .sidebar{width:min(88vw,310px);top:60px;padding:15px 11px}
  .pagetitle{margin-bottom:16px}
  .card{border-radius:14px;margin-bottom:16px}
  .card-body{padding:15px}
  .dashboard .metric-value{font-size:26px}
  .table-container table{min-width:620px}
  .table-container thead th,.table-container tbody td{padding:10px 11px}
  .footer{padding:15px 12px;text-align:center}
}
@media (max-width:420px){
  .header .btn{padding:.4rem .65rem;font-size:12px}
  #main{padding:11px 9px}
  .sidebar-nav .nav-link{min-height:44px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}