/* ===== Theme clean (NAVY solid, no gradient) + Sidebar collapsible + full screen ===== */
:root{
  --app-bg: #f6f8fb;
  --card-bg: #ffffff;
  --text-muted: #6c757d;
  --brand: #0b3d91;            /* NAVY */
  --accent: #22c55e;           /* green accent */
  --topbar-bg: #0b3d91;        /* solid navy */
  --sidebar-bg: #ffffff;
  --sidebar-border: #eef0f3;
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 72px;
  --inner-border: #e5e7eb;
  --thead-bg: #f9fafb;
}
html, body { height: 100%; }
body { background: var(--app-bg); }

/* Topbar (solid) */
header.navbar { min-height: 56px; background: var(--topbar-bg) !important; color: #fff !important; }
header.navbar .btn, header.navbar a, header.navbar .fw-semibold, header.navbar .text-muted { color: #fff !important; }
header.navbar .btn-outline-light { border-color: rgba(255,255,255,0.4); }

/* Sidebar (offcanvas + desktop) */
#offcanvasSidebar .offcanvas-header { border-bottom: 1px solid var(--sidebar-border); }
#offcanvasSidebar .list-group-item { border: 0; padding: 12px 16px; }
#offcanvasSidebar .list-group-item.active { background: rgba(11,61,145,0.08); color: var(--brand); font-weight: 600; }
.sidebar-desktop {
  width: var(--sidebar-width);
  position: fixed; top:56px; bottom:0; left:0;
  overflow:auto; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border);
}
.sidebar-desktop .list-group-item { border: 0; padding: 12px 16px; display:flex; align-items:center; }
.sidebar-desktop .list-group-item.active { background: rgba(11,61,145,0.08); color: var(--brand); font-weight: 600; }
.sidebar-desktop .list-group-item .icon { margin-right: .5rem; font-size: 1.05rem; }
.sidebar-desktop .list-group-item .label { white-space: nowrap; }

/* Collapsed (icon-only) */
body.sidebar-collapsed .sidebar-desktop { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .sidebar-desktop .list-group-item { justify-content: center; }
body.sidebar-collapsed .sidebar-desktop .list-group-item .icon { margin-right: 0 !important; }
body.sidebar-collapsed .sidebar-desktop .list-group-item .label { display: none; }

/* Main wrapper (full, rapat ke atas) */
.main-wrap { 
  margin-top: 0px;
  padding-top: 0 !important;
}
@media (min-width: 992px) {
  .main-wrap { padding-left: var(--sidebar-width); }
  body.sidebar-collapsed .main-wrap { padding-left: var(--sidebar-width-collapsed); }
}

/* ---- Konten inner agar border tidak nempel sidebar ---- */
.content-inner { 
  padding: 16px 14px 14px 14px;
}
@media (min-width: 1200px){ 
  .content-inner { padding: 16px 22px 22px 22px; }
}

/* Head bar di setiap page: dibuat mepet ke atas */
.page-head { 
  padding: 0 0 12px;
  margin-bottom: 16px;
}

.page-head h5 {
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

/* ===== Table wrapper (border agak ke dalam) ===== */
.table-wrap {
  background: #fff;
  border: 1px solid var(--inner-border);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
  overflow: hidden;
  margin-top: 0;
}
.table-wrap .table { margin-bottom: 0; }
.table-wrap .table thead th {
  background: var(--thead-bg);
  font-weight: 600;
  user-select: none;
  padding: 14px 12px;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4b5563;
  border-bottom: 2px solid #e5e7eb;
}
.table-wrap .table tbody tr + tr td { border-top: 1px solid #f0f2f6; }
.table-wrap .table tbody td {
  padding: 12px;
  font-size: 0.9375rem;
  color: #374151;
}
.table-wrap .table tbody tr {
  transition: background-color 0.15s ease;
}
.table-wrap .table tbody tr:hover {
  background-color: #f9fafb;
}

/* Sort (tanpa ikon) */
.th-sort { 
  cursor: pointer; 
  white-space: nowrap;
  position: relative;
  padding-right: 24px !important;
}
.th-sort:hover { 
  color: var(--brand); 
  text-decoration: underline; 
}
.th-sort::after {
  content: '⇅';
  position: absolute;
  right: 8px;
  opacity: 0.3;
  font-size: 0.875rem;
}
.th-sort:hover::after {
  opacity: 0.6;
}
.th-sort.asc::after {
  content: '↑';
  opacity: 1;
  color: var(--brand);
}
.th-sort.desc::after {
  content: '↓';
  opacity: 1;
  color: var(--brand);
}

/* Utilities */
.table td, .table th { vertical-align: middle; }
.text-muted { color: var(--text-muted) !important; }
.badge-soft { background:#eef2ff; color:var(--brand); border-radius:999px; padding:.35rem .6rem; }

/* Badge enhancements */
.badge {
  padding: 0.35rem 0.75rem;
  font-weight: 500;
  font-size: 0.8125rem;
}
.badge.bg-success {
  background-color: #10b981 !important;
}
.badge.bg-secondary {
  background-color: #6b7280 !important;
}

/* Auth */
.auth-card { max-width: 420px; margin: 8vh auto; }
.auth-card .toggle-eye { border-left: 0; }

/* Brand Logos */
.brand-logo { height: 48px; }
.brand-logo-sm { height: 28px; }

/* ===== Form & Input Enhancements ===== */
.form-control, .form-select {
  border: 1px solid #d1d5db;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.1);
  outline: none;
}
.form-control::placeholder {
  color: #9ca3af;
}
.form-label {
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* ===== Button Enhancements ===== */
.btn {
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 6px;
}
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover {
  background-color: #0a3275;
  border-color: #0a3275;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(11, 61, 145, 0.2);
}
.btn-success {
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-success:hover {
  background-color: #16a34a;
  border-color: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(34, 197, 94, 0.2);
}
.btn-warning {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}
.btn-warning:hover {
  background-color: #d97706;
  border-color: #d97706;
}
.btn-danger {
  background-color: #ef4444;
  border-color: #ef4444;
}
.btn-danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}
.btn-sm i {
  font-size: 0.875rem;
}

/* ===== Modal Enhancements ===== */
.modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.modal-header {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 1.25rem 1.5rem;
  border-radius: 12px 12px 0 0;
}
.modal-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 1.125rem;
}
.modal-body {
  padding: 1.5rem;
}
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
}
.modal-footer .btn {
  padding: 0.625rem 1.25rem;
}

/* Form check styling */
.form-check-input {
  border: 2px solid #d1d5db;
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-label {
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  margin-left: 0.5rem;
}

/* ===== Pagination ===== */
.pagination {
  justify-content: center;
  margin-top: 16px;
}
.pagination .page-link {
  color: var(--brand);
  border: 1px solid #e5e7eb;
  padding: 0.5rem 0.75rem;
  margin: 0 2px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.pagination .page-link:hover {
  background-color: #f3f4f6;
  border-color: var(--brand);
  color: var(--brand);
}
.pagination .page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.pagination .page-item.disabled .page-link {
  color: #9ca3af;
  background-color: #f9fafb;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .page-head {
    flex-direction: column;
    align-items: stretch !important;
  }
  .page-head h5 {
    margin-bottom: 12px;
  }
  .page-head .form-control {
    max-width: 100% !important;
    margin-bottom: 8px;
  }
  .page-head .btn {
    margin-bottom: 8px;
  }
  .page-head .ms-auto {
    margin-left: 0 !important;
    width: 100%;
  }
  .table-responsive {
    font-size: 0.875rem;
  }
  .table thead th,
  .table tbody td {
    padding: 8px;
  }
}
@media (max-width: 576px) {
  .content-inner {
    padding: 12px 8px !important;
  }
  .table-wrap {
    border-radius: 8px;
  }
  .modal-dialog {
    margin: 0.5rem;
  }
}