/* Django admin inside the Seqola/AdminLTE shell. Django's own CSS and widget media stay; these rules restyle them
   in the shell's look (cards, sentence case, Seqola teal, readable sizes) and fit them to narrow screens. */
/* Django's colour variables take Bootstrap's and the shell's (dashboard.css), so they follow light and dark (theme.js). */
body.seqola-admin {
  --primary: #0f766e; --secondary: #115e59; --accent: #fff; --header-color: #fff; --header-bg: #0f766e;
  --link-fg: var(--bs-link-color); --link-hover-color: var(--bs-link-hover-color); --link-selected-fg: var(--bs-link-hover-color);
  --body-bg: var(--bs-body-bg); --body-fg: var(--bs-body-color); --body-quiet-color: var(--bs-secondary-color);
  --body-medium-color: var(--bs-body-color); --body-loud-color: var(--bs-body-color); --error-fg: var(--seqola-danger);
  --hairline-color: var(--bs-border-color); --border-color: var(--bs-border-color);
  --darkened-bg: var(--bs-tertiary-bg); --selected-bg: var(--bs-secondary-bg); --selected-row: var(--seqola-tint);
  --breadcrumbs-bg: transparent; --breadcrumbs-fg: var(--bs-secondary-color); --breadcrumbs-link-fg: var(--bs-link-color);
  --button-fg: #fff; --button-bg: #0f766e; --button-hover-bg: #115e59; --default-button-bg: #0f766e; --default-button-hover-bg: #115e59;
  --close-button-bg: var(--bs-body-bg); --close-button-hover-bg: var(--bs-secondary-bg); --delete-button-bg: #b02a37; --delete-button-hover-bg: #842029;
  --object-tools-fg: var(--bs-link-color); --object-tools-bg: var(--bs-body-bg); --object-tools-hover-bg: var(--seqola-tint);
  --font-family-primary: var(--bs-body-font-family);  /* Django's fields and buttons, in Plus Jakarta Sans too */
  font-family: var(--bs-body-font-family);
}
.seqola-admin div.breadcrumbs { padding: 0 0 .5rem; }
.seqola-admin h1 { font-size: 1.75rem; color: var(--bs-body-color); }
.seqola-admin #content h2 { font-size: 1.25rem; }
.seqola-admin #content h3 { font-size: 1rem; font-weight: 600; }
.seqola-admin #content { padding: 0; width: auto; }
.seqola-admin #content-main { float: none; width: auto; }
.seqola-admin #content-related { margin: 1.5rem 0 0; float: none; width: auto; max-width: 40rem; }
.seqola-admin .app-main { padding-top: 1.5rem; }

