/* Tema Django Admin yang memakai bahasa visual dashboard IT Infrastructure Billing. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --app-bg: #f3f5f8;
  --app-surface: #ffffff;
  --app-surface-2: #f7f9fb;
  --app-surface-3: #eef1f5;
  --app-border: #e7eaef;
  --app-fg: #101828;
  --app-muted: #5b6b82;
  --app-faint: #66758c;
  --app-accent: #2563eb;
  --app-accent-hover: #1e40af;
  --app-accent-weak: #eef4ff;
  --app-ok: #16a34a;
  --app-danger: #dc2626;
  --app-warn: #d97706;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .04);

  --primary: var(--app-accent);
  --secondary: var(--app-accent);
  --accent: var(--app-accent);
  --primary-fg: #ffffff;
  --body-fg: var(--app-fg);
  --body-bg: var(--app-bg);
  --body-quiet-color: var(--app-muted);
  --body-loud-color: var(--app-fg);
  --header-bg: var(--app-surface);
  --header-color: var(--app-muted);
  --header-branding-color: var(--app-fg);
  --header-link-color: var(--app-muted);
  --breadcrumbs-bg: var(--app-surface);
  --breadcrumbs-fg: var(--app-muted);
  --breadcrumbs-link-fg: var(--app-accent);
  --link-fg: var(--app-accent);
  --link-hover-color: var(--app-accent-hover);
  --link-selected-fg: var(--app-accent-hover);
  --hairline-color: var(--app-border);
  --border-color: var(--app-border);
  --darkened-bg: var(--app-surface-2);
  --selected-bg: var(--app-accent-weak);
  --selected-row: var(--app-accent-weak);
  --button-bg: var(--app-accent);
  --button-hover-bg: var(--app-accent-hover);
  --default-button-bg: var(--app-accent);
  --default-button-hover-bg: var(--app-accent-hover);
  --delete-button-bg: var(--app-danger);
  --delete-button-hover-bg: #b91c1c;
  --object-tools-bg: var(--app-accent);
  --object-tools-hover-bg: var(--app-accent-hover);
  --close-button-bg: var(--app-surface-3);
  --close-button-hover-bg: #dfe4eb;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #080b12;
  --app-surface: #111725;
  --app-surface-2: #0d131f;
  --app-surface-3: #1a2233;
  --app-border: #222c3d;
  --app-fg: #e8eef6;
  --app-muted: #a3b0c2;
  --app-faint: #aab6c7;
  --app-accent: #4f8cf7;
  --app-accent-hover: #76a7fa;
  --app-accent-weak: rgba(79, 140, 247, .15);
  --app-shadow: none;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --app-bg: #080b12;
    --app-surface: #111725;
    --app-surface-2: #0d131f;
    --app-surface-3: #1a2233;
    --app-border: #222c3d;
    --app-fg: #e8eef6;
    --app-muted: #a3b0c2;
    --app-faint: #aab6c7;
    --app-accent: #4f8cf7;
    --app-accent-hover: #76a7fa;
    --app-accent-weak: rgba(79, 140, 247, .15);
    --app-shadow: none;
  }
}

/* Django Admin bawaan masih memakai content-box pada sebagian kontrol. Akibatnya
   min-height ditambah lagi dengan padding dan semua tombol tampak terlalu besar. */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--app-bg);
  color: var(--app-fg);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body { min-width: 0; }
a:link,
a:visited { color: var(--app-accent); }

#container { min-height: 100vh; }

/* Header menyerupai top bar aplikasi. */
#header {
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  min-height: 64px;
  padding: 0 24px;
  background: var(--app-surface);
  color: var(--app-muted);
  border-bottom: 1px solid var(--app-border);
  box-shadow: none;
}

#branding { min-width: max-content; }
#site-name { font-size: 15px; }
#site-name a,
#site-name a:link,
#site-name a:visited {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--app-fg);
  font-weight: 600;
}

.logo-kotak {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--app-accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.sub-brand {
  margin-left: 2px;
  color: var(--app-faint);
  font-size: 11px;
  font-weight: 400;
}

#user-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--app-faint);
  font-size: 11px;
  letter-spacing: .02em;
}

