/*
 * Shared UniFAST interface finish.
 * Component-only transitions keep data, forms and fixed overlays predictable.
 * Load after the page styles; uf-panel and uf-public limit these rules to the UI.
 */
:root {
    --uf-accent: #b8540b;
    --uf-accent-hover: #964209;
    --uf-accent-soft: #fff5eb;
    --uf-ink: #253247;
    --uf-muted: #64748b;
    --uf-border: #e3e8ef;
    --uf-surface: #ffffff;
    --uf-canvas: #f5f7fa;
    --uf-radius: 14px;
    --uf-shadow: 0 3px 14px rgba(30, 41, 59, .045);
    --uf-shadow-hover: 0 7px 20px rgba(30, 41, 59, .085);
    --uf-focus: #965015;
    --uf-duration: 180ms;
    --uf-ease: cubic-bezier(.2, .65, .3, 1);
}

body:is(.uf-panel, .uf-public) {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Roboto", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

body.uf-panel {
    color: var(--uf-ink);
}

/* The existing theme marks its shell colors important. Keep overrides local. */
body.uf-panel .content-wrapper {
    background: var(--uf-canvas) !important;
}

body.uf-panel .main-sidebar {
    background: var(--uf-surface) !important;
    border-right: 1px solid var(--uf-border);
    box-shadow: 3px 0 16px rgba(30, 41, 59, .035) !important;
}

body.uf-panel .brand-link {
    background: var(--uf-surface) !important;
    border-bottom: 1px solid var(--uf-border) !important;
}

body.uf-panel .brand-link .brand-text {
    color: var(--uf-ink) !important;
    font-weight: 700;
}

body.uf-panel .sidebar .nav-link {
    color: #475569 !important;
    border-radius: 10px;
    font-weight: 600;
    transition: background-color var(--uf-duration) var(--uf-ease),
        color var(--uf-duration) var(--uf-ease), box-shadow var(--uf-duration) var(--uf-ease);
}

body.uf-panel .sidebar .nav-link .nav-icon {
    color: inherit !important;
}

body.uf-panel .sidebar .nav-link:hover,
body.uf-panel .nav-sidebar .menu-open > .nav-link {
    background: var(--uf-accent-soft) !important;
    color: var(--uf-accent-hover) !important;
    transform: none;
}

body.uf-panel .sidebar .nav-link.active,
body.uf-panel .sidebar .nav-link.active:hover {
    background: var(--uf-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 7px rgba(184, 84, 11, .12);
}

body.uf-panel .sidebar .nav-treeview > .nav-item > .nav-link {
    color: #64748b !important;
    font-weight: 500;
}

body.uf-panel .sidebar .nav-treeview > .nav-item > .nav-link:hover,
body.uf-panel .sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: var(--uf-accent-soft) !important;
    color: var(--uf-accent-hover) !important;
    box-shadow: none;
}

body.uf-panel .sidebar .nav-link > p > .right,
body.uf-panel .nav-header {
    color: #64748b !important;
}

body.uf-panel .sidebar .nav-link.active > p > .right {
    color: #ffffff !important;
}

body.uf-panel .main-header.navbar {
    border-bottom-color: var(--uf-border);
    box-shadow: 0 2px 9px rgba(30, 41, 59, .025);
}

body.uf-panel :is(.navbar-user-btn, .student-dropdown-name, .student-dropdown .dropdown-item,
    .sidebar-section-label, .sidebar-help-title, .brand-title) {
    font-weight: 600;
}

body.uf-panel :is(.navbar-user-btn, .navbar-settings-btn, #menu-toggle, .main-header .nav-link) {
    transition: background-color var(--uf-duration) var(--uf-ease),
        border-color var(--uf-duration) var(--uf-ease), color var(--uf-duration) var(--uf-ease);
}

body.uf-panel .main-footer {
    border-top-color: var(--uf-border);
    color: var(--uf-muted);
    font-size: .875rem;
}

/* Neutral surfaces let the institutional accent and status colors stay useful. */
body.uf-panel :is(.card:not([class*="bg-"]):not(.card-outline), .dashboard-stat-card, .dashboard-card,
    .info-card, .summary-section, .report-card, .report-choice, .db-card,
    .report-directory-card, .profile-mini-card) {
    border-radius: var(--uf-radius);
    border-color: var(--uf-border);
    box-shadow: var(--uf-shadow);
}

body.uf-panel .card:not([class*="bg-"]) {
    background-color: var(--uf-surface);
}

body.uf-panel .card > .card-header {
    border-bottom-color: var(--uf-border);
    border-top-left-radius: calc(var(--uf-radius) - 1px) !important;
    border-top-right-radius: calc(var(--uf-radius) - 1px) !important;
}

body.uf-panel :is(.dashboard-hero, .student-hero, .reports-hero,
    .announcement-page-header, .db-page-header) {
    border-radius: 16px;
    box-shadow: var(--uf-shadow);
}

body.uf-panel :is(.dashboard-title, .hero-title, .reports-title, .summary-title,
    .content-header h1, .info-card-value, .summary-value) {
    font-weight: 700;
    letter-spacing: -.025em;
}

body.uf-panel :is(.system-badge, .card-chip, .info-card-label, .summary-label,
    .profile-mini-value, .status-badge, .student-dropdown-role) {
    font-weight: 600;
}

/* Static information cards respond to focus without moving the content. */
body.uf-panel .info-card,
body.uf-panel .summary-item {
    transition: border-color var(--uf-duration) var(--uf-ease),
        box-shadow var(--uf-duration) var(--uf-ease), background-color var(--uf-duration) var(--uf-ease);
}

body.uf-panel .info-card:hover {
    transform: none;
    border-color: var(--uf-border);
    box-shadow: var(--uf-shadow);
}

body.uf-panel .info-card:focus-within {
    outline: none;
    border-color: #d6b18d;
    box-shadow: 0 0 0 3px rgba(184, 84, 11, .08);
}

body.uf-panel :is(.dashboard-stat-card, .quick-action-btn, .report-choice,
    .report-card, .attendance-event-card, .stats-soft-card) {
    transition: border-color var(--uf-duration) var(--uf-ease),
        box-shadow var(--uf-duration) var(--uf-ease), background-color var(--uf-duration) var(--uf-ease);
}

body.uf-panel :is(.dashboard-stat-card, .quick-action-btn, .report-choice,
    .report-card, .attendance-event-card, .stats-soft-card):hover {
    transform: none;
    box-shadow: var(--uf-shadow-hover);
    border-color: #dfba97;
}

body.uf-panel :is(.report-choice, .attendance-event-card):focus {
    transform: none;
}

/* Buttons keep semantic colors; only the existing orange primary family changes. */
body:is(.uf-panel, .uf-public) :is(.btn, .pill-btn, .apply-btn, .welcome-btn,
    .choice-card, .btn-cancel-logout, .btn-confirm-logout, .logout-modal-close,
    .uf-carousel-toggle) {
    transition: background-color var(--uf-duration) var(--uf-ease),
        color var(--uf-duration) var(--uf-ease), border-color var(--uf-duration) var(--uf-ease),
        box-shadow var(--uf-duration) var(--uf-ease), opacity var(--uf-duration) var(--uf-ease);
    touch-action: manipulation;
}

body:is(.uf-panel, .uf-public) .btn {
    font-weight: 600;
    border-radius: 9px;
}

body:is(.uf-panel, .uf-public) :is(.btn-primary, .btn-orange, .btn-unifast) {
    background: var(--uf-accent) !important;
    border-color: var(--uf-accent) !important;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(184, 84, 11, .10);
}

body:is(.uf-panel, .uf-public) :is(.btn-primary, .btn-orange, .btn-unifast):hover {
    background: var(--uf-accent-hover) !important;
    border-color: var(--uf-accent-hover) !important;
    box-shadow: 0 3px 8px rgba(184, 84, 11, .15);
    transform: none;
}

body:is(.uf-panel, .uf-public) :is(.btn, .pill-btn, .apply-btn, .welcome-btn):active {
    transform: none;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .12);
}

