html { background: var(--lyothos-page-bg); }
body { color: var(--lyothos-text); background: var(--lyothos-page-bg); font-family: var(--lyothos-font-body); }
h1, h2, .display-heading, .page-title { font-family: var(--lyothos-font-display); color: var(--lyothos-ink); font-weight: 700; letter-spacing: -.02em; }
h3, h4, h5, h6, .card-title { font-family: var(--lyothos-font-body); color: var(--lyothos-ink); font-weight: 700; }
.text-muted, .form-text, small, .small { color: var(--lyothos-muted) !important; opacity: 1; }
a { color: var(--lyothos-primary); } a:hover { color: var(--lyothos-primary-hover); }
:focus-visible { outline: 3px solid var(--lyothos-focus); outline-offset: 2px; }
.navbar { background: #10251f !important; border-bottom: 1px solid rgba(199,164,91,.28); box-shadow: var(--lyothos-shadow-sm); }
.navbar .navbar-brand { color: #fffaf0 !important; font-weight: 800; letter-spacing: .01em; }
.navbar-brand img, [data-brand-logo] { object-fit: contain; }
.navbar .text-muted, .navbar #usernameDisplay { color: rgba(255,250,240,.92) !important; font-weight: 700; }
.navbar .badge-role { background: rgba(216,184,109,.94); color: #10251f; border-color: rgba(255,250,240,.45); }
.navbar-brand img[data-brand-logo], .login-brand-panel [data-brand-logo] { background: #10251f !important; border: 1px solid rgba(216,184,109,.45); box-shadow: inset 0 0 0 1px rgba(255,250,240,.12); }
.login-brand-panel [data-brand-logo] { padding: .45rem !important; }
.navbar .nav-link { color: rgba(255,250,240,.82) !important; border-radius: var(--lyothos-radius-sm); padding: .45rem .7rem !important; font-weight: 700; }
.navbar .nav-link:hover, .navbar .nav-link:focus-visible { color: #fffaf0 !important; background: rgba(255,250,240,.08); }
.navbar .nav-link.active, .navbar .nav-link[aria-current="page"] { color: #fffaf0 !important; background: rgba(199,164,91,.16); box-shadow: inset 0 -2px 0 rgba(199,164,91,.76); }
.navbar .btn-outline-secondary, #logoutLink { color: #fffaf0; border-color: rgba(255,250,240,.32); background: transparent; border-radius: var(--lyothos-radius-sm); }
.navbar .btn-outline-secondary:hover, #logoutLink:hover { color: #10251f; background: #fffaf0; border-color: #fffaf0; }
.navbar-toggler { border-color: rgba(255,250,240,.35); background: rgba(255,250,240,.08); }
.card, .sa-card, .sa-card-section, .summary-card, .sa-directory-card, .modal-content, .dropdown-menu, .toast, .list-group-item, .accordion-item { background: var(--lyothos-surface-elevated); color: var(--lyothos-text); border-color: var(--lyothos-border) !important; box-shadow: var(--lyothos-shadow-sm); border-radius: var(--lyothos-radius-md); }
.card.sa-card:hover, .sa-directory-card:hover { border-color: rgba(199,164,91,.42) !important; box-shadow: var(--lyothos-shadow-sm); transform: none; }
.btn { border-radius: var(--lyothos-radius-sm); font-family: var(--lyothos-font-body); font-weight: 800; letter-spacing: .01em; color: var(--lyothos-text); }
.btn-primary { --bs-btn-color: var(--lyothos-on-primary); --bs-btn-bg: var(--lyothos-primary); --bs-btn-border-color: var(--lyothos-primary-hover); --bs-btn-hover-color: var(--lyothos-on-primary); --bs-btn-hover-bg: var(--lyothos-primary-hover); --bs-btn-hover-border-color: var(--lyothos-primary-active); --bs-btn-active-color: var(--lyothos-on-primary); --bs-btn-active-bg: var(--lyothos-primary-active); --bs-btn-active-border-color: var(--lyothos-primary-active); color: var(--lyothos-on-primary); background: var(--lyothos-primary); background-image: none; box-shadow: none; border-width: 1px; }
.btn-secondary, .btn-outline-primary, .btn-outline-secondary { --bs-btn-color: var(--lyothos-button-outline-text); --bs-btn-bg: var(--lyothos-surface); --bs-btn-border-color: var(--lyothos-border-strong); --bs-btn-hover-color: var(--lyothos-on-primary); --bs-btn-hover-bg: var(--lyothos-primary); --bs-btn-hover-border-color: var(--lyothos-primary); color: var(--lyothos-button-outline-text); border-color: var(--lyothos-border-strong); background: var(--lyothos-surface); }
.btn-success { --bs-btn-color: var(--lyothos-on-success); color: var(--lyothos-on-success); background: var(--lyothos-success); border-color: color-mix(in srgb, var(--lyothos-success) 82%, black); }
.btn-danger { --bs-btn-color: var(--lyothos-on-danger); color: var(--lyothos-on-danger); background: var(--lyothos-danger); border-color: color-mix(in srgb, var(--lyothos-danger) 82%, black); }
.btn-warning { --bs-btn-color: var(--lyothos-on-warning); color: var(--lyothos-on-warning); background: var(--lyothos-accent); border-color: var(--lyothos-accent-hover); }
.btn-outline-success { color: var(--lyothos-success); border-color: color-mix(in srgb, var(--lyothos-success) 70%, transparent); background: var(--lyothos-surface); }
.btn-outline-danger { color: var(--lyothos-danger); border-color: color-mix(in srgb, var(--lyothos-danger) 70%, transparent); background: var(--lyothos-surface); }
.btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover { color: var(--lyothos-on-primary); background: var(--lyothos-primary); border-color: var(--lyothos-primary); }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"], fieldset:disabled .btn { --bs-btn-disabled-color: var(--lyothos-disabled-text); --bs-btn-disabled-bg: var(--lyothos-disabled-bg); --bs-btn-disabled-border-color: var(--lyothos-border-strong); color: var(--bs-btn-disabled-color) !important; background: var(--bs-btn-disabled-bg) !important; background-image: none !important; border-color: var(--bs-btn-disabled-border-color) !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; text-shadow: none; cursor: not-allowed; transform: none; }
.form-control, .form-select, textarea, input:not([type="checkbox"]):not([type="radio"]):not(.form-check-input), select { background-color: var(--lyothos-surface); color: var(--lyothos-text); border-color: var(--lyothos-border); border-radius: var(--lyothos-radius-sm); min-height: 2.65rem; }
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--lyothos-placeholder); opacity: 1; }
.form-label, label { color: var(--lyothos-ink); }
.form-control:focus, .form-select:focus { border-color: var(--lyothos-accent); box-shadow: 0 0 0 .25rem var(--lyothos-focus); }
.form-control:disabled, .form-select:disabled { background: var(--lyothos-surface-inset); color: var(--lyothos-muted); opacity: 1; }
.form-check-input { width: 1.2rem; height: 1.2rem; min-width: 1.2rem; min-height: 0; margin-top: .18rem; background-color: #ffffff; border: 2px solid var(--lyothos-border-strong); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); appearance: none; background-repeat: no-repeat; background-position: center; background-size: 72% 72%; }
.form-check-input[type="checkbox"] { width: 1.2rem; height: 1.2rem; border-radius: .25rem; }
.form-check-input[type="radio"] { width: 1.2rem; height: 1.2rem; border-radius: 50%; }
.form-check-input:focus { border-color: var(--lyothos-accent); box-shadow: 0 0 0 .16rem var(--lyothos-focus); }
.form-check-input:checked { background-color: var(--lyothos-primary); border-color: var(--lyothos-primary); box-shadow: none; }
.form-check-input[type="checkbox"]:checked { background-image: var(--bs-form-check-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fffaf0' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")); }
.form-check-input[type="radio"]:checked { background-image: var(--bs-form-check-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fffaf0'/%3e%3c/svg%3e")); }
.form-switch .form-check-input, .permission-toggle .form-switch .form-check-input, .permission-switch .form-switch .form-check-input, .permission-toggle .form-check-input[type="checkbox"][role="switch"], .permission-switch .form-check-input[type="checkbox"][role="switch"] { width: 2.75rem; min-width: 2.75rem; height: 1.45rem; min-height: 0; border-radius: var(--lyothos-radius-pill); background-color: var(--lyothos-switch-track); border: 2px solid var(--lyothos-border-strong); background-image: radial-gradient(circle, var(--lyothos-switch-thumb) 0 .48rem, transparent .5rem); background-position: .08rem center; background-size: 1.2rem 1.2rem; }
.form-switch .form-check-input:checked, .permission-toggle .form-switch .form-check-input:checked, .permission-switch .form-switch .form-check-input:checked, .permission-toggle .form-check-input[type="checkbox"][role="switch"]:checked, .permission-switch .form-check-input[type="checkbox"][role="switch"]:checked { background-color: var(--lyothos-primary); border-color: var(--lyothos-primary); background-position: calc(100% - .08rem) center; }
.table { --bs-table-color: var(--lyothos-text); --bs-table-bg: transparent; --bs-table-border-color: var(--lyothos-border); font-family: var(--lyothos-font-body); }
.table thead th { background: var(--lyothos-surface-muted); color: var(--lyothos-ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--lyothos-border-strong); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(199,164,91,.055); }
.table-hover > tbody > tr:hover > * { background-color: rgba(24,60,50,.075); }
.badge, .sa-badge, .badge-role, .status-badge, .role-chip, .sa-chip { border-radius: var(--lyothos-radius-sm); font-family: var(--lyothos-font-body); font-weight: 800; }
.badge, .badge-role, .sa-badge, .sa-badge-soft, .sa-chip { background: rgba(199,164,91,.18); color: var(--lyothos-badge-text); border: 1px solid rgba(199,164,91,.35); }
.status-badge[data-status="approved"], .badge.bg-success { background: color-mix(in srgb, var(--lyothos-success) 18%, transparent) !important; color: var(--lyothos-badge-success-text) !important; }
.status-badge[data-status="rejected"], .badge.bg-danger { background: color-mix(in srgb, var(--lyothos-danger) 18%, transparent) !important; color: var(--lyothos-badge-danger-text) !important; }
.status-badge[data-status="pending_review"], .badge.bg-warning { background: color-mix(in srgb, var(--lyothos-warning) 20%, transparent) !important; color: var(--lyothos-badge-warning-text) !important; }
.alert { border-radius: var(--lyothos-radius-sm); border-color: var(--lyothos-border); box-shadow: none; }
.alert-info { color: var(--lyothos-info); background: color-mix(in srgb, var(--lyothos-info) 12%, var(--lyothos-surface)); }
.alert-warning { color: var(--lyothos-warning); background: color-mix(in srgb, var(--lyothos-warning) 14%, var(--lyothos-surface)); }
.alert-danger { color: var(--lyothos-danger); background: color-mix(in srgb, var(--lyothos-danger) 12%, var(--lyothos-surface)); }
.nav-tabs { border-bottom: 1px solid var(--lyothos-border); gap: .25rem; }
.nav-tabs .nav-link { color: var(--lyothos-muted); border: 0; border-radius: var(--lyothos-radius-sm) var(--lyothos-radius-sm) 0 0; font-weight: 800; background: transparent; }
.nav-tabs .nav-link.active { background: var(--lyothos-surface); color: var(--lyothos-primary); box-shadow: inset 0 -2px 0 var(--lyothos-primary); }
.pagination .page-link { color: var(--lyothos-primary); background: var(--lyothos-surface); border-color: var(--lyothos-border); }
.active>.page-link, .page-link.active { background: var(--lyothos-primary); border-color: var(--lyothos-primary); color: #fffaf0; }
.progress { background: var(--lyothos-surface-inset); } .progress-bar { background: var(--lyothos-primary); }
.modal-header, .modal-footer { border-color: var(--lyothos-border); } .btn-close { opacity: .8; }
.dropdown-item.active, .dropdown-item:active { background: var(--lyothos-primary); color: #fffaf0; }
.hero-shell, .dashboard-hero { background: var(--lyothos-surface); border: 1px solid var(--lyothos-border); box-shadow: var(--lyothos-shadow-sm); border-radius: var(--lyothos-radius-md); }
.hero-illustration { background: #10251f; color: #fffaf0; border-radius: var(--lyothos-radius-md); border: 1px solid rgba(199,164,91,.24); }
.hero-illustration::after { display: none; }
.empty-state, [data-empty-state] { background: var(--lyothos-surface-inset); border: 1px dashed var(--lyothos-border-strong); border-radius: var(--lyothos-radius-md); padding: 1.5rem; color: var(--lyothos-muted); }
.placeholder, .skeleton { background: linear-gradient(90deg, var(--lyothos-surface-inset), var(--lyothos-surface-muted), var(--lyothos-surface-inset)); }
.tooltip-inner { background: var(--lyothos-ink); color: var(--lyothos-surface); }
body.dark-mode .navbar { background: #08130f !important; }
body.dark-mode .card, body.dark-mode .sa-card, body.dark-mode .sa-card-section, body.dark-mode .summary-card, body.dark-mode .sa-directory-card, body.dark-mode .modal-content, body.dark-mode .dropdown-menu, body.dark-mode .toast, body.dark-mode .list-group-item, body.dark-mode .accordion-item { background: var(--lyothos-surface-elevated); color: var(--lyothos-text); }
body.dark-mode .btn-outline-primary, body.dark-mode .btn-outline-secondary, body.dark-mode .btn-outline-success { color: var(--lyothos-button-outline-text); background: rgba(255,250,240,.06); border-color: var(--lyothos-border); }
.login-page { min-height: 100vh; background: #f5f0e6; }
.login-shell { display: grid; grid-template-columns: minmax(0, .88fr) minmax(22rem, .72fr); gap: 1.25rem; max-width: 62rem; margin-inline: auto; padding: 1rem; }
.login-brand-panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 31rem; padding: clamp(1.5rem, 4vw, 2.25rem); }
.login-brand-panel img { border: 1px solid rgba(199,164,91,.32); }
.login-brand-panel h2 { font-family: var(--lyothos-font-display); font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: .95; max-width: 10ch; color: #fffaf0; }
.login-brand-panel p { color: rgba(255,250,240,.78); max-width: 34ch; }
.hero-card { align-self: center; padding: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 860px) { .login-shell { grid-template-columns: minmax(0, 1fr); } .login-brand-panel { min-height: 0; } }


/* Mobile/touch corrections for forms, controls, login, and operational cards. */
.sa-logo-preview, [data-brand-logo] { height: auto; max-width: 100%; }
.sa-directory-list, #reportsContainer, #rolePermissionsGrid, #announcementList, #templateList, #templateFields { min-width: 0; }
.template-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem .75rem; }
.template-list-title { min-width: 0; overflow-wrap: anywhere; }
.template-list-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; min-width: 0; }
.template-list-badge { flex: 0 0 auto; white-space: nowrap; }
.sa-directory-card, .report-card, .template-card, .permission-card { overflow-wrap: anywhere; }
.permission-toggle, .permission-switch { min-width: 0; }
.permission-toggle .form-check, .permission-switch .form-check { min-height: 44px; align-items: center; }
.accordion-button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.dropdown-menu { max-width: min(100vw - 2rem, 32rem); overflow-wrap: anywhere; }
.login-page { min-height: 100vh; }
.login-shell { width: 100%; min-width: 0; }
.login-brand-panel, .hero-card { min-width: 0; }
.login-brand-panel h2, .login-brand-panel p { max-width: 100%; overflow-wrap: anywhere; }

@supports (min-height: 100dvh) {
  .login-page { min-height: 100dvh; }
}

@media (max-width: 860px) {
  .login-page { align-items: flex-start !important; padding-top: 1rem !important; padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; }
  .login-shell { grid-template-columns: minmax(0, 1fr); gap: .85rem; padding: .75rem; }
  .login-brand-panel { min-height: 0; gap: .75rem; justify-content: flex-start; padding: 1rem; }
  .login-brand-panel h2 { font-size: clamp(1.55rem, 7vw, 2.15rem); line-height: 1.05; max-width: 18ch; }
  .hero-card { align-self: stretch; }
}

@media (max-width: 575.98px) {
  .login-page > .container { padding-left: .75rem; padding-right: .75rem; }
  .login-shell { gap: .5rem; padding: .5rem; }
  .login-brand-panel { align-items: center; padding: .75rem .75rem .25rem; text-align: center; }
  .login-brand-panel h2, .login-brand-panel p { display: none; }
  .hero-card { padding: .9rem; align-self: stretch; }
  .login-brand-panel img { width: 44px; height: 44px; }
  .login-brand-panel [data-brand-logo] { padding: .35rem !important; }
  .login-brand-panel [data-brand-name] { color: #fffaf0; font-size: 1rem; }
  .login-page form > .d-flex { flex-wrap: wrap; gap: .5rem 1rem; }
  .login-page form > .d-flex > .form-check { flex: 1 1 9rem; }
  .login-page .btn[type="submit"] { min-height: 44px; }
}

@media (max-width: 575.98px) and (max-height: 740px) {
  .login-page { padding-top: .5rem !important; padding-bottom: max(.5rem, env(safe-area-inset-bottom)) !important; }
  .login-page > .container { padding-left: .5rem; padding-right: .5rem; }
  .login-shell { gap: .35rem; padding: .35rem; }
  .login-brand-panel { padding: .5rem .5rem 0; }
  .login-brand-panel img { width: 38px; height: 38px; }
  .hero-card { padding: .75rem; }
  .hero-card .text-center { margin-bottom: .75rem !important; }
  .hero-card .mb-3 { margin-bottom: .65rem !important; }
  .login-page .form-control { min-height: 2.45rem; }
}