:root{
  --ibs-primary:#1BA6D9;
  --ibs-primary-2:#6FC2E3;
  --ibs-primary-3:#0F8FC2;
  --ibs-primary-soft:#C7E6F2;
  --ibs-primary-faint:#EEF8FD;

  --ibs-accent:#D425AE;
  --ibs-accent-2:#AC1F8D;
  --ibs-accent-soft:#F4D2EE;

  --ibs-dark:#0F172A;
  --ibs-dark-2:#111827;
  --ibs-dark-3:#1E293B;

  --bg-1:#F7FBFE;
  --bg-2:#EEF8FC;
  --surface:#FFFFFF;
  --surface-soft:#F8FCFE;
  --surface-muted:#F1F7FB;

  --text:#0F172A;
  --text-soft:#64748B;
  --text-muted:#94A3B8;

  --border:#E2E8F0;
  --border-strong:#CBD5E1;

  --success:#16A34A;
  --warning:#D97706;
  --danger:#DC2626;
  --info:#0284C7;

  --success-soft:#DCFCE7;
  --warning-soft:#FEF3C7;
  --danger-soft:#FEE2E2;
  --info-soft:#E0F2FE;

  --sidebar-1:#0F172A;
  --sidebar-2:#111827;
  --sidebar-3:#10243A;
  --sidebar-text:#D8E7F2;
  --sidebar-text-soft:#9FC8DA;
  --sidebar-active:#FFFFFF;

  --shadow-xs:0 2px 8px rgba(15,23,42,.04);
  --shadow-sm:0 10px 24px rgba(15,23,42,.06);
  --shadow-md:0 18px 40px rgba(15,23,42,.10);
  --shadow-lg:0 28px 60px rgba(15,23,42,.14);

  --radius-xs:.75rem;
  --radius-sm:.95rem;
  --radius-md:1rem;
  --radius-lg:1.2rem;
  --radius-xl:1.5rem;

  --sidebar-width:292px;
  --topbar-height:78px;
  --topbar-height-collapsed:58px;

  --transition-fast:.18s ease;
  --transition:.24s ease;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top right, rgba(27,166,217,.10), transparent 22%),
    radial-gradient(circle at left top, rgba(212,37,174,.06), transparent 18%),
    linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{
  color:var(--ibs-primary-3);
  text-decoration:none;
}

a:hover{
  color:var(--ibs-primary);
}

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

.sidebar{
  width:var(--sidebar-width);
  min-width:var(--sidebar-width);
  background:
    radial-gradient(circle at top right, rgba(27,166,217,.14), transparent 20%),
    linear-gradient(180deg,var(--sidebar-1) 0%,var(--sidebar-2) 54%,var(--sidebar-3) 100%);
  color:#fff;
  padding:1.25rem;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  border-right:1px solid rgba(255,255,255,.04);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
  z-index:1040;
}

.sidebar::-webkit-scrollbar{
  width:8px;
}

.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.55rem .4rem 1.15rem;
  margin-bottom:.35rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand-mark{
  width:50px;
  height:50px;
  border-radius:17px;
  background:linear-gradient(135deg,var(--ibs-primary) 0%,var(--ibs-primary-2) 55%,var(--ibs-accent) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  color:#fff;
  flex:0 0 50px;
  box-shadow:0 16px 30px rgba(27,166,217,.28);
}

.brand-title{
  font-weight:800;
  font-size:1.08rem;
  line-height:1.1;
  letter-spacing:.01em;
}

.brand-subtitle{
  font-size:.84rem;
  color:var(--sidebar-text-soft);
  margin-top:.18rem;
}

.sidebar-section-label{
  display:block;
  padding:1rem .8rem .45rem;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.50);
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:.82rem;
  color:var(--sidebar-text);
  padding:.85rem 1rem;
  border-radius:1rem;
  text-decoration:none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  border:1px solid transparent;
  font-weight:600;
}

.sidebar-link i{
  width:1.15rem;
  min-width:1.15rem;
  text-align:center;
  font-size:1rem;
}

.sidebar-link span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar-link:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  transform:translateX(2px);
}

