/* ============= Base ============= */
:root{
  --brand1:#3b82f6; /* blue-500 */
  --brand2:#4f46e5; /* indigo-600 */
  --bg-soft:#f6f9ff;
  --card-border: rgba(0,0,0,.06);
  --card-shadow: 0 12px 40px rgba(2,8,23,.06);
}

html, body{
  height:100%;
}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  background: linear-gradient(180deg,#f7fbff 0%,#eef4ff 100%);
  color:#0f172a;
}

/* ============= Utilities ============= */
.bg-soft{
  background: rgba(59,130,246,.08) !important;
  border: 1px solid rgba(59,130,246,.15) !important;
  color:#1d4ed8 !important;
}
.brand-text{ color:#1e40af !important; }

.btn-brand{
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  color:#fff;
  border:0;
  transition: .2s ease-in-out;
}
.btn-brand:hover{
  filter:brightness(1.06);
  transform: translateY(-1px);
}

/* ============= Cards / Panels ============= */
.card-glass{
  border:1px solid var(--card-border);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
}

.card-pane{
  border:1px solid var(--card-border);
  background:#fff;
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
}

/* Code box for JSON response */
.codebox{
  background: #f8fafc;            /* slate-50 */
  border: 1px dashed rgba(2,8,23,.14);
  border-radius: .75rem;
  padding: .85rem 1rem;
  max-height: 360px;
  overflow: auto;
  font-family: ui-monospace, Menlo, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: .92rem;
  margin: 0;
}

/* ============= Login Layout ============= */
.container-login{
  min-height: 100dvh;
  padding: 24px;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.20), transparent 60%),
              radial-gradient(1000px 700px at 110% 0%, rgba(79,70,229,.16), transparent 60%),
              linear-gradient(180deg,#f7fbff 0%,#eef4ff 100%);
}

/* ============= Topbar ============= */
.topbar{
  position: sticky;
  top:0; left:0; right:0;
  z-index: 1020;
  padding: .8rem 1.25rem;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ============= App Shell ============= */
.app-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100dvh - 56px);
}

/* Sidebar */
.sidebar{
  border-right: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
}
.sidebar-title{
  font-size:.9rem;
  font-weight:600;
  color:#334155;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.sidebar .nav-link{
  border-radius:.75rem;
  font-weight:500;
  color:#334155;
}
.sidebar .nav-link:hover{
  background: #eef2ff; /* indigo-50 */
  color:#3730a3;       /* indigo-700 */
}
.sidebar .nav-link.active{
  background: linear-gradient(90deg,var(--brand1),var(--brand2));
  color:#fff;
  box-shadow: 0 10px 26px rgba(59,130,246,.25);
}

/* Content */
.content-wrap{
  padding: 22px;
}

/* Footer */
.app-footer{
  border-top:1px solid rgba(0,0,0,.06);
  padding: 18px 12px;
  background: #fff;
}

/* ============= Responsive ============= */
@media (max-width: 991.98px){
  .app-shell{
    grid-template-columns: 1fr;
  }
  .sidebar{
    position: fixed;
    inset: 56px 0 0 auto;
    width: 300px;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1050;
    box-shadow: -16px 0 40px rgba(2,8,23,.06);
  }
  .sidebar.show{
    transform: translateX(0);
  }
  .content-wrap{
    padding: 16px;
  }
}

/* ============= Small polish ============= */
.input-group-text{
  background:#f8fafc;
  border-color:#e5e7eb;
}
.form-control:focus,
.form-select:focus{
  border-color: #93c5fd;
  box-shadow: 0 0 0 .25rem rgba(59,130,246,.15);
}
hr{
  opacity:.1;
}
.badge{
  border-radius:.6rem;
  font-weight:600;
}

/* Buttons danger/outline tweaks for nicer hover */
.btn-outline-secondary:hover{
  background:#f1f5f9;
}
.btn-danger{
  box-shadow: 0 8px 22px rgba(220,38,38,.15);
}
.btn-danger:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

/* Scrollbar (webkit) */
.codebox::-webkit-scrollbar{ height:10px; width:10px }
.codebox::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:10px }
.codebox::-webkit-scrollbar-track{ background:#f1f5f9; }