/* ============================================================================
   eInstitute app overrides. Loaded AFTER theme.min.css so these rules win.

   Most of this is a compatibility shim: the 282 page bodies were written against
   the NiceAdmin theme's style.css, which is no longer loaded. Classes that
   Bootstrap 5 provides natively (.card, .card-body, .card-title, .breadcrumb,
   .row, .col-*, .form-control, .btn, .table) are styled by Phoenix already and
   need nothing here. Only the NiceAdmin-specific ones do.
   ============================================================================ */

/* ---- Fonts ----------------------------------------------------------------- */
/* Self-hosted: campus machines may have no internet, so no Google Fonts link.
   One variable-font file carries every weight 300-800. */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans-var.woff2") format("woff2");
}

/* ---- Base sizing ---------------------------------------------------------- */
:root {
    font-size: 15px;                    /* Phoenix default is 16px */
    --phoenix-body-font-size: 0.9rem;
}

*, body, html, .form-control, .form-select, .form-label, .form-check-label,
.btn, .nav-link, .navbar, .card, .table,
h1, h2, h3, h4, h5, h6, p, span, a, label, input, textarea, select {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
}

a { text-decoration: none; }
strong, .fw-semibold { font-weight: 500 !important; }
.fw-bolder { font-weight: 600 !important; }

.form-control, .form-select { font-size: 0.9rem; font-weight: 400; padding: 0.25rem 0.5rem; }
.form-label { font-size: 0.9rem; font-weight: 400; margin-bottom: 0.3rem; padding-left: 0.3rem; text-transform: none; }
.btn { --phoenix-btn-padding-y: 0.45rem !important; }

/* ---- NiceAdmin leftovers -------------------------------------------------- */

/* Page bodies still open with <main id="main" class="main">. Inside .content it
   is just a block wrapper - neutralise the old fixed margins. */
#main.main { margin: 0; padding: 0; }

