/* myschool overrides on top of the Metronic (xpanel) theme */

/* htmx request feedback */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* disabled menu links (Phase 0 placeholders) */
.menu .menu-link.disabled { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Skeleton / shimmer loading placeholders (reusable)                 */
/* ------------------------------------------------------------------ */
@keyframes shimmer { 100% { transform: translateX(100%); } }

.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #eff2f5;
    border-radius: .475rem;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 14px; margin: .5rem 0; width: 100%; }

/* DataTables: shimmer overlay over the card body while an AJAX request is in flight.
   The overlay is injected/removed by app.js on the `processing.dt` event. */
.dt-loading { position: relative; }
.dt-loading .dt-skeleton {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, .92);
    border-radius: .475rem;
}
.dt-loading .dt-skeleton .skeleton-line:nth-child(odd) { width: 92%; }
.dt-loading .dt-skeleton .skeleton-line:nth-child(even) { width: 78%; }

/* ------------------------------------------------------------------ */
/* Boosted navigation (hx-boost): top progress bar + content fade      */
/* ------------------------------------------------------------------ */
/* A page swap is invisible until it lands, so the bar is what tells the user the click
   registered. Fixed to the viewport top, above everything, never interactive. */
.xp-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bs-primary, #009ef7), #7239ea);
    box-shadow: 0 0 8px rgba(0, 158, 247, .6);
    border-radius: 0 3px 3px 0;
    transition: width .18s ease-out;
    pointer-events: none;
}
.xp-progress-done { transition: width .12s ease-out, opacity .2s ease-in .06s; opacity: 0; }

/* Ease the new page in rather than letting it pop. Kept short — a slow fade would read as lag,
   which is the opposite of the point. */
@keyframes xp-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

#kt_content_container { animation: xp-fade-in .18s ease-out; }

/* Respect a user who has asked the OS for less motion: no creep, no fade. */
@media (prefers-reduced-motion: reduce) {
    .xp-progress { transition: none; }
    #kt_content_container { animation: none; }
    .skeleton::after { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Typography — pin xpanel's exact font so it never falls back         */
/* ------------------------------------------------------------------ */
/* Poppins is xpanel's body font (the shared Metronic bundle defines
   --bs-font-sans-serif: Poppins). Re-affirm it at :root and on body so a
   slow/cached/failed webfont can never leave us on a different fallback
   face than xpanel. Font SIZES are inherited from the same bundle — untouched. */
:root { --bs-font-sans-serif: "Poppins", Helvetica, "sans-serif"; }
body, .btn, .form-control, .form-select, table.dataTable, .menu, .card { font-family: var(--bs-font-sans-serif); }

/* Our shimmer replaces the default yellow "Processing…" box. */
div.dataTables_wrapper div.dataTables_processing { display: none !important; }

/* ------------------------------------------------------------------ */
/* Hover polish — subtle, consistent feedback across nav/tables/rows   */
/* ------------------------------------------------------------------ */
/* Aside menu hover is left ENTIRELY to Metronic's native menu-state-primary /
   menu-hover styling (identical classes to zal-ultra) — do NOT add a custom
   background here; a gray override made the hover diverge from xpanel. */

/* Icon-rail tab + minimize buttons ease in.                           */
.aside-primary .nav-link,
[data-kt-toggle-name="aside-minimize"] { transition: all .15s ease; }

/* Topbar symbols (avatar, bell, badges) lift slightly on hover.       */
.topbar_base .symbol,
.topbar_base .btn { transition: all .15s ease; }
.topbar_base .symbol:hover { opacity: .85; }

/* Table rows: gentle highlight on hover so rows feel interactive.     */
table.dataTable > tbody > tr { transition: background-color .12s ease; }
table.dataTable.table-row-dashed > tbody > tr:hover > td { background-color: #f9fafb; }

/* Row action buttons: clear hover state.                              */
table.dataTable .btn-icon { transition: all .12s ease; }

/* Footer links + footer clock.                                        */
#kt_footer a { transition: color .15s ease; }

/* DataTables Responsive: the "+" expander that reveals collapsed columns on small screens. */
table.dataTable > tbody > tr > td.dtr-control,
table.dataTable > tbody > tr > th.dtr-control { cursor: pointer; }
table.dataTable td.dtr-control:before {
    color: #009ef7;
    border-color: #009ef7;
}

/* ------------------------------------------------------------------ */
/* General mobile responsiveness (nothing overflows the body)         */
/* ------------------------------------------------------------------ */
img { max-width: 100%; height: auto; }

@media (max-width: 767.98px) {
    /* Stack card header title + toolbar, and make toolbar actions full-width. */
    .card-header { flex-wrap: wrap; min-height: unset; padding-top: .75rem; padding-bottom: .75rem; }
    .card-header .card-toolbar { width: 100%; margin-top: .5rem; }
    .card-header .card-toolbar > .btn { width: 100%; justify-content: center; }

    /* Long DataTables toolbars (length + filter) stack instead of overflowing. */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter { text-align: left; }
    div.dataTables_wrapper div.dataTables_filter input { width: 100%; margin-left: 0; }

    /* Forms: full-width action buttons in the modal footer. */
    .modal-footer .btn { flex: 1 1 auto; }
}