:root{
  --blue:#2F6BFF;
  --blue2:#1E54E8;

  /* accents */
  --purple:#7c3aed;
  --cyan:#06b6d4;
  --green:#22c55e;
  --orange:#f59e0b;
  --red:#ef4444;

  --border:#E6E8EE;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#f6f7fb;

  /* subtle gradient background */
  --bg-grad:
    radial-gradient(800px 500px at 15% 10%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(700px 450px at 85% 15%, rgba(6,182,212,.10), transparent 60%),
    radial-gradient(700px 450px at 55% 90%, rgba(34,197,94,.08), transparent 60%),
    linear-gradient(180deg, #f7f8ff 0%, #f6f7fb 60%, #f7fbff 100%);

  --shadow:0 10px 30px rgba(15,23,42,.10);
  --shadow2:0 16px 40px rgba(15,23,42,.12);
  --radius:14px;
}

html, body { height: 100%; }

/* Shell */
.page-shell{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-grad);
  color: var(--text);
  min-height: 100vh;
  display: flex;
}

.auth-shell{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 12px;
}


.sidebar{
  flex: 0 0 260px;
  width: 260px;
  padding: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;

  background:
    linear-gradient(180deg, rgba(47,107,255,.06), rgba(124,58,237,.04)),
    #fff;
  border-right: 1px solid var(--border);
}



.brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px 16px;
  border-bottom:1px solid var(--border);
  margin-bottom: 14px;
}
.brand-mini img{width:34px;height:34px;object-fit:contain}
.brand-mini .name{font-weight:800}
.brand-mini .sub{font-size:12px;color:var(--muted);margin-top:-2px}

/* Nav */
.nav-link-custom{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px 10px 14px;
  border-radius: 10px;
  text-decoration:none;
  color:#334155;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-link-custom:hover{
  background: rgba(47,107,255,.08);
  color:#1e3a8a;
  transform: translateX(2px);
}

.nav-link-custom.active{
  background: linear-gradient(90deg, rgba(47,107,255,.14), rgba(6,182,212,.08));
  color:#1e3a8a;
  padding-left: 18px; /* make room for active bar inside */
}
.nav-link-custom.active::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 5px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
}

/* Main */
.main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content{
  flex: 1 0 auto;
}

/* Topbar */
.topbar{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.topbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--cyan));
}

/* Cards */
.card-soft{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-soft:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: rgba(47,107,255,.22);
}
.card-soft .card-body{padding: 18px}

/* Optional: add class="card-soft card-accent" on key cards */
.card-accent{ position: relative; overflow:hidden; }
.card-accent::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--cyan));
}

/* Typography */
h1,h2,h3{margin:0}
.page-title{
  font-size: 18px;
  font-weight: 800;
}
.page-subtitle{
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* Forms */
.form-label{
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.form-control, select.form-control{
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  background: #fff;
}
.form-control:focus, select.form-control:focus{
  border-color: rgba(47,107,255,.55);
  box-shadow: 0 0 0 .20rem rgba(47,107,255,.16);
}

/* Buttons */
.btn-primary-soft{
  background: linear-gradient(90deg, var(--blue), var(--blue2));
  border:0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  color:#fff;
  box-shadow: 0 10px 22px rgba(47,107,255,.20);
  transition: transform .12s ease, filter .12s ease;
}
.btn-primary-soft:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* Optional colorful button variants */
.btn-purple{
  background: linear-gradient(90deg, var(--purple), #a78bfa);
  border:0; color:#fff; font-weight:800;
  border-radius: 10px; padding: 10px 14px;
  box-shadow: 0 10px 22px rgba(124,58,237,.18);
}
.btn-cyan{
  background: linear-gradient(90deg, var(--cyan), #67e8f9);
  border:0; color:#033; font-weight:800;
  border-radius: 10px; padding: 10px 14px;
  box-shadow: 0 10px 22px rgba(6,182,212,.16);
}

/* Badges */
.badge-soft{
  background:#eaf0ff;
  color:#1e3a8a;
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
  font-size:12px;
  border: 1px solid rgba(47,107,255,.18);
}
.badge-soft.success{
  background: rgba(34,197,94,.14);
  color: #166534;
  border-color: rgba(34,197,94,.22);
}
.badge-soft.warning{
  background: rgba(245,158,11,.16);
  color: #92400e;
  border-color: rgba(245,158,11,.25);
}
.badge-soft.danger{
  background: rgba(239,68,68,.14);
  color: #991b1b;
  border-color: rgba(239,68,68,.22);
}
.badge-soft.info{
  background: rgba(6,182,212,.14);
  color: #155e75;
  border-color: rgba(6,182,212,.22);
}

/* Tables */
.table thead th{
  background: rgba(47,107,255,.06);
  color: #1e3a8a;
  border-bottom: 1px solid rgba(47,107,255,.16) !important;
}
.table tbody tr:hover{
  background: rgba(47,107,255,.04);
}

/* HR in cards */
.card-soft hr{
  border-color: rgba(15,23,42,.10) !important;
}

/* Footer */
.footer{
  margin-top: auto;
  border-top:1px solid var(--border);
  padding:14px 18px;
  background:#fff;
  font-size:13px;
}
.footer .text-muted{ color:#64748b !important; }

.site-footer{ margin-top: auto; }

/* responsive sidebar */
@media (max-width: 992px){
  .sidebar{display:none}
  .main{padding: 16px}
}