body:is(.uf-panel, .uf-public) :is(button:disabled, .btn.disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
}

/* Do not replace validation borders or the page's input sizes. */
body:is(.uf-panel, .uf-public) :is(.form-control, .custom-select, .form-select) {
    transition: border-color var(--uf-duration) var(--uf-ease),
        box-shadow var(--uf-duration) var(--uf-ease), background-color var(--uf-duration) var(--uf-ease);
}

body:is(.uf-panel, .uf-public) :is(.form-control, .custom-select, .form-select):not(.is-invalid):not(.is-valid):focus {
    border-color: #bc7b40;
    box-shadow: 0 0 0 3px rgba(184, 84, 11, .12);
}

body:is(.uf-panel, .uf-public) :is(.form-control, .custom-select, .form-select)::placeholder {
    color: #8994a5;
    opacity: 1;
}

body:is(.uf-panel, .uf-public) :is(.form-check-input, input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--uf-accent);
}

body:is(.uf-panel, .uf-public) :is(.form-label, .form-group > label) {
    font-weight: 600;
}

/* Keyboard outlines stay visible even on pages that previously removed focus. */
body:is(.uf-panel, .uf-public) :is(a, button, input, select, textarea,
    [tabindex]:not([tabindex="-1"]), summary):focus-visible {
    outline: 3px solid var(--uf-focus);
    outline-offset: 3px;
}