/* NiceAdmin's .pagetitle / .section carried spacing that died with style.css. */
.pagetitle { margin-bottom: 0.75rem; }
.section { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* GridView EmptyDataTemplate renders alert-danger for "No data Found."
   Neutral grey reads better than red for an empty grid. */
.sm-danger { background-color: #fff !important; color: #808080 !important; }

/* Emitted by Site1/Site2.Master.vb GetNcount() - a NiceAdmin class. */
.badge-number {
    position: absolute; inset-inline-start: 60%; top: 12%;
    font-size: 10px; font-weight: 600; padding: 3px 5px; border-radius: 10px;
}

/* First body column of every Bootstrap table. More specific than the per-page
   `.table td` blocks in 197 files, so it wins app-wide. */
.table > tbody > tr > td:first-child { padding-left: 4px; }

/* Grid density. Most pages carry their own `.table td { padding: .15rem }` in an
   inline <style> block; pages without one (CourseMaster, for instance) fell back
   to Phoenix's roomier default and their GridView rows sat noticeably taller.
   This gives them the same density. A page's own inline block still wins, since
   the head placeholder renders after this file. */
.table > :not(caption) > * > * { padding: 0.2rem 0.4rem; }
/* One grid typography for the whole app - GridViews render as .table,
   DataTables tag their tables .dataTable at init. The size carries
   !important because many pages ship their own .table td { font-size }
   block, which loads after this sheet and would win otherwise. */
.table td, .table th,
table.dataTable td, table.dataTable th {
    /* !important on the family too: the global Poppins rule above is
       !important on *, and only an !important with higher specificity
       beats it. */
    font-family: "Open Sans", sans-serif, Arial !important;
    font-size: 13px !important;
    line-height: 1.3;
    vertical-align: middle;
}

/* Grid header. 197 pages already set this themselves in an inline block
   (FeeMaster and friends: bold on lightgray); making it the default means the
   pages without one - CourseMaster, the Management screens - match instead of
   rendering a plain white header. Pages with their own block still win, and
   their values are the same.

   The two !important flags are not decoration:
     font-weight - Site1.Master sets font-weight:500 !important on *, which
                   outranks any plain declaration here, so headers rendered at
                   500 app-wide despite 197 pages asking for bold.
     padding     - the Phoenix theme targets `.table > thead > tr > th`, more
                   specific than the per-page `.table th` rules, so header cells
                   kept ~9.4px vertical padding while body cells got ~3px. */
.table th, .table > thead > tr > th {
    font-weight: 700 !important;
    padding: 0.2rem 0.4rem !important;
    background-color: lightgray;
}

/* The DataTables report grids (class="display" / "row-border") sit outside
   .table, so the header rule above never reaches them. .dataTable is added
   to the element by DataTables itself at init, which is exactly the set of
   tables this should cover - a page that only links the library is left
   alone. Bold needs !important against the master's global
   font-weight:500!important. Padding deliberately not forced here - the
   report grids keep the DataTables spacing. */
table.dataTable thead th {
    font-weight: 700 !important;
    background-color: lightgray;
}

/* ---- Layout --------------------------------------------------------------- */
.content { padding-top: calc(var(--phoenix-navbar-top-height) + 1rem); }

/* Tighter page gutters. Phoenix stacks three layers of side spacing: .content
   itself (2.5rem per side beside the vertical navbar, via
   .navbar-vertical ~ .navbar-top ~ .content; 1.5rem base), .container-fluid
   (1rem per side) and the column gutters (1rem per side) - ~72px before any
   card. The shell already frames the page; drop the first two layers and let
   the column gutters be the whole inset. !important on .content because the
   theme's navbar sibling selector outguns any sane specificity here. */
.content { padding-left: 10px !important; padding-right: 10px !important; }
/* overflow-x: rows carry -1rem side margins the container used to absorb with
   its padding; clip the empty overhang or it summons scrollbars. */
.content > .container-fluid { padding-left: 0; padding-right: 0; overflow-x: hidden; overflow-x: clip; }
/* Report grids wider than their column: the clip above would cut them off
   with no scrollbar at all (PaymentReports, ReportMonthly, StudentReport...),
   so the DataTables wrapper scrolls on its own. A table that fits is
   unaffected; a page that sets scrollX gets DataTables' own scroll body and
   this rule stays inert there. */
.dataTables_wrapper { overflow-x: auto; }
/* GridViews have no wrapper of their own; einstitute.js puts this one around
   any table.table that overflows its column. */
.ei-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 575.98px) {
    .content { padding-left: 5px !important; padding-right: 5px !important; }
    /* Taller top bar on phones - the content offset follows the variable. */
    :root { --phoenix-navbar-top-height: 5rem; }
    .navbar-top { min-height: 5rem; }
}
.footer { height: 2rem !important; }
.navbar-vertical .navbar-vertical-footer { height: 2rem !important; }

@media (min-width: 992px) {
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-lg,
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-lg .navbar-vertical-content,
    html:not(.navbar-vertical-collapsed) .navbar-logo,
    html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-footer { width: 250px; }
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-lg + .navbar.navbar-top ~ .content { margin-left: 250px !important; }
}

html:not(.navbar-vertical-collapsed) .navbar-vertical .nav-link {
    padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.9rem;
}

/* Slim menu scrollbar. The scrolling element is .navbar-vertical-content
   (theme gives it overflow-y: auto); the parent selectors stay as a safety
   net. Phoenix's own rule never fires because it is gated on .windows.chrome
   classes its JS would stamp on <html> - JS this port does not run.

   The engines must not share rules here. Chromium drops ALL ::-webkit-*
   scrollbar styling when either scrollbar-width or scrollbar-color computes
   to non-auto - and it also parses @supports selector(::-webkit-scrollbar),
   as does Firefox for webcompat, so that test cannot split them. Instead the
   standard properties sit in a @supports (-moz-appearance: none) block that
   only Gecko passes; Chromium sees nothing but the ::-webkit-* rules. */

.navbar-vertical::-webkit-scrollbar,
.navbar-vertical .navbar-collapse::-webkit-scrollbar,
.navbar-vertical .navbar-vertical-content::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: transparent;
}

.navbar-vertical::-webkit-scrollbar-thumb,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb,
.navbar-vertical .navbar-vertical-content::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--phoenix-scrollbar-bg, rgba(111, 125, 139, .4));
}

.navbar-vertical::-webkit-scrollbar-track,
.navbar-vertical .navbar-collapse::-webkit-scrollbar-track,
.navbar-vertical .navbar-vertical-content::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Firefox only: -moz-appearance parses in no other engine. Firefox has no
   ::-webkit-* scrollbar support and no scrollbar length values - thin is as
   slim as it offers. */
@supports (-moz-appearance: none) {
    .navbar-vertical,
    .navbar-vertical .navbar-collapse,
    .navbar-vertical .navbar-vertical-content {
        scrollbar-width: thin;
        scrollbar-color: var(--phoenix-scrollbar-bg, rgba(111, 125, 139, .4)) transparent;
    }
}

/* Sub-menu text is indented 15px by the theme for icon-less items; our items
   have icons, which would double the icon-to-text gap. */
.navbar-vertical .navbar-vertical-content .navbar-nav .nav .nav-link .nav-link-icon + .nav-link-text {
    padding-left: 0 !important;
}
.nav-link-text { font-weight: 500 !important; }

