/* The theme's heading rule specifies "Ubuntu" with no fallback; without the
   web font loaded, browsers drop to a serif default instead of sans-serif. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Root cause of the mobile "everything is cut off" bug: #root is
   `grid-template-columns: min-content 1fr` (theme's own rule). A bare 1fr
   track's implicit minimum is auto (= its content's min-content size), not
   0 -- so #content never actually shrinks to the viewport, it grows to fit
   its widest descendant (e.g. the wizard stepper's un-wrapped row) instead.
   overflow-x:auto on a descendant (like .wizard-stepper) can't fix this on
   its own; the grid ITEM containing it also needs min-width:0 so it's
   allowed to shrink below that content's natural width in the first place.
   Once this is in place, elements are actually confined to the viewport
   instead of merely having their overflow silently clipped. */
#content {
  min-width: 0;
}

/* Safety net against any single element still pushing the page wider than
   the viewport (a stray fixed-width table, a long unbroken string, etc.) --
   doesn't affect elements that scroll internally on their own (e.g.
   .wizard-stepper's own overflow-x:auto), only stops the outer page itself
   from growing/scrolling sideways. */
body {
  overflow-x: hidden;
}

html {
  font-size: 18px;
}

@media (min-width: 768px) {
  html {
    font-size: 20px;
  }
}

/* Larger base font size and black (not gray) body text across the Portal,
   by explicit instruction. Only .text-muted is targeted directly (buttons/
   badges/icons keep their own intentional colors) -- other gray tones were
   hardcoded per-view and fixed at the source in each .cshtml file instead. */
body {
  color: #000;
}

.text-muted {
  color: #000 !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #007041;
}

/* Site-wide rebrand: the theme's blue accent (primary/info/link color) is
   replaced with DLSU-D's official brand palette (May 2026), so buttons,
   links, and active/focus states render on-brand instead of blue.
   Kept byte-identical to Admin's site.css so both apps share one brand look.
     Primary Green #007041 -- main accent (buttons, active states, links)
     Mid Green     #338D67 -- link hover (a "brighten toward the secondary
                               brand tone" hover, rather than the usual
                               darken-on-hover treatment)
     Light Sage    #ADD1C2 -- soft accent for subtle backgrounds/highlights
   Button hover/active states still darken (standard "pressed" affordance),
   using darker shades computed from Primary Green since the palette itself
   has no darker tone to reuse. */
:root {
  --bs-primary: #007041;
  --bs-primary-rgb: 0, 112, 65;
  --bs-blue: #007041;
  --bs-info: #007041;
  --bs-link-color: #007041;
  --bs-link-color-rgb: 0, 112, 65;
  --bs-link-hover-color: #338D67;
  --bs-link-hover-color-rgb: 51, 141, 103;

  /* Available as brand-* utility classes below; not part of Bootstrap's own
     variable set, so no --bs- prefix. */
  --brand-primary: #007041;
  --brand-mid: #338D67;
  --brand-sage: #ADD1C2;
}

.text-primary, .text-info {
  color: #007041 !important;
}

.bg-primary, .bg-info {
  background-color: #007041 !important;
}

.border-primary, .border-info {
  border-color: #007041 !important;
}

.btn-primary, .btn-info {
  background-color: #007041 !important;
  border-color: #007041 !important;
  color: #fff !important;
}

.btn-primary:hover, .btn-info:hover, .btn-primary:focus, .btn-info:focus {
  background-color: #005c35 !important;
  border-color: #00522f !important;
}

.btn-primary:active, .btn-info:active {
  background-color: #004a2b !important;
  border-color: #004025 !important;
}

.btn-outline-primary, .btn-outline-info {
  color: #007041 !important;
  border-color: #007041 !important;
}

.btn-outline-primary:hover, .btn-outline-info:hover,
.btn-outline-primary:active, .btn-outline-info:active,
.btn-outline-primary:focus, .btn-outline-info:focus {
  background-color: #007041 !important;
  border-color: #007041 !important;
  color: #fff !important;
}

.text-brand-mid {
  color: #338D67 !important;
}

.bg-brand-sage {
  background-color: #ADD1C2 !important;
}

.border-brand-sage {
  border-color: #ADD1C2 !important;
}

/* Header brand: the theme's default .brand-title renders "Admission 2026"
   at 25px on one line -- shrunk to two smaller, centered lines (title +
   "Center for Student Admissions") alongside the DLSU-D seal. !important
   overrides the theme's own display rule for this element. */
.brand-title {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}

.brand-title-main {
  font-size: 14px;
  font-weight: 700;
}

.brand-title-sub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
}

/* Collapsed sidebar (.mn--min on #root): the theme already hides
   .brand-title (the two-line "Admission 2026 / Center for Student
   Admissions" text) in this state, leaving just the seal icon in the
   60px-wide brand box -- kept as the seal logo (not swapped for a "CSA"
   text label), so .brand-img stays visible and .brand-title-mini stays
   unused. */
