/* ============================================================
   Bootstrap 5 polish — OltDemoNew StudentWeb.
   Loaded after Default.css so these rules win.
   Brand navy: #004080 (matches .my-navbar).
   ============================================================ */

/* ---------- GridViews (grids carrying .gv-nice) ----------
   Child combinators (> tbody > tr > td) are deliberate: they keep
   these borders/striping off nested tables inside ItemTemplates. */
.gv-nice {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .9rem;
}

.gv-nice > tbody > tr > th,
.gv-nice > tbody > tr > td,
.gv-nice > thead > tr > th,
.gv-nice > tr > th,
.gv-nice > tr > td {
    border: 1px solid #cdd7df; /* vertical + horizontal column lines */
    padding: 8px 10px;
    vertical-align: middle;
}

/* Header: brand navy, left aligned by default (gridview.js syncs each
   column to its data cells). background-image:none drops any legacy
   gradient; box-shadow:none stops striped/hover overlays washing it out. */
.gv-nice > tbody > tr > th,
.gv-nice > thead > tr > th,
.gv-nice > tr > th {
    background-color: #004080 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #004080 !important;
    text-align: left;
    font-weight: 600;
    box-shadow: none !important;
}

.gv-nice > tbody > tr:nth-child(even) > td {
    background-color: #eef3f6;
}

.gv-nice > tbody > tr:hover > td {
    background-color: #dceaf5;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: .375rem;
    font-weight: 600;
}

/* legacy themed button: drop the gif background, outline style */
.ButtonStyle {
    background-image: none !important;
    background-color: transparent !important;
    color: #004080 !important;
    border: 1px solid #004080 !important;
    border-radius: .375rem !important;
    padding: .35rem 1rem !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
    text-decoration: none;
    cursor: pointer;
    margin: 2px 3px;
}

    .ButtonStyle:hover {
        background-color: #004080 !important;
        color: #fff !important;
    }

/* Outline buttons: transparent until hover, then fill with brand navy.
   Applied to btn-secondary/btn-primary because that is what the markup
   already uses everywhere - avoids rewriting every .aspx/.ascx. */
.btn-secondary,
.btn-primary {
    --bs-btn-bg: transparent;
    --bs-btn-color: #004080;
    --bs-btn-border-color: #004080;
    --bs-btn-hover-bg: #004080;
    --bs-btn-hover-border-color: #004080;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #002b55;
    --bs-btn-active-border-color: #002b55;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #9db3c6;
    --bs-btn-disabled-color: #9db3c6;
    --bs-btn-focus-shadow-rgb: 0, 64, 128;
    border-width: 1px;
}

/* ASP.NET renders a disabled Button as <input disabled>, which :disabled catches
   (BS5's --bs-btn-disabled-* only applies via .disabled on <a>/<button>). */
.btn-secondary:disabled,
.btn-primary:disabled,
.btn-secondary[disabled],
.btn-primary[disabled] {
    background-color: transparent;
    border-color: #9db3c6;
    color: #9db3c6;
    opacity: 1;
}

/* destructive actions keep a red outline */
.btn-danger {
    --bs-btn-bg: transparent;
    --bs-btn-color: #b02a37;
    --bs-btn-border-color: #b02a37;
    --bs-btn-hover-bg: #b02a37;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #8f222d;
    --bs-btn-active-border-color: #8f222d;
    --bs-btn-active-color: #fff;
    border-width: 1px;
}

/* btn-xs was dropped in BS5; the markup still uses it in ~31 files */
.btn-xs {
    --bs-btn-padding-y: .12rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .78rem;
    --bs-btn-border-radius: .25rem;
}

/* buttons/links inside grids stay compact */
.gv-nice td .btn,
.gv-nice th .btn {
    --bs-btn-padding-y: .12rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .8rem;
}

/* ---------- UpdateProgress "Processing" panel ----------
   Full-screen dimmed backdrop + centred card. Replaces the old
   .CenterPosition box (fixed at left:40%, so never truly centred). */
.proc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 27, 45, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100010;
}

