:root{
  --ga-sidebar-w: 260px;
  --ga-sidebar-w-collapsed: 82px;
  --ga-radius: 18px;
  --ga-shadow: 0 10px 28px rgba(16,24,40,.08);
  --ga-border: 1px solid rgba(0,0,0,.06);
  --ga-navy: #0b2545;
}

/* Login background */
.login-page{
  min-height:100vh;
  background: url('../../img/login-bg.jpg') center/cover no-repeat fixed;
}
.login-page::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.login-page > *{position:relative; z-index:1;}

/* Topbar icon button (no box) */
.ga-top-icon{
  border:0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 12px;
  line-height: 1;
  color:#263041;
}
.ga-top-icon:hover{background: rgba(13,110,253,.08);}

/* Logout button */
.ga-logout{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 14px;
  text-decoration:none;
  color:#b42318;
  background: rgba(244,63,94,.08);
  border: 1px solid rgba(244,63,94,.18);
  font-weight: 700;
}

/* Navy primary button (login) */
.ga-btn-navy{
  background: var(--ga-navy);
  border-color: rgba(11,37,69,.35);
  color:#fff;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 14px;
}
.ga-btn-navy:hover{
  background: #0a2140;
  border-color: rgba(11,37,69,.55);
  color:#fff;
}
.ga-btn-navy:focus{
  box-shadow: 0 0 0 .25rem rgba(11,37,69,.18);
}
.ga-logout:hover{
  background: rgba(244,63,94,.12);
  border-color: rgba(244,63,94,.28);
  color:#9f1239;
}

/* Sidebar scrollbar */
.ga-sidebar-inner{
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.45) transparent;
}
.ga-sidebar-inner::-webkit-scrollbar{width:10px;}
.ga-sidebar-inner::-webkit-scrollbar-track{background: transparent;}
.ga-sidebar-inner::-webkit-scrollbar-thumb{
  background: rgba(100,116,139,.35);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.ga-sidebar-inner::-webkit-scrollbar-thumb:hover{background: rgba(100,116,139,.55); background-clip: content-box;}

/* Layout shell */
.ga-shell{
  display:flex;
  min-height: calc(100vh - 56px);
}

.ga-sidebar{
  width: var(--ga-sidebar-w);
  flex: 0 0 var(--ga-sidebar-w);
  background:#fff;
  border-right: var(--ga-border);
}

.ga-sidebar-inner{
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow:auto;
  padding: 14px 12px;
}

.ga-main{flex: 1 1 auto; min-width: 0;}

/* Collapsed sidebar */
body.sidebar-collapsed .ga-sidebar{
  width: var(--ga-sidebar-w-collapsed);
  flex-basis: var(--ga-sidebar-w-collapsed);
}
body.sidebar-collapsed .ga-sidebar-title{opacity:0; height:0; margin:0; padding:0; overflow:hidden;}
body.sidebar-collapsed .ga-nav-text{opacity:0; width:0; overflow:hidden; white-space:nowrap;}
body.sidebar-collapsed .ga-nav-caret{display:none;}
body.sidebar-collapsed .ga-nav-link{justify-content:center; padding: 12px 10px;}
body.sidebar-collapsed .ga-nav-left{gap:0; justify-content:center;}

/* Sidebar typography */
.ga-sidebar-title{
  font-size: 12px;
  letter-spacing: .12em;
  color: #7a8797;
  font-weight: 700;
  margin: 6px 10px 10px;
}

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

.ga-nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration:none;
  color:#263041;
  border: 1px solid transparent;
  transition: all .18s ease;
}

.ga-nav-left{display:flex; align-items:center; gap:12px; min-width:0;}
.ga-nav-link i{font-size: 1.1rem; color:#5c6b7a;}

.ga-nav-link:hover{
  background: rgba(13,110,253,.06);
  border-color: rgba(13,110,253,.10);
}

.ga-nav-link.active{
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(13,110,253,.12));
  border-color: rgba(99,102,241,.22);
  box-shadow: 0 10px 18px rgba(99,102,241,.12);
}
.ga-nav-link.active i{color:#3b5bfd;}

.ga-nav-parent.active{font-weight:700;}

.ga-nav-caret{color:#7a8797; font-size:.9rem;}

.ga-nav-children{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin: 4px 0 0;
  padding: 0 0 0 8px;
}

.ga-nav-child{padding-left: 18px;}
.ga-nav-child i{font-size: 1.2rem;}

/* Cards */
.ga-card{
  border: var(--ga-border);
  border-radius: var(--ga-radius);
  box-shadow: var(--ga-shadow);
  background:#fff;
}

/* KPI cards (template-like) */
.kpi-tile{
  border-radius: 22px;
  border: var(--ga-border);
  box-shadow: var(--ga-shadow);
  padding: 18px 18px 14px;
  position: relative;
  overflow:hidden;
}

.kpi-tile .kpi-ico{
  width:48px; height:48px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  margin: 2px 0 12px;
  font-size: 1.2rem;
}

.kpi-tile .kpi-label{
  font-size: .98rem;
  color:#263041;
  font-weight: 600;
  margin: 0 0 4px;
}

.kpi-tile .kpi-value{
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 12px;
  letter-spacing: -.02em;
}

.kpi-tile .kpi-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color:#263041;
  font-weight: 600;
  font-size: .95rem;
}
.kpi-tile .kpi-action:hover{background:#fff}

/* Pastel variants */
.kpi-bg-1{background: linear-gradient(180deg, rgba(99,102,241,.14), rgba(99,102,241,.07));}
.kpi-bg-1 .kpi-ico{background: rgba(99,102,241,.20); color:#4f46e5;}

.kpi-bg-2{background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(245,158,11,.06));}
.kpi-bg-2 .kpi-ico{background: rgba(245,158,11,.22); color:#b45309;}

.kpi-bg-3{background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(34,197,94,.06));}
.kpi-bg-3 .kpi-ico{background: rgba(34,197,94,.20); color:#15803d;}

/* Mobile tweaks */
@media (max-width: 991.98px){
  .ga-shell{min-height: auto;}
}