.sidebar-link.active{
  background:linear-gradient(135deg,rgba(27,166,217,.30),rgba(212,37,174,.12));
  color:var(--sidebar-active);
  border:1px solid rgba(111,194,227,.28);
  box-shadow:0 12px 24px rgba(2,6,23,.18);
}

.sidebar-footer{
  padding:1rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  background:rgba(255,255,255,.04);
  margin-top:1rem;
  backdrop-filter:blur(8px);
}

.sidebar-footer .label{
  font-size:.76rem;
  color:rgba(255,255,255,.62);
  margin-bottom:.2rem;
}

.sidebar-footer .name{
  font-weight:700;
  line-height:1.2;
}

.sidebar-footer .meta{
  font-size:.84rem;
  color:rgba(255,255,255,.66);
  margin-top:.15rem;
}

.main-shell{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.05rem 1.5rem;
  min-height:var(--topbar-height);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:1020;
  transition:
    padding var(--transition),
    min-height var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.topbar.is-collapsed{
  padding:.7rem 1.25rem;
  min-height:var(--topbar-height-collapsed);
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow-xs);
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
}

.page-title{
  margin:0;
  font-size:1.5rem;
  font-weight:800;
  line-height:1.08;
  transition:font-size var(--transition);
}

.topbar.is-collapsed .page-title{
  font-size:1.15rem;
}

.page-subtitle{
  font-size:.92rem;
  color:var(--text-soft);
  margin-top:.18rem;
  max-height:40px;
  overflow:hidden;
  transition:
    opacity var(--transition-fast),
    max-height var(--transition-fast),
    margin var(--transition-fast);
}

.topbar.is-collapsed .page-subtitle{
  opacity:0;
  max-height:0;
  margin-top:0;
}

.topbar-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem .9rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  color:var(--text-soft);
  font-weight:700;
  white-space:nowrap;
  box-shadow:var(--shadow-xs);
}

.mobile-menu-btn{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:1rem;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  box-shadow:var(--shadow-xs);
}

.page-wrap{
  padding:1.35rem;
}

.card{
  border:1px solid rgba(148,163,184,.16);
  border-radius:1.25rem;
  box-shadow:var(--shadow-sm);
  background:var(--surface);
  overflow:hidden;
}

.card-header{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border-bottom:1px solid rgba(148,163,184,.14);
  padding:1rem 1.2rem;
  font-weight:700;
  color:var(--text);
}

.card-body{
  padding:1.15rem 1.2rem;
}

.metric-card{
  padding:1rem 1.1rem;
  border-radius:1.2rem;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  position:relative;
  overflow:hidden;
}

.metric-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--ibs-primary),var(--ibs-accent));
  opacity:.9;
}

.metric-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
  border-color:#cfe8f3;
}

.metric-value{
  font-size:1.7rem;
  font-weight:800;
  line-height:1.1;
  color:var(--text);
}

.metric-label{
  color:var(--text-soft);
  font-size:.9rem;
  margin-top:.3rem;
}

.kpi-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}

.panel-note{
  padding:.95rem 1rem;
  border:1px dashed var(--border-strong);
  border-radius:1rem;
  background:linear-gradient(180deg,var(--surface-soft) 0%,#ffffff 100%);
  color:var(--text-soft);
}

.content-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1.25rem;
  box-shadow:var(--shadow-sm);
  padding:1rem 1.1rem;
}

.table-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1.25rem;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.table{
  margin-bottom:0;
  vertical-align:middle;
}