.brand-title-mini {
  display: none;
}

/* .brand-title above forces display:flex with !important unconditionally,
   which otherwise beats the theme's own .mn--min .brand-title{display:none}
   rule -- match its specificity here so the collapsed state actually wins. */
.mn--min .brand-title {
  display: none !important;
}

/* Sidebar (.mainnav) default expanded width from the theme is 13.75rem
   (220px) -- narrowed site-wide, !important to beat that compiled rule's
   own specificity. */
.mainnav {
  max-width: 200px !important;
  width: 200px !important;
}

/* Collapsed sidebar (.mn--min on #root): the theme's own default is
   3.75rem (60px, or ~75px here since html has a larger base font-size) --
   narrowed to exactly the sidebar's own 48px profile avatar (.mainnav__avatar
   in _Layout.cshtml) so the collapsed rail is only as wide as that icon,
   not wider. !important because the mobile off-canvas state
   (.mn--min.mn--show, <992px) turns out to still need it to reliably beat
   the theme's own same-selector rule. */
.mn--min .mainnav {
  max-width: 48px !important;
  width: 48px !important;
}

a {
  color: #007041;
}

a:hover {
  color: #338D67;
}

/* Checkbox/radio "checked" state (including btn-check-powered toggle
   buttons) uses a background-color under a fixed white checkmark icon --
   that background-color isn't covered by the --bs-primary override above,
   so it still rendered Bootstrap's default blue until overridden here
   directly. */
.form-check-input:checked {
  background-color: #007041 !important;
  border-color: #007041 !important;
}

.form-check-input:focus {
  border-color: #338D67 !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 112, 65, 0.25) !important;
}

.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-info {
  background-color: #007041 !important;
  border-color: #007041 !important;
  color: #fff !important;
}

/* The theme's top .header bar defaults to a dark navy (#25476a), set
   directly (not via a --bs- variable), so it needs its own override. */
.header {
  background-color: #007041 !important;
}

/* Same dark navy (#25476a), same reason -- the active side-nav item's
   highlight is set directly in nifty.css rather than via a --bs- variable. */
.mainnav__inner .mainnav__menu > .nav-item > .nav-link.active {
  background-color: #007041 !important;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Modal-style loading indicator (dimmed backdrop + a floating centered
   card, not a full opaque page) shown while any form is submitting -- login
   included -- via site.js's site-wide submit listener. Forms here are plain
   full-page POST/redirects, not AJAX, so this just needs to stay visible
   until the new page replaces it; no AJAX/fetch plumbing required. */
.portal-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 30, 24, 0.45);
  align-items: center;
  justify-content: center;
}

.portal-loading-overlay.show {
  display: flex;
}

.portal-loading-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 40px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 90vw;
}

.portal-loading-icon {
  width: 80px;
  height: 80px;
  animation: portal-loading-spin 2.2s linear infinite;
  filter: drop-shadow(0 6px 14px rgba(0, 112, 65, 0.18));
}

@keyframes portal-loading-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.portal-loading-title {
  margin-top: 16px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #007041;
}

.portal-loading-subtitle {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #5a6b74;
}

/* Bootstrap's default disabled/readonly text color is too light to read
   comfortably (e.g. the Account Information email field) -- darken it
   site-wide while keeping the light gray background as the "read-only" cue. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  color: #000;
}

/* All enabled text inputs/selects/textareas -- black text, by explicit
   instruction, rather than Bootstrap's default near-black (#212529). */
.form-control,
.form-select,
textarea {
  color: #000;
}

/* Bootstrap's default border (#dee2e6) is too faint to read as an outlined
   field -- darken it site-wide, by explicit instruction. Focus state keeps
   its own green border-color (see .form-control:focus above). */
.form-control,
.form-select {
  border-color: #495057;
}

/* Shared upload-spinner for every .doc-dropzone (Requirements checklist,
   medical certificate widget, etc.) -- one definition here instead of
   duplicating a keyframe animation in each view's own <style> block, the
   way .doc-dropzone's base rules currently are. Swaps in for the upload
   icon while .is-uploading is set, replacing the plain "Uploading..." text
   label as the loading indicator. */
.doc-dropzone-spinner {
  display: none;
  width: 20px;
  height: 20px;
  margin: 0 auto 4px;
  border: 2px solid rgba(0, 112, 65, 0.25);
  border-top-color: #007041;
  border-radius: 50%;
  animation: docDropzoneSpin 0.7s linear infinite;
}

.doc-dropzone.is-uploading .doc-dropzone-icon {
  display: none;
}

.doc-dropzone.is-uploading .doc-dropzone-spinner {
  display: block;
}

@keyframes docDropzoneSpin {
  to {
    transform: rotate(360deg);
  }
}