/* Seqola on the pinned AdminLTE/Bootstrap bundles. No generated utility layer. */
/* Palette and typeface (owner's choice B, 26 October 2026; doc 18 §5.4): Seqola teal on the parent pages'
   teal-tinted greys, a tinted page canvas under white cards, a deep teal-black sidebar, a success green apart from
   the teal, and Plus Jakarta Sans, a variable font kept with the app (school/vendor-assets.json). */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}
:root, [data-bs-theme="light"] {
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: #0f766e;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #115e59;
  --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: #0e1e1c; --bs-body-color-rgb: 14, 30, 28;
  --bs-emphasis-color: #0e1e1c; --bs-emphasis-color-rgb: 14, 30, 28;
  --bs-secondary-color: #4b5d5a; --bs-secondary-color-rgb: 75, 93, 90;
  --bs-border-color: #dfe8e6; --bs-border-color-translucent: rgba(14, 30, 28, .12);
  --bs-secondary-bg: #e5ecea; --bs-secondary-bg-rgb: 229, 236, 234;
  --bs-tertiary-bg: #f4f7f6; --bs-tertiary-bg-rgb: 244, 247, 246;
  --bs-success: #15803d; --bs-success-rgb: 21, 128, 61;
  --bs-success-text-emphasis: #14532d; --bs-success-bg-subtle: #dcfce7; --bs-success-border-subtle: #bbf7d0;
  --bs-code-color: #ab296a;  /* Bootstrap's pink #d63384 reads 4.2:1 on the canvas; this one 6:1 */
  /* Seqola's own, redefined for dark below: the page canvas, teal tints behind teal text, and the red of Keluar and errors. */
  --seqola-canvas: #f4f7f6;
  --seqola-tint: #e6f2ef; --seqola-tint-color: #0f5f58; --seqola-tint-strong: #b9dcd5;
  --seqola-danger: #b02a37; --seqola-danger-bg: #fbe9eb;
}
/* Dark mode (theme.js sets data-bs-theme="dark" on <html>; the sidebar is dark in both): the same teal-tinted greys
   with a canvas darker than the cards, and lighter teals for links, lines and focus rings, at 5.5:1 or more. Filled
   teal buttons keep white text (5.5:1). Every token the light block changes is set again here, as :root matches too. */
