:root {
  --sc-primary: #2794eb;
  --sc-primary-dark: #1c7dc9;
  --sc-teal: #00ac9a;
  --sc-success: #22c55e;
  --sc-warning: #f59e0b;
  --sc-danger: #ef4444;
  --sc-ink: #1f2328;
  --sc-muted: #5c6370;
  --sc-body-bg: #f4f7f6;
  --sc-sidebar-bg: #ffffff;
  --sc-border: #eceef1;
  --sc-radius-lg: 16px;
  --sc-radius-md: 10px;
  --sc-radius-sm: 8px;
  --sc-shadow: 0 6px 18px rgba(24, 28, 34, 0.06);
  --sc-shadow-sm: 0 2px 8px rgba(24, 28, 34, 0.05);
}

* { box-sizing: border-box; }

body {
  background-color: var(--sc-body-bg);
  color: var(--sc-ink);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
}

a { text-decoration: none; }

.text-muted { color: var(--sc-muted) !important; }
small, .small { color: inherit; }

/* ===== Auth pages ===== */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-body-bg);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 960px;
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  box-shadow: var(--sc-shadow);
  background: #fff;
}

.auth-card .auth-side {
  background: linear-gradient(160deg, #eaf7f5 0%, #eaf2fc 100%);
  color: var(--sc-ink);
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.auth-card .auth-side .brand-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--sc-radius-md);
  background: #fff;
  color: var(--sc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 24px;
  box-shadow: var(--sc-shadow-sm);
}

.auth-card .auth-form {
  background: #fff;
  padding: 56px 44px;
}

/* ===== App shell ===== */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0f4c5c 0%, #14396e 100%);
  color: #fff;
  height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar .brand .brand-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--sc-radius-sm);
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}

.sidebar .brand-text {
  font-weight: 800;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.1;
}

.sidebar .brand-text small {
  display: block;
  font-weight: 600;
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sidebar-nav {
  padding: 10px 16px;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

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

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.sidebar-nav .nav-section-title {
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.5);
  padding: 18px 12px 8px;
}

.sidebar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 9px 16px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}

.sidebar-nav .nav-link i {
  width: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: .85rem;
}

.sidebar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sidebar-nav .nav-link.active {
  background: #fff;
  color: var(--sc-primary-dark);
}

.sidebar-nav .nav-link.active i {
  color: var(--sc-primary-dark);
}

.main-content {
  flex: 1;
  min-width: 0;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--sc-border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}

.page-body {
  padding: 24px 32px 32px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sc-ink);
  margin: 0;
}

.page-header .breadcrumb {
  margin: 0;
  font-size: .82rem;
  color: var(--sc-muted);
}

/* ===== Cards / widgets ===== */
.sc-card {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-sm);
}

.stat-card {
  border-radius: var(--sc-radius-lg);
  border: 1px solid var(--sc-border);
  background: #fff;
  padding: 22px;
  box-shadow: var(--sc-shadow-sm);
}

.stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--sc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 16px;
}

.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--sc-ink);
}

.stat-card .stat-label {
  color: var(--sc-muted);
  font-size: .82rem;
  font-weight: 600;
}

.stat-icon-primary { background: rgba(39, 148, 235, .12); color: var(--sc-primary); }
.stat-icon-teal { background: rgba(0, 172, 154, .12); color: var(--sc-teal); }
.stat-icon-warning { background: rgba(245, 158, 11, .12); color: var(--sc-warning); }
.stat-icon-danger { background: rgba(239, 68, 68, .12); color: var(--sc-danger); }

.table-modern {
  --bs-table-bg: transparent;
}

.table-modern thead th {
  border-bottom: 1px solid var(--sc-border);
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--sc-muted);
  font-weight: 700;
  background: transparent;
}

.table-modern td, .table-modern th {
  vertical-align: middle;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sc-border);
}

.table-modern tbody tr:last-child td {
  border-bottom: none;
}

.table-modern tbody tr:nth-child(odd) {
  background: #f9fafc;
}

.table-modern tbody tr.row-trashed {
  background: #fef2f2;
}

.table-modern tbody tr.row-trashed:nth-child(odd) {
  background: #fee9e9;
}

.table-modern tbody tr:hover {
  background: #f1f4fd;
}

.table-modern tbody tr.row-trashed:hover {
  background: #fddede;
}