body.uf-panel .sidebar .nav-link:focus-visible {
    outline-offset: -3px;
}

body.uf-panel #menu-toggle:focus-visible {
    outline: 3px solid var(--uf-focus);
    outline-offset: 3px;
}

body.uf-public .content-card :is(a, button):focus-visible,
body.uf-welcome .welcome-carousel :is(button, a):focus-visible {
    outline-color: #fff1d7;
}

body:is(.uf-panel, .uf-public) .input-group :is(input, button):focus-visible {
    position: relative;
    z-index: 4;
}

/* Table rows use color feedback rather than movement or changing geometry. */
body.uf-panel .table tbody td {
    transition: background-color 160ms var(--uf-ease);
}

body.uf-panel .table-hover tbody tr:focus-within {
    background-color: #fff8f1;
}

body.uf-panel .page-link {
    border-color: var(--uf-border);
    color: var(--uf-accent-hover);
    transition: background-color var(--uf-duration) var(--uf-ease),
        border-color var(--uf-duration) var(--uf-ease), color var(--uf-duration) var(--uf-ease);
}

body.uf-panel .page-item.active .page-link {
    background-color: var(--uf-accent);
    border-color: var(--uf-accent);
    color: #ffffff;
}

/* Popper owns dropdown positioning, so menu entrance animates opacity only. */
body:is(.uf-panel, .uf-public) .dropdown-menu {
    border-color: var(--uf-border);
    border-radius: 12px;
    box-shadow: 0 9px 28px rgba(30, 41, 59, .12);
}

body:is(.uf-panel, .uf-public) .dropdown-menu.show {
    animation: uf-menu-appear 160ms var(--uf-ease);
}

body:is(.uf-panel, .uf-public) .dropdown-item {
    transition: background-color 160ms var(--uf-ease), color 160ms var(--uf-ease);
}

body:is(.uf-panel, .uf-public) .modal.fade .modal-dialog {
    transform: translateY(-10px);
    transition: transform 220ms var(--uf-ease);
}

body:is(.uf-panel, .uf-public) .modal.show .modal-dialog {
    transform: none;
}

body:is(.uf-panel, .uf-public) .modal-content,
body.uf-panel .logout-modal-content {
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .18);
}

body:is(.uf-panel, .uf-public) .modal-backdrop,
body.uf-panel .logout-modal-backdrop {
    background-color: #192638;
}

body.uf-panel .logout-modal.show .logout-modal-dialog {
    animation: uf-dialog-appear 220ms var(--uf-ease);
}

body.uf-dialog-open {
    overflow: hidden;
}

body.uf-panel :is(.logout-modal-header h5, .logout-question) {
    font-weight: 700;
}

body:is(.uf-panel, .uf-public) .swal2-popup {
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .18);
    font-family: inherit;
}

body:is(.uf-panel, .uf-public) .swal2-show {
    animation: uf-dialog-appear 220ms var(--uf-ease);
}

body:is(.uf-panel, .uf-public) .swal2-hide {
    animation: uf-menu-disappear 160ms ease-in forwards;
}

body:is(.uf-panel, .uf-public) .collapsing {
    transition: height 220ms var(--uf-ease);
}

body:is(.uf-panel, .uf-public) :is(.alert, .toast) {
    border-radius: 10px;
}

/* Public pages retain their dark image/glass identity and white text. */
body.uf-public .topbar {
    border-bottom-color: var(--uf-border);
    box-shadow: 0 2px 10px rgba(30, 41, 59, .035);
}

body.uf-public .content-card {
    transition: border-color var(--uf-duration) var(--uf-ease),
        box-shadow var(--uf-duration) var(--uf-ease);
}

body.uf-public .content-card:hover {
    transform: none;
    background: var(--glass, rgba(255, 255, 255, .14));
    box-shadow: var(--shadow, 0 18px 50px rgba(0, 0, 0, .38));
}

body.uf-public .section-anchor {
    scroll-margin-top: var(--uf-anchor-offset, 110px);
}