.table thead th{
  background:linear-gradient(180deg,#fbfdff 0%,#f6fbfe 100%);
  color:#334155;
  font-size:.83rem;
  font-weight:800;
  letter-spacing:.01em;
  border-bottom:1px solid var(--border);
  padding:.95rem 1rem;
  white-space:nowrap;
}

.table tbody td{
  padding:.92rem 1rem;
  border-color:#edf2f7;
}

.table tbody tr:hover{
  background:#f8fcff;
}

.table-responsive{
  border-radius:inherit;
}

.form-label{
  font-weight:700;
  color:#334155;
  margin-bottom:.45rem;
}

.form-control,
.form-select{
  border-radius:.95rem;
  border:1px solid var(--border);
  min-height:46px;
  padding:.72rem .9rem;
  background:#fff;
  color:var(--text);
  box-shadow:none;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.form-control:focus,
.form-select:focus{
  border-color:rgba(27,166,217,.45);
  box-shadow:0 0 0 .22rem rgba(27,166,217,.14);
}

.form-control::placeholder{
  color:var(--text-muted);
}

textarea.form-control{
  min-height:110px;
  resize:vertical;
}

.input-group-text{
  border-radius:.95rem;
  border:1px solid var(--border);
  background:var(--surface-soft);
  color:var(--text-soft);
}

.btn{
  border-radius:.95rem;
  font-weight:700;
  padding:.72rem 1rem;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast);
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background:linear-gradient(135deg,var(--ibs-primary),var(--ibs-primary-2));
  border:none;
  box-shadow:0 12px 24px rgba(27,166,217,.18);
}

.btn-primary:hover,
.btn-primary:focus{
  background:linear-gradient(135deg,var(--ibs-primary-3),var(--ibs-primary));
}

.btn-outline-primary{
  border-color:rgba(27,166,217,.30);
  color:var(--ibs-primary-3);
  background:#fff;
}

.btn-outline-primary:hover{
  background:var(--ibs-primary-faint);
  border-color:rgba(27,166,217,.40);
  color:var(--ibs-primary-3);
}

.btn-outline-secondary{
  border-color:var(--border);
  color:#334155;
  background:#fff;
}

.btn-outline-secondary:hover{
  background:#f8fafc;
  color:#0f172a;
}

.btn-danger-subtle{
  background:var(--danger-soft);
  color:#991b1b;
  border:1px solid #fecaca;
}

.btn-danger-subtle:hover{
  background:#fecaca;
  color:#7f1d1d;
}

.btn-accent{
  background:linear-gradient(135deg,var(--ibs-accent),var(--ibs-accent-2));
  color:#fff;
  border:none;
  box-shadow:0 12px 24px rgba(212,37,174,.18);
}

.btn-accent:hover{
  color:#fff;
  opacity:.96;
}

.badge{
  border-radius:999px;
  font-weight:700;
  padding:.48rem .7rem;
}

.badge.bg-primary,
.text-bg-primary{
  background:linear-gradient(135deg,var(--ibs-primary),var(--ibs-primary-2)) !important;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  padding:.42rem .7rem;
  font-size:.78rem;
  font-weight:800;
  border:1px solid transparent;
}

.status-pill.success{
  background:var(--success-soft);
  color:#166534;
  border-color:#bbf7d0;
}

.status-pill.warning{
  background:var(--warning-soft);
  color:#92400e;
  border-color:#fde68a;
}

.status-pill.danger{
  background:var(--danger-soft);
  color:#991b1b;
  border-color:#fecaca;
}

.status-pill.info{
  background:var(--info-soft);
  color:#0c4a6e;
  border-color:#bae6fd;
}

.alert{
  border:none;
  border-radius:1rem;
  box-shadow:var(--shadow-xs);
}

.alert-success{
  background:var(--success-soft);
  color:#166534;
}

.alert-danger{
  background:var(--danger-soft);
  color:#991b1b;
}

.alert-warning{
  background:var(--warning-soft);
  color:#92400e;
}

.alert-info{
  background:var(--info-soft);
  color:#0c4a6e;
}

.nav-tabs{
  border-bottom:1px solid var(--border);
  gap:.4rem;
}

.nav-tabs .nav-link{
  border:none;
  color:var(--text-soft);
  border-radius:1rem 1rem 0 0;
  font-weight:700;
  padding:.75rem 1rem;
}

.nav-tabs .nav-link.active{
  color:var(--ibs-primary-3);
  background:#fff;
  box-shadow:inset 0 -3px 0 var(--ibs-primary);
}

.dropdown-menu{
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:var(--shadow-md);
  padding:.5rem;
}

.dropdown-item{
  border-radius:.75rem;
  padding:.6rem .8rem;
  font-weight:600;
}

.dropdown-item:hover{
  background:var(--surface-soft);
}

.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at top right,#d9f2fb 0%,#eef8fd 30%,#f8fafc 70%);
  padding:1.25rem;
}

