@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
    --app-primary: #A41E4D;
    --app-primary-strong: #7D173B;
    --app-secondary: #F20505;
    --app-accent: #F2C641;
    --app-success: #198754;
    --app-warning: #F2C641;
    --app-danger: #F20505;
    --app-info: #C13A64;
    --app-light: #1A1315;
    --app-dark: #F7EFDF;
    --app-surface: #1F1719;
    --app-surface-strong: #2D2226;
    --app-border: #6A404A;
    --app-muted: #C3A8AE;
    --app-shadow: 0 18px 40px rgba(8, 5, 6, 0.55);
    --app-radius-card: 20px;
    --app-radius-pill: 999px;
    --app-body-background-color: #0D0D0D;
    --app-body-background:
        radial-gradient(70rem 30rem at -10% -15%, rgba(164, 30, 77, 0.35), transparent 60%),
        radial-gradient(66rem 26rem at 112% -14%, rgba(242, 198, 65, 0.14), transparent 56%),
        linear-gradient(180deg, #171113 0%, #0f0d0e 56%, #0d0d0d 100%);
    --app-navbar-bg: linear-gradient(90deg, #0d0d0d 0%, #32141f 56%, #171113 100%);
    --app-navbar-shadow: 0 4px 16px rgba(35, 14, 21, 0.34);
    --app-navbar-brand: #FFF6E8;
    --app-navbar-text: #FFEED5;
    --app-navbar-hover-bg: rgba(242, 198, 65, 0.2);
    --app-navbar-hover-border: rgba(242, 198, 65, 0.38);
    --app-navbar-active-bg: rgba(242, 198, 65, 0.3);
    --app-navbar-active-border: rgba(242, 198, 65, 0.54);
    --app-navbar-toggle-border: rgba(242, 198, 65, 0.7);
    --app-navbar-toggle-focus: rgba(242, 198, 65, 0.28);
    --app-navbar-mobile-bg: rgba(22, 12, 15, 0.98);
    --app-dropdown-bg: #24191D;
    --app-dropdown-item: #F5E5D2;
    --app-dropdown-hover-bg: #3A232B;
    --app-dropdown-hover-item: #FFF8EF;
    --app-card-bg: linear-gradient(180deg, #2A1D22 0%, #1D1418 100%);
    --app-card-border: rgba(164, 30, 77, 0.3);
    --app-card-hover-shadow: 0 18px 34px rgba(42, 14, 23, 0.25);
    --app-card-header-bg: linear-gradient(135deg, #A41E4D 0%, #7D173B 100%);
    --app-card-header-text: #FFFFFF;
    --app-card-header-border: rgba(82, 22, 41, 0.75);
    --app-card-footer-bg: #7D173B
    --app-card-footer-text: #ECD6CF;
    --app-card-footer-border: rgba(124, 73, 86, 0.45);
    --app-list-item-bg: rgba(30, 20, 24, 0.9);
    --app-list-item-text: #F0DED6;
    --app-list-item-border: rgba(118, 70, 82, 0.44);
    --app-form-bg: #151014;
    --app-form-border: #845362;
    --app-form-text: #F4E7DD;
    --app-form-focus-bg: #1D1519;
    --app-form-focus-border: #D27A97;
    --app-form-focus-text: #FFF4E8;
    --app-form-focus-shadow: 0 0 0 0.2rem rgba(164, 30, 77, 0.3);
    --app-form-placeholder: #B78F9A;
    --app-nav-pill-bg: rgba(48, 30, 36, 0.75);
    --app-nav-pill-border: rgba(137, 83, 98, 0.46);
    --app-nav-pill-text: #F2DFD7;
    --app-nav-pill-hover-bg: rgba(65, 36, 46, 0.9);
    --app-nav-pill-hover-border: rgba(180, 106, 131, 0.6);
    --app-nav-pill-hover-text: #FFF1E6;
    --app-nav-pill-active-bg: linear-gradient(135deg, #A41E4D 0%, #7D173B 100%);
    --app-nav-pill-active-border: rgba(78, 18, 38, 0.62);
    --app-nav-pill-active-shadow: 0 10px 20px rgba(76, 16, 37, 0.3);
    --app-alert-bg: rgba(164, 30, 77, 0.13);
    --app-footer-bg: linear-gradient(180deg, #171113 0%, #0f0d0d 100%);
    --app-footer-title: #F7E7D6;
    --app-footer-text: #D8BFC6;
    --app-footer-link-hover: #FFF6EB;
    --app-link: #F2C641;
    --app-link-hover: #FFEAA0;
    --app-table-text: #F4E7DD;
    --app-table-border: rgba(120, 78, 91, 0.55);
    --app-table-striped-bg: rgba(255, 255, 255, 0.035);
    --app-table-hover-bg: rgba(242, 198, 65, 0.08);
    --app-table-head-bg: linear-gradient(135deg, #A41E4D 0%, #7D173B 100%);
    --app-table-head-text: #FFFFFF;
    --app-table-head-border: rgba(82, 22, 41, 0.78);
    --app-theme-toggle-surface: rgba(27, 18, 22, 0.94);
    --app-theme-toggle-border: rgba(174, 103, 128, 0.64);
    --app-theme-toggle-text: #F4DDCF;
    --app-theme-toggle-shadow: 0 10px 24px rgba(11, 6, 8, 0.4);
    --bs-body-color: #F7EFDF;
    --bs-body-color-rgb: 247, 239, 223;
    --bs-body-bg: #0D0D0D;
    --bs-emphasis-color: #FFF4E8;
    --bs-secondary-color: #C3A8AE;
    --bs-secondary-color-rgb: 195, 168, 174;
    --bs-link-color: #F2C641;
    --bs-link-hover-color: #FFEAA0;
    --bs-border-color: #6A404A;
    --bs-tertiary-bg: #1F1719;
    --bs-card-color: #F7EFDF;
    --bs-card-bg: transparent;
    --bs-table-color: #F4E7DD;
    --bs-table-bg: transparent;

    /* Backwards compatible aliases used throughout existing templates */
    --lpa-primary: var(--app-primary);
    --lpa-secondary: var(--app-secondary);
    --lpa-accent: var(--app-accent);
    --lpa-success: var(--app-success);
    --lpa-warning: var(--app-warning);
    --lpa-danger: var(--app-danger);
    --lpa-info: var(--app-info);
    --lpa-light: var(--app-light);
    --lpa-dark: var(--app-dark);
}

:root[data-theme="light"] {
    --app-light: #FFF9F5;
    --app-dark: #2A1A1F;
    --app-surface: #FFF4F1;
    --app-surface-strong: #ffffff;
    --app-border: #E3C6CF;
    --app-muted: #7A6168;
    --app-shadow: 0 14px 32px rgba(74, 35, 48, 0.14);
    --app-body-background-color: #FCF7F5;
    --app-body-background:
        radial-gradient(64rem 24rem at -12% -16%, rgba(164, 30, 77, 0.14), transparent 62%),
        radial-gradient(60rem 24rem at 112% -12%, rgba(242, 198, 65, 0.16), transparent 58%),
        linear-gradient(180deg, #FFFDFB 0%, #FCF7F5 56%, #F8F0EC 100%);
    --app-navbar-bg: linear-gradient(90deg, #FFFEFD 0%, #FFF2EA 60%, #FFE8DC 100%);
    --app-navbar-shadow: 0 4px 16px rgba(103, 51, 66, 0.14);
    --app-navbar-brand: #4B1D2D;
    --app-navbar-text: #54202F;
    --app-navbar-hover-bg: rgba(164, 30, 77, 0.12);
    --app-navbar-hover-border: rgba(164, 30, 77, 0.27);
    --app-navbar-active-bg: rgba(164, 30, 77, 0.18);
    --app-navbar-active-border: rgba(164, 30, 77, 0.38);
    --app-navbar-toggle-border: rgba(164, 30, 77, 0.64);
    --app-navbar-toggle-focus: rgba(164, 30, 77, 0.2);
    --app-navbar-mobile-bg: rgba(255, 245, 239, 0.98);
    --app-dropdown-bg: #ffffff;
    --app-dropdown-item: #4F2130;
    --app-dropdown-hover-bg: #FFF0E7;
    --app-dropdown-hover-item: #3F1724;
    --app-card-bg: linear-gradient(180deg, #ffffff 0%, #FFF5F0 100%);
    --app-card-border: rgba(164, 30, 77, 0.24);
    --app-card-hover-shadow: 0 12px 24px rgba(120, 48, 70, 0.18);
    --app-card-header-bg: linear-gradient(135deg, #A41E4D 0%, #7D173B 100%);
    --app-card-header-text: #FFFFFF;
    --app-card-header-border: rgba(94, 24, 46, 0.78);
    --app-card-footer-bg: linear-gradient(180deg, rgba(255, 247, 243, 0.92) 0%, rgba(255, 239, 232, 0.96) 100%);
    --app-card-footer-text: #6A3242;
    --app-card-footer-border: rgba(201, 129, 153, 0.38);
    --app-list-item-bg: rgba(255, 251, 249, 0.97);
    --app-list-item-text: #4F2433;
    --app-list-item-border: rgba(190, 123, 145, 0.4);
    --app-form-bg: #ffffff;
    --app-form-border: #CF9BAD;
    --app-form-text: #3D1C28;
    --app-form-focus-bg: #FFFDFC;
    --app-form-focus-border: #A41E4D;
    --app-form-focus-text: #2F131C;
    --app-form-focus-shadow: 0 0 0 0.2rem rgba(164, 30, 77, 0.2);
    --app-form-placeholder: #9B7380;
    --app-nav-pill-bg: rgba(255, 234, 226, 0.78);
    --app-nav-pill-border: rgba(197, 131, 154, 0.48);
    --app-nav-pill-text: #5A2535;
    --app-nav-pill-hover-bg: rgba(255, 223, 211, 0.92);
    --app-nav-pill-hover-border: rgba(173, 95, 122, 0.58);
    --app-nav-pill-hover-text: #451726;
    --app-nav-pill-active-bg: linear-gradient(135deg, #A41E4D 0%, #7D173B 100%);
    --app-nav-pill-active-border: rgba(94, 24, 46, 0.58);
    --app-nav-pill-active-shadow: 0 8px 16px rgba(120, 39, 67, 0.2);
    --app-alert-bg: rgba(164, 30, 77, 0.08);
    --app-footer-bg: #7D173B
    --app-footer-title: #5A2333;
    --app-footer-text: #744557;
    --app-footer-link-hover: #3F1522;
    --app-link: #A41E4D;
    --app-link-hover: #7D173B;
    --app-table-text: #4F2433;
    --app-table-border: rgba(190, 123, 145, 0.46);
    --app-table-striped-bg: rgba(164, 30, 77, 0.035);
    --app-table-hover-bg: rgba(164, 30, 77, 0.08);
    --app-table-head-bg: linear-gradient(135deg, #A41E4D 0%, #7D173B 100%);
    --app-table-head-text: #FFFFFF;
    --app-table-head-border: rgba(94, 24, 46, 0.72);
    --app-theme-toggle-surface: rgba(255, 255, 255, 0.95);
    --app-theme-toggle-border: rgba(180, 110, 135, 0.5);
    --app-theme-toggle-text: #5A2636;
    --app-theme-toggle-shadow: 0 10px 24px rgba(132, 62, 84, 0.14);
    --bs-body-color: #2A1A1F;
    --bs-body-color-rgb: 42, 26, 31;
    --bs-body-bg: #FCF7F5;
    --bs-emphasis-color: #241117;
    --bs-secondary-color: #7A6168;
    --bs-secondary-color-rgb: 122, 97, 104;
    --bs-link-color: #A41E4D;
    --bs-link-hover-color: #7D173B;
    --bs-border-color: #E3C6CF;
    --bs-tertiary-bg: #FFF4F1;
    --bs-card-color: #2A1A1F;
    --bs-card-bg: transparent;
    --bs-table-color: #4F2433;
    --bs-table-bg: transparent;
}

html, body {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
    color: var(--app-dark) !important;
    background-color: var(--app-body-background-color) !important;
    background: var(--app-body-background) !important;
    background-attachment: fixed;
}

a {
    color: var(--app-link);
}

a:hover,
a:focus {
    color: var(--app-link-hover);
}

html[data-theme="dark"] a {
    color: var(--app-link) !important;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: var(--app-link-hover) !important;
}

.app-navbar {
    background: var(--app-navbar-bg) !important;
    box-shadow: var(--app-navbar-shadow);
}

.app-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--app-navbar-brand) !important;
    gap: 8px;
    min-width: 0;
    max-width: min(44vw, 330px);
}

.app-navbar .navbar-logo {
    height: 34px;
    width: auto !important;
    max-width: 180px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-logo-badge {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(242, 198, 65, 0.66);
    border-radius: 10px;
    padding: 4px 8px;
    box-shadow: 0 8px 18px rgba(13, 13, 13, 0.25);
}

:root[data-theme="light"] .brand-logo-badge {
    border-color: rgba(164, 30, 77, 0.36);
    box-shadow: 0 8px 18px rgba(111, 46, 67, 0.16);
}

.app-navbar .navbar-site-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-navbar-brand);
    font-size: 0.97rem;
    line-height: 1.2;
}

.app-navbar .nav-link {
    color: var(--app-navbar-text) !important;
    font-weight: 600;
    border-radius: var(--app-radius-pill);
    border: 1px solid transparent;
    padding: 8px 12px;
    text-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: var(--app-navbar-text) !important;
    background: var(--app-navbar-hover-bg);
    border-color: var(--app-navbar-hover-border);
}

.app-navbar .nav-link.active {
    color: var(--app-navbar-text) !important;
    background: var(--app-navbar-active-bg);
    border-color: var(--app-navbar-active-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: none;
}

.app-navbar .navbar-toggler {
    border-color: var(--app-navbar-toggle-border);
}

.app-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem var(--app-navbar-toggle-focus);
}

:root[data-theme="light"] .app-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) contrast(145%);
}

.app-navbar .dropdown-toggle {
    color: var(--app-navbar-text) !important;
}

.app-navbar .navbar-collapse {
    background: transparent;
}

.app-navbar .dropdown-menu {
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
    background: var(--app-dropdown-bg);
}

.app-navbar .dropdown-item {
    color: var(--app-dropdown-item);
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
    background: var(--app-dropdown-hover-bg);
    color: var(--app-dropdown-hover-item);
}

.theme-toggle-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--app-theme-toggle-text);
    font-weight: 600;
    white-space: nowrap;
}

.theme-toggle-control .form-check-input {
    margin-top: 0;
    cursor: pointer;
    border-color: var(--app-theme-toggle-border);
    background-color: transparent;
}

.theme-toggle-control .form-check-input:focus {
    border-color: var(--app-form-focus-border);
    box-shadow: 0 0 0 0.2rem rgba(122, 164, 198, 0.3);
}

.theme-toggle-control .form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

.theme-toggle-control .form-check-label {
    cursor: pointer;
    user-select: none;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.app-navbar .theme-toggle-control {
    color: var(--app-navbar-text);
}

.app-navbar .theme-toggle-control .form-check-input {
    border-color: var(--app-navbar-hover-border);
}

.top-navbar .theme-toggle-control {
    color: rgba(255, 255, 255, 0.92);
}

.top-navbar .theme-toggle-control .form-check-input {
    border-color: rgba(255, 255, 255, 0.68);
}

.theme-toggle-floating {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1040;
    border-radius: var(--app-radius-pill);
    border: 1px solid var(--app-theme-toggle-border);
    background: var(--app-theme-toggle-surface);
    box-shadow: var(--app-theme-toggle-shadow);
    backdrop-filter: blur(6px);
    padding: 0.45rem 0.75rem;
}

.theme-toggle-floating[hidden] {
    display: none !important;
}

.content-wrap {
    min-height: calc(100vh - 180px);
    padding-bottom: 28px;
}

.app-page-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.app-page-subtitle {
    color: var(--app-muted);
}

.card {
    border: 1px solid var(--app-card-border);
    border-radius: var(--app-radius-card);
    box-shadow: var(--app-shadow);
    color: var(--app-dark);
    background: var(--app-card-bg);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-card-hover-shadow);
}

.card .card-header {
    color: var(--app-card-header-text);
    background: var(--app-card-header-bg);
    border-bottom: 1px solid var(--app-card-header-border);
    border-top-left-radius: calc(var(--app-radius-card) - 1px) !important;
    border-top-right-radius: calc(var(--app-radius-card) - 1px) !important;
}

.card .card-footer {
    color: var(--app-card-footer-text);
    background: var(--app-card-footer-bg);
    border-top: 1px solid var(--app-card-footer-border);
    border-bottom-left-radius: calc(var(--app-radius-card) - 1px) !important;
    border-bottom-right-radius: calc(var(--app-radius-card) - 1px) !important;
}

.table,
.table-responsive {
    background: transparent;
}

.table {
    color: var(--app-table-text);
    border-color: var(--app-table-border);
    --bs-table-color: var(--app-table-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--app-table-border);
    --bs-table-striped-color: var(--app-table-text);
    --bs-table-striped-bg: var(--app-table-striped-bg);
    --bs-table-hover-color: var(--app-table-text);
    --bs-table-hover-bg: var(--app-table-hover-bg);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--app-table-border);
}

.table > :not(caption) > thead > tr > th {
    background: var(--app-table-head-bg) !important;
    color: var(--app-table-head-text) !important;
    border-top-color: var(--app-table-head-border) !important;
    border-bottom-color: var(--app-table-head-border) !important;
}

.table-light {
    --bs-table-bg: rgba(255, 255, 255, 0.1);
    --bs-table-color: var(--app-table-text);
    --bs-table-striped-bg: var(--app-table-striped-bg);
    --bs-table-striped-color: var(--app-table-text);
    --bs-table-hover-bg: var(--app-table-hover-bg);
    --bs-table-hover-color: var(--app-table-text);
}

.text-muted {
    color: var(--app-muted) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .text-body-tertiary,
html[data-theme="dark"] .text-dark-emphasis {
    color: var(--app-dark) !important;
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .dropdown-menu {
    color: var(--app-dark);
    background: var(--app-card-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .input-group-text {
    color: var(--app-dark);
    background: var(--app-form-focus-bg);
    border-color: var(--app-form-border);
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-body-secondary {
    background-color: var(--app-surface) !important;
    color: var(--app-dark) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-text,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label,
html[data-theme="dark"] legend {
    color: var(--app-dark);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table tbody td {
    color: var(--app-table-text);
}

.list-group-item {
    color: var(--app-list-item-text);
    background: var(--app-list-item-bg);
    border-color: var(--app-list-item-border);
}

.form-control,
.form-select {
    color: var(--app-form-text);
    border-color: var(--app-form-border);
    background-color: var(--app-form-bg);
}

.form-control:focus,
.form-select:focus {
    color: var(--app-form-focus-text);
    border-color: var(--app-form-focus-border);
    background-color: var(--app-form-focus-bg);
    box-shadow: var(--app-form-focus-shadow);
}

.form-control::placeholder {
    color: var(--app-form-placeholder);
}

.nav-pills {
    gap: 8px;
}

.nav-pills .nav-link {
    border-radius: var(--app-radius-pill);
    border: 1px solid var(--app-nav-pill-border);
    background: var(--app-nav-pill-bg);
    color: var(--app-nav-pill-text);
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background: var(--app-nav-pill-hover-bg);
    border-color: var(--app-nav-pill-hover-border);
    color: var(--app-nav-pill-hover-text);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--app-nav-pill-active-bg);
    border-color: var(--app-nav-pill-active-border);
    color: #ffffff !important;
    box-shadow: var(--app-nav-pill-active-shadow);
}

.card-header-pills {
    margin-left: 0;
    margin-right: 0;
}

.card-lpa {
    border-left: 4px solid var(--app-primary);
}

.card-lpa-accent {
    border-left: 4px solid var(--app-accent);
}

.alert-lpa {
    border-left: 4px solid var(--app-primary);
    background-color: var(--app-alert-bg);
}

.badge-lpa {
    background-color: var(--app-primary);
    color: white;
}

.badge-lpa-accent {
    background-color: var(--app-accent);
    color: #1f2c3b;
}

/* Attendance status colors used in multiple screens */
.status-P { background-color: #d4edda; color: #155724; }
.status-L { background-color: #fff3cd; color: #856404; }
.status-E { background-color: #cce5ff; color: #004085; }
.status-U { background-color: #f8d7da; color: #721c24; }
.status-O { background-color: #e2e3e5; color: #383d41; }

.progress-bar-lpa {
    background-color: var(--app-primary);
}

.table-lpa thead {
    background-color: var(--app-primary);
    color: white;
}

.btn-lpa-primary {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}

.btn-lpa-primary:hover,
.btn-lpa-primary:focus {
    background-color: var(--app-primary-strong);
    border-color: var(--app-primary-strong);
    color: #fff;
}

.btn-lpa-accent {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: #1f2c3b;
}

.btn-lpa-accent:hover,
.btn-lpa-accent:focus {
    background-color: #c39335;
    border-color: #c39335;
    color: #1f2c3b;
}

.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--app-border);
    background: #7D173B
}

.site-footer .footer-title {
    font-weight: 700;
    color: var(--app-footer-title);
}

.site-footer .footer-text,
.site-footer .footer-link {
    color: var(--app-footer-text);
    font-size: 0.96rem;
}

.site-footer .footer-link {
    text-decoration: none;
}

.site-footer .footer-link:hover,
.site-footer .footer-link:focus {
    color: var(--app-footer-link-hover);
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .app-navbar .navbar-collapse {
        background: var(--app-navbar-mobile-bg);
        margin-top: 8px;
        border-radius: 10px;
        padding: 10px;
    }
    .app-navbar .navbar-brand {
        max-width: calc(100vw - 130px);
    }
    .app-navbar .navbar-site-name {
        max-width: calc(100vw - 200px);
        font-size: 0.92rem;
    }
    .app-navbar .navbar-logo {
        height: 30px;
        max-width: 150px;
    }
    .theme-toggle-floating {
        right: 10px;
        bottom: 10px;
        padding: 0.4rem 0.62rem;
    }
}