/* Active page highlight, set by the master's activate() and by the legacy
   per-page menuActive() which adds .active to the leaf link. */
.navbar-vertical .nav-link.is-active,
.navbar-vertical .nav-link.active {
    background-color: #e7f1ff; color: #0d6efd !important; font-weight: 600; border-radius: 6px;
}
.navbar-vertical .nav-link.is-active .nav-link-text,
.navbar-vertical .nav-link.is-active .nav-link-icon,
.navbar-vertical .nav-link.active .nav-link-text,
.navbar-vertical .nav-link.active .nav-link-icon { color: #0d6efd !important; }
.navbar-vertical .nav-link.is-active-parent,
.navbar-vertical .nav-link.is-active-parent .nav-link-text { color: #0d6efd !important; font-weight: 600; }

/* ---- Standalone (masterless) pages ---------------------------------------- */

/* Login and similar pages have no app shell, so the section has nothing to
   centre against and the card floated to the top of the viewport. */
.section.register { min-height: calc(100vh - 3.5rem); }

/* The compact .form-control padding above is meant for dense grids and entry
   forms, where it earns its keep. On a login card it squashed the inputs to
   30px against the ~38px of the reference design, so restore comfortable
   sizing here only. */
.section.register .form-control { padding: 0.5rem 1rem; font-size: 0.95rem; height: auto; }
.section.register .form-icon-input { padding-left: 2.25rem; }
.section.register .form-label { font-size: 0.9rem; margin-bottom: 0.4rem; padding-left: 0; }
.section.register .btn { --phoenix-btn-padding-y: 0.6rem !important; font-size: 0.95rem; }

/* On the login card the message sits directly above the button, so it needs no
   bottom margin. Shape and colour come from the app-wide rule below. */
.section.register .alert { margin: 0.25rem 0 0; text-align: left; }

/* Phoenix's .footer is positioned for the app shell (it offsets for the
   sidebar). On a standalone page that leaves the text hard against the left
   edge, so those pages use this instead. */
.footer-standalone {
    padding: 0.9rem 0;
    text-align: center;
    border-top: 1px solid var(--phoenix-border-color, #e5e7eb);
}
.footer-standalone p { margin: 0; }

/* ---- Shared components ---------------------------------------------------- */

/* Centre the shared toast rather than letting it sit in a corner. */
.toast-container.position-absolute, .toast-container.position-fixed {
    position: fixed !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important; z-index: 1080 !important;
    width: auto; max-width: min(90vw, 480px); pointer-events: none;
}
.toast-container.position-absolute .toast, .toast-container.position-fixed .toast {
    pointer-events: auto; min-width: 280px; max-width: min(90vw, 480px);
    width: 100%; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* UpdateProgress overlay used by 127 pages. */
.vmodal {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1054;
}

/* Status messages. 159 code-behind files emit the same Bootstrap dismissible
   alert into a Literal, so this is the single place to shape all of them.
   Phoenix renders .alert-danger as a solid slab with roomy padding; softened to
   a tinted strip roughly half the height, which reads as a message rather than
   a page-level banner. Keeps a bottom margin so content below is not cramped -
   the login card overrides that to 0, since the button follows immediately. */
.alert {
    padding: 0.5rem 2rem 0.5rem 0.8rem;
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    line-height: 1.35;
    border-radius: 6px;
}
.alert-danger  { background-color: #fdecee; border: 1px solid #f3c2c8; color: #b02a37; }
.alert-success { background-color: #eaf7ef; border: 1px solid #bfe3cd; color: #17663a; }
.alert-warning { background-color: #fff6e6; border: 1px solid #f6ddb0; color: #8a5b00; }
.alert-info    { background-color: #eaf2fd; border: 1px solid #c3d9f7; color: #0b4c8c; }

/* The default close button is sized for a full-width banner. */
.alert .btn-close { padding: 0.55rem; background-size: 0.65em; opacity: 0.55; }
.alert .btn-close:hover { opacity: 1; }

/* GridView EmptyDataTemplate rows reuse .alert-danger for "No data Found.".
   The .sm-danger shim above keeps those neutral - its !important still wins. */

/* Data-entry cards. Tints the input side of a page so it reads as distinct
   from the list/report side. Applied to any card that holds form inputs and no
   grid. Change the colour here - it is not inlined on individual pages. */
.card-entry { background-color: #FAF3CA; }

.section-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); border: 1px solid #e5e7eb; }
.section-card .card-title { font-weight: 500 !important; color: #1f3556; }
.btn-icon {
    width: 30px; height: 30px; padding: 0; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%;
}