[data-bs-theme="dark"] {
  --bs-link-color: #5fc4b8;
  --bs-link-color-rgb: 95, 196, 184;
  --bs-link-hover-color: #8fd8cf;
  --bs-link-hover-color-rgb: 143, 216, 207;
  --bs-primary-text-emphasis: #5fc4b8;  /* AdminLTE's dark outline buttons use it */
  --bs-body-bg: #121b1a; --bs-body-bg-rgb: 18, 27, 26;
  --bs-body-color: #dce7e5; --bs-body-color-rgb: 220, 231, 229;
  --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #9fb5b1; --bs-secondary-color-rgb: 159, 181, 177;
  --bs-border-color: #2a3836; --bs-border-color-translucent: rgba(220, 231, 229, .12);
  --bs-secondary-bg: #22302e; --bs-secondary-bg-rgb: 34, 48, 46;
  --bs-tertiary-bg: #192523; --bs-tertiary-bg-rgb: 25, 37, 35;
  --bs-success-text-emphasis: #86efac; --bs-success-bg-subtle: #052e16; --bs-success-border-subtle: #166534;
  --bs-code-color: #e685b5;
  --seqola-canvas: #0b1312;
  --seqola-tint: rgb(95 196 184 / .16); --seqola-tint-color: #8fd8cf; --seqola-tint-strong: rgb(95 196 184 / .4);
  --seqola-danger: #f1aeb5; --seqola-danger-bg: rgb(234 134 143 / .16);
}
body { background-color: var(--seqola-canvas); }  /* the page; cards, the header and the footer keep --bs-body-bg */
/* Bootstrap's "light" chips and table rows take the palette's greys, so they show on the canvas and stay quiet on dark. */
.text-bg-light { color: var(--bs-body-color) !important; background-color: var(--bs-secondary-bg) !important; }
.table-light {
  --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-tertiary-bg); --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-color: var(--bs-body-color); --bs-table-hover-bg: var(--bs-secondary-bg);
}
.btn-primary {
  --bs-btn-bg: #0f766e; --bs-btn-border-color: #0f766e;
  --bs-btn-hover-bg: #115e59; --bs-btn-hover-border-color: #115e59;
  --bs-btn-active-bg: #115e59; --bs-btn-active-border-color: #115e59;
  --bs-btn-disabled-bg: #0f766e; --bs-btn-disabled-border-color: #0f766e;
}
/* Bootstrap compiles these component colours as fixed blue, not from --bs-primary. */
.nav-pills { --bs-nav-pills-link-active-bg: #0f766e; }
.dropdown-menu { --bs-dropdown-link-active-bg: #0f766e; }
.pagination { --bs-pagination-active-bg: #0f766e; --bs-pagination-active-border-color: #0f766e; --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(15, 118, 110, .25); }
.form-check-input:checked { background-color: #0f766e; border-color: #0f766e; }
.progress { --bs-progress-bar-bg: #0f766e; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #87bbb7; box-shadow: 0 0 0 .25rem rgba(15, 118, 110, .25); }
.btn-outline-primary {
  --bs-btn-color: #0f766e; --bs-btn-border-color: #0f766e;
  --bs-btn-hover-bg: #0f766e; --bs-btn-hover-border-color: #0f766e;
  --bs-btn-active-bg: #115e59; --bs-btn-active-border-color: #115e59;
}
/* Bootstrap's grey #6c757d reads 4.35:1 on the canvas; the palette's quiet grey reads 6.5:1 (AdminLTE sets dark). */
.btn-outline-secondary {
  --bs-btn-color: #4b5d5a; --bs-btn-border-color: #4b5d5a;
  --bs-btn-hover-bg: #4b5d5a; --bs-btn-hover-border-color: #4b5d5a;
  --bs-btn-active-bg: #3d4c4a; --bs-btn-active-border-color: #3d4c4a;
}
.seqola-brand { display: inline-flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; }
.seqola-monogram { display: inline-grid; place-items: center; width: 2rem; height: 2rem; background: #0f766e; color: white; border-radius: .5rem; font-weight: 800; }
.seqola-icon, .nav-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.seqola-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--seqola-tint); color: var(--seqola-tint-color); font-size: .8rem; font-weight: 700; }
.seqola-avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.app-sidebar { --bs-offcanvas-width: 250px; color: #d5e3e0; }
.app-sidebar[data-bs-theme="dark"] {
  --bs-secondary-bg: #0e1e1c; --bs-secondary-bg-rgb: 14, 30, 28;  /* its bg-body-secondary: Seqola's deep teal-black */
  --lte-sidebar-color: #d5e3e0; --lte-sidebar-header-color: #9fb5b1;
  --lte-sidebar-hover-color: #fff; --lte-sidebar-hover-bg: rgba(94, 234, 212, .1);
  --lte-sidebar-menu-active-color: #fff; --lte-sidebar-menu-active-bg: #0f766e;
}
.app-sidebar .form-control { background: #fff; color: #212529; }
.app-header .seqola-brand { color: var(--bs-body-color); }
.sidebar-brand .seqola-brand { color: #fff; }
.app-main { min-width: 0; }
.app-content { padding-bottom: 2rem; }
.seqola-name-form { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; max-width: 100%; }
.seqola-name-form > .mb-3 { flex: 1 1 14rem; min-width: 0; margin-bottom: 0 !important; }
.seqola-cohorts th[scope="row"], .seqola-cohorts label { overflow-wrap: anywhere; }
.seqola-cohorts summary::-webkit-details-marker { display: none; }
/* Sortable column headers (templatetags/dashboard.py sort_header): a dotted underline marks them, the arrow the
   column and direction the list is ordered by. */
.seqola-sort { color: inherit; text-decoration: underline dotted; text-underline-offset: .2em; }
.seqola-sort:hover { text-decoration-style: solid; }
.seqola-sort-arrow { width: 1em; height: 1em; margin-left: .25rem; vertical-align: -.125em; }
.seqola-sort-arrow.is-up { transform: rotate(180deg); }
/* A table wider than the screen shows a shadow on each side that has more columns. The white ends scroll with the
   table and cover a shadow once that side is reached; transparent cells let them show. */
.table-responsive {
  background: linear-gradient(to right, var(--bs-body-bg) 30%, rgb(255 255 255 / 0)) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--bs-body-bg) 30%, rgb(255 255 255 / 0)) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .2), transparent) left / .9rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .2), transparent) right / .9rem 100% no-repeat;
}
.table-responsive > .table { --bs-table-bg: transparent; }
/* Riwayat on phones: a payment reference such as MOCKPAY-E18AE2D06442 cannot break and the date does not wrap, so
   the table was 20px wider than its card at 360px and 60px at 320px. Below sm the date may wrap after its comma, a
   long word may break and the gaps between the three columns are 4px a side instead of 8px (the card's edges keep
   8px); from sm the table is as before. A large amount ("+Rp 2.000.000") still left it 15-20px too wide at 320px
   (QA-LAUNCH-01): the headers and that amount need about 293px. So below 360px the amount may also wrap, only after
   "Rp" (the number itself never breaks); from 360px it stays on one line. */
@media (max-width: 359.98px) {
  #historyTable > tr > td:nth-child(3) { white-space: normal !important; }  /* outranks .text-nowrap */
}
@media (max-width: 575.98px) {
  #historyTable > tr > td:first-child { white-space: normal !important; }  /* outranks .text-nowrap */
  #historyTable > tr > td:nth-child(2) { overflow-wrap: anywhere; }
  .table:has(> #historyTable) > :not(caption) > tr > :is(:first-child, :nth-child(2)) { padding-right: .25rem; }
  .table:has(> #historyTable) > :not(caption) > tr > :is(:nth-child(2), :nth-child(3)) { padding-left: .25rem; }
}
.seqola-narrow { max-width: 36rem; }
/* Chart.js needs a sized, positioned box to stay responsive. */
.seqola-chart { position: relative; height: 16rem; }
.seqola-spark { position: relative; height: 40px; }
/* Ringkasan's tones (UI/UX review, option A): one per figure (card tile, sparkline, activity icon) and per "Perlu
   dicek" urgency. Each text colour reads at 5:1 or more on its tint, and an icon or text always says the same. */
.seqola-tone-teal { --tone: #0f5f58; --tone-bg: #e6f2ef; }
.seqola-tone-blue { --tone: #0a58ca; --tone-bg: #e7f1ff; }
.seqola-tone-amber { --tone: #8a4b08; --tone-bg: #fdf0d5; }
.seqola-tone-green { --tone: #166534; --tone-bg: #dcfce7; }
.seqola-tone-red { --tone: #a52834; --tone-bg: #f8d7da; }
.seqola-tone-grey { --tone: #4b5d5a; --tone-bg: #e5ecea; }
/* On dark: light tints over a 16% wash of the same hue, 5.5:1 or more. */
[data-bs-theme="dark"] .seqola-tone-teal { --tone: #8fd8cf; --tone-bg: rgb(95 196 184 / .16); }
[data-bs-theme="dark"] .seqola-tone-blue { --tone: #9ec5fe; --tone-bg: rgb(110 168 254 / .16); }
[data-bs-theme="dark"] .seqola-tone-amber { --tone: #ffda6a; --tone-bg: rgb(255 193 7 / .16); }
[data-bs-theme="dark"] .seqola-tone-green { --tone: #86efac; --tone-bg: rgb(34 197 94 / .16); }
[data-bs-theme="dark"] .seqola-tone-red { --tone: #f1aeb5; --tone-bg: rgb(234 134 143 / .16); }
[data-bs-theme="dark"] .seqola-tone-grey { --tone: #c2d3d0; --tone-bg: rgb(159 181 177 / .16); }
.seqola-dot { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: .625rem; color: var(--tone); background: var(--tone-bg); }
.seqola-dot .seqola-icon { width: 1.25rem; height: 1.25rem; }
.seqola-dot-round { border-radius: 50%; }
.seqola-dot-sm { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
.seqola-dot-sm .seqola-icon { width: 1rem; height: 1rem; }
.badge.seqola-pill { color: var(--tone); background: var(--tone-bg); }
.seqola-kpi { transition: box-shadow .15s ease-in-out, transform .15s ease-in-out; }
.seqola-kpi:hover, .seqola-kpi:focus-within { box-shadow: 0 .5rem 1rem rgb(0 0 0 / .08); transform: translateY(-2px); }  /* the card is a link */
.seqola-delta-icon { width: .875em; height: .875em; margin-right: .2em; vertical-align: -.1em; }
.seqola-pills-sm .nav-link { padding: .25rem .75rem; font-size: .875rem; }
/* AdminLTE clears floats in every card header with an empty ::after box. In a flex header that box is a third item,
   so justify-content-between left "2 hal" and the activity filters in the middle instead of at the right edge. */
.card-header.d-flex::after { content: none; }
@media (prefers-reduced-motion: reduce) { .seqola-kpi { transition: none; } .seqola-kpi:hover, .seqola-kpi:focus-within { transform: none; } }
/* Links inside messages (Django admin's "saved" message links the record) use the alert's own dark link colour. */
.alert a { color: var(--bs-alert-link-color); font-weight: 600; }
/* Command palette and date picker (P8). Bootstrap compiles list-group active colours as fixed blue. */
.list-group { --bs-list-group-active-bg: #0f766e; --bs-list-group-active-border-color: #0f766e; }
#command-options .list-group-item { cursor: pointer; }
#command-options .list-group-item:not(.active) .small { color: var(--bs-secondary-color); }
.seqola-calendar th { font-size: .8125rem; font-weight: 600; color: var(--bs-secondary-color); }
.seqola-calendar td { padding: 1px; width: 14.28%; }
.seqola-calendar button { width: 100%; min-height: 2.5rem; border-radius: .375rem; }
/* Plain .btn leaves the disabled border colour undefined, so days after today would get a currentColor outline. */
.seqola-calendar button:disabled { --bs-btn-disabled-border-color: transparent; }
.seqola-calendar button[aria-pressed="true"] { background: #0f766e; color: #fff; }
.seqola-calendar button[aria-label$="(hari ini)"]:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 2px var(--bs-link-color); }
/* Finance steps: a vertical line of dots; the state is also written out for screen readers. */
.seqola-steps { list-style: none; margin: 0; padding: 0; }
.seqola-step { position: relative; padding: 0 0 1rem 1.75rem; }
.seqola-step:last-child { padding-bottom: 0; }
.seqola-step::before { content: ""; position: absolute; left: .25rem; top: .3rem; width: .85rem; height: .85rem; border: 2px solid #adb5bd; border-radius: 50%; background: var(--bs-body-bg); }
.seqola-step::after { content: ""; position: absolute; left: .65rem; top: 1.3rem; bottom: .1rem; border-left: 2px solid var(--bs-border-color); }
.seqola-step:last-child::after { display: none; }
.seqola-step.is-done::before { border-color: var(--bs-link-color); background: var(--bs-link-color); }
.seqola-step.is-current::before { border-color: var(--bs-link-color); box-shadow: 0 0 0 3px rgba(var(--bs-link-color-rgb), .25); }
.seqola-step.is-failed::before { border-color: var(--seqola-danger); background: var(--seqola-danger); }
.seqola-step.is-skipped .seqola-step-label { color: var(--bs-secondary-color); }
.seqola-step-label { display: block; font-weight: 600; }
.seqola-step-text { display: block; color: var(--bs-secondary-color); font-size: .875rem; overflow-wrap: anywhere; }
.skip-links { position: absolute; top: 0; left: 0; z-index: 2000; }
.skip-links a { position: absolute; left: -10000px; width: max-content; padding: .75rem; background: var(--bs-body-bg); color: var(--bs-link-color); }
.skip-links a:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid var(--bs-link-color); outline-offset: 3px; }
.app-sidebar :focus-visible { outline-color: #fff; }
.app-header button, .app-header .btn, .app-sidebar button { min-height: 44px; }
.app-header .dropdown-item { display: flex; align-items: center; min-height: 44px; }
.app-header .container-fluid { flex-wrap: wrap; }
.breadcrumb { --bs-breadcrumb-divider: "›"; }  /* as in Django admin's trail */
.app-header .btn { display: inline-flex; align-items: center; white-space: nowrap; }
.app-header form { margin: 0; }
/* Header search and account menu (UI/UX review, option B): Cari reads as a search field; the account button is the
   initials and name, tinted teal while open; the menu opens with a user card, icons, and Keluar apart in red. */
.seqola-search {
  --bs-btn-color: var(--bs-secondary-color); --bs-btn-bg: var(--bs-tertiary-bg); --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color);
  gap: .5rem; border-radius: .5rem;
}
@media (min-width: 768px) { .seqola-search { min-width: 15rem; } }
.seqola-search kbd { padding: .1rem .4rem; border: 1px solid var(--bs-border-color); border-radius: .25rem; background: var(--bs-body-bg); color: var(--bs-secondary-color); font-size: .75rem; }
.seqola-account {
  --bs-btn-color: var(--bs-body-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--seqola-tint-color); --bs-btn-active-bg: var(--seqola-tint); --bs-btn-active-border-color: var(--seqola-tint-strong);
  --bs-btn-box-shadow: 0 0 0 transparent;  /* AdminLTE's button shadow drew a ring; a list value keeps the focus ring valid */
  gap: .5rem; padding: .25rem .625rem .25rem .25rem; border-radius: 2rem;
}
.seqola-avatar-sm { width: 2rem; height: 2rem; font-size: .75rem; }
.seqola-account-menu { min-width: 15rem; padding: .5rem; border-color: var(--bs-border-color-translucent); border-radius: .75rem; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .12); }
.seqola-account-menu .dropdown-item { gap: .75rem; border-radius: .5rem; }
.seqola-account-menu .dropdown-item .seqola-icon { width: 1.25rem; height: 1.25rem; color: var(--bs-secondary-color); }
.seqola-account-menu .seqola-signout { color: var(--seqola-danger); }
.seqola-account-menu .seqola-signout .seqola-icon { color: inherit; }
.seqola-account-menu .seqola-signout:hover, .seqola-account-menu .seqola-signout:focus-visible { background: var(--seqola-danger-bg); }
.seqola-account-card { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; overflow-wrap: anywhere; }
.seqola-account-menu li:has(> .dropdown-divider) + li:has(> .dropdown-divider) { display: none; }  /* no password link: one line */
/* Theme button: the choice's icon, borderless and round; its menu (account menu look) marks the choice with a tint
   and a check, so the mark never rests on colour alone. */
.seqola-theme {
  --bs-btn-color: var(--bs-secondary-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-active-color: var(--seqola-tint-color); --bs-btn-active-bg: var(--seqola-tint); --bs-btn-active-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 transparent; justify-content: center; width: 44px; padding: 0; border-radius: 50%;
}
.seqola-theme-menu { min-width: 11rem; }
.seqola-theme-menu .seqola-check { margin-left: auto; visibility: hidden; }
.seqola-theme-menu [aria-pressed="true"] { background: var(--seqola-tint); color: var(--seqola-tint-color); font-weight: 600; }
.seqola-theme-menu [aria-pressed="true"] .seqola-icon { color: inherit; visibility: visible; }
@media (min-width: 992px) {
  body:not(.seqola-admin):not(.sidebar-collapse):has(.app-sidebar) .app-header .seqola-brand { display: none; }  /* the sidebar shows it */
  /* Hidden with the header's Menu button: its links leave the tab order, and so does the skip link to them. */
  .sidebar-collapse:not(.sidebar-mini) .app-sidebar { visibility: hidden; }
  .sidebar-collapse .skip-links a[href="#navigation"] { display: none !important; }
  /* AdminLTE's layout-fixed caps the sidebar at one window height, so a whole-page capture or print
     shows white below it. The dark column now runs the full page; its brand and menu stay pinned to
     the window instead, and the menu still scrolls inside when it does not fit. */
  .sidebar-expand-lg.layout-fixed .app-sidebar { position: relative; max-height: none; }
  .sidebar-expand-lg.layout-fixed .app-sidebar > .sidebar-brand { position: sticky; top: 0; }
  .sidebar-expand-lg.layout-fixed .app-sidebar > .sidebar-wrapper { position: sticky; top: 3.5rem; max-height: calc(100vh - 3.5rem); }
  /* The menu needs about 750px of window height at AdminLTE's 8px row padding, so on a 1280x720 window or a
     1366x768 laptop "Administrasi" was cut off at the bottom. Below 750px the rows' top and bottom padding
     shrinks with the window, down to 4px, so the whole menu fits; taller windows keep 8px, and windows under
     about 620px still scroll inside the menu. */
  .sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper :is(.nav-link, .nav-header) {
    padding-block: clamp(4px, calc((100vh - 494px) / 32), 8px); }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .sidebar-collapse:not(.sidebar-mini) .app-sidebar { transition: margin-left .3s ease-in-out, visibility 0s linear .3s; }  /* slide, then hide */
}
@media (max-width: 991.98px) {
  /* Bootstrap's offcanvas opens and closes the menu. Below lg AdminLTE's script adds
     body.sidebar-collapse, whose rule moves .app-sidebar off-screen; the id outranks it. */
  #sidebar.offcanvas-lg { position: fixed; top: 0; bottom: 0; height: 100dvh; margin-left: 0; z-index: 1045; background: #0e1e1c !important; }
  .app-sidebar .sidebar-wrapper { overflow-y: auto; }
  .app-wrapper > .app-main, .app-wrapper > .app-header, .app-wrapper > .app-footer { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}