:root{
  --brand-900:#0b3d2b;
  --brand-700:#0e6f4c;
  --brand-600:#139a69;
  --brand-500:#19b37b;
  --accent-600:#0aa0c6;
  --accent-500:#10b2db;
  --bg-0:#f7f9fc;
  --bg-1:#eef3f8;
  --text-900:#0f172a;
  --text-700:#334155;
  --text-500:#64748b;
  --card:#ffffff;
  --border:rgba(15,23,42,.10);
  --shadow:0 10px 26px rgba(2,6,23,.08);
  --radius:14px;
}

html,body{height:100%}
body{
  background:linear-gradient(180deg,var(--bg-1),var(--bg-0));
  color:var(--text-900);
}

.app-shell{
  min-height:100vh;
  display:flex;
}

.app-sidebar{
  width:280px;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(16,178,219,.35), transparent 60%),
    radial-gradient(900px 520px at 110% 0%, rgba(25,179,123,.40), transparent 55%),
    linear-gradient(180deg, var(--brand-700), var(--brand-900));
  color:#fff;
  padding:18px 14px;
  position:sticky;
  top:0;
  height:100vh;
}

.app-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px 16px;
  border-bottom:1px solid rgba(255,255,255,.14);
  margin-bottom:12px;
}

.app-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  overflow:hidden;
  flex:0 0 auto;
}
.app-logo img{width:100%;height:100%;object-fit:cover}

.app-brand-title{
  font-weight:800;
  line-height:1.1;
  font-size:14px;
  letter-spacing:.2px;
}
.app-brand-sub{font-size:12px;color:rgba(255,255,255,.78)}

.app-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 6px;
}
.app-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  transition:all .16s ease;
}
.app-nav a:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
}
.app-nav a.active{
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.app-nav i{font-size:18px;opacity:.95}

.mobile-nav .app-nav{
  padding:0;
}
.app-nav--light{
  padding:0;
}
.app-nav--light a{
  color:var(--text-900)!important;
  font-size:15px;
}
.app-nav--light a:hover{
  background:rgba(15,23,42,.06);
  color:var(--text-900)!important;
}
.app-nav--light a.active{
  background:rgba(25,179,123,.14);
  color:var(--text-900)!important;
  box-shadow:none;
}
.app-nav--light i{
  opacity:1;
}
.mobile-nav .offcanvas-body{
  padding:12px 10px;
}
.mobile-nav .offcanvas-header{
  border-bottom:1px solid var(--border);
}
.mobile-nav .app-nav a{
  color:var(--text-900)!important;
}
.mobile-nav .app-nav a:hover{
  background:rgba(15,23,42,.06);
  color:var(--text-900)!important;
}
.mobile-nav .app-nav a.active{
  background:rgba(25,179,123,.14);
  color:var(--text-900)!important;
  box-shadow:none;
}
.mobile-nav .app-nav i{
  opacity:1;
}

.app-main{
  flex:1;
  min-width:0;
  padding:18px 18px 34px;
}

.app-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  padding:12px 14px;
  box-shadow:0 10px 26px rgba(2,6,23,.06);
  margin-bottom:14px;
  overflow:visible;
  position:relative;
  z-index:1100;
}

.app-user-dropdown .dropdown-menu{
  margin-top: 12px;
  z-index:2000;
}

.app-user-menu .dropdown-menu{
  z-index:3000;
}

.app-title{
  font-weight:800;
  font-size:18px;
  margin:0;
}
.app-title-sub{
  color:var(--text-500);
  font-size:12px;
  margin:0;
}

