and legitimately keeps
   its own taller height untouched. */
input.form-control,
select.form-select {
  height: calc(1.5em + 0.75rem + 2px) !important;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  line-height: 1.5;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--nespak-input-bg);
  border-color: var(--nespak-navy);
  box-shadow: 0 0 0 0.2rem rgba(138, 50, 69, 0.15);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: #eef0f2;
}
.form-check-input:checked {
  background-color: var(--nespak-navy);
  border-color: var(--nespak-navy);
}
.form-label,
.field-label {
  font-weight: 500;
  color: var(--nespak-text);
  margin-bottom: 0.3rem;
}
/* Read-only detail values (JobDetails.aspx, AdvertisementDetails.aspx,
   and similar "view" pages) — justified so a longer value (address,
   description) wraps with an even right edge like a printed form
   rather than a ragged one. */
.labeltext {
  display: block;
  text-align: justify;
  color: var(--nespak-text);
}
.form-card {
  background: var(--nespak-surface);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0.5rem 1.5rem rgba(18, 50, 88, 0.1);
  padding: 2rem;
}
.form-card .form-card-title {
  color: var(--nespak-navy);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-bottom: 0.25rem;
  text-align: center;
}
/* ASP.NET validator controls render as plain <span> elements —
   style them to read as Bootstrap's invalid-feedback text. */