/* Sentence case and readable sizes instead of Django's small capitals. */
.seqola-admin .module h2, .seqola-admin .module caption, .seqola-admin thead th, .seqola-admin tfoot td,
.seqola-admin .object-tools a, .seqola-admin .submit-row input, .seqola-admin .submit-row a, .seqola-admin #changelist-filter h2,
.seqola-admin .button, .seqola-admin input[type="submit"] { text-transform: none; letter-spacing: normal; }
.seqola-admin td, .seqola-admin th, .seqola-admin .readonly, .seqola-admin .aligned label, .seqola-admin .form-row label { font-size: .9375rem; }
.seqola-admin thead th, .seqola-admin tfoot td { font-size: .875rem; font-weight: 600; color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.seqola-admin .help, .seqola-admin div.help, .seqola-admin p.help, .seqola-admin .helptext { font-size: .875rem; color: var(--bs-secondary-color); }

/* Modules (index apps, fieldsets, inlines, recent actions) are cards, as on the staff pages. */
.seqola-admin .module { background: var(--bs-body-bg); margin-bottom: 1.5rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.seqola-admin #content .module h2, .seqola-admin #content .module caption { background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 1rem;
  font-weight: 600; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.seqola-admin .module caption a, .seqola-admin .module h2 a { color: var(--bs-link-color); }
.seqola-admin caption { caption-side: top; }
.seqola-admin table { width: 100%; }
.seqola-admin td, .seqola-admin th { padding: .75rem; }
.seqola-admin #recent-actions-module h3 { padding: .75rem 1rem 0; }
.seqola-admin #recent-actions-module p, .seqola-admin #recent-actions-module ul { padding: 0 1rem; }

/* Forms. Django's widgets and their media are unchanged. */
.seqola-admin input, .seqola-admin textarea, .seqola-admin select { max-width: 100%; }
.seqola-admin input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
.seqola-admin .form-row { overflow: visible; }
.seqola-admin select[multiple] option:checked { background: var(--seqola-tint-strong) linear-gradient(var(--seqola-tint-strong), var(--seqola-tint-strong)); color: var(--bs-body-color); }
.seqola-admin .errornote { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.seqola-admin .errorlist { color: var(--seqola-danger); }

/* Buttons and links that act as buttons: 44px targets, the shell's teal. */
.seqola-admin .object-tools { float: none; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.seqola-admin .object-tools li { float: none; height: auto; margin: 0; }  /* Django fixes the item at 1rem; the 44px link would overlap */
.seqola-admin .object-tools a, .seqola-admin .object-tools a.addlink, .seqola-admin .object-tools a.historylink {
  display: inline-flex; align-items: center; min-height: 44px; padding: .375rem .875rem; border: 1px solid var(--bs-link-color);
  border-radius: .375rem; background: var(--bs-body-bg); color: var(--bs-link-color); font-size: .9375rem; font-weight: 500; background-image: none; }
.seqola-admin .object-tools a:hover, .seqola-admin .object-tools a:focus-visible { background: #0f766e; color: #fff; }
.seqola-admin .submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem; background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.seqola-admin .submit-row input, .seqola-admin .submit-row a.deletelink, .seqola-admin .submit-row a.closelink {
  display: inline-flex; align-items: center; height: auto; min-height: 44px; margin: 0; padding: .5rem 1rem; border-radius: .375rem;
  font-size: 1rem; line-height: 1.5; }
.seqola-admin .submit-row input[type="submit"] { background: var(--bs-body-bg); border: 1px solid var(--bs-link-color); color: var(--bs-link-color); }
.seqola-admin .submit-row input[type="submit"].default { background: #0f766e; color: #fff; }
.seqola-admin .submit-row a.closelink { border: 1px solid #6c757d; color: var(--bs-secondary-color); }
.seqola-admin .submit-row a.deletelink { background: var(--bs-body-bg); border: 1px solid var(--seqola-danger); color: var(--seqola-danger); }
.seqola-admin .submit-row input:hover, .seqola-admin .submit-row a:hover { filter: brightness(.95); }

/* Change lists: the results scroll sideways inside their own region on narrow screens; the filter is a card. */
.seqola-admin #changelist .results { border: 1px solid var(--bs-border-color); border-radius: .375rem; background: var(--bs-body-bg); }
.seqola-admin #changelist-filter { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.seqola-admin #content #changelist-filter h2 { background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 1rem; font-weight: 600; padding: .75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color); }
.seqola-admin #changelist-filter h3, .seqola-admin #changelist-filter summary { font-size: .9375rem; font-weight: 600; }
.seqola-admin #changelist-filter li a { font-size: .9375rem; }
.seqola-admin .paginator { font-size: .9375rem; padding: .75rem; }
/* Django labels each read-only inline row with its object name ("JournalLine object (1)"), repeating the row in English. */
.seqola-admin .inline-group .tabular td.original p { display: none; }
.seqola-admin .inline-group .tabular tr.has_original td { padding-top: .75rem; }
.seqola-admin #content .inline-group h2 { border: 0; border-bottom: 1px solid var(--bs-border-color); }

/* Custom admin pages: cashier logins and the Oppal import. */
.seqola-admin-scroll { position: relative; overflow-x: auto; max-width: 100%; }  /* relative: hidden labels stay inside */
.seqola-admin-scroll table { min-width: 36rem; }
.seqola-admin .import-scroll { overflow-x: auto; max-width: 100%; }
.seqola-admin .import-table { min-width: 900px; width: 100%; }
.seqola-admin .import-table caption { text-align: left; }
.seqola-admin .import-hash { overflow-wrap: anywhere; }
.seqola-admin .import-files { display: flex; flex-direction: column; gap: 16px; }
.seqola-admin .import-files input[type="submit"], .seqola-admin .import-files label,
.seqola-admin .import-files input::file-selector-button { min-height: 44px; }
.seqola-admin .import-files input[type="submit"] { align-self: start; }
.seqola-admin .import-files input[type="file"] { display: block; max-width: 100%; }

.seqola-admin .seqola-admin-title { font-size: .9rem; }
/* Header, menu and trail as on the staff pages: Django's base.css sets a 14px body and 13px list items, colours
   every link and squares every ul li. */
.seqola-admin .app-header, .seqola-admin .app-sidebar { font-size: 1rem; }
.seqola-admin .app-header li, .seqola-admin .app-sidebar li { font-size: inherit; line-height: inherit; }
.seqola-admin .app-header a.dropdown-item { color: var(--bs-dropdown-link-color); }
.seqola-admin .app-header .dropdown-menu li { list-style: none; padding: 0; }
.seqola-admin .seqola-crumbs { margin-bottom: .5rem; font-size: 1rem; color: var(--breadcrumbs-fg); }
/* Django's breadcrumbs continue the shell's "Sekolah Demo › Administrasi"; their first link is that same index. */
.seqola-admin .seqola-crumbs div.breadcrumbs { display: inline; padding: 0; }
.seqola-admin .seqola-crumbs div.breadcrumbs > a:first-child { display: none; }
/* Login and logged-out pages (UI/UX review, option B): a full-height page in soft teal light, one centred card with
   the brand (admin/base.html pretitle) instead of the header bar, and the demo notice under it. Django's login.css
   pads #content. */
body.seqola-admin.login { min-height: 100dvh; background: radial-gradient(circle at 15% 10%, #dcefea, transparent 45%),
  radial-gradient(circle at 85% 95%, #e6f2ef, transparent 40%), var(--seqola-canvas); }
.seqola-admin.login .app-header { display: none; }
.seqola-admin.login .app-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: 1rem; }
.seqola-admin.login .app-main { flex: 0 0 auto; width: 100%; max-width: 26rem; margin: 0; padding: 2rem; background: var(--bs-body-bg); border-radius: .75rem;
  box-shadow: 0 .75rem 2rem rgb(15 118 110 / .12), 0 .125rem .5rem rgb(0 0 0 / .06); }
.seqola-admin.login #content, .seqola-admin.login .app-content, .seqola-admin.login .app-content .container-fluid { padding: 0; }
.seqola-admin.login h1 { margin-bottom: 1.5rem; font-size: 1rem; font-weight: 400; color: var(--bs-secondary-color); text-align: center; }
.seqola-login-brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.seqola-login-brand .seqola-monogram { width: 3rem; height: 3rem; border-radius: .75rem; font-size: 1.5rem; }
.seqola-login-name { font-size: 1.5rem; font-weight: 700; color: var(--bs-body-color); }
.seqola-admin.login .form-control { min-height: 3rem; }
.seqola-admin.login input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100rem #f1f8f6 inset; -webkit-text-fill-color: var(--bs-body-color); }  /* not Chrome's blue */
/* On dark: the same glow in teal over the canvas, darker than the card, and an opaque dark teal autofill tint. */
[data-bs-theme="dark"] body.seqola-admin.login { background: radial-gradient(circle at 15% 10%, rgb(95 196 184 / .14), transparent 45%),
  radial-gradient(circle at 85% 95%, rgb(95 196 184 / .08), transparent 40%), var(--seqola-canvas); }
[data-bs-theme="dark"] .seqola-admin.login input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100rem #2b3e40 inset; }
.seqola-password { position: relative; }
.seqola-password .form-control { padding-right: 3.25rem; }
.seqola-password [data-password-toggle] { position: absolute; top: 50%; right: .125rem; width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; color: var(--bs-secondary-color); transform: translateY(-50%); --bs-btn-box-shadow: 0 0 0 transparent; }
.seqola-admin.login .app-footer { margin: 1.5rem 0 0; padding: 0; background: none; border: 0; text-align: center; }
.seqola-admin.popup .app-wrapper { display: block; }
/* Admin menu: each app is a native <details> group. AdminLTE's treeview rules expect li > .nav-link, so the summary
   gets the sidebar link colours, the arrow and the open state here; the links inside keep AdminLTE's own rules. */
.seqola-admin .sidebar-menu summary.nav-link { color: var(--lte-sidebar-color); cursor: pointer; margin-bottom: .2rem; }
.seqola-admin .sidebar-menu summary.nav-link::-webkit-details-marker { display: none; }
.seqola-admin .sidebar-menu summary.nav-link:hover, .seqola-admin .sidebar-menu summary.nav-link:focus-visible { color: var(--lte-sidebar-hover-color); background-color: var(--lte-sidebar-hover-bg); }
.seqola-admin .sidebar-menu summary > span { padding-left: .5rem; }
.seqola-admin .sidebar-menu summary .nav-arrow { position: absolute; top: 50%; right: 1rem; width: 1rem; height: 1rem; transform: translateY(-50%); transition: transform .3s ease-in-out; }
.seqola-admin .sidebar-menu details[open] > summary .nav-arrow { transform: translateY(-50%) rotate(90deg); }
.seqola-admin .sidebar-menu details[open] > .nav-treeview { display: block; }
.seqola-admin .sidebar-menu .nav-treeview > .nav-item { list-style: none; }  /* Django's base.css squares every ul li */
@media (prefers-reduced-motion: reduce) { .seqola-admin .sidebar-menu summary .nav-arrow { transition: none; } }
@media (min-width: 992px) {
  /* The open sidebar already shows the wordmark; the header keeps the "Administrasi Seqola" title. */
  .seqola-admin:not(.sidebar-collapse):has(.app-sidebar) .app-header .seqola-brand > .seqola-monogram,
  .seqola-admin:not(.sidebar-collapse):has(.app-sidebar) .app-header .seqola-brand > .fw-bold { display: none; }
}
@media (max-width: 767.98px) {
  .seqola-admin .seqola-admin-title { display: none; }
  .seqola-admin.login .app-main { padding: 1.5rem; }
  /* Django's responsive.css sizes form rows as calc(100vw - 30px) for its own page padding; fit the column here. */
  .seqola-admin .aligned .form-row, .seqola-admin .aligned .form-row > div { width: auto; max-width: 100%; }
}