.card{
  border:none;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.table thead{
  background:transparent;
}
.table thead th{
  font-size:12px;
  color:var(--text-500);
  border-bottom:1px solid var(--border);
  padding-top:12px;
  padding-bottom:12px;
}
.table td{
  border-top:1px solid rgba(15,23,42,.06);
}

.btn-primary{
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  border:none;
  box-shadow:0 10px 22px rgba(25,179,123,.22);
}
.btn-primary:hover{filter:brightness(.98)}

.badge.bg-secondary{background:rgba(15,23,42,.12)!important;color:var(--text-700)!important}
.badge.bg-info{background:rgba(16,178,219,.18)!important;color:var(--text-700)!important}

.login-bg{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(16,178,219,.22), transparent 60%),
    radial-gradient(900px 520px at 110% 10%, rgba(25,179,123,.22), transparent 55%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
}

.login-card{
  width:100%;
  max-width:430px;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(2,6,23,.10);
}

.login-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.login-brand h4{margin:0;font-weight:900}
.login-brand small{color:var(--text-500)}

.auth-card{
  width:100%;
  max-width:980px;
  border-radius:20px;
  border:1px solid var(--border);
  box-shadow:0 26px 70px rgba(2,6,23,.12);
  overflow:hidden;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
}

.auth-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
}

.auth-card.single{
  max-width:520px;
}

.auth-grid.single{
  grid-template-columns:1fr;
}

.auth-right.single{
  padding:28px 28px 24px;
}

.auth-left{
  padding:26px 26px 24px;
  background:
    radial-gradient(900px 420px at 10% 20%, rgba(16,178,219,.22), transparent 60%),
    radial-gradient(760px 360px at 80% 0%, rgba(25,179,123,.22), transparent 62%),
    linear-gradient(180deg, rgba(14,111,76,.10), rgba(11,61,43,.04));
  border-right:1px solid var(--border);
}

.auth-right{
  padding:26px 26px 24px;
  background:rgba(255,255,255,.92);
}

.auth-left-title{
  font-weight:950;
  font-size:24px;
  line-height:1.15;
  margin:0 0 8px;
}

.auth-left-sub{
  margin:0 0 16px;
  color:var(--text-500);
  font-size:13px;
}

.auth-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}

.auth-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.10);
  color:var(--text-700);
  font-size:12px;
}
.auth-pill i{color:var(--brand-700)}

.auth-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.auth-metric{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:12px 12px 10px;
}
.auth-metric strong{
  display:block;
  font-size:18px;
  letter-spacing:.2px;
}
.auth-metric span{
  display:block;
  font-size:12px;
  color:var(--text-500);
  margin-top:2px;
}

.auth-form-title{
  font-weight:950;
  margin:0 0 4px;
}
.auth-form-sub{
  color:var(--text-500);
  font-size:12px;
  margin:0 0 16px;
}

.input-group-text{
  background:rgba(15,23,42,.03);
  border-color:rgba(15,23,42,.10);
}

.form-control, .form-select{
  border-color:rgba(15,23,42,.14);
}
.form-control:focus, .form-select:focus{
  border-color:rgba(25,179,123,.45);
  box-shadow:0 0 0 .2rem rgba(25,179,123,.18);
}

.auth-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.auth-links{
  display:flex;
  gap:10px;
  align-items:center;
}

.auth-footer{
  margin-top:14px;
  font-size:12px;
  color:var(--text-500);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 992px){
  .app-sidebar{display:none}
  .app-main{padding:14px}
  .auth-grid{grid-template-columns:1fr}
  .auth-left{display:none}
  .auth-card{max-width:460px}
}

@media (max-width: 768px){
  .app-main{padding:12px 12px 22px}
  .app-topbar{flex-wrap:nowrap;align-items:center;padding:10px 12px}
  .app-topbar > div:first-child{min-width:0}
  .app-title{font-size:16px}
  .app-title-sub{display:none}
  .app-topbar-actions{flex-wrap:nowrap;justify-content:flex-end;width:auto;margin-left:auto}
  .app-topbar-actions .btn{padding:.35rem .55rem}
  .table-responsive .table{white-space:nowrap}
  .table thead th{font-size:11px}
  .table td{font-size:13px}
}

@media (max-width: 576px){
  .app-topbar-actions .badge{display:none}
  .card{border-radius:12px}
  .btn{border-radius:12px}
  .form-control,.form-select{border-radius:12px}
}

@media (min-width: 768px){
  .w-md-auto{width:auto!important}
}