body.uf-public .page-nav-link {
    font-weight: 600;
}

body.uf-public .page-nav-link[aria-current="location"] {
    color: var(--uf-accent-hover);
}

body.uf-public .page-nav-link[aria-current="location"]::after,
body.uf-public .page-nav-link:focus-visible::after {
    width: 100%;
}

body.uf-public :is(.pill-btn, .apply-btn, .welcome-btn, .choice-card):hover {
    transform: none;
}

body.uf-public .choice-card:hover :is(.tes-icon, .tdp-icon) {
    transform: none;
}

body.uf-public .welcome-main .card {
    border-radius: 16px;
    overflow: hidden;
}

body.uf-public .welcome-main .card .brand-orange {
    background: var(--uf-accent);
}

body.uf-public .welcome-main .card .form-control {
    min-height: 42px;
}

body.uf-welcome .carousel.carousel-fade .carousel-item {
    transition-duration: 320ms;
}

body.uf-welcome .uf-carousel-toggle {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 4;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
    color: #ffffff;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

body.uf-welcome .uf-carousel-toggle:hover {
    background: rgba(15, 23, 42, .95);
    border-color: #ffffff;
}

body.uf-welcome .welcome-carousel .carousel-indicators {
    right: 16px;
    left: 16px;
    margin-left: 0;
    margin-right: 0;
    bottom: 64px;
    z-index: 4;
}

body.uf-welcome .welcome-carousel :is(.carousel-control-prev, .carousel-control-next) {
    z-index: 3;
    opacity: .75;
    transition: opacity var(--uf-duration) var(--uf-ease);
}

body.uf-welcome .welcome-carousel :is(.carousel-control-prev, .carousel-control-next):hover,
body.uf-welcome .welcome-carousel :is(.carousel-control-prev, .carousel-control-next):focus-visible {
    opacity: 1;
}

/* Optional native dialogs inherit the same finish without affecting placement. */
body:is(.uf-panel, .uf-public) dialog {
    max-width: min(560px, calc(100vw - 32px));
    border: 1px solid var(--uf-border);
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .18);
    color: var(--uf-ink);
}

body:is(.uf-panel, .uf-public) dialog[open] {
    animation: uf-menu-appear 180ms var(--uf-ease);
}

body:is(.uf-panel, .uf-public) dialog::backdrop {
    background: rgba(25, 38, 56, .5);
}

/* The script applies this only to visible content. Nothing is hidden by default. */
.uf-enter {
    animation: uf-enter 240ms var(--uf-ease) var(--uf-enter-delay, 0ms) backwards;
}

@keyframes uf-enter {
    from { opacity: .84; }
    to { opacity: 1; }
}

@keyframes uf-menu-appear {
    from { opacity: .7; }
    to { opacity: 1; }
}

@keyframes uf-menu-disappear {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes uf-dialog-appear {
    from { opacity: .8; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hover effects stay restrained on touch devices; main controls remain usable. */
@media (pointer: coarse) {
    body:is(.uf-panel, .uf-public) :is(.btn:not(.btn-sm), .pill-btn, .apply-btn,
        .welcome-btn, .dropdown-item, .uf-carousel-toggle) {
        min-height: 44px;
    }

    body.uf-panel :is(.dashboard-stat-card, .quick-action-btn, .report-choice,
        .report-card, .attendance-event-card, .stats-soft-card):hover {
        box-shadow: var(--uf-shadow);
    }
}

@media (max-width: 767.98px) {
    body:is(.uf-panel, .uf-public) :is(input.form-control, select.form-control,
        textarea.form-control, .custom-select, .form-select) {
        font-size: 16px;
    }

    body.uf-panel :is(.student-hero, .reports-hero) {
        padding: 20px;
    }

    body.uf-panel .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    body.uf-panel .logout-modal-content {
        max-height: calc(100dvh - 36px);
        overflow-y: auto;
    }
}

/* Preference changes at runtime also stop animations already on the page. */
html.uf-reduced-motion,
html.uf-reduced-motion * {
    scroll-behavior: auto !important;
}

html.uf-reduced-motion *,
html.uf-reduced-motion *::before,
html.uf-reduced-motion *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
    html, html * {
        scroll-behavior: auto !important;
    }

    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}

/* Decorative motion and shadows have no role in printed reports. */
@media print {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }

    .uf-enter {
        opacity: 1;
    }

    body.uf-panel .content-wrapper {
        background: #ffffff !important;
    }

    .uf-carousel-toggle {
        display: none !important;
    }
}