.proc-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .32);
    padding: 28px 40px;
    min-width: 300px;
    max-width: 90vw;
}

.proc-spinner {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 5px solid #d3dded;
    border-top-color: #004080;
    border-radius: 50%;
    animation: proc-spin .7s linear infinite;
}

@keyframes proc-spin {
    to { transform: rotate(360deg); }
}

.proc-text {
    color: #004080;
    font-weight: 600;
    font-size: 1.15rem;
    white-space: nowrap;
}

/* honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .proc-spinner { animation-duration: 2s; }
}

/* ---------- ReportViewer ----------
   The WebForms ReportViewer writes fixed pixel widths onto its own wrapper
   divs (measured client-side), so the report area stays narrow inside a
   fluid container even with Width="100%". Force the wrappers to fill. */
.rv-panel {
    width: 100%;
}

.rv-viewer {
    width: 100% !important;
}

    /* the viewer's outer + report-area wrappers */
    .rv-viewer > div,
    .rv-viewer > table,
    .rv-viewer > table > tbody > tr > td {
        width: 100% !important;
    }

/* The viewer lays itself out in a table-layout:fixed table whose column
   widths come from a hidden first row:
       <td style="display:none;width:25%">  <- Document Map
       <td style="display:none;width:6px">  <- splitter
       <td style="width:100%">              <- report
   Because table-layout is fixed, the Document Map column still reserves its
   25% even though it is display:none, so the report cell - and the 100%-wide
   div inside it - is squeezed into what is left. Switching to auto layout
   lets the only visible column take the full width. An author !important
   rule outranks the control's inline style. */
.rv-panel table[id$="_fixedTable"] {
    table-layout: auto !important;
    width: 100% !important;
}

    /* stop the hidden Document Map / splitter columns reserving any width */
    .rv-panel table[id$="_fixedTable"] > tbody > tr > td[style*="display:none"],
    .rv-panel table[id$="_fixedTable"] > tbody > tr > td[style*="display: none"] {
        width: 0 !important;
        padding: 0 !important;
    }

/* the scrollable report area fills its (now full-width) cell */
.rv-panel table[id$="_fixedTable"] > tbody > tr > td > div[id$="_ctl13"] {
    width: 100% !important;
}

/* Centre the report page within the (wider) viewer area.
   The rendered page is a shrink-to-fit table inside _oReportDiv, so auto
   margins centre it. Auto margins are the safe choice over flex centring:
   when the report is wider than the area (zoomed in) they resolve to 0
   rather than overflowing and clipping the left edge out of scroll reach. */
.rv-panel div[id$="_oReportDiv"] > table {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- Form controls & labels ---------- */
.form-control,
.form-select {
    font-size: .92rem;
}

/* Labels sat flush against their control in the legacy markup.
   inline-block so the bottom margin actually applies. */
.LabelStyle {
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}

/* ---------- Vertical rhythm ----------
   Legacy layouts spaced things with <tr><td>&nbsp;</td></tr> filler rows and
   runs of <br />, which produced a full blank line (~20px+) wherever they
   appeared. Those rows are now tagged .sp-row and given a controlled height. */
.sp-row > td {
    height: 6px;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
}

/* grids need a little separation from the label/controls above them */
#pageContent .gv-nice {
    margin-top: 4px;
    margin-bottom: 8px;
}

/* legacy layout tables: trim the default cell padding that stacks up
   across the many nested tables these pages are built from */
#pageContent > table > tbody > tr > td {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* the scroll panels around the pick-lists sit tight to their label */
#pageContent .LabelStyle + div {
    margin-top: 2px;
}

/* scrollable pick-lists (Available/Selected Subjects) */
#pageContent .row > [class^="col"] > .LabelStyle + div {
    margin-top: 4px;
}

/* keep adjacent buttons from touching */
#pageContent .btn + .btn {
    margin-left: 6px;
}

#pageContent center > .btn,
#pageContent .btn-row .btn {
    margin-top: 6px;
    margin-bottom: 6px;
}