.admin-welcome { white-space: nowrap; }
.admin-account-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

#user-tools a,
#user-tools a:link,
#user-tools a:visited {
  color: var(--app-muted);
  border: 0;
  font-weight: 500;
}

#user-tools a.ke-aplikasi,
#user-tools a.ke-aplikasi:link,
#user-tools a.ke-aplikasi:visited {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--app-accent);
  color: #fff;
  font-weight: 600;
}

#user-tools a.ke-aplikasi:hover { background: var(--app-accent-hover); }
.admin-theme-switch {
  display: inline-flex;
  gap: 3px;
  margin-left: 0;
  padding: 3px;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  background: var(--app-surface-2);
  vertical-align: middle;
}
.admin-theme-switch button {
  min-height: 28px;
  padding: 5px 8px;
  color: var(--app-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 500 11px/1 "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
}
.admin-theme-switch button.on {
  color: var(--app-fg);
  background: var(--app-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  font-weight: 600;
}

div.breadcrumbs {
  padding: 11px 28px;
  background: var(--app-surface);
  color: var(--app-muted);
  border-bottom: 1px solid var(--app-border);
  font-size: 12px;
}

div.breadcrumbs a { color: var(--app-accent); }

/* Sidebar Django diperlakukan sebagai sidebar dashboard. */
.main { background: var(--app-bg); }
#nav-sidebar {
  width: 250px;
  flex: 0 0 250px;
  padding: 14px 10px 24px;
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
}

.toggle-nav-sidebar {
  width: 38px;
  color: var(--app-muted);
  background: var(--app-surface-2);
  border-right: 1px solid var(--app-border);
}

#nav-filter {
  width: calc(100% - 12px);
  margin: 0 6px 14px;
  padding: 9px 11px;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  background: var(--app-surface-2);
  color: var(--app-fg);
  font-family: inherit;
}

#nav-sidebar .module {
  margin: 0 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.admin-group:not(:has(tr[class^="model-"])) { display: none; }
.admin-group caption { text-align: left; }

#nav-sidebar .module caption {
  padding: 6px 10px;
  background: transparent;
  color: var(--app-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#nav-sidebar table,
#nav-sidebar tbody,
#nav-sidebar tr,
#nav-sidebar th,
#nav-sidebar td { display: block; width: 100%; }
#nav-sidebar tr { position: relative; margin: 1px 0; }
#nav-sidebar th,
#nav-sidebar td { padding: 0; border: 0; }
#nav-sidebar td { display: none; }

#nav-sidebar th a {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--app-muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nav-sidebar th a:hover {
  background: var(--app-surface-2);
  color: var(--app-fg);
}

#nav-sidebar .current-model th a {
  background: var(--app-accent-weak);
  color: var(--app-accent);
  font-weight: 600;
}

/* Area konten dan kartu. */
#content {
  min-width: 0;
  max-width: none;
  padding: 24px 28px 40px;
}

#content h1 {
  margin: 0 0 18px;
  color: var(--app-fg);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}

#content h2,
#content h3 { color: var(--app-fg); }
#content-main { min-width: 0; }

.module,
#changelist-filter,
#content-related .module,
.inline-group,
.submit-row {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: var(--app-shadow);
  overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
  padding: 12px 16px;
  background: var(--app-surface-2);
  color: var(--app-fg);
  border-bottom: 1px solid var(--app-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.dashboard #content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 16px;
  align-items: start;
  width: auto;
}
.dashboard #content > h1,
.dashboard #content > .messagelist { grid-column: 1 / -1; }
.dashboard #content-main { width: min(100%, 980px); }
.dashboard #content-main .module { margin-bottom: 16px; }
.dashboard #content-main .module table td,
.dashboard #content-main .module table th { padding: 10px 14px; }
.dashboard #content-related { width: min(100%, 420px); }
.dashboard #content-related .module { margin: 0; }

/* Tabel daftar. */
table { color: var(--app-fg); }
thead th,
tfoot td {
  padding: 10px 12px;
  background: var(--app-surface-2);
  color: var(--app-faint);
  border-bottom: 1px solid var(--app-border);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

tbody td,
tbody th {
  padding: 11px 12px;
  color: var(--app-fg);
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}

tbody tr:last-child td,
tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover { background: var(--app-surface-2); }

#changelist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
}

#changelist .changelist-form-container { min-width: 0; }
#changelist .results {
  overflow: auto;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: var(--app-shadow);
}

