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

/* ---------- GridViews (grids carrying .gv-nice) ----------
   Child combinators keep borders/striping off nested tables. */
.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;
    padding: 8px 10px;
    vertical-align: middle;
}

.gv-nice > tbody > tr > th,
.gv-nice > thead > tr > th,
.gv-nice > tr > th,
/* UseAccessibleHeader="False" renders header cells as <td> and puts the
   HeaderStyle class on the ROW (<tr class="HeaderStyle">), not the cells.
   Paint the cells directly - not just the row - so a row-hover on the cells
   cannot cover the navy. */
.gv-nice .HeaderStyle,
.gv-nice > tbody > tr.HeaderStyle > td,
.gv-nice > tbody > tr.HeaderStyle > 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;
}

/* Row hover highlight - exclude the header row. The HeaderStyle class sits on
   the <tr> (not the cells), so match on the row, not the cell. */
.gv-nice > tbody > tr:not(.HeaderStyle):hover > td {
    background-color: #dceaf5;
}

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

/* Outline buttons: transparent until hover, then fill with brand navy.
   Applied to btn-secondary/btn-primary (what the markup already uses)
   so no .aspx/.ascx needs rewriting. */
.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;
}

.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;
}

/* 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;
}

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

.gv-nice td .btn,
.gv-nice th .btn {
    --bs-btn-padding-y: .12rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .8rem;
}

/* legacy themed button -> outline style (drops the gif background) */
.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;
    }

/* ---------- UpdateProgress "Processing" panel ---------- */
.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;
}

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

/* ---------- ReportViewer ----------
   The viewer lays out in a table-layout:fixed table whose column widths come
   from a hidden first row (a 25% Document Map column + splitter). Under fixed
   layout those hidden columns still reserve width, squeezing the report area
   to ~half and leaving a scrollbar mid-page. Switch to auto layout so the
   visible report column fills the control. Scoped by id pattern (not the
   rv-viewer class, which does not reliably land on the fixedTable's ancestor). */
#pageContent table[id$="_fixedTable"] {
    table-layout: auto !important;
    width: 100% !important;
}

    #pageContent table[id$="_fixedTable"] > tbody > tr > td[style*="display:none"],
    #pageContent table[id$="_fixedTable"] > tbody > tr > td[style*="display: none"] {
        width: 0 !important;
        padding: 0 !important;
    }

/* the scrollable report area (_ctl13) and its content fill the full-width cell */
#pageContent div[id$="_ctl13"] {
    width: 100% !important;
}

#pageContent div[id^="VisibleReportContent"],
#pageContent div[id$="_oReportDiv"] {
    width: 100% !important;
}

/* ---------- Stacked, centred form fields ----------
   Legacy form tables lay a field out as <tr><td>label</td><td>control</td></tr>.
   For those two-cell field rows only, stack label above control and centre the
   pair in a fixed column. Title / buttons / grid rows use colspan and are left
   untouched, so they keep spanning the full width.

   Selector notes:
   - `> tbody > tr` targets only the form table's own rows, never a nested
     GridView's rows (which live inside a colspan cell).
   - `:has(> td:not([colspan]) + td:not([colspan]))` matches exactly the
     two-adjacent-cell field rows. Browsers without :has() ignore the rule and
     the form gracefully falls back to the original side-by-side layout. */
.form-stack > tbody > tr:has(> td:not([colspan]) + td:not([colspan])) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .form-stack > tbody > tr:has(> td:not([colspan]) + td:not([colspan])) > td {
        display: block;
        width: 340px;
        max-width: 92%;
        text-align: left;
        border: 0 !important;
        padding: 3px 0 !important;
    }

        /* Some layouts prefix the label/control with an empty spacer cell
           (<td>&nbsp;</td>). In the stacked column that would be a blank line,
           so drop cells that hold no control or label (no element children). */
        .form-stack > tbody > tr:has(> td:not([colspan]) + td:not([colspan])) > td:not(:has(*)) {
            display: none;
        }

/* Opt a stacked row out of the fixed column to span the full page width
   (e.g. a multiline description). Label stays above, control fills the width.
   !important because the generic field-row rule above carries :has() specificity. */
.form-stack > tbody > tr.fs-full > td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
    border: 0 !important;
    padding: 3px 0 !important;
}

    .form-stack > tbody > tr.fs-full > td .form-control,
    .form-stack > tbody > tr.fs-full > td textarea {
        width: 100% !important;
    }

        .form-stack > tbody > tr:has(> td:not([colspan]) + td:not([colspan])) > td .form-control,
        .form-stack > tbody > tr:has(> td:not([colspan]) + td:not([colspan])) > td .form-select,
        .form-stack > tbody > tr:has(> td:not([colspan]) + td:not([colspan])) > td input[type="text"],
        .form-stack > tbody > tr:has(> td:not([colspan]) + td:not([colspan])) > td input[type="password"] {
            width: 100% !important;
        }

/* ---------- Page title image ----------
   Titles are generated by titletext.ashx and shown via <asp:Image ID="TitleImage">.
   BS5's img-fluid (unlike BS3 img-responsive) does not set display:block, so
   force block + auto margins to centre it. Also trim the space above it. */
#pageContent img[id$="TitleImage"] {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

#pageContent {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

    /* first table's first row (the title) sits flush to the menu above */
    #pageContent > table:first-child {
        margin-top: 0 !important;
    }

        #pageContent > table:first-child > tbody > tr:first-child > td {
            padding-top: 0 !important;
        }

/* ---------- ViewGrievance detail / update panel ---------- */
.detail-card {
    max-width: 560px;
    margin: 18px auto 0;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

    .detail-card .LabelTitle {
        color: #004080;
        display: block;
        text-align: center;
        margin-bottom: 6px;
    }

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

.LabelStyle {
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}

/* ---------- Vertical rhythm ---------- */
.sp-row > td {
    height: 6px;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
}

#pageContent .gv-nice {
    margin-top: 4px;
    margin-bottom: 8px;
}