.avatar-circle {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sc-teal), var(--sc-primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .02em;
  padding: 0;
}

.btn {
  border-radius: var(--sc-radius-sm);
  font-weight: 700;
  font-size: .875rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Filter/search bars are `.d-flex` rows of an input, one or more selects,
   and a submit button. Without this, the row defaults to flex's
   align-items: stretch — if any sibling grows taller (e.g. the button
   wrapping its label under the icon when space is tight), every other
   control gets stretched to match instead of staying vertically centered. */
form.d-flex {
  align-items: center;
}

/* Search inputs in filter bars set an explicit width (e.g. style="width:280px")
   so their placeholder isn't cut off — but as flex items they still default to
   flex-shrink: 1 and get compressed below that width when the row is tight
   (e.g. competing with a "Tambah ..." button on the same line). Keep them at
   their intended width instead of silently shrinking. */
form.d-flex input[type="text"],
form.d-flex input[type="search"] {
  flex-shrink: 0;
}

.btn-sm { border-radius: 8px; }

/* Icon-only buttons (e.g. the clear-filter "x") rely on Bootstrap's default
   inline-block centering, which doesn't reliably center a single icon glyph
   the way it centers text — the icon renders visibly off-center. Force
   flexbox centering so icon-only buttons are pixel-centered regardless of
   glyph metrics. */
.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: var(--sc-primary);
  border-color: var(--sc-primary);
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--sc-primary-dark);
  border-color: var(--sc-primary-dark);
}

.btn-outline-primary {
  color: var(--sc-primary);
  border-color: var(--sc-primary);
}

.btn-outline-primary:hover {
  background: var(--sc-primary);
  border-color: var(--sc-primary);
}

.btn-outline-secondary {
  color: #5b6069;
  border-color: var(--sc-border);
}

.btn-outline-secondary:hover {
  background: #f4f7f6;
  color: var(--sc-ink);
  border-color: var(--sc-border);
}

.badge { border-radius: 6px; font-weight: 700; }
.badge.rounded-pill { border-radius: 999px; }

