:root {
  --brand: #0d6efd;
  --ink: #1f2937;
  --muted: #6b7280;
  --border: #d1d5db;
}

html,
body {
  height: 100%;
}
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Poppins", sans-serif;
  color: var(--ink);
}

.logo-circle {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}
.brand-logo {
  /* khusus di navbar/header */
  width: 36px;
  height: 36px;
}
.logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Slip container styled as A4 */
.salary-slip {
  background: #fff;
  border: 1px solid #00000022;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  width: 210mm; /* A4 width */
  min-height: 297mm; /* A4 height */
  margin-left: auto;
  margin-right: auto;
}
.slip-inner {
  padding: 14mm; /* nice print padding */
}

.slip-table tbody tr td {
  padding: 0.25rem 0;
  border-bottom: 1px dotted #c7c7c7;
}
.slip-table td:first-child {
  color: var(--ink);
}
.slip-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.net-box {
  border: 1px solid #00000044;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
}

/* Form rows */
.form-label {
  font-weight: 600;
}
.remove-btn {
  cursor: pointer;
}

.currency-input {
  text-align: right;
}

/* Print tweaks */
@media print {
  header,
  footer,
  .card,
  .btn,
  .container > .row > .col-lg-5 {
    display: none !important;
  }
  .salary-slip {
    box-shadow: none;
    border: 1px solid #000;
  }
  body {
    background: #fff;
  }
}

/* Small utility */
.small {
  font-size: 0.875rem;
}

/* Data Guru helpers */
.avatar {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.bg-primary-subtle {
  background-color: #e6f0ff;
}
.table-responsive {
  overflow-x: auto;
}

/* Mobile sidebar styles */
.mobile-sidebar {
  background: #040c9e;
  border-right: 1px solid #0f3b4b;
}
.mobile-sidebar .offcanvas-header {
  border-bottom: 1px solid #1f2937;
  padding: 1rem 1.25rem;
}

.mobile-sidebar .offcanvas-title {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mobile-sidebar .sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  color: #d1d5db; /* gray-300 */
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}

.mobile-sidebar .sidebar-nav .nav-link i {
  margin-right: 1rem;
  width: 20px;
  text-align: center;
}

.mobile-sidebar .sidebar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.18); /* gray-800 */
  color: #fff;
}

.mobile-sidebar .sidebar-nav .sub-link {
  color: #9ca3af; /* gray-400 */
  padding-left: calc(1.25rem + 20px + 1rem); /* Align with main text */
}

.mobile-sidebar .sidebar-nav .sub-link:hover,
.mobile-sidebar .sidebar-nav .sub-link.active {
  color: #fff;
  background-color: transparent;
}

/* Desktop-only nav pills and mobile toggler are handled in HTML classes */

/* Desktop Sidebar styles */
@media (min-width: 992px) {
  .layout-with-sidebar {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: calc(100vh - 72px); /* viewport height minus navbar */
  }
  .sidebar-desktop {
    position: sticky; /* stick under navbar when scrolling */
    top: 72px; /* match header height */
    width: 260px;
    flex: 0 0 260px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: #040c9e; /* custom solid background */
  }
  .main-with-sidebar {
    margin-left: 0; /* no offset, handled by flex */
    flex: 1 1 auto;
    padding-top: 0; /* content flows naturally below navbar */
  }
}

.sidebar-desktop .sidebar-inner {
  padding: 8px 0;
}
.sidebar-desktop .sidebar-brand {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-desktop .sidebar-brand img {
  width: 140px;
  height: auto;
  object-fit: contain;
}

/* ===== Dashboard metric colors ===== */
.metric-value {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
}
.metric-guru {
  background: #e8f2ff;
  color: #0d6efd;
}
.metric-siswa {
  background: #f0f9ff;
  color: #0369a1;
}
.metric-kelas {
  background: #f3e8ff;
  color: #7c3aed;
}
.metric-pendapatan {
  background: #ecfdf5;
  color: #16a34a;
}
.metric-pengeluaran {
  background: #fff1f2;
  color: #dc2626;
}
.metric-saldo {
  background: #eef2ff;
  color: #4f46e5;
}

/* ===== Soft random tints for metric cards ===== */
.card-tint {
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.card-tint-blue {
  background-color: #eef6ff;
}
.card-tint-indigo {
  background-color: #eef2ff;
}
.card-tint-teal {
  background-color: #f0fdfa;
}
.card-tint-amber {
  background-color: #fff7ed;
}
.card-tint-rose {
  background-color: #fff1f2;
}
.card-tint-violet {
  background-color: #f5f3ff;
}
.card-tint-slate {
  background-color: #f8fafc;
}
.card-tint-cyan {
  background-color: #ecfeff;
}

/* ===== A4 Report Grid & Table Borders ===== */
.rpt-grid-2col > .my-2 {
  border: 1px solid #333;
  border-radius: 4px;
  padding: 8px;
}
.rpt-table {
  width: 100%;
  border-collapse: collapse;
}
.rpt-table th,
.rpt-table td {
  border: 1px solid #333;
  padding: 4px 6px;
}
.rpt-table th {
  background: #f5f5f5;
  font-weight: 600;
  text-align: center; /* center header labels */
}
.rpt-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rpt-unit-total {
  margin-top: 6px;
}
.rpt-unit-total {
  text-align: right; /* taruh di kanan */
  font-variant-numeric: tabular-nums; /* angka rapi */
}

/* ===== Aset thumbnails in table ===== */
.aset-thumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.aset-thumb {
  height: 36px; /* responsive height */
  width: auto; /* keep aspect ratio */
  max-width: 80px;
  object-fit: contain; /* fit without crop */
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}
.sidebar-desktop .nav-link {
  display: block;
  padding: 10px 12px;
  color: #d1d5db; /* gray-300 */
  border-radius: 0.5rem;
}
.sidebar-desktop .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-desktop .sub-link {
  font-size: 0.925rem;
  opacity: 0.9;
}
.sidebar-desktop .collapse {
  margin-top: 4px;
}

/* Active pill style */
.sidebar-desktop .nav-link.active,
.sidebar-desktop .nav-link.active:hover {
  color: #0f3b4b;
  box-shadow: inset 4px 0 0 #8bc34a;
}

/* Mobile active state */
.mobile-sidebar .sidebar-nav .nav-link.active,
.mobile-sidebar .sidebar-nav .nav-link.active:hover {
  color: #0f3b4b;
  box-shadow: inset 4px 0 0 #8bc34a;
}