#changelist table { border: 0; }
#changelist-filter {
  position: static;
  width: auto;
  margin: 0;
}

#changelist-filter h2 {
  padding: 12px 14px;
  background: var(--app-surface-2);
  color: var(--app-fg);
  border-bottom: 1px solid var(--app-border);
  font-size: 12px;
}

#changelist-filter h3 {
  margin: 0;
  padding: 13px 14px 5px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
}

#changelist-filter ul { padding: 0 14px 10px; }
#changelist-filter li { margin: 2px 0; }
#changelist-filter a {
  display: block;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--app-muted);
}
#changelist-filter li.selected a {
  background: var(--app-accent-weak);
  color: var(--app-accent);
  font-weight: 600;
}

#changelist .actions {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface);
}

#toolbar {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface);
}

#toolbar form input[type="submit"] { min-height: 38px; }
.paginator {
  margin-top: 12px;
  padding: 12px 14px !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 12px;
  background: var(--app-surface) !important;
}

/* Form dan kontrol. */
input,
textarea,
select,
.vTextField {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-fg);
  font-family: inherit;
  font-size: 13px;
}

textarea { min-height: 90px; }
input:focus,
textarea:focus,
select:focus {
  border-color: var(--app-accent);
  outline: 3px solid color-mix(in srgb, var(--app-accent) 14%, transparent);
}

input[type="checkbox"],
input[type="radio"] {
  min-height: auto;
  accent-color: var(--app-accent);
}

label { color: var(--app-muted); font-weight: 500; }
.help,
p.help,
form p.help,
div.help,
form div.help { color: var(--app-faint); font-size: 11px; }

.aligned .form-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-border);
}
.aligned .form-row:last-child { border-bottom: 0; }
fieldset.module { margin-bottom: 16px; }
.collapse summary { color: var(--app-accent); }

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  min-height: 38px;
  padding: 9px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--app-accent);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover { background: var(--app-accent-hover); }

.submit-row {
  display: flex;
  gap: 8px;
  padding: 12px;
}
#content .submit-row { border-radius: 14px; }
.submit-row p { margin: 0; }
.submit-row a.deletelink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  height: auto;
  margin-left: auto;
  padding: 9px 14px;
  border-radius: 9px;
  line-height: 1.2;
}

/* Inline Lampiran: nama PDF lama dapat sangat panjang. Pisahkan tautan file,
   checkbox pembersih, dan input pengganti agar tidak saling bertumpuk. */
#attachments-group .tabular.inline-related table { table-layout: fixed; }
#attachments-group th.original,
#attachments-group td.original {
  width: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
#attachments-group td.original p { display: none; }
#attachments-group th.column-tipe,
#attachments-group td.field-tipe { width: 18%; }
#attachments-group th.column-file,
#attachments-group td.field-file { width: 36%; }
#attachments-group th.column-filename,
#attachments-group td.field-filename { width: 28%; }
#attachments-group th.column-buka,
#attachments-group td.field-buka { width: 8%; text-align: center; }
#attachments-group thead th:last-child,
#attachments-group td.delete { width: 8%; text-align: center; }
#attachments-group .file-upload {
  max-width: 100%;
  margin: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#attachments-group .file-upload > a {
  display: block;
  max-width: 100%;
  margin: 3px 0 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#attachments-group .clearable-file-input {
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  margin: 0 0 8px;
  white-space: nowrap;
}
#attachments-group .file-upload input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 5px;
}
#attachments-group .field-tipe select,
#attachments-group .field-filename input { width: 100%; max-width: 100%; }

