/* ============================================================
   CONTENT.CSS  —  BK SMAN 1 Banda Aceh
   Semua komponen halaman konten — v5.0 Final
   ============================================================ */

/* ── Grid ─────────────────────────────────────────────── */
.row { display:flex; flex-wrap:wrap; margin:0 -.75rem; }
.row > [class*="col-"] { padding:0 .75rem; margin-bottom:1.5rem; }

/* Column widths */
.col-1  { width:8.333%; }  .col-2  { width:16.666%; }
.col-3  { width:25%; }     .col-4  { width:33.333%; }
.col-5  { width:41.666%; } .col-6  { width:50%; }
.col-7  { width:58.333%; } .col-8  { width:66.666%; }
.col-9  { width:75%; }     .col-10 { width:83.333%; }
.col-11 { width:91.666%; } .col-12 { width:100%; }

@media (min-width:576px) {
  .col-sm-6  { width:50%; }
  .col-sm-12 { width:100%; }
}
@media (min-width:768px) {
  .col-md-1  { width:8.333%; }   .col-md-2  { width:16.666%; }
  .col-md-3  { width:25%; }      .col-md-4  { width:33.333%; }
  .col-md-5  { width:41.666%; }  .col-md-6  { width:50%; }
  .col-md-7  { width:58.333%; }  .col-md-8  { width:66.666%; }
  .col-md-9  { width:75%; }      .col-md-10 { width:83.333%; }
  .col-md-11 { width:91.666%; }  .col-md-12 { width:100%; }
}
@media (min-width:992px) {
  .col-lg-3  { width:25%; }      .col-lg-4  { width:33.333%; }
  .col-lg-6  { width:50%; }      .col-lg-8  { width:66.666%; }
  .col-lg-12 { width:100%; }
}

/* ── Card ─────────────────────────────────────────────── */
.card {
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  border:1px solid rgba(227,230,240,.7);
  margin-bottom:1.5rem;
  overflow:hidden;
  transition:box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow:var(--shadow-lg); }

.card-header {
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--bg-card);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
}
.card-title {
  font-size:.9rem; font-weight:800; color:var(--dark);
  display:flex; align-items:center; gap:.5rem; margin:0;
}
.card-title i { color:var(--primary); font-size:.9rem; }
.card-subtitle { font-size:.72rem; color:var(--secondary); margin-top:.15rem; }
.card-body   { padding:1.5rem; }
.card-footer {
  padding:.9rem 1.5rem;
  border-top:1px solid var(--border);
  background:var(--light);
}

/* Card accent borders */
.card-accent-primary { border-left:4px solid var(--primary) !important; }
.card-accent-success { border-left:4px solid var(--success) !important; }
.card-accent-danger  { border-left:4px solid var(--danger)  !important; }
.card-accent-warning { border-left:4px solid var(--warning) !important; }
.card-accent-info    { border-left:4px solid var(--info)    !important; }

/* Card header color variants */
.card-header-primary {
  background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-bottom:none;
}
.card-header-primary .card-title,
.card-header-primary .card-title i { color:#fff !important; }
.card-header-success {
  background:linear-gradient(135deg, var(--success), var(--success-dark)) !important;
  border-bottom:none;
}
.card-header-success .card-title,
.card-header-success .card-title i { color:#fff !important; }

/* Card modifiers */
.card-flat  { box-shadow:none; border:1.5px solid var(--border); }
.card-lift:hover { transform:translateY(-4px); }

/* ── Stat Card ────────────────────────────────────────── */
.stat-card {
  position:relative; overflow:hidden;
  padding:1.5rem;
  border-radius:var(--radius-lg);
  color:#fff;
  margin-bottom:1.5rem;
  transition:transform var(--transition), box-shadow var(--transition);
  cursor:default;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.18); }

/* Decorative circles */
.stat-card::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.08); pointer-events:none;
}
.stat-card::after {
  content:''; position:absolute; bottom:-40px; right:20px;
  width:85px; height:85px; border-radius:50%;
  background:rgba(255,255,255,.05); pointer-events:none;
}

