html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;padding:0;min-height:100vh;display:flex;flex-direction:column}
main,section{padding:16px}
main{flex:1 0 auto}
.formrow{display:flex;flex-direction:column;margin-bottom:12px;max-width:420px}
.formrow label{font-size:13px;margin-bottom:6px;color:#cbd5e1}
.formrow input, .formrow select{padding:8px 10px;border-radius:6px;border:1px solid #243040}
code{background:#0f172a;color:#e2e8f0;padding:2px 6px;border-radius:4px}

/* Layout enhancements */
.container-narrow{max-width:640px;margin:24px auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.card{border-radius:10px;padding:16px}
.muted{font-size:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.divider{height:1px;background:#1f2430;margin:12px 0}
.fade-in{opacity:0;transform:translateY(8px)}

/* Buttons: defer to Bootstrap */

/* Alerts: defer to Bootstrap */

/* Form layout */
.formrow.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.formrow.two{grid-template-columns:1fr}}

/* Theme: dark */
html[data-bs-theme='dark'] body{background:#0b0d10;color:#e6e6e6}
html[data-bs-theme='dark'] .formrow input, html[data-bs-theme='dark'] .formrow select{background:#0f1217;color:#e6e6e6;border-color:#243040}
html[data-bs-theme='dark'] .card{background:#0e1218;border:1px solid #1f2430;box-shadow:0 1px 0 rgba(255,255,255,0.03) inset}
html[data-bs-theme='dark'] .muted{color:#9aa4b2}
html[data-bs-theme='dark'] .app-nav{background:#12151a;border-bottom:1px solid #1f2430}
html[data-bs-theme='dark'] .app-footer{background:#12151a;border-top:1px solid #1f2430}

/* Theme: transitions */
body,.card,.app-nav,.app-footer,.form-control,.form-select,.btn,.nav-link,.navbar-brand,.dropdown-menu,.dropdown-item,.btn-close{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease, opacity .2s ease;
}

/* Theme: light */
html[data-bs-theme='light'] body{background:#f8f9fa;color:#212529}
html[data-bs-theme='light'] .formrow input, html[data-bs-theme='light'] .formrow select{background:#ffffff;color:#212529;border-color:#ced4da}
html[data-bs-theme='light'] .card{background:#ffffff;border:1px solid #dee2e6;box-shadow:0 1px 0 rgba(0,0,0,0.02) inset}
html[data-bs-theme='light'] .muted{color:#6c757d}
html[data-bs-theme='light'] .app-nav{background:#ffffff;border-bottom:1px solid #dee2e6}
html[data-bs-theme='light'] .app-footer{background:#ffffff;border-top:1px solid #dee2e6}
/* Ensure navbar brand/links stay visible in light mode even if classes lag during toggle */
html[data-bs-theme='light'] .app-nav .navbar-brand,
html[data-bs-theme='light'] .app-nav .nav-link,
html[data-bs-theme='light'] .app-nav .dropdown-toggle{
  color:#212529 !important;
}
/* Improve navbar toggler visibility on light theme if dark class is momentarily present */
html[data-bs-theme='light'] .app-nav.navbar-dark .navbar-toggler-icon{
  filter: invert(1) grayscale(100%);
}

/* Make outline-light buttons readable in light theme (treat as outline-dark) */
html[data-bs-theme='light'] .btn-outline-light{color:#212529;border-color:#212529}
html[data-bs-theme='light'] .btn-outline-light:hover{color:#fff;background-color:#212529;border-color:#212529}
/* Navbar-specific small buttons */
html[data-bs-theme='light'] .app-nav .btn-outline-light{color:#212529;border-color:#212529}
html[data-bs-theme='light'] .app-nav .btn-outline-light:hover{color:#fff;background-color:#212529;border-color:#212529}

/* Ensure modal close button is visible on dark backgrounds */
html[data-bs-theme='dark'] .btn-close{filter: invert(1) grayscale(100%); opacity:.85}
html[data-bs-theme='dark'] .btn-close:hover{opacity:1}