:root{
  --sidebar-bg:#054141;
  --sidebar-muted:#94a3b8;
  --sidebar-active:#0b5a5a;  /* optional: slightly lighter for active */
  --content-bg:#f8fafc;

  /* Bootstrap theme colors */
  --bs-primary:#054141;
  --bs-success:#198754;   /* keep green unless you want same as primary */
  --bs-danger:#dc3545;
  --bs-warning:#ffc107;
  --bs-secondary:#6c757d;
}



html,body{height:100%;}
body.app-shell{
  display:flex;
  background:var(--content-bg);
}

.app-sidebar{
  width:260px;
  min-width:260px;
  background:var(--sidebar-bg);
  color:#fff;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:120vh;
}

/* Collapsible sidebar (Zoho-like) */
body.sidebar-collapsed .app-sidebar{
  width:72px;
  min-width:72px;
}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .nav-section,
body.sidebar-collapsed .user-meta,
body.sidebar-collapsed .sidebar-footer .btn{
  display:none !important;
}
body.sidebar-collapsed .sidebar-brand{
  padding:16px 10px;
}
body.sidebar-collapsed .sidebar-nav{
  padding:10px 8px 0 8px;
}
body.sidebar-collapsed .nav-item{
  justify-content:center;
  padding:12px 10px;
}
body.sidebar-collapsed .nav-item i{
  font-size:20px;
}
body.sidebar-collapsed .sidebar-footer{
  padding:12px 10px 14px;
}

.sidebar-brand{
  padding:16px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.brand-link{
  display:flex;
  gap:10px;
  align-items:center;
  color:#fff;
  text-decoration:none;
}
.brand-logo{
  height:40px;
  width:40px;
  object-fit:contain;
  background:rgba(255,255,255,0.08);
  border-radius:10px;
  padding:6px;
}
.brand-logo-fallback{
  height:40px;width:40px;border-radius:10px;
  background:rgba(255,255,255,0.10);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}
.brand-title{font-weight:700; line-height:1.1;}
.brand-subtitle{font-size:12px;color:var(--sidebar-muted);}

.sidebar-nav{padding:10px 10px 0 10px; display:flex; flex-direction:column; gap:4px;}
.nav-section{
  margin:14px 10px 6px;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--sidebar-muted);
}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#e2e8f0;
  text-decoration:none;
}
.nav-item i{font-size:18px; opacity:.95;}
.nav-item span{font-size:14px;}
.nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
.nav-item.active{background:var(--sidebar-active); color:#fff;}

.sidebar-footer{
  margin-top:auto;
  padding:12px 12px 14px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.user-chip{display:flex; align-items:center; gap:10px;}
.user-avatar{
  height:34px;width:34px;border-radius:12px;
  background:rgba(255,255,255,0.10);
  display:flex;align-items:center;justify-content:center;
}
.user-name{font-weight:600;font-size:13px;}
.user-role{font-size:12px;color:var(--sidebar-muted);}

.app-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.app-topbar{
  height:56px;
  background:#ffffff;
  border-bottom:1px solid rgba(15,23,42,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:10;
}
.topbar-title{font-weight:700;color:#054141;}
.app-content{flex:1;}

.kpi-card{
  border:1px solid rgba(15,23,42,0.08);
  transition:transform .08s ease, box-shadow .08s ease;
}
.kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(2,6,23,0.08);
}
.kpi-icon{
  height:44px;width:44px;border-radius:14px;
  background:rgba(15,23,42,0.06);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  color:#054141;
}
/* Force Bootstrap buttons to use your theme colors */
.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
}

.btn-success{
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
}

.btn-danger{
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
}

.btn-warning{
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
}
/* Outline Primary (View button) */
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #ffffff;
}
/* Remove the blue tap highlight on mobile */
*{
  -webkit-tap-highlight-color: transparent;
}

/* Make focus ring use your theme color instead of blue */
.btn:focus,
.btn:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(5, 65, 65, 0.35) !important; /* #054141 with alpha */
  outline: none !important;
}

/* Active/pressed state for outline primary (View button) */
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Active/pressed state for primary buttons */
.btn-primary:active,
.btn-primary.active,
.btn-primary.dropdown-toggle.show{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}