/* Color variants */
.stat-card-primary { background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
.stat-card-success { background:linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%); }
.stat-card-info    { background:linear-gradient(135deg, var(--info)    0%, var(--info-dark)    100%); }
.stat-card-warning { background:linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%); color:#333; }
.stat-card-danger  { background:linear-gradient(135deg, var(--danger)  0%, var(--danger-dark)  100%); }
.stat-card-purple  { background:linear-gradient(135deg, var(--purple), #4b2a8a); }

/* Named color aliases (blue/green/orange/red) */
.stat-card.blue,    .stat-card.stat-card-blue   { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.stat-card.green,   .stat-card.stat-card-green  { background:linear-gradient(135deg, var(--success), var(--success-dark)); }
.stat-card.orange,  .stat-card.stat-card-orange { background:linear-gradient(135deg, var(--warning), var(--warning-dark)); color:#333; }
.stat-card.red,     .stat-card.stat-card-red    { background:linear-gradient(135deg, var(--danger), var(--danger-dark)); }

/* Stat card inner elements */
.stat-value { font-size:2.1rem; font-weight:800; margin-bottom:.3rem; line-height:1; position:relative; z-index:1; }
.stat-label { font-size:.8rem;  font-weight:500; opacity:.9;          position:relative; z-index:1; }
.stat-num   { font-size:2.1rem; font-weight:800; margin-bottom:.3rem; line-height:1; } /* alias */
.stat-sub   { font-size:.72rem; margin-top:.3rem; opacity:.8;          position:relative; z-index:1; }
.stat-icon  {
  position:absolute; bottom:1rem; right:1.25rem;
  font-size:3rem; opacity:.18; pointer-events:none;
}

/* When stat-card-warning, label/value stay dark */
.stat-card-warning .stat-value,
.stat-card-warning .stat-label,
.stat-card.orange  .stat-value,
.stat-card.orange  .stat-label { color:#333; }

/* ── Table ────────────────────────────────────────────── */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.data-table,
.table-responsive > table {
  width:100%; border-collapse:collapse; font-size:.875rem;
}
.data-table thead th,
.table-responsive > table thead th {
  padding:.8rem 1rem;
  background:var(--light);
  border-bottom:2px solid var(--border);
  font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--dark); white-space:nowrap; text-align:left;
}
.data-table tbody td,
.table-responsive > table tbody td {
  padding:.8rem 1rem;
  border-bottom:1px solid var(--border);
  vertical-align:middle; color:var(--dark);
}
.data-table tbody tr:last-child td,
.table-responsive > table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover,
.table-responsive > table tbody tr:hover { background:rgba(78,115,223,.03); }

.table-striped tbody tr:nth-child(even) { background:rgba(248,249,252,.7); }
.td-actions { white-space:nowrap; text-align:right; }
.td-actions .btn + .btn { margin-left:.25rem; }

/* ── Badge ────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:.28rem .65rem;
  font-size:.7rem; font-weight:700;
  border-radius:var(--radius-sm);
  letter-spacing:.02em; white-space:nowrap; line-height:1.3;
}

/* Soft/default variants */
.badge-primary   { background:rgba(78,115,223,.12);  color:#2d55c7; }
.badge-success   { background:rgba(28,200,138,.12);  color:#0a6e4a; }
.badge-danger    { background:rgba(231,74,59,.12);   color:#c0392b; }
.badge-warning   { background:rgba(246,194,62,.18);  color:#7a5300; }
.badge-info      { background:rgba(54,185,204,.12);  color:#0d8ba0; }
.badge-secondary { background:rgba(133,135,150,.12); color:#5a5c69; }
.badge-purple    { background:rgba(111,66,193,.12);  color:var(--purple); }
.badge-dark      { background:rgba(58,59,69,.12);    color:var(--dark); }

/* Solid variants */
.badge-solid-primary   { background:var(--primary);   color:#fff; }
.badge-solid-success   { background:var(--success);   color:#fff; }
.badge-solid-danger    { background:var(--danger);    color:#fff; }
.badge-solid-warning   { background:var(--warning);   color:#333; }
.badge-solid-info      { background:var(--info);      color:#fff; }
.badge-solid-secondary { background:var(--secondary); color:#fff; }

/* Pill */
.badge-pill  { border-radius:50px; }

/* Badge sizes */
.badge-sm { padding:.18rem .45rem; font-size:.62rem; }
.badge-lg { padding:.38rem .85rem; font-size:.78rem; }

/* Status dot badge */
.badge-dot {
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; padding:0;
  font-size:.78rem; font-weight:600;
}
.badge-dot::before {
  content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.badge-dot.badge-success::before  { background:var(--success); }
.badge-dot.badge-danger::before   { background:var(--danger);  }
.badge-dot.badge-warning::before  { background:var(--warning); }
.badge-dot.badge-primary::before  { background:var(--primary); }
.badge-dot.badge-secondary::before { background:var(--secondary); }

/* Kategori informasi */
.badge.pengumuman { background:rgba(54,185,204,.12);  color:#0d8ba0; }
.badge.beasiswa   { background:rgba(28,200,138,.12);  color:#0a6e4a; }
.badge.konseling  { background:rgba(78,115,223,.12);  color:#2d55c7; }
.badge.prestasi   { background:rgba(111,66,193,.12);  color:var(--purple); }
.badge.kesehatan  { background:rgba(231,74,59,.12);   color:#c0392b; }
.badge.karir      { background:rgba(230,126,34,.12);  color:#9a4500; }
.badge.lainnya    { background:rgba(133,135,150,.12); color:#5a5c69; }

/* ── Button ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.46rem 1.1rem;
  font-size:.84rem; font-weight:700; line-height:1.4;
  font-family:var(--font);
  border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; transition:all var(--transition);
  text-decoration:none; white-space:nowrap; vertical-align:middle;
  -webkit-user-select:none; user-select:none;
}
.btn:active { transform:scale(.97); }
.btn:disabled, .btn.disabled { opacity:.55; cursor:not-allowed; pointer-events:none; }
.btn:hover { text-decoration:none; }

.btn-sm  { padding:.28rem .8rem;   font-size:.77rem; }
.btn-xs  { padding:.18rem .55rem;  font-size:.7rem; }
.btn-lg  { padding:.62rem 1.5rem;  font-size:.94rem; }
.btn-icon{ padding:.4rem; width:32px; height:32px; border-radius:var(--radius-sm); }
.btn-block { width:100%; justify-content:center; }

/* Solid */
.btn-primary   { background:var(--primary);   color:#fff; border-color:var(--primary); }
.btn-primary:hover   { background:var(--primary-dark); border-color:var(--primary-dark); box-shadow:0 4px 14px rgba(78,115,223,.4); color:#fff; }
.btn-success   { background:var(--success);   color:#fff; border-color:var(--success); }
.btn-success:hover   { background:var(--success-dark); box-shadow:0 4px 14px rgba(28,200,138,.4); color:#fff; }
.btn-danger    { background:var(--danger);    color:#fff; border-color:var(--danger); }
.btn-danger:hover    { background:var(--danger-dark); box-shadow:0 4px 14px rgba(231,74,59,.4); color:#fff; }
.btn-warning   { background:var(--warning);   color:#333; border-color:var(--warning); }
.btn-warning:hover   { background:var(--warning-dark); color:#333; }
.btn-info      { background:var(--info);      color:#fff; border-color:var(--info); }
.btn-info:hover      { background:var(--info-dark); color:#fff; }
.btn-secondary { background:var(--secondary); color:#fff; border-color:var(--secondary); }
.btn-secondary:hover { background:var(--dark); color:#fff; }
.btn-dark      { background:var(--dark);      color:#fff; border-color:var(--dark); }
.btn-light     { background:var(--light);     color:var(--dark); border-color:var(--border); }
.btn-light:hover { background:#eaecf5; }

/* Outline */
.btn-outline-primary   { background:transparent; color:var(--primary);   border-color:var(--primary); }
.btn-outline-primary:hover   { background:var(--primary);   color:#fff; }
.btn-outline-success   { background:transparent; color:var(--success);   border-color:var(--success); }
.btn-outline-success:hover   { background:var(--success);   color:#fff; }
.btn-outline-danger    { background:transparent; color:var(--danger);    border-color:var(--danger); }
.btn-outline-danger:hover    { background:var(--danger);    color:#fff; }
.btn-outline-secondary { background:transparent; color:var(--secondary); border-color:var(--border); }
.btn-outline-secondary:hover { background:var(--light); color:var(--dark); border-color:var(--secondary); }
.btn-outline-warning   { background:transparent; color:#7a5300; border-color:var(--warning); }
.btn-outline-warning:hover   { background:var(--warning); color:#333; }
.btn-outline-info      { background:transparent; color:var(--info);    border-color:var(--info); }
.btn-outline-info:hover      { background:var(--info);    color:#fff; }
.btn-outline-dark      { background:transparent; color:var(--dark);    border-color:var(--dark); }
.btn-outline-dark:hover      { background:var(--dark);    color:#fff; }

/* Button group */
.btn-group { display:inline-flex; }
.btn-group .btn { border-radius:0; margin-left:-1px; }
.btn-group .btn:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.btn-group .btn:last-child  { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

/* Loading spinner btn */
.btn-loading { pointer-events:none; opacity:.75; }
.btn-loading::before {
  content:''; width:12px; height:12px; flex-shrink:0;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
}

/* ── Form ─────────────────────────────────────────────── */
.form-group  { margin-bottom:1.1rem; }
.form-label {
  display:block; margin-bottom:.4rem;
  font-size:.81rem; font-weight:700; color:var(--dark); letter-spacing:.01em;
}
.required, .form-label .required { color:var(--danger); font-weight:700; }
.form-label.required::after { content:' *'; color:var(--danger); }

.form-control {
  width:100%; padding:.5rem .85rem;
  font-size:.875rem; font-family:var(--font); line-height:1.5;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:#fff; color:var(--dark);
  transition:border-color var(--transition), box-shadow var(--transition);
  appearance:none; -webkit-appearance:none;
}
.form-control::placeholder { color:#b5bac6; }
.form-control:focus {
  border-color:var(--primary); outline:none;
  box-shadow:0 0 0 3px rgba(78,115,223,.15);
}
.form-control:disabled, .form-control[readonly] { background:var(--light); cursor:not-allowed; opacity:.7; }
.form-control.is-invalid { border-color:var(--danger); }
.form-control.is-invalid:focus { box-shadow:0 0 0 3px rgba(231,74,59,.15); }
.form-control.is-valid   { border-color:var(--success); }

.invalid-feedback { color:var(--danger);   font-size:.75rem; margin-top:.3rem; display:block; }
.valid-feedback   { color:var(--success);  font-size:.75rem; margin-top:.3rem; display:block; }
.form-text        { color:var(--secondary); font-size:.78rem; margin-top:.3rem; display:block; }
.form-error       { color:var(--danger);   font-size:.75rem; margin-top:.3rem; display:block; }

/* Select arrow */
select.form-control {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23858796' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center;
  padding-right:2.25rem;
}
textarea.form-control { resize:vertical; min-height:90px; }

/* Input with icon */
.input-icon-wrap { position:relative; }
.input-icon-wrap .form-control { padding-left:2.5rem; }
.input-icon-wrap .input-icon {
  position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
  color:var(--secondary); font-size:.875rem; pointer-events:none;
}
.input-icon-wrap.icon-right .form-control { padding-left:.85rem; padding-right:2.5rem; }
.input-icon-wrap.icon-right .input-icon   { left:auto; right:.8rem; }

/* Input group */
.input-group { display:flex; align-items:stretch; }
.input-group .form-control { flex:1; min-width:0; border-radius:0; }
.input-group .form-control:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .form-control:last-child  { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.input-addon {
  display:flex; align-items:center; padding:.5rem .85rem;
  font-size:.85rem; background:var(--light);
  border:1.5px solid var(--border); color:var(--secondary); white-space:nowrap;
}
.input-addon:first-child { border-right:none; border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.input-addon:last-child  { border-left:none;  border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

/* Form check */
.form-check { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.form-check-input  { cursor:pointer; width:15px; height:15px; accent-color:var(--primary); }
.form-check-label  { cursor:pointer; font-size:.875rem; }

/* Toggle switch */
.toggle { position:relative; width:42px; height:22px; display:inline-block; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:var(--border);
  border-radius:22px; cursor:pointer; transition:.3s;
}
.toggle-slider::before {
  content:''; position:absolute;
  width:16px; height:16px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.3s;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.toggle input:checked + .toggle-slider { background:var(--primary); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* Form row / inline */
.form-inline { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; }
.form-inline .form-group { margin-bottom:0; }

/* ── Filter section ────────────────────────────────────── */
.filter-section {
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--light);
}
.form-filter { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; }
.filter-group { display:flex; flex-direction:column; gap:.3rem; }
.filter-group:first-child { flex:1; min-width:160px; }
.filter-label {
  font-size:.67rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--secondary);
}

/* ── Pagination ────────────────────────────────────────── */
.pagination {
  display:flex; flex-wrap:wrap; gap:.3rem;
  list-style:none; padding:0; margin:0; justify-content:flex-end;
}
.page-link {
  display:flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 .6rem;
  color:var(--secondary); background:#fff;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:500; text-decoration:none;
  transition:all var(--transition);
}
.page-link:hover { background:var(--light); border-color:var(--primary); color:var(--primary); text-decoration:none; }
.page-item.active .page-link {
  background:var(--primary); border-color:var(--primary); color:#fff;
  font-weight:700; box-shadow:0 4px 10px rgba(78,115,223,.35);
}
.page-item.disabled .page-link { opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ── Alert ─────────────────────────────────────────────── */
.alert {
  padding:.9rem 1.1rem; margin-bottom:1rem;
  border-radius:var(--radius); border-left:4px solid transparent;
  display:flex; align-items:flex-start; gap:.75rem;
  font-size:.875rem; position:relative;
  animation:alertIn .3s ease;
}
@keyframes alertIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.alert > i:first-child { font-size:.95rem; margin-top:1px; flex-shrink:0; }
.alert-success { background:#eafaf3; color:#0a6e4a; border-left-color:var(--success); }
.alert-danger  { background:#fdf1f0; color:#9b2335; border-left-color:var(--danger); }
.alert-warning { background:#fffbea; color:#7a5300; border-left-color:var(--warning); }
.alert-info    { background:#eef5ff; color:#1750a3; border-left-color:var(--info); }
.alert-dismissible { padding-right:2.5rem; }
.alert-close {
  position:absolute; top:.7rem; right:.75rem;
  background:none; border:none; cursor:pointer;
  font-size:1rem; color:inherit; opacity:.5; line-height:1; padding:0;
}
.alert-close:hover { opacity:1; }

/* ── Modal ─────────────────────────────────────────────── */
.modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:var(--z-modal);
  padding:1rem;
  animation:fadeOverlay .2s;
}
.modal.show { display:flex; align-items:center; justify-content:center; }
.modal-dialog {
  background:#fff; border-radius:var(--radius-lg);
  width:100%; max-width:530px; max-height:90vh;
  overflow-y:auto; animation:modalIn .25s ease;
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.2);
}
.modal-dialog-lg { max-width:780px; }
.modal-dialog-sm { max-width:380px; }
@keyframes fadeOverlay { from{opacity:0} to{opacity:1} }
@keyframes modalIn { from{transform:translateY(-20px) scale(.97);opacity:0} to{transform:none;opacity:1} }

.modal-header {
  padding:1.1rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:#fff; z-index:1;
}
.modal-title { font-size:1rem; font-weight:800; color:var(--dark); }
.modal-close {
  width:28px; height:28px; border-radius:var(--radius-sm);
  background:var(--light); border:none; cursor:pointer;
  font-size:1rem; color:var(--secondary);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition); flex-shrink:0;
}
.modal-close:hover { background:var(--danger); color:#fff; }
.modal-body   { padding:1.5rem; }
.modal-footer {
  padding:1rem 1.5rem; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:.5rem;
}

/* ── Progress ──────────────────────────────────────────── */
.progress {
  background:var(--border); border-radius:10px;
  height:8px; overflow:hidden;
}
.progress-bar {
  background:linear-gradient(90deg, var(--primary), var(--primary-light));
  height:100%; border-radius:10px; transition:width .6s ease; min-width:3px;
}
/* Color aliases */
.progress-bar.blue,    .progress-bar-primary { background:linear-gradient(90deg, var(--primary), var(--primary-light)); }
.progress-bar.green,   .progress-bar-success { background:linear-gradient(90deg, var(--success), #5ce8b0); }
.progress-bar.orange,  .progress-bar-warning { background:linear-gradient(90deg, var(--warning), #ffd93d); }
.progress-bar.red,     .progress-bar-danger  { background:linear-gradient(90deg, var(--danger),  #f5897e); }
.progress-bar.info,    .progress-bar-info    { background:linear-gradient(90deg, var(--info),    #7dd7e6); }
.progress-lg { height:12px; }
.progress-sm { height:5px; }

/* ── Callout ───────────────────────────────────────────── */
.callout {
  padding:1rem 1.25rem; border-radius:var(--radius);
  border-left:4px solid; margin-bottom:1rem; font-size:.875rem;
}
.callout-primary { background:rgba(78,115,223,.06);  border-color:var(--primary); }
.callout-success { background:rgba(28,200,138,.06);  border-color:var(--success); }
.callout-danger  { background:rgba(231,74,59,.06);   border-color:var(--danger); }
.callout-warning { background:rgba(246,194,62,.08);  border-color:var(--warning); }
.callout-info    { background:rgba(54,185,204,.06);  border-color:var(--info); }
.callout-title   { font-weight:700; margin-bottom:.3rem; font-size:.85rem; }

/* ── Empty state ───────────────────────────────────────── */
.empty-state { text-align:center; padding:2.5rem 1.5rem; }
.empty-state i {
  font-size:3.5rem; color:var(--border); margin-bottom:1rem;
  display:block; opacity:.7;
}
.empty-state h4 { font-size:1rem; font-weight:700; color:var(--dark); margin-bottom:.5rem; }
.empty-state p  { color:var(--secondary); font-size:.875rem; margin-bottom:1rem; }

/* ── Info list ─────────────────────────────────────────── */
.info-list { display:flex; flex-direction:column; }
.info-item {
  display:flex; padding:.75rem 0;
  border-bottom:1px solid var(--border); gap:1rem;
}
.info-item:last-child { border-bottom:none; }
.info-label { width:150px; min-width:150px; color:var(--secondary); font-weight:500; font-size:.82rem; flex-shrink:0; }
.info-value { font-weight:600; color:var(--dark); font-size:.875rem; word-break:break-word; flex:1; }

/* ── Timeline ──────────────────────────────────────────── */
.timeline { position:relative; padding-left:1.75rem; }
.timeline::before {
  content:''; position:absolute;
  left:7px; top:6px; width:2px; bottom:0; background:var(--border);
}
.timeline-item { position:relative; padding-bottom:1.5rem; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot {
  position:absolute; left:-1.75rem; top:4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--primary); border:2.5px solid #fff;
  box-shadow:0 0 0 2px var(--primary); z-index:1;
}
.timeline-dot.dot-success  { background:var(--success); box-shadow:0 0 0 2px var(--success); }
.timeline-dot.dot-danger   { background:var(--danger);  box-shadow:0 0 0 2px var(--danger); }
.timeline-dot.dot-warning  { background:var(--warning); box-shadow:0 0 0 2px var(--warning); }
.timeline-dot.dot-secondary { background:var(--secondary); box-shadow:0 0 0 2px var(--secondary); }
.timeline-time  { font-size:.72rem; color:var(--secondary); margin-bottom:.3rem; }
.timeline-title { font-weight:700; color:var(--dark); font-size:.875rem; margin-bottom:.25rem; }
.timeline-body  { font-size:.82rem; color:var(--secondary); line-height:1.6; }

/* ── Jadwal item ───────────────────────────────────────── */
.jadwal-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.25rem; border-bottom:1px solid var(--border);
  transition:background var(--transition);
}
.jadwal-item:hover { background:rgba(78,115,223,.03); }
.jadwal-item:last-child { border-bottom:none; }
.jadwal-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.9rem;
}
.jadwal-info  { flex:1; margin:0 .85rem; }
.jadwal-info .j-name { font-weight:700; color:var(--dark); font-size:.875rem; }
.jadwal-info .j-time { font-size:.72rem; color:var(--secondary); margin-top:.2rem; }

/* ── Risk bar ──────────────────────────────────────────── */
.risk-bar-wrap  { display:flex; align-items:center; gap:.65rem; }
.risk-bar-num   { font-weight:700; min-width:35px; font-size:.9rem; }
.risk-bar-track { flex:1; height:8px; background:var(--border); border-radius:10px; overflow:hidden; }
.risk-bar-fill  { height:100%; border-radius:10px; transition:width .5s ease; min-width:3px; }
.risk-bar-fill.high   { background:linear-gradient(90deg, var(--danger), #ff6b6b); }
.risk-bar-fill.medium { background:linear-gradient(90deg, var(--warning), #ffd93d); }
.risk-bar-fill.low    { background:linear-gradient(90deg, var(--success), #6bcb77); }

/* ── Donut legend ──────────────────────────────────────── */
.donut-legend { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1rem; }
.donut-legend-item { display:flex; align-items:center; gap:.4rem; }
.donut-legend-item .dot { width:10px; height:10px; border-radius:3px; }
.donut-legend-item .label { font-size:.78rem; color:var(--dark); }
.donut-legend-item .value { font-size:.78rem; font-weight:700; color:var(--primary); }

/* ── Chart ─────────────────────────────────────────────── */
.chart-container { position:relative; height:280px; width:100%; }

/* ── Avatar ────────────────────────────────────────────── */
.avatar {
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; flex-shrink:0;
  background:var(--primary); width:38px; height:38px; font-size:.9rem;
}
.avatar-sm  { width:28px; height:28px; font-size:.72rem; }
.avatar-lg  { width:52px; height:52px; font-size:1.1rem; }
.avatar-xl  { width:72px; height:72px; font-size:1.5rem; }
.avatar-primary  { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.avatar-success  { background:linear-gradient(135deg, var(--success), var(--success-dark)); }
.avatar-danger   { background:linear-gradient(135deg, var(--danger),  var(--danger-dark)); }
.avatar-warning  { background:linear-gradient(135deg, var(--warning), var(--warning-dark)); color:#333; }
.avatar-info     { background:linear-gradient(135deg, var(--info),    var(--info-dark)); }
.avatar-secondary { background:linear-gradient(135deg, var(--secondary), var(--dark)); }

/* ── Spinner ───────────────────────────────────────────── */
.spinner {
  width:2rem; height:2rem; flex-shrink:0;
  border:3px solid var(--border); border-top-color:var(--primary);
  border-radius:50%; animation:spin .7s linear infinite;
}
.spinner-sm { width:1.25rem; height:1.25rem; border-width:2px; }
.spinner-lg { width:3rem;    height:3rem; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Skeleton ──────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,#f0f2f5 25%,#e8eaed 50%,#f0f2f5 75%);
  background-size:400% 100%; animation:skeleton 1.5s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
@keyframes skeleton { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.skeleton-text   { height:.875rem; margin-bottom:.5rem; }
.skeleton-title  { height:1.25rem; width:40%; margin-bottom:.75rem; }
.skeleton-avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; }

/* ── Section divider ───────────────────────────────────── */
.section-divider {
  display:flex; align-items:center; gap:.75rem; margin:1.25rem 0 1rem;
}
.section-divider::before,
.section-divider::after  { content:''; flex:1; height:1px; background:var(--border); }
.section-divider span {
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--secondary); white-space:nowrap;
}
.separator, .divider { height:1px; background:var(--border); margin:1.25rem 0; }

/* ── Notification item ─────────────────────────────────── */
.notification-item { border-left:3px solid var(--primary); transition:background var(--transition); }
.notification-item:hover { background:var(--light); }

/* ── Upload card (master data) ─────────────────────────── */
.upload-card {
  border:2px solid var(--border); border-radius:var(--radius-lg);
  padding:1.5rem; background:#fff; transition:border-color var(--transition);
  margin-bottom:1.5rem;
}
.upload-card:hover { border-color:var(--primary); }
.upload-card-icon {
  width:52px; height:52px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:1rem; flex-shrink:0;
}
.upload-card-icon.yellow { background:rgba(246,194,62,.15); color:var(--warning-dark); }
.upload-card-icon.blue   { background:rgba(78,115,223,.12); color:var(--primary); }
.upload-card-icon.green  { background:rgba(28,200,138,.12); color:var(--success-dark); }
.upload-card-title { font-size:.95rem; font-weight:800; color:var(--dark); margin-bottom:.3rem; }
.upload-card-sub   { font-size:.8rem; color:var(--secondary); margin-bottom:1rem; }
.upload-card-fields { font-size:.78rem; color:var(--secondary); }
.upload-card-fields span { font-weight:600; color:var(--dark); }

/* Upload steps */
.upload-steps { display:flex; align-items:center; gap:.5rem; margin:1.5rem 0; flex-wrap:wrap; }
.upload-step {
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem 1rem; border-radius:var(--radius);
  border:1.5px solid var(--border); background:#fff; font-size:.82rem;
}
.upload-step.active { border-color:var(--primary); background:var(--primary-ultra); }
.upload-step-num {
  width:26px; height:26px; border-radius:50%;
  background:var(--border); color:var(--secondary);
  font-weight:800; font-size:.78rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.upload-step.active .upload-step-num { background:var(--primary); color:#fff; }
.upload-step-label { font-weight:700; color:var(--dark); }
.upload-step-desc  { font-size:.72rem; color:var(--secondary); }
.upload-step-arrow { color:var(--secondary); font-size:.85rem; }

/* ── Auth page ─────────────────────────────────────────── */
.auth-page { min-height:100vh; display:flex; background:var(--bg); }
.auth-left {
  width:440px; flex-shrink:0;
  background:linear-gradient(160deg, #1a2a5e 0%, #1a3a6e 45%, #0d5c8a 100%);
  padding:3rem 2.5rem; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.auth-left::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:300px; height:300px; border-radius:50%;
  background:rgba(255,255,255,.04); pointer-events:none;
}
.auth-left::after {
  content:''; position:absolute; bottom:-100px; left:-60px;
  width:250px; height:250px; border-radius:50%;
  background:rgba(255,255,255,.03); pointer-events:none;
}
.auth-brand { position:relative; z-index:1; }
.logo-box {
  width:64px; height:64px; border-radius:16px;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; margin-bottom:1.5rem;
  border:1px solid rgba(255,255,255,.15);
}
.auth-brand h1   { font-size:1.75rem; font-weight:800; color:#fff; line-height:1.2; margin-bottom:.75rem; }
.auth-brand > p  { font-size:.9rem; color:rgba(255,255,255,.65); line-height:1.7; margin-bottom:2rem; }
.auth-features   { display:flex; flex-direction:column; gap:.85rem; }
.auth-feature {
  display:flex; align-items:center; gap:.85rem;
  padding:.75rem 1rem; border-radius:var(--radius);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  font-size:.85rem; color:rgba(255,255,255,.85);
}
.auth-feature i { font-size:1rem; color:var(--primary-light); flex-shrink:0; width:1.25rem; text-align:center; }
.auth-right { flex:1; display:flex; align-items:center; justify-content:center; padding:2rem; }
.auth-form-wrap {
  width:100%; max-width:420px; background:#fff;
  border-radius:var(--radius-lg); padding:2.25rem 2rem;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
}
.auth-form-wrap h2   { font-size:1.5rem; font-weight:800; color:var(--dark); margin-bottom:.4rem; }
.auth-form-wrap > p  { font-size:.875rem; color:var(--secondary); margin-bottom:1.5rem; }

/* ── Section title ─────────────────────────────────────── */
.section-title {
  font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--secondary); margin-bottom:.75rem;
}

/* ══════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════ */

/* Display */
.d-flex        { display:flex; }
.d-block       { display:block; }
.d-inline-flex { display:inline-flex; }
.d-inline      { display:inline; }
.d-none        { display:none !important; }
.d-grid        { display:grid; }

/* Flex helpers */
.flex-wrap      { flex-wrap:wrap; }
.flex-column    { flex-direction:column; }
.flex-1         { flex:1; min-width:0; }
.flex-shrink-0  { flex-shrink:0; }
.align-items-center   { align-items:center; }
.align-items-start    { align-items:flex-start; }
.align-items-end      { align-items:flex-end; }
.align-self-center    { align-self:center; }
.justify-content-between { justify-content:space-between; }
.justify-content-end     { justify-content:flex-end; }
.justify-content-center  { justify-content:center; }
.justify-content-start   { justify-content:flex-start; }

/* Gap */
.gap-1{gap:.25rem} .gap-2{gap:.5rem}  .gap-3{gap:.75rem}
.gap-4{gap:1rem}   .gap-5{gap:1.25rem} .gap-6{gap:1.5rem}

/* Margin */
.mt-0{margin-top:0}           .mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}       .mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}        .mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mb-0{margin-bottom:0 !important}
.mb-1{margin-bottom:.25rem}   .mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}   .mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}  .mb-6{margin-bottom:1.5rem}
.my-1{margin-top:.25rem; margin-bottom:.25rem}
.my-2{margin-top:.5rem;  margin-bottom:.5rem}
.my-3{margin-top:.75rem; margin-bottom:.75rem}
.my-4{margin-top:1rem;   margin-bottom:1rem}
.ms-auto{margin-left:auto}    .me-auto{margin-right:auto}
.me-1{margin-right:.25rem}    .me-2{margin-right:.5rem}
.me-3{margin-right:.75rem}
.mx-auto{margin-left:auto; margin-right:auto}

/* Padding */
.p-0{padding:0}   .p-1{padding:.25rem}   .p-2{padding:.5rem}
.p-3{padding:.75rem} .p-4{padding:1rem}  .p-5{padding:1.25rem}
.px-0{padding-left:0; padding-right:0}
.py-0{padding-top:0;  padding-bottom:0}
.px-3{padding-left:.75rem; padding-right:.75rem}
.py-3{padding-top:.75rem;  padding-bottom:.75rem}

/* Width / Height */
.w-100{width:100%}   .w-auto{width:auto}
.w-full{width:100%}  .h-100{height:100%}
.mw-100{max-width:100%}

/* Text */
.text-center  { text-align:center; }
.text-right   { text-align:right; }
.text-left    { text-align:left; }
.text-sm      { font-size:.78rem; }
.text-xs      { font-size:.7rem; }
.text-lg      { font-size:1rem; }
.text-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-break   { word-break:break-word; }
.text-muted   { color:var(--secondary)  !important; }
.text-primary { color:var(--primary)    !important; }
.text-success { color:var(--success)    !important; }
.text-danger  { color:var(--danger)     !important; }
.text-warning { color:#7a5300           !important; }
.text-info    { color:var(--info)       !important; }
.text-dark    { color:var(--dark)       !important; }
.text-white   { color:#fff              !important; }
.text-accent  { color:var(--accent)     !important; }
.text-secondary { color:var(--secondary) !important; }

/* Font weight */
.fw-normal   { font-weight:400; }  .fw-medium  { font-weight:500; }
.fw-semibold { font-weight:600; }  .fw-bold    { font-weight:700; }
.fw-extrabold{ font-weight:800; }

/* Border */
.border        { border:1.5px solid var(--border); }
.border-bottom { border-bottom:1px solid var(--border); }
.border-top    { border-top:1px solid var(--border); }
.border-0      { border:none !important; }
.rounded       { border-radius:var(--radius); }
.rounded-sm    { border-radius:var(--radius-sm); }
.rounded-lg    { border-radius:var(--radius-lg); }
.rounded-full  { border-radius:50%; }
.rounded-pill  { border-radius:50px; }

/* Shadow */
.shadow    { box-shadow:var(--shadow); }
.shadow-sm { box-shadow:var(--shadow-sm); }
.shadow-lg { box-shadow:var(--shadow-lg); }
.shadow-none { box-shadow:none !important; }

/* Background */
.bg-light   { background:var(--light)   !important; }
.bg-white   { background:#fff           !important; }
.bg-primary { background:var(--primary) !important; }

/* Misc */
.cursor-pointer    { cursor:pointer; }
.overflow-hidden   { overflow:hidden; }
.overflow-x-auto   { overflow-x:auto; }
.position-relative { position:relative; }
.opacity-50        { opacity:.5; }
.opacity-75        { opacity:.75; }
.underline         { text-decoration:underline; }
.no-underline      { text-decoration:none; }


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile-first: all col-md-* stack to 100% below 768px ── */
@media (max-width: 767.98px) {

  /* Grid: all columns full-width on mobile */
  .row { margin: 0 -.5rem; }
  .row > [class*="col-"] {
    width: 100% !important;
    padding: 0 .5rem;
    margin-bottom: 1rem;
  }

  /* Allow 2-col on xs for stat cards */
  .row-2-mobile > [class*="col-"] { width: 50% !important; }

  /* Card */
  .card { margin-bottom: 1rem; }
  .card-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .card-body   { padding: 1rem; }
  .card-footer { padding: .75rem 1rem; }
  .card-title  { font-size: .85rem; }

  /* Stat card */
  .stat-card { padding: 1.1rem; margin-bottom: 1rem; }
  .stat-value { font-size: 1.6rem; }
  .stat-icon  { font-size: 2.25rem; bottom: .75rem; right: .85rem; }

  /* Table */
  .data-table thead th,
  .data-table tbody td,
  .table-responsive > table thead th,
  .table-responsive > table tbody td { padding: .6rem .75rem; font-size: .8rem; }
  .td-actions { display: flex; gap: .25rem; justify-content: flex-end; }

  /* Buttons */
  .btn-responsive { width: 100%; justify-content: center; }
  .card-header .btn { font-size: .75rem; padding: .35rem .75rem; }

  /* Form */
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline .form-control, .form-inline .btn { width: 100%; }
  .form-group.d-flex { flex-direction: column; gap: .5rem; }

  /* Filter */
  .filter-section { padding: .75rem 1rem; }
  .form-filter { flex-direction: column; align-items: stretch; }
  .filter-group, .filter-group:first-child { width: 100%; min-width: unset; }
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; }

  /* Pagination */
  .pagination { justify-content: center; }
  .page-link  { min-width: 30px; height: 30px; font-size: .78rem; }

  /* Modal — bottom sheet on mobile */
  .modal { padding: 0; align-items: flex-end !important; }
  .modal-dialog {
    max-width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 90vh;
  }

  /* Auth page */
  .auth-page  { flex-direction: column; }
  .auth-left  { width: 100%; padding: 1.5rem 1.25rem; }
  .auth-right { padding: 1.25rem; }
  .auth-features { display: none; }
  .auth-brand h1 { font-size: 1.25rem; }

  /* Info list */
  .info-item  { flex-direction: column; gap: .2rem; }
  .info-label { width: auto; min-width: unset; font-size: .72rem; }

  /* Upload steps */
  .upload-steps { flex-direction: column; gap: .5rem; }
  .upload-step-arrow { transform: rotate(90deg); align-self: flex-start; padding-left: 1rem; }

  /* Misc */
  .d-mobile-none { display: none !important; }
  .section-divider { margin: .75rem 0; }
  .empty-state { padding: 1.5rem 1rem; }
  .empty-state i { font-size: 2.5rem; }
}

/* ── Tablets: 2-column stat cards ──────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
  .row-stats > [class*="col-"] { width: 50% !important; }
}

/* ── Responsive display helpers ────────────────────────── */
@media (min-width: 576px) {
  .d-sm-inline { display: inline  !important; }
  .d-sm-none   { display: none    !important; }
  .d-sm-flex   { display: flex    !important; }
}
@media (max-width: 575.98px) {
  .d-xs-none   { display: none    !important; }
  .d-xs-block  { display: block   !important; }
}


/* ── Stat card row — kurangi jarak bawah ke baris berikutnya ── */
.row-stats { align-items: stretch; }
.row-stats > [class*="col-"] { margin-bottom: 1.5rem; display: flex; }
.row-stats .stat-card { flex: 1; }
.stat-card { margin-bottom: 0; }

/* ── Mobile: stat cards show 2 per row (col-md-3) ─────── */
@media (max-width: 767.98px) {
  .row > .col-md-3 { width: 50% !important; }
  .row > .col-md-3:has(.stat-card) { width: 50% !important; }
}
@media (max-width: 400px) {
  /* Very small screens: stat cards go full width */
  .row > .col-md-3 { width: 100% !important; }
}

/* ── Print ─────────────────────────────────────────────── */
@media print {
  .sidebar, .sidebar-overlay, .top-header,
  .filter-section, .pagination,
  nav[aria-label="breadcrumb"],
  .btn, #alertContainer { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .card  { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body   { background: #fff; }
  .content-wrapper { padding: 0 !important; }
  .stat-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .row > [class*="col-"] { width: auto !important; }
  .col-md-3  { width: 25% !important; }
  .col-md-4  { width: 33.333% !important; }
  .col-md-6  { width: 50% !important; }
}

/* ── Custom scrollbar ───────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #d0d3e0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b0b4c0; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

/* ── Card Filter Row ──────────────────────────────────── */
/* Filter selalu di dalam card, tepat di bawah card-header */
.card-filter {
  padding: .85rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--light);
  display: flex; flex-wrap: wrap;
  align-items: flex-end; gap: .65rem;
}
.card-filter .form-control { font-size: .82rem; padding: .42rem .75rem; }
.card-filter select.form-control { min-width: 130px; }
.card-filter .btn   { flex-shrink: 0; }

@media (max-width: 767.98px) {
  .card-filter { flex-direction: column; align-items: stretch; }
  .card-filter .form-control { width: 100% !important; }
  .card-filter .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   FORM PAGE IMPROVEMENTS — v6.0
   ═══════════════════════════════════════════════════════════ */

/* ── form-group inside .row automatically splits into cols ── */
/* Handles: <div class="row"><div class="form-group">... */
form .row > .form-group {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0 .75rem;
  margin-bottom: 1rem;
}

/* ── Welcome banner ─────────────────────────────────────── */
.welcome-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 1.6rem 2rem;
  margin-bottom: 1.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.welcome-banner::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.06); pointer-events: none;
}
.welcome-banner::after {
  content: '';
  position: absolute; bottom: -50px; right: 80px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.04); pointer-events: none;
}
.welcome-banner h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: .3rem; position: relative; z-index: 1; }
.welcome-banner p  { font-size: .85rem; opacity: .85; margin-bottom: 0; position: relative; z-index: 1; }
.welcome-banner .wb-meta {
  margin-top: 1rem; display: flex; gap: 1.5rem;
  font-size: .8rem; opacity: .9; position: relative; z-index: 1;
  flex-wrap: wrap;
}
.welcome-banner .wb-meta span { display: flex; align-items: center; gap: .4rem; }

/* Dark/teal variant for non-admin roles */
.welcome-banner.wb-teal {
  background: linear-gradient(135deg, #1a3a5c 0%, #1a5276 100%);
}
.welcome-banner.wb-green {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
}

/* ── Dashboard quick-stats row ──────────────────────────── */
.quick-stats {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.5rem;
}
.qs-item {
  flex: 1 1 160px;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: .85rem;
}
.qs-icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.1rem;
}
.qs-icon.blue   { background: rgba(78,115,223,.12); color: var(--primary); }
.qs-icon.green  { background: rgba(28,200,138,.12); color: var(--success); }
.qs-icon.red    { background: rgba(231,74,59,.12);  color: var(--danger);  }
.qs-icon.yellow { background: rgba(246,194,62,.18); color: #7a5300; }
.qs-icon.purple { background: rgba(111,66,193,.12); color: var(--purple); }
.qs-val  { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--dark); }
.qs-lbl  { font-size: .72rem; color: var(--secondary); margin-top: .15rem; font-weight: 600; }

/* ── Section heading inside dashboard ───────────────────── */
.section-heading {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--secondary);
  margin-bottom: .85rem; margin-top: .25rem;
  display: flex; align-items: center; gap: .5rem;
}
.section-heading::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

@media (max-width: 767.98px) {
  .welcome-banner { padding: 1.2rem 1.25rem; }
  .welcome-banner h2 { font-size: 1.05rem; }
  .welcome-banner .wb-meta { gap: .85rem; }
  form .row > .form-group { flex: 1 1 100%; }
  .qs-item { flex: 1 1 140px; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD CARD LAYOUT — v7.0
   Equal-height cards, compact empty states, scroll list body
   ═══════════════════════════════════════════════════════════ */

/* Equal-height row: setiap col jadi flex column */
.db-equal-row { align-items: stretch; }
.db-equal-row > [class*="col-"] { display: flex; flex-direction: column; }

/* Card mengisi kolom + tinggi minimum konsisten antar semua baris */
.db-card-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.db-card-flex .card-header { flex-shrink: 0; }

/* Body list/chart — mengisi sisa card setelah header */
.db-scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.db-scroll-body::-webkit-scrollbar { width: 4px; }
.db-scroll-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Empty state compact untuk dashboard */
.db-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}
.db-empty-icon {
    font-size: 2.2rem;
    margin-bottom: .6rem;
    opacity: .3;
    color: var(--secondary);
}
.db-empty-title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--dark);
    margin-bottom: .2rem;
}
.db-empty-sub {
    font-size: .78rem;
    color: var(--secondary);
}

@media (max-width: 767.98px) {
    .db-scroll-body { max-height: 220px; }
}