.login-card{
  width:min(960px,92vw);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:1.75rem;
  box-shadow:var(--shadow-lg);
  background:#fff;
}

.login-side{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 26%),
    linear-gradient(135deg,#0f172a 0%,#114a73 48%,#1BA6D9 82%,#D425AE 120%);
  color:#fff;
}

.login-side .muted{
  color:rgba(255,255,255,.78);
}

.login-panel{
  background:#fff;
}

.login-form .form-control{
  min-height:52px;
}

.login-form .btn{
  min-height:50px;
}

.login-note{
  padding:1rem;
  border:1px dashed #cbd5e1;
  border-radius:1rem;
  background:#f8fafc;
  color:#475569;
}

.offcanvas{
  border-right:1px solid var(--border);
}

.offcanvas-header{
  border-bottom:1px solid var(--border);
  padding:1rem 1rem .8rem;
}

.offcanvas-body{
  background:#f8fafc;
  padding:1rem;
}

.mobile-sidebar-link{
  display:flex;
  align-items:center;
  gap:.8rem;
  color:var(--text);
  padding:.85rem 1rem;
  border-radius:1rem;
  text-decoration:none;
  background:#fff;
  border:1px solid var(--border);
  font-weight:700;
}

.mobile-sidebar-link.active{
  color:#fff;
  background:linear-gradient(135deg,var(--ibs-primary),var(--ibs-accent));
  border-color:transparent;
  box-shadow:0 12px 24px rgba(27,166,217,.18);
}

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

.section-title{
  font-size:1rem;
  font-weight:800;
  color:var(--text);
}

.section-subtitle{
  color:var(--text-soft);
  font-size:.9rem;
}

.empty-state{
  padding:2rem 1.2rem;
  text-align:center;
  color:var(--text-soft);
}

.divider-soft{
  border-top:1px solid #edf2f7;
}

.text-primary{
  color:var(--ibs-primary-3) !important;
}

.bg-primary-soft{
  background:var(--ibs-primary-faint);
}

.bg-accent-soft{
  background:var(--ibs-accent-soft);
}

.border-soft{
  border:1px solid var(--border);
}

.shadow-soft{
  box-shadow:var(--shadow-sm);
}

@media (max-width:1100px){
  .kpi-strip{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:991.98px){
  .topbar{
    padding:1rem 1rem;
  }

  .topbar.is-collapsed{
    padding:.72rem .95rem;
  }

  .page-title{
    font-size:1.28rem;
  }

  .topbar.is-collapsed .page-title{
    font-size:1.02rem;
  }

  .page-wrap{
    padding:1rem;
  }
}

@media (max-width:768px){
  .kpi-strip{
    grid-template-columns:1fr;
  }

  .page-wrap{
    padding:1rem;
  }

  .card-header,
  .card-body{
    padding:1rem;
  }

  .table thead th,
  .table tbody td{
    padding:.8rem .85rem;
  }
}

@media (max-width:575.98px){
  .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:.8rem;
  }

  .topbar-left,
  .topbar-right{
    width:100%;
    justify-content:space-between;
  }

  .page-title{
    font-size:1.15rem;
  }

  .page-subtitle{
    font-size:.84rem;
  }

  .topbar-chip{
    padding:.58rem .78rem;
    font-size:.82rem;
  }

  .btn{
    padding:.68rem .9rem;
  }
}
.sidebar{
  width:290px;
  min-width:290px;
  transition:width .22s ease, min-width .22s ease, padding .22s ease;
}

.sidebar.is-collapsed{
  width:88px;
  min-width:88px;
  padding-left:.75rem;
  padding-right:.75rem;
}

.sidebar.is-collapsed .brand-title,
.sidebar.is-collapsed .brand-subtitle,
.sidebar.is-collapsed .sidebar-section-label,
.sidebar.is-collapsed .sidebar-link span,
.sidebar.is-collapsed .sidebar-footer{
  display:none;
}

.sidebar.is-collapsed .sidebar-brand{
  justify-content:center;
}

.sidebar.is-collapsed .sidebar-link{
  justify-content:center;
  padding:.9rem;
}

.sidebar.is-collapsed .sidebar-link i{
  margin:0;
  width:auto;
}