.field-error {
  display: inline-block;
  color: #dc3545;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* ---------- Tables / GridView ----------
   Applies Bootstrap table look to asp:GridView output. Pages set
   CssClass="table table-striped table-hover align-middle" on the
   GridView; this covers the rest (header, pager, empty state). */
.table {
  background-color: var(--nespak-surface);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  box-shadow: 0 0.25rem 0.75rem rgba(138, 50, 69, 0.06);
  width: 100%;
}
/* Columns size to fit their own content (table-layout:auto, the
   default) rather than an even/forced split — a short "Job ID" column
   stays narrow, "Qualification Required" gets the room it needs, and
   all columns stay visible without being squeezed. Many cells still
   carry a legacy pixel ItemStyle-Width/HeaderStyle-Width (inline
   style, so only !important can beat it) that no longer matches the
   new font/padding; freeing that up lets auto-layout size each column
   to its real content instead of an arbitrary old number.
   Deliberately width:auto, not 100% — forcing a table to fill its
   container makes the browser distribute any leftover space
   proportionally across every column, which inflates a checkbox or
   button column (whose content barely needs 40-90px) right along
   with the wide ones. auto keeps the table exactly as wide as its
   content actually needs; max-width guards against overflow on a
   very narrow screen where auto still isn't enough. */
.table-responsive .table {
  table-layout: auto;
  /* !important: dozens of pages still set Width="100%" (or a fixed
     px value) on the asp:GridView itself, which ASP.NET renders as an
     inline style="width:..." directly on this <table> — inline styles
     always beat a class selector regardless of specificity, so without
     !important the table was silently pinned to the container's exact
     width no matter what this rule said. That, combined with
     overflow-wrap:break-word (see below — since fixed), is what let a
     narrow phone screen crush every column down to fit instead of
     overflowing, which is what made the grid unscrollable. */
  width: auto !important;
  max-width: 100%;
}
.table-responsive .table th[style*="width"],
.table-responsive .table td[style*="width"] {
  width: auto !important;
}
/* Every header AND data cell wraps at word boundaries rather than
   forcing the column wide enough for one unbroken line — that's what
   actually keeps a GridView within a sane width on both a normal
   screen and an A4-printed page: a column sizes to a comfortable
   reading width and a long value (address, qualification, full name)
   wraps onto a second line instead of pushing the whole table wider.
   overflow-wrap left at its normal/initial value — deliberately NOT
   break-word, and definitely not anywhere/break-all. Those all permit
   splitting in the middle of a single word whenever it helps a column
   fit, and "helps a column fit" turns out to mean *constantly* on a
   phone: with 7-9 columns sharing a ~375px screen, every column's
   available share is narrower than an ordinary word, so break-word's
   "last resort" is the *normal* case there, not a rare one — that's
   what was crushing "Division" into "Divisio"/"n" on two lines. With
   wrapping restricted to real word boundaries, a column's true floor
   is the width of its single longest word (e.g. "GEOENVIRONMENTAL"),
   which is still small — short/medium text wraps onto 2-3 lines and
   stays readable and compact, and only a column whose floor is
   genuinely wider than the screen (a long unbroken code/URL, or too
   many columns at once) pushes the table past max-width below and
   gives .table-responsive something real to scroll — which is the
   correct trigger for that scrollbar, not an accident of this rule. */
.table-responsive .table th,
.table-responsive .table td {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  font-size: 0.9rem;
  padding: 0.65rem 0.75rem;
  /* Every GridView's own CssClass already includes Bootstrap's
     "align-middle" utility — but it's set on the <table> element,
     and vertical-align only ever affects content when applied to
     the <td>/<th> itself, so that class was silently a no-op. This
     is what actually centers a short action button against a taller
     neighboring cell whose text wrapped to 2-3 lines, keeping every
     button in a row levelled with its neighbors instead of pinned to
     the top looking disconnected from the rest of that row. */
  vertical-align: middle;
}
/* The rule above only reaches the <td>/<th> itself — but almost every
   GridView cell's actual text sits one level deeper, in an
   <asp:Label CssClass="lblclass"/"lblclass1"/"lblclasshead"/etc.>, and
   nearly every page still carries its OWN local <style> block defining
   that class with "word-wrap: break-word" (sometimes "word-break:
   break-word" too) — a relic of the pre-redesign layout, copy-pasted
   across dozens of pages under dozens of slightly different names
   (lblclass, lblclass1, lblclass2, lblclasshead, lblclasswrap,
   headerclass1, ...). overflow-wrap/word-break are inherited
   properties, so without this rule the label would normally just
   inherit "normal" from its parent <td> above — but a page's own rule
   sets it explicitly ON the label itself, and an element's own
   explicit value always wins over an inherited one regardless of
   which rule is more specific. That's what let the exact same
   mid-word crush this file already fixed at the cell level keep
   happening: not because the fix above was wrong, but because it
   never reached this inner element. Targeting every descendant of a
   grid cell (not a specific class name) catches all of those variants
   at once, including ones on pages not yet audited by name, and its
   two-class-plus-element specificity already outranks any single
   page-level class rule — !important on top is only extra insurance,
   consistent with every other legacy-override rule in this file.
   Deliberately NOT touching white-space here — none of those
   page-level classes set it, so it already inherits "normal" from the
   cell correctly on its own, and forcing it with !important would
   also flatten the .btn rule just below, which needs white-space:
   nowrap on exactly this same kind of element to keep a button label
   from wrapping mid-word. */
.table-responsive .table th *,
.table-responsive .table td * {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
/* Action buttons ("View", "Edit", "Apply"...) inside a grid column
   keep their label on one line — a single short word must never wrap
   mid-button — and get whatever width they actually need to show it
   without cramping. Some HyperLinkField columns still carry a
   leftover ControlStyle-Width/ItemStyle-Width (inline style, e.g.
   50-80px) sized for the old design that's now too narrow for the
   pill-button padding, so !important reclaims it. The small margin
   keeps a button from ever visually touching the cell edge or a
   neighboring column. */
.table-responsive .table .btn {
  white-space: nowrap;
  width: auto !important;
  min-width: max-content;
  margin: 0.1rem 0.15rem 0.1rem 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.8rem;
}
.table-responsive .table .btn:last-child {
  margin-right: 0;
}
/* A "select row" checkbox column whose CheckBox controls are all
   Visible="false" (a common pattern in this codebase — the column
   exists for code-behind logic but was never meant to be seen) still
   renders an empty <th>/<td> with the same padding as every other
   cell, reading as a wide blank stripe down the left of the grid.
   :empty only matches a cell with truly no content (no text, no
   child element), so a genuinely blank cell collapses to a sliver
   while every real cell keeps its normal, readable padding. */
.table-responsive .table th:empty,
.table-responsive .table td:empty {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  width: 1%;
}
/* On a desktop-width screen the container is almost always wide
   enough for the auto-sized, wrapping table to fit outright, so no
   scrollbar appears. On a narrow phone screen, a table with many
   columns legitimately can't fit no matter how it's sized —
   .table-responsive (Bootstrap default overflow-x:auto) lets it
   scroll there instead of wrapping every cell into an unreadable
   stack. That's the intended difference: horizontal scroll is
   expected on mobile, not on PC — and print gets the same benefit,
   since wrapped text fits the A4 page width instead of running off
   the printable area. */
/* Momentum/native feel for the horizontal drag on touch browsers
   (older iOS in particular needs this explicitly) and stop that drag
   from also triggering the browser's back/forward swipe. Not gated to
   a mobile media query — harmless on any pointer type, and touch
   users on a tablet/2-in-1 at a wider breakpoint benefit too. */
/* Many pages (Advertisements.aspx among them) still lay out their
   whole content area with a legacy <table width="100%"><tr><td>...
   wrapper around the GridView — plain HTML, no CSS class, so nothing
   above touches it. A table cell in a browser's (very old, CSS2.1)
   auto-layout algorithm sizes itself to fit the full natural width of
   whatever's inside it, and critically that algorithm was never
   taught about overflow:auto — it doesn't treat a scrollable
   descendant as "capped," it just measures its unclipped content and
   grows the cell (and the whole outer table with it) to fit. So this
   div's own overflow-x:auto never actually got a chance to fire: the
   ancestor <td> just expanded around it instead, dragging the whole
   page wider (caught by html/body's overflow-x:hidden, so it read as
   "cut off with a dead scrollbar" rather than "page also scrolls").
   width:1px + min-width:100% is the standard fix for exactly this:
   an explicit width (however tiny) makes this div stop contributing
   its content's full size to the table cell's sizing calculation, so
   the cell finally settles at its real 100%-of-container size instead
   of ballooning — then min-width:100% (a percentage, resolved AFTER
   that sizing is settled) expands this div back out to fill whatever
   width the now correctly-sized cell actually gives it, so nothing
   looks narrower on screen. With this the div is finally the thing
   genuinely constraining the GridView's width, so overflow-x:auto has
   real overflow to clip and the drag actually moves something. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  width: 1px;
  min-width: 100%;
}
/* Classic asp:GridView renders header cells as plain <tr><th> with no
   <thead> wrapper, so a descendant selector anchored on thead/tbody
   never matches — target every <th> inside .table directly instead.
   !important because many GridViews still carry per-column
   HeaderStyle-CssClass values (lblclasshead, headerclass1, etc.) from
   the legacy design; those must never be able to win the background/
   text-color fight and make the header unreadable again. */
.table th {
  background-color: var(--nespak-header-maroon-light) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: none;
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(138, 50, 69, 0.04);
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(138, 50, 69, 0.08);
}
.table td, .table th {
  vertical-align: middle;
}
/* GridView pager row (rendered as <tr><td colspan>) */
.table .gridview-pager,
.table tr:has(> td > table) td {
  background-color: var(--nespak-bg);
  text-align: center;
  padding: 0.5rem;
}
.table a {
  font-weight: 500;
}

/* ---------- Legacy layout overrides ----------
   Many content pages still wrap their markup in the pre-redesign
   .formbg/.titlebg/.label/.txtbox grid (float + fixed-width based).
   That system fights the new Bootstrap layout: dark-on-dark headings
   that read as invisible, uncleared floats that let the footer ride
   up over the GridView, and float/fixed-width label+input pairs that
   no longer line up now controls are full-width form-control/form-select.
   Neutralizing them here fixes every page still using this markup
   without rewriting each page's structure. */
/* Roughly 60 pages (Advertisements.aspx, Division.aspx, every
   ViewXxxApplicants.aspx, etc.) still wrap their whole page body in
   <div id="container">, left over from the pre-Bootstrap template.
   layout.css (loaded before this file, still linked from every master
   page for other legacy compatibility) pins that ID to a hardcoded
   width:960px + margin:0 auto — on any screen narrower than 960px
   that's wider than the viewport itself, so it silently sliced the
   whole page (GridView included) down to whatever fit in the visible
   half, with the rest sitting off past the right edge. That's the
   actual "half the grid is missing and I can't scroll or zoom to it"
   bug: it isn't the GridView failing to scroll, it's this ancestor
   forcing the entire page wider than the phone screen, and html/body's
   overflow-x:hidden (this file, above) then blocks any way to pan or
   swipe to the clipped portion — zooming can't reveal it either, since
   overflow:hidden clips regardless of zoom level. #id selectors always
   outrank a .class rule, so nothing elsewhere in this file was able to
   touch it without matching the id directly. */
#container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* Deliberately not touching padding — layout.css's own #container
     rule only sets vertical padding (30px top/bottom, 0 left/right),
     which doesn't contribute to the horizontal-overflow bug this is
     fixing, so it's left as the existing page spacing. */
}
.formbg {
  float: none;
  width: 100%;
  max-width: 100%;
  background-color: var(--nespak-surface);
  border: none;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0.25rem 0.75rem rgba(138, 50, 69, 0.08);
  padding: 1.5rem;
  /* flow-root contains any stray floated child (old .label/.txtbox
     pattern, neutralized below) the same way overflow:auto would,
     but never creates a scrollable box of its own — content that's
     taller/wider than expected just flows into the page's one
     scrollbar instead of getting its own nested slider. */
  display: flow-root;
  box-sizing: border-box;
}
.titlebg,
.titlebg1 {
  background-color: transparent;
  color: var(--nespak-navy);
  height: auto;
  min-height: 0;
  padding: 0.25rem 0 0.75rem;
  border-bottom: 2px solid var(--nespak-gold);
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
}
.titlebg *,
.titlebg1 * {
  color: var(--nespak-navy) !important;
}
#form,
.center {
  display: flow-root;
}
.label {
  float: none;
  width: auto;
  text-align: left;
  color: var(--nespak-text);
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0 0 0.3rem;
  padding: 0;
  display: block;
}
.txtbox {
  float: none;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 0 1rem;
  padding: 0;
  display: block;
}
.formbuttonwidth {
  margin-left: 0;
  padding: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.formbuttonwidth > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.asterik {
  padding: 0.25rem 0;
}
/* Search-panel wrapper. Nearly every search page defines its own local
   .table1 with a leftover fixed pixel width (530-765px) and a large
   margin-left (100-210px) from the pre-redesign layout. That shoves the
   search box off-center and caps it far narrower than the Bootstrap
   row/col grid now inside it needs, so it visually detaches from the
   full-width GridView/buttons below — exactly the "not aligned, buttons
   outside the panel" symptom. !important because each page's own
   later-loaded <style> block would otherwise win on equal specificity. */
.table1 {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: none !important;
  background-color: var(--nespak-surface);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0.25rem 0.75rem rgba(138, 50, 69, 0.08);
  padding: 1.25rem;
  box-sizing: border-box;
  /* Reliable, consistent gap before whatever comes next (usually a
     GridView) — pages used to lean on a couple of manual <br/> tags
     for this, which is inconsistent and easy to lose track of. */
  margin-bottom: 1.5rem;
}
/* Several pages (e.g. Advertisements.aspx) still carry their own local
   <style> block with a leftover fixed-height .table1 rule (a relic of
   the old 2-column float layout, e.g. height:50px). theme.css never set
   height before, so that stray rule won unopposed and squashed the
   search panel below its content's real height, making the overflow
   visually collide with the GridView underneath. !important above
   guarantees this box always sizes to its actual content instead. */

/* ---------- Footer ---------- */
.footer-nespak {
  background: var(--nespak-navy-darker);
  color: rgba(255, 255, 255, 0.75);
  padding: 2rem 0;
  margin-top: 3rem;
}
.footer-nespak a {
  color: rgba(255, 255, 255, 0.85);
}
.footer-nespak a:hover {
  color: var(--nespak-gold);
}
.footer-nespak p {
  margin-bottom: 0.25rem;
}

/* ---------- Utility ---------- */
.section-heading {
  color: var(--nespak-navy);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-align: center;
}
.text-gold {
  color: var(--nespak-gold);
}
.bg-navy {
  background-color: var(--nespak-navy);
}

/* ---------- Print ----------
   Applies to every page (Print.aspx, letter/appointment templates,
   and any GridView report someone prints via Ctrl+P). Several pages
   swap document.body.innerHTML for just one div's content before
   calling window.print() (see printDiv()/printContent() in various
   pages' inline scripts) — for those the navbar/footer are already
   gone from the DOM by the time this fires, but this still covers
   the common case of printing a normal page as-is, and guarantees a
   correct A4 page size + no leftover horizontal scrollbar either way. */
@media print {
  @page {
    size: A4;
    margin: 14mm 12mm;
  }
  html, body {
    width: 100% !important;
    overflow-x: visible !important;
    background: #ffffff !important;
  }
  /* Screen-only chrome: never belongs on a printed page */
  .navbar,
  .footer-nespak,
  .navbar-toggler,
  .btn,
  .formbuttonwidth,
  .pagination,
  .accent-rule {
    display: none !important;
  }
  /* A GridView's on-screen horizontal scrollbar is meaningless on
     paper — let the table print at its natural width instead of
     being clipped to a scrollable box that print can't scroll. */
  .table-responsive {
    overflow-x: visible !important;
    width: auto !important;
  }
  .container,
  .main-content,
  .form-card,
  .formbg,
  div[id*="divprint" i] {
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  /* Print/letter templates (appointment letters, application printouts)
     carry a fixed pixel width from their MS-Word-style source markup
     (900-973px) sized for screen viewing — cap it to the printable
     page width instead of letting it run off the edge of A4 paper. */
  div[id*="divprint" i] [style*="width:"] {
    max-width: 100% !important;
  }
  .table {
    box-shadow: none !important;
  }
  a[href]:after {
    content: "" !important;
  }
}