/* Tema modern: gradasi navy tua redup -> putih (gaya Minimalism & Swiss untuk dashboard data padat).
   Hanya override warna/radius/bayangan di atas style.css; ukuran & logika collapse sidebar tidak diubah.
   Matikan/hidupkan: php scripts/theme_toggle.php off|on */
:root {
  --tm-navy-900: #08142e;
  --tm-navy-800: #0d1d40;
  --tm-navy-700: #142a55;
  --tm-navy-600: #1d3768;
  --tm-navy-100: #e6ebf3;
  --tm-navy-50: #f3f5f9;
  --tm-text: #111827;
  --tm-muted: #4b5563;
  --tm-border: #d9dee8;
  --tm-shadow: 0 1px 2px rgba(8, 20, 46, .08), 0 2px 8px rgba(8, 20, 46, .05);
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--tm-text);
  background: linear-gradient(180deg, var(--tm-navy-100) 0%, #ffffff 360px) fixed;
}

/* Topbar */
.topbar {
  background: linear-gradient(90deg, var(--tm-navy-900) 0%, var(--tm-navy-800) 55%, var(--tm-navy-700) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(8, 20, 46, .35);
  position: relative;
  z-index: 20;
}
.topbar .user-toggle { border-radius: 999px; }
.avatar { background: var(--tm-navy-100); color: var(--tm-navy-800); box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); }

/* Sidebar */
.sidebar {
  background: linear-gradient(180deg, var(--tm-navy-900) 0%, var(--tm-navy-800) 60%, var(--tm-navy-700) 100%);
  border-right: 1px solid rgba(255, 255, 255, .05);
}
.sidebar nav a,
.sidebar .menu-toggle {
  color: #d5dcea;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.sidebar nav a:hover,
.sidebar .menu-toggle:hover {
  background: rgba(255, 255, 255, .07);
  color: #ffffff;
}
.sidebar nav a:focus-visible,
.sidebar .menu-toggle:focus-visible {
  outline: 2px solid #9fb1d6;
  outline-offset: -2px;
}
.sidebar .open > .menu-toggle { background: rgba(255, 255, 255, .05); color: #ffffff; }
.sidebar .menu-toggle::after { color: #8496bd; }
.sidebar .submenu { margin-left: 14px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .12); }
.sidebar hr { opacity: .12; }

/* Konten & kartu */
.content-breadcrumb a { color: var(--tm-navy-600); }
.page-title { color: var(--tm-navy-800); letter-spacing: -.01em; }
.page-title-icon { color: var(--tm-navy-600); }
.card {
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  box-shadow: var(--tm-shadow);
}
.card-header {
  background: linear-gradient(90deg, var(--tm-navy-100) 0%, #ffffff 100%);
  color: var(--tm-navy-800);
  border-bottom: 1px solid var(--tm-border);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Tabel */
.table {
  border: 1px solid var(--tm-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  box-shadow: var(--tm-shadow);
  background: #fff;
}
.table thead th {
  background: var(--tm-navy-800);
  color: #f3f5f9;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 0;
}
.table thead th a { color: #ffffff; }
.table tbody td { border-top: 1px solid #eceff4; }
.table tbody tr:nth-child(odd) { background: #ffffff; }
.table tbody tr:nth-child(even) { background: var(--tm-navy-50); }
.table tbody tr:hover { background: var(--tm-navy-100); }

/* Form */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], select, textarea {
  border: 1px solid #c3cad8;
  border-radius: 6px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--tm-navy-600);
  box-shadow: 0 0 0 3px rgba(29, 55, 104, .18);
  outline: none;
}

/* Tombol */
.btn { border-radius: 6px; cursor: pointer; transition: background .2s ease, box-shadow .2s ease, transform .05s ease; }
.btn:hover { box-shadow: 0 2px 6px rgba(8, 20, 46, .18); }
.btn:focus-visible { outline: 2px solid var(--tm-navy-600); outline-offset: 2px; }
.btn-primary { background: var(--tm-navy-700); border-color: var(--tm-navy-800); color: #fff; }
.btn-primary:hover { background: var(--tm-navy-800); border-color: var(--tm-navy-900); }
.btn-outline { color: var(--tm-navy-700); border-color: #9aa8c4; }
.btn-outline:hover { background: var(--tm-navy-50); color: var(--tm-navy-800); border-color: var(--tm-navy-600); }

/* Footer */
.footer { border-top: 1px solid var(--tm-border); box-shadow: 0 -1px 6px rgba(8, 20, 46, .05); }

@media (prefers-reduced-motion: reduce) {
  .sidebar nav a, .sidebar .menu-toggle, .btn, input, select, textarea { transition: none; }
}