body{font-family:Inter,Segoe UI,Arial,sans-serif;background:#f5f7fb;color:#14213d}.app{display:flex;min-height:100vh}.sidebar{width:220px;background:#0d1b35;color:#fff;padding:18px 12px;flex-shrink:0}.brand{font-weight:700;font-size:15px;display:flex;gap:10px;align-items:center;border-bottom:1px solid rgba(255,255,255,.12);padding:0 5px 20px}.brand:first-letter{font-size:28px}.side-title{font-size:10px;opacity:.6;margin:22px 7px 8px}.side-link{display:block;color:#d8e0ef;text-decoration:none;padding:9px 10px;border-radius:7px;font-size:13px;margin:3px 0}.side-link:hover,.side-link.active{background:#1557d6;color:#fff}.main{flex:1;min-width:0}.topbar{height:58px;background:#fff;border-bottom:1px solid #e8ebf0;display:flex;align-items:center;gap:20px;padding:0 22px}.hamb{font-size:20px}.search-top{margin-left:auto;margin-right:auto;border:1px solid #e1e5ec;border-radius:8px;color:#8792a5;font-size:12px;padding:9px 16px;width:360px}.stat{background:#fff;border:1px solid #edf0f5;border-radius:10px;padding:14px;display:flex;gap:12px;align-items:center;min-height:88px}.stat small{display:block;color:#667085;font-size:10px}.stat strong{font-size:23px;display:block;margin-top:3px}.icon{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:#fff}.icon.blue{background:#1769e0}.icon.orange{background:#f3a500}.icon.green{background:#1fa35b}.icon.red{background:#e94b4b}label{font-size:11px;color:#667085;margin-bottom:4px}.table{font-size:11px}.table thead th{background:#f3f5f8;color:#344054;white-space:nowrap}.table td,.table th{padding:9px 8px;border-color:#edf0f4}.badge{font-weight:600;font-size:9px;padding:5px 7px}.badge-blue{background:#e6efff;color:#1359c4}.badge-green{background:#dcf6e6;color:#16733a}.badge-red{background:#ffe1e1;color:#bd1f1f}.badge-orange{background:#fff0d5;color:#9b6200}.badge-gray{background:#edf0f3;color:#667085}.badge-soft{background:#f1f3f6;color:#667085}.muted{font-size:12px;color:#667085}h2{font-size:20px;margin:0}.card{border:1px solid #edf0f5;border-radius:10px}.modal-content{border:0;border-radius:12px}.modal-header{background:#1048a5;color:#fff}.modal-header .btn-close{filter:brightness(0) invert(1)}
/* ═══════════════════════════════════════════════════════
   REVISI 2 — Login card, outstanding highlight, pagination ID
   ══════════════════════════════════════════════════════ */

/* Login page sudah ada di login.php <style> */

/* Outstanding row highlight untuk logistik */
.row-outstanding td { background: #FFF5F5 !important; }
.row-outstanding td:first-child { border-left: 3px solid #E94B4B; }
.row-outstanding .badge-red { font-size: 10px; padding: 4px 8px; }

/* Pagination Bahasa Indonesia */
.page-link[aria-label="Previous"]::before { content: '‹ Sebelumnya'; }
.page-link[aria-label="Previous"] span    { display: none; }
.page-link[aria-label="Next"]::before    { content: 'Berikutnya ›'; }
.page-link[aria-label="Next"] span       { display: none; }

/* Outstanding badge warna merah lebih menonjol */
.badge-outstanding-row {
  background: #FFE4E4;
  color: #C0392B;
  font-weight: 700;
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid #F5B7B1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-outstanding-row::before {
  content: '▲';
  font-size: 8px;
}

/* Stat card outstanding — merah */
.stat-outstanding { border-left: 4px solid #E94B4B !important; }
.stat-outstanding .icon { background: #E94B4B !important; }


/* ═══════════════════════════════════════════════════
   WARNA BARIS OUTSTANDING BERDASARKAN UMUR
   ══════════════════════════════════════════════════ */

/* <= 1 bulan: hijau terang */
.row-out-green td { background-color: #BBFFD4 !important; color: #064E2A !important; }
.row-out-green td:first-child { border-left: 4px solid #16A34A; }

/* 1-2 bulan: kuning terang */
.row-out-yellow td { background-color: #FDE68A !important; color: #713F12 !important; }
.row-out-yellow td:first-child { border-left: 4px solid #D97706; }

/* > 2 bulan: merah terang */
.row-out-red td { background-color: #FCA5A5 !important; color: #7F1D1D !important; }
.row-out-red td:first-child { border-left: 4px solid #DC2626; }

/* Closing: hijau tua solid */
tr.table-success td { background-color: #86EFAC !important; color: #14532D !important; }
tr.table-success td:first-child { border-left: 4px solid #15803D; }

/* Legend keterangan warna — tampil di atas tabel untuk logistik */
.color-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  color: #555;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.color-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.color-legend .legend-dot {
  width: 14px; height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legend-green  { background: #22C55E; }
.legend-yellow { background: #F59E0B; }
.legend-red    { background: #EF4444; }
.legend-teal   { background: #10B981; }

/* Stat card clickable */
.stat-clickable:hover { box-shadow: 0 4px 16px rgba(233,75,75,0.18); transform: translateY(-2px); transition: all .15s; border-color: #E94B4B !important; }
.stat-clickable { transition: all .15s; }

/* Warna baris outstanding barang & service */
tr.row-outstanding-yellow,
tr.row-outstanding-yellow td { background-color: #FDE68A !important; }
tr.row-outstanding-red,
tr.row-outstanding-red td { background-color: #FCA5A5 !important; }
tr.row-outstanding-yellow:hover td { background-color: #fbbf24 !important; }
tr.row-outstanding-red:hover td    { background-color: #f87171 !important; }
/* Closing & Batal → hijau */
tr.table-success td { background-color: #86EFAC !important; }
tr.table-success:hover td { background-color: #6ee7b7 !important; }