.object-tools { margin-top: -48px; }
.object-tools a,
.object-tools a:link,
.object-tools a:visited {
  min-height: 38px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--app-accent);
  font-size: 11px;
  font-weight: 600;
}
.object-tools a.addlink,
.object-tools a.addlink:link,
.object-tools a.addlink:visited { color: #fff !important; }

/* Pesan, riwayat, dan detail kecil. */
ul.messagelist { margin: 0 0 16px; padding: 0; }
ul.messagelist li {
  margin: 0 0 8px;
  padding: 11px 14px 11px 42px;
  border: 1px solid color-mix(in srgb, var(--app-ok) 35%, var(--app-border));
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--app-ok) 8%, var(--app-surface));
  color: var(--app-fg);
}
.errornote,
ul.errorlist {
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface));
  color: var(--app-danger);
}
.quiet,
a.quiet:link,
a.quiet:visited { color: var(--app-faint); }
.addlink { color: var(--app-ok) !important; }
.deletelink { color: #fff !important; }

/* Kolom angka konsisten dengan dashboard. */
.field-nominal_col,
.field-ppn_col,
.field-total_col,
.field-target_rp,
.field-per_bulan_rp,
.field-terkumpul_rp,
.field-saldo_fmt,
.field-batas_fmt,
.field-anggaran_fmt,
.field-nilai_fmt,
.field-jumlah_fmt,
.field-saldo_sebelum_fmt,
.field-saldo_sesudah_fmt,
td.field-nilai,
td.field-jumlah {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 1024px) {
  #header { padding-inline: 16px; }
  #content { padding: 18px; }
  #content #changelist { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  #content #changelist > * { grid-column: 1 !important; min-width: 0; }
  #content #changelist-filter {
    position: static !important;
    order: -1 !important;
    width: auto !important;
    max-width: none !important;
  }
  #content #changelist.filtered .changelist-form-container,
  #content #changelist.filtered .results,
  #content #changelist.filtered #toolbar,
  #content #changelist.filtered .actions,
  #content #changelist.filtered .paginator { width: auto !important; margin-right: 0 !important; }
  .dashboard #content-main,
  .dashboard #content-related { width: 100%; }
  .dashboard #content { grid-template-columns: minmax(0, 1fr); }
  .dashboard #content > h1,
  .dashboard #content > .messagelist { grid-column: auto; }

  /* Daftar admin dapat memiliki banyak kolom dinamis. Label kolom ditambahkan
     oleh base_site.html, lalu setiap baris disusun sebagai kartu pada ruang sempit. */
  #changelist .results { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  #result_list { display: block; width: 100%; min-width: 0; }
  #result_list thead { display: none; }
  #result_list tbody { display: grid; gap: 12px; }
  #result_list tbody tr {
    display: grid;
    gap: 0;
    padding: 5px 14px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
  }
  #result_list tbody th,
  #result_list tbody td {
    display: grid;
    grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 9px 0;
    border-bottom: 1px solid var(--app-border);
    overflow-wrap: anywhere;
    text-align: left;
  }
  #result_list tbody tr > :last-child { border-bottom: 0; }
  #result_list tbody th::before,
  #result_list tbody td::before {
    content: attr(data-label);
    color: var(--app-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  #result_list tbody th > *,
  #result_list tbody td > * { min-width: 0; max-width: 100%; }
}

@media (max-width: 767px) {
  #header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 auto;
    height: auto !important;
    min-height: 0;
    padding: 12px 14px;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #branding {
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
  }
  .sub-brand { display: none; }
  #user-tools {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    text-align: left;
  }
  #user-tools a.ke-aplikasi { min-height: 32px; padding: 6px 10px; }
  div.breadcrumbs { padding: 9px 14px; }
  #content { padding: 14px; }
  #content h1 { padding-right: 0; font-size: 19px; }
  .object-tools {
    float: none;
    margin: 0 0 12px;
    padding: 0;
  }
  .object-tools li { float: none; }
  .object-tools a { display: block; text-align: center; }
  .aligned .form-row { padding: 12px; }
  .aligned label { width: auto; padding: 0 0 5px; }
  .aligned .form-row > div { margin-left: 0; }
  .submit-row { flex-wrap: wrap; }
  .submit-row input,
  .submit-row p,
  .submit-row a { flex: 1 1 100%; text-align: center; }
  #changelist .actions label,
  #changelist .actions select { width: 100%; }
  #result_list tbody th,
  #result_list tbody td { grid-template-columns: minmax(86px, .32fr) minmax(0, 1fr); gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}