.badge-status-active { background: rgba(34, 197, 94, .12); color: #15803d; }
.badge-status-inactive { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.badge-status-suspended { background: rgba(245, 158, 11, .12); color: #92400e; }

.form-label {
  font-weight: 700;
  font-size: .84rem;
  color: #4b5058;
}

.form-control, .form-select {
  border-radius: var(--sc-radius-sm);
  border-color: var(--sc-border);
  font-size: .9rem;
  padding: .55rem .85rem;
}

.form-select {
  padding-right: 2.25rem;
}

.form-select-sm {
  padding-right: 2.1rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 3px rgba(39, 148, 235, .12);
}

/* Make Select2 (select2-bootstrap-5-theme) match the app's own form control
   styling instead of the theme's generic Bootstrap defaults — otherwise
   every combobox looks visibly different from plain text inputs/buttons. */
.select2-container {
  font-family: inherit;
}

.select2-container--bootstrap-5 .select2-selection {
  border-radius: var(--sc-radius-sm) !important;
  border-color: var(--sc-border) !important;
  font-size: .9rem;
  min-height: calc(1.5em + 1.1rem + 2px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--bootstrap-5 .select2-selection__rendered {
  font-size: .9rem;
  padding-left: .85rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
}

.select2-container--bootstrap-5 .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--bootstrap-5 .select2-selection__placeholder {
  color: #6c757d;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--sc-primary) !important;
  box-shadow: 0 0 0 3px rgba(39, 148, 235, .12) !important;
}

.select2-dropdown {
  border-radius: var(--sc-radius-sm);
  border-color: var(--sc-border);
  font-size: .9rem;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--sc-primary) !important;
}

/* Multi-select (tags) mode: the theme's default rules above force a fixed
   single-line height and a full-width search field, which pushes the text
   cursor onto its own new line after every selection instead of sitting
   next to the last tag. Let the rendered box wrap tags in a flex row and
   size the search field to its content so it only wraps when the row is
   actually full. */
.select2-container--bootstrap-5 .select2-selection--multiple {
  height: auto !important;
  min-height: calc(1.5em + 1.1rem + 2px) !important;
  padding: .3rem .5rem !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px;
  padding-left: 0 !important;
  width: 100%;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  margin: 2px 0 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
  display: block !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  margin: 2px 0 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
  width: auto !important;
  min-width: 40px;
  margin: 0 !important;
  padding: 2px 0 !important;
}

.input-group-text {
  border-radius: var(--sc-radius-sm) 0 0 var(--sc-radius-sm);
  border-color: var(--sc-border);
  background: #f9fafb;
}

.modal-content {
  border-radius: var(--sc-radius-lg);
  border: none;
  box-shadow: var(--sc-shadow);
}

.modal-header, .modal-footer {
  border-color: var(--sc-border);
}

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

.sc-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--sc-muted);
  font-weight: 700;
  font-size: .88rem;
  padding: 10px 16px;
  display: flex;
  align-items: center;
}

.sc-tabs .nav-link:hover {
  color: var(--sc-ink);
  border-color: transparent;
}

.sc-tabs .nav-link.active {
  color: var(--sc-primary);
  background: transparent;
  border-bottom-color: var(--sc-primary);
}

.sc-subtabs {
  gap: 6px;
  padding: 4px;
  background: var(--sc-body-bg);
  border-radius: var(--sc-radius-md);
  display: inline-flex;
}

.sc-subtabs .nav-link {
  border: none;
  border-radius: calc(var(--sc-radius-md) - 2px);
  color: var(--sc-muted);
  font-weight: 700;
  font-size: .82rem;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  background: transparent;
}

.sc-subtabs .nav-link:hover {
  color: var(--sc-ink);
}

.sc-subtabs .nav-link.active {
  color: var(--sc-primary);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.alert {
  border-radius: var(--sc-radius-md);
  border: 1px solid transparent;
  padding: .55rem .9rem;
  font-size: .82rem;
}

.alert i {
  font-size: .82rem;
}

.alert.alert-success {
  background: #d1fae5;
  border-color: #a7f3d0;
  color: #065f46;
}

.alert.alert-danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert.alert-warning {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.alert.alert-info {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1e40af;
}

.pagination .page-link {
  border-radius: 8px;
  margin: 0 2px;
  border-color: var(--sc-border);
  color: var(--sc-ink);
}

.pagination .page-item.active .page-link {
  background: var(--sc-primary);
  border-color: var(--sc-primary);
  color: #fff;
}

.pagination .page-item.disabled .page-link {
  background: transparent;
}

@media (max-width: 991px) {
  .sidebar {
    position: fixed;
    left: -264px;
    z-index: 1050;
    transition: left .2s ease;
    height: 100vh;
    box-shadow: var(--sc-shadow);
  }
  .sidebar.show { left: 0; }

  .page-body { padding: 8px 16px 24px; }
  .topbar { padding: 16px; }
}

/* ===== Dashboard ===== */
.kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--sc-radius-lg);
  border: 1px solid var(--sc-border);
  background: #fff;
  padding: 20px 22px;
  box-shadow: var(--sc-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sc-shadow);
}

.kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kpi-accent, var(--sc-primary));
}

.kpi-card .kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.kpi-card .kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: color-mix(in srgb, var(--kpi-accent, var(--sc-primary)) 14%, transparent);
  color: var(--kpi-accent, var(--sc-primary));
}

.kpi-card .kpi-value {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sc-ink);
  letter-spacing: -.02em;
}

.kpi-card .kpi-label {
  color: var(--sc-muted);
  font-size: .82rem;
  font-weight: 700;
  margin-top: 6px;
}

.chart-card {
  border-radius: var(--sc-radius-lg);
  border: 1px solid var(--sc-border);
  background: #fff;
  box-shadow: var(--sc-shadow-sm);
  padding: 22px;
  height: 100%;
}

.chart-card .chart-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.chart-card .chart-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: color-mix(in srgb, var(--chart-accent, var(--sc-primary)) 14%, transparent);
  color: var(--chart-accent, var(--sc-primary));
  flex-shrink: 0;
}

.chart-card .chart-card-title {
  font-weight: 800;
  font-size: .95rem;
  margin: 0;
  color: var(--sc-ink);
}

.chart-card .chart-card-subtitle {
  font-size: .78rem;
  color: var(--sc-muted);
  font-weight: 600;
}

.chart-canvas-wrap {
  position: relative;
  width: 100%;
}

.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--sc-muted);
  text-align: center;
  padding: 40px 12px;
}

.chart-empty i { font-size: 26px; opacity: .35; }