/* ==========================================================================
   GRI Ph.D. Admission Portal — Core Theme
   Modern flat/minimal refresh, built on the existing Bootstrap 2 markup.
   Brand colors switched to a plain professional deep-maroon/charcoal
   palette (no swatch image supplied - one of four plain "professional"
   options offered, this one picked), replacing a brief deep-forest-
   green/slate palette tried just before it, and a deep-navy/bronze one
   before that (and, further back, a blue/turquoise palette, an earlier
   maroon/charcoal/sage palette, an olive/green/yellow palette, and a
   teal-blue family) - every color below still flows from the handful of
   --brand/--info/etc. variables in the :root block just underneath this
   comment, so that one block is the only place that ever needs to
   change again for a future re-theme.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
	/* Plain professional palette (deep maroon/burgundy, no swatch image -
	   one of four plain "professional" options offered, this one
	   picked) - a traditional academic look common on Indian university
	   portals. --brand is the main identity colour (header bar, active
	   sidebar item, links, primary buttons); --brand-dark/--brand-darker
	   are deeper shades of the same maroon, used for text/icons that
	   need to read clearly on a light background; --brand-light is a
	   very pale, barely-there warm pink-grey tint for banners/
	   highlighted rows. --info is a slate charcoal, giving a second,
	   clearly distinct "institutional" accent colour without competing
	   with the maroon brand colour. --warning stays an ordinary amber,
	   and --success/--danger stay ordinary traffic-light green/red,
	   since those colours carry a universal meaning (saved vs. error)
	   that shouldn't be tied to the branding - this matters even more
	   with a maroon brand colour, since --danger is also a reddish tone
	   and the two need to stay visibly distinct from each other. */
	--brand:            #7a1f2b;
	--brand-dark:       #57161e;
	--brand-darker:     #360d13;
	--brand-light:      #f1e8e9;
	/* --brand-gradient used to be an actual diagonal gradient (lighter
	   maroon at the top-left fading to a near-black maroon at the
	   bottom-right). Flattened to a plain solid colour here, by request
	   - every place that uses --brand-gradient (header bar, active menu
	   item, buttons, etc.) just reads this one variable, so setting it
	   to var(--brand) instead of a linear-gradient(...) turns all of
	   them solid at once without editing each one individually. */
	--brand-gradient:   var(--brand);

	--success:          #1fa96b;
	--success-dark:     #178a56;
	--danger:           #e0463f;
	--danger-dark:      #c33832;
	--warning:          #e0a527;
	--info:             #3f4a52;

	--ink:              #1c2b34;
	--ink-soft:         #5b6b74;
	--paper:            #f4f7f9;
	--card:             #ffffff;
	--border:           #e2e8ec;

	--radius-sm:        8px;
	--radius:           14px;
	--radius-lg:        20px;
	--shadow-sm:        0 1px 3px rgba(22,43,54,.08);
	--shadow:           0 8px 28px rgba(22,43,54,.10);
	--shadow-lg:        0 18px 45px rgba(22,43,54,.14);
}

*{ box-sizing: border-box; }

html, body{
	background: var(--paper);
	color: var(--ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a{ color: var(--brand-dark); }
a:hover{ color: var(--brand-darker); }

h1, h2, h3, h4, h5, h6{
	font-family: 'Inter', sans-serif;
	color: var(--ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------------
   Page shell
   ------------------------------------------------------------------------ */
.container{
	width: 960px;
	max-width: 96%;
	margin: 28px auto;
	padding: 0 0 24px 0;
	background: var(--card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
	overflow: hidden;

	-webkit-box-shadow: var(--shadow-lg);
	-moz-box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------------------
   Top banner (#header) + session title
   ------------------------------------------------------------------------ */
#header{
	height: auto;
	/* Slimmed down (by request) from 92px/14px padding - the banner's
	   actual height now mostly follows its smaller logo image and
	   tighter text lines below, instead of being propped up by extra
	   empty space above and below them. */
	min-height: 56px;
	margin-bottom: 0;
	padding: 8px 28px;
	background: var(--brand-gradient);
	background-image: var(--brand-gradient);
	border: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Was 3px between three stacked lines (logo, two caption lines, session
	   line); now that the two caption lines are one, this is the gap
	   between just that caption line and the session line below it --
	   tightened further since there's only the one gap left. */
	gap: 1px;
	text-align: center;
}

#header img{
	/* Logo image (img/header.png) left untouched - just displayed
	   smaller, as part of slimming the banner down. max-height is the
	   actual constraint that shrinks it (the image is very wide and
	   short, so width alone wouldn't reliably control its height);
	   max-width is kept as a loose outer cap so it still never
	   overflows a narrow screen. */
	max-width: 70%;
	max-height: 38px;
	width: auto;
	height: auto;
	display: block;
}

/* The accreditation line (Ministry of Education + NAAC grade, combined onto
   one line -- see header.php) that sits between the institute name
   (img/header.png) and the admission-cycle line below. Plain text, not
   baked into the header image, so it can be edited here directly instead
   of needing a new banner graphic. */
.header-caption{
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	/* Slightly smaller/tighter (by request, as part of slimming the
	   whole banner down) - was 12.5px / line-height 1.2. */
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.1;
	margin: 0;
	text-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.session_header{
	color: #ffffff;
	/* Slightly smaller/tighter (by request, as part of slimming the
	   whole banner down) - was 17px / margin-top 2px. */
	font-size: 15px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding-bottom: 0;
	margin: 1px 0 0 0;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* Secondary bar used on some pages */
#barheader{
	height: auto;
	min-height: 30px;
	/* .main_section (this bar's parent) carries its own 28px side padding,
	   so margin:0 alone still leaves a 28px gap on each side versus #header
	   (the blue title banner), which sits outside .main_section and isn't
	   padded. Pull the bar out with a negative margin equal to that padding,
	   then add the same amount back as this bar's own padding (matching
	   #header's 16px 28px) so it reads flush with the banner above it
	   instead of inset from it. */
	margin: 20px -28px;
	padding: 10px 28px;
	background: var(--brand-light);
	background-image: none;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	border-bottom-width: 1px;
}
/* Several pages hard-code white text (style="color:#FFFFFF") on this bar
   from when it had a dark background — force readable text now that the
   bar is light, regardless of what color the page tries to set inline. */
#barheader,
#barheader label,
#barheader a,
#barheader span,
#barheader b,
#barheader strong{
	color: var(--brand-darker) !important;
}
#barheader a{
	font-weight: 600;
	text-decoration: none;
}
#barheader a:hover{ text-decoration: underline; }
#barheader img{ vertical-align: middle; }

/* Logout icon on the candidate name bar -- replaces the old img/log.png
   circular power-button icon with an inline stroke "log out" icon (door +
   arrow) matching the rest of the UI's icon style, with a hover state. */
#barheader .logout-icon{
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-left: 6px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357161e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22/%3E%3Cpolyline%20points%3D%2216%2017%2021%2012%2016%207%22/%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%229%22%20y2%3D%2212%22/%3E%3C/svg%3E") no-repeat center / 18px 18px;
	transition: transform .15s ease;
}
#barheader a:hover .logout-icon{
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23360d13%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22/%3E%3Cpolyline%20points%3D%2216%2017%2021%2012%2016%207%22/%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%229%22%20y2%3D%2212%22/%3E%3C/svg%3E") no-repeat center / 18px 18px;
	transform: translateX(2px);
}

.barheader h4{
	color: var(--brand-darker);
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.main_header{
	height: auto;
	background: var(--brand-gradient);
	text-align: center;
	padding: 14px 16px;
	color: #fff;
	font: 600 1.15em 'Inter', sans-serif;
	border: none;
	border-radius: var(--radius-sm);
	margin: 20px 28px;
	box-shadow: var(--shadow-sm);
}

.main_footer{
	display: block;
	width: 100%;
	float: none;
	clear: both;
	border-top: 1px solid var(--border);
	margin: 24px 0 0 0;
	padding: 16px 0 0 0;
	height: auto;
	text-align: center;
	color: var(--ink-soft);
	font-size: 13px;
}

/* Some pages float form panels with inline styles and no clearfix
   (e.g. registration.php) — force the wrapper to contain them so the
   footer always lands below the content instead of beside it. */
.main_section::after{
	content: "";
	display: table;
	clear: both;
}

/* ------------------------------------------------------------------------
   Content wrappers
   ------------------------------------------------------------------------ */
.main_section{
	height: auto;
	padding: 0 28px;
}

.first_main{
	width: 100%;
	height: auto;
	margin: 0;
	float: none;
}

.first_main img{
	height: 80px;
	width: 80px;
	margin: 24px auto 12px auto;
	display: block;
	opacity: 1;
}
.first_main h1{
	color: var(--ink);
	text-align: center;
	font-size: 26px;
}

/* Card-style widgets / bootstrap "well" panels */
.widget,
.well,
.hero-unit{
	width: 380px;
	max-width: 100%;
	height: auto;
	margin: 24px auto;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 28px 26px;
}
/* The Declaration box (Final Submission page) is marked up with an inline
   style="height:150px" left over from a fixed old layout -- once its two
   agreement bullet points wrap to more lines than that, the text overflows
   the box and lands on top of whatever follows (the page footer). Inline
   styles beat the .hero-unit rule above, so only !important here can win;
   force it back to auto so a hard-coded pixel height here can never clip
   its own content again. */
.hero-unit.agreement{
	height: auto !important;
	/* .hero-unit's base width:380px makes this read as a narrow, almost
	   square card -- fine for a short blurb, but the two declaration
	   bullets plus the checkbox make it feel cramped and boxed-in.
	   Stretch it out to match the width of the tables/banners around it
	   (94.5%, the same figure used elsewhere on this page) so it reads
	   as a proper wide rectangle instead. */
	width: 94.5%;
	max-width: 900px;
}
/* Payment Details page: the "Before proceeding to online payment..."
   instructions box (#inform) is the same .hero-unit base, so it also
   inherits the 380px card width -- here that squeezes three bulleted
   paragraphs plus the payment-cost line and confirmation checkbox into a
   narrow column that sits off to one side of the page with a lot of
   empty space next to it. Same treatment as .hero-unit.agreement above:
   stretch it to the page's standard content width instead. */
#inform{
	width: 94.5%;
	max-width: 900px;
}
.widget label,
.well label{
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	margin: 3px 0;
	font-family: 'Inter', sans-serif;
	display: inline-block;
}
.widget center label,
.well center label{
	font-size: 18px;
	font-weight: 700;
	color: var(--brand-darker);
	margin-bottom: 10px;
	display: block;
}

#box{
	width: 90%;
	max-width: 900px;
	height: auto;
	margin: 0 auto;
}

/* ------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */
.nav.nav-list{
	background: transparent;
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
.nav.nav-list > li{
	border: none;
	padding: 4px 0;
}
.nav-list > li > a{ padding: 0; }

/* Address blocks (permanent/communication) build each row as label text +
   a run of   + an input, relying on nbsp width for spacing -- fragile
   and font-dependent (and `gap` isn't safe to rely on across browsers here).
   Force a real, consistent gap with explicit margins instead. */
#paddr .nav-list > li,
#com_addr .nav-list > li{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
#paddr .nav-list > li input,
#paddr .nav-list > li select,
#com_addr .nav-list > li input,
#com_addr .nav-list > li select{
	margin-left: 16px !important;
}
#paddr .nav-list > li font,
#com_addr .nav-list > li font{
	margin-left: 10px;
	display: inline-block;
}

/* Gutter between the Permanent Address / Communication Address columns so
   they don't crowd the divider between the two table cells. */
#paddr{ padding-right: 22px; padding-left: 12px; }
#com_addr{ padding-left: 22px; }
td:has(> #paddr){ padding-right: 26px; }
td:has(> #com_addr){ padding-left: 26px; }

/* The original markup pulls this list flush left with an inline
   margin-left:-15px, so labels (Address, District, State...) sit right
   against the panel's own edge. Cancel that and give real breathing room. */
#paddr .nav-list,
#com_addr .nav-list{
	margin-left: 0 !important;
	padding-left: 6px !important;
}

/* id="day" is reused, unrelated, on two different pages:
   1) The community-certificate date row, where it only has class="span1"
      (46px, meant for short single inputs) with no inline width like its
      month/year siblings have -- too narrow to show "01" plus the arrow,
      so it rendered as an empty-looking sliver.
   2) The registration page's own Date of Birth "Day" dropdown, which DOES
      set its own inline width:100px -- but this rule used !important, so
      it was overriding that inline width down to a narrower box, which
      then clipped its "Date" placeholder text (see registration.php).
   100px comfortably fits both: "01".."31" in case (1), same as the
   registration page's own intended width in case (2). */
select#day{ width: 100px !important; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="file"],
select,
textarea{
	font-family: 'Inter', sans-serif;
	background: var(--paper);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 9px 12px;
	color: var(--ink);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
	width: 100%;
	max-width: 100%;
}
/* Bootstrap 2 hard-codes "select, input[type=file] { height:30px;
   line-height:30px }". input[type="file"] already gets its own override
   further down for the same reason - <select> needs the identical fix
   here: that fixed 30px height left less than a full line of room once
   this redesign's own padding (9px top+bottom = 18px) was added on top
   of it, so every dropdown on every page (Date of birth, Discipline,
   State, Month, Year, and so on) was rendering with the tops of its
   letters clipped off, not just cosmetically squashed. */
select{
	height: auto !important;
	line-height: normal !important;
}
/* Bootstrap 2 ALSO hard-codes a fixed height on ordinary text-style
   inputs - "input[type=text], input[type=password], ... { height:20px;
   padding:4px 6px; line-height:20px }" - a smaller fixed box than
   select's, so this redesign's own 9px top+bottom padding above left
   even less room: with box-sizing:border-box, 20px of forced height
   minus 18px of padding minus the 1.5px border barely leaves space for
   a single line of text. Until now, the ONLY thing rescuing a text
   input from this was happening to also carry one of the old
   input.span1/span2/span3 classes further down this file, which resets
   height back to auto as a side effect of resetting width - any input
   WITHOUT one of those classes (for example, the small "Initial" box
   next to Name on the Profile and Registration pages, which is only
   ever given a custom inline width, no span class) stayed squashed and
   visibly out of step with its neighbours. Fixing it here, the same way
   as <select> above, fixes it everywhere at once instead of requiring
   every such field to remember to add a span class it doesn't actually
   want the WIDTH from. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"]{
	height: auto !important;
	line-height: normal !important;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus{
	border-color: var(--brand);
	background: #fff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(47,143,179,.15);
}

/* ------------------------------------------------------------------------
   File inputs (document/photo uploads): re-skin the native "Choose File"
   button to match the brand instead of the default grey OS button.
   ------------------------------------------------------------------------ */
input[type="file"]{
	padding: 6px;
	cursor: pointer;
	/* The upload table's middle column can otherwise get squeezed down by
	   the browser's table auto-layout (the label column's wrapping text
	   crowds it out), clipping the "Choose File" button so it looks like
	   it disappeared. Give the input itself a floor width so the button
	   always has room. NOTE: deliberately no overflow:hidden here -- that
	   clipped a sliver off the button itself in testing. */
	min-width: 340px;
	/* Bootstrap hard-codes "select, input[type=file] { height:30px;
	   line-height:30px }" -- too short for the bigger pill button, whose
	   bottom was getting flat-clipped by that fixed 30px box. Override it. */
	height: auto !important;
	line-height: normal !important;
}
input[type="file"]:focus{
	border-color: var(--brand);
	background: #fff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(47,143,179,.15);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	/* Cloud-upload icon (inline SVG, no extra request) as a background
	   layer alongside the brand gradient -- ::file-selector-button can't
	   take ::before/::after in most browsers, so this is how an icon gets
	   into a still-native, fully-functional file button. */
	background:
		url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2018a4.6%204.4%200%200%201-1.567-8.7A6%206%200%200%201%2015.9%206.7%203.7%203.7%200%200%201%2017.5%2014%22/%3E%3Cpath%20d%3D%22M12%2012v7%22/%3E%3Cpath%20d%3D%22m9%2015%203-3%203%203%22/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px,
		var(--brand-gradient);
	border: none;
	border-radius: 999px;
	padding: 12px 22px 12px 40px;
	margin-right: 12px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	box-shadow: 0 4px 12px rgba(22,80,106,.25);
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{
	background:
		url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2018a4.6%204.4%200%200%201-1.567-8.7A6%206%200%200%201%2015.9%206.7%203.7%203.7%200%200%201%2017.5%2014%22/%3E%3Cpath%20d%3D%22M12%2012v7%22/%3E%3Cpath%20d%3D%22m9%2015%203-3%203%203%22/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px,
		var(--brand-dark);
	box-shadow: 0 6px 16px rgba(31,109,140,.35);
	transform: translateY(-1px);
}
input[type="file"]::file-selector-button:active,
input[type="file"]::-webkit-file-upload-button:active{
	transform: translateY(0);
}
/* Force the table column holding the file input to shrink-to-fit instead
   of being squeezed by the wider label column next to it (the classic
   "width:1%" table trick: this column takes exactly what its content
   needs, everything else is absorbed by the other columns). */
.table td:has(> input[type="file"]){
	width: 1%;
	white-space: nowrap;
}

/* ------------------------------------------------------------------------
   Per-file "Upload" button (Upload Documents page): its own table column
   (label | choose-file | Upload | preview), so a single document can be
   uploaded on its own without needing the combined "Save and Continue"
   submit. Was originally squeezed inline next to "Choose File", which
   under the file-input cell's forced width:1%/white-space:nowrap (see
   ".table td:has(> input[type=file])" below) pushed rows wider than the
   table and let the button get clipped or overlap the preview column on
   wide screens -- giving it its own column sidesteps that entirely, since
   that nowrap rule only targets the cell that directly holds the file
   input. Styled as a smaller pill so it reads as a secondary action next
   to the file input's own brand-gradient "Choose File" button.
   ------------------------------------------------------------------------ */
.table td:has(> center > .per-file-upload-btn){
	width: 1%;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
}
/* .btn.per-file-upload-btn (not just .per-file-upload-btn): the markup
   gives this button both classes ("btn per-file-upload-btn"), and the
   plain .btn rule further down this file is a same-specificity class
   selector that comes AFTER this one in source order -- so on a tie,
   .btn's own color/background/border/padding were silently winning and
   this block's styling never actually rendered. Pairing both classes in
   the selector raises this rule's specificity above plain .btn so it
   reliably wins regardless of source order. */
.btn.per-file-upload-btn{
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	/* Was outlined in the same teal used for links/headers elsewhere on the
	   page, which made it easy to miss as its own action next to the
	   brand-gradient "Choose File" button beside it. Recolored to the
	   theme's green (--success, the same green as the "Save and Continue"
	   buttons) per request, so "Upload" reads as its own distinct,
	   go-ahead action. */
	color: var(--success-dark);
	background: #fff;
	border: 1.5px solid var(--success);
	border-radius: 999px;
	padding: 9px 18px;
	cursor: pointer;
	vertical-align: middle;
	box-shadow: none;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn.per-file-upload-btn:hover{
	background: var(--success);
	color: #fff;
	box-shadow: 0 4px 12px rgba(31,169,107,.25);
	transform: translateY(-1px);
}
.btn.per-file-upload-btn:active{ transform: translateY(0); }
.btn.per-file-upload-btn:disabled{
	opacity: .65;
	cursor: default;
	transform: none;
	box-shadow: none;
}
@media (max-width: 700px){
	/* Below this width the label/preview columns already crowd the row --
	   let this column's pill shrink to a tighter, still-tappable size
	   rather than forcing horizontal scroll. */
	.btn.per-file-upload-btn{ padding: 8px 14px; font-size: 12px; }
}

/* Bootstrap 2 grid-width inputs keep their column widths but get the new skin */
input.span1, input.span2, input.span3,
select.span1, select.span2, select.span3{
	height: auto;
	width: auto;
}
input.span1, select.span1{ width: 46px; }
input.span2, select.span2{ width: 126px; }
input.span3, select.span3{ width: 206px; }
@media (max-width: 480px){
	input.span1, select.span1,
	input.span2, select.span2,
	input.span3, select.span3{ width: 100%; max-width: 260px; }
}

.radio.inline, .checkbox.inline,
.inline.radio, .inline.checkbox{
	color: var(--ink-soft);
	font-size: 13px;
}

/* ------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.btn{
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--border);
	background: var(--card);
	background-image: none;
	color: var(--ink);
	padding: 9px 18px;
	box-shadow: none;
	text-shadow: none;
	transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
	color: var(--ink);
}
.btn:active{ transform: translateY(0); }

.btn-primary,
.btn-primary:hover{
	background: var(--brand-gradient);
	background-image: var(--brand-gradient);
	border-color: transparent;
	color: #fff;
}
.btn-info,
.btn-info:hover,
.alert.btn-info{
	background: var(--info);
	background-image: none;
	border-color: transparent;
	color: #fff;
}
.btn-success,
.btn-success:hover{
	background: var(--success);
	background-image: none;
	border-color: transparent;
	color: #fff;
}
.btn-danger,
.btn-danger:hover{
	background: var(--danger);
	background-image: none;
	border-color: transparent;
	color: #fff;
}
.btn-warning,
.btn-warning:hover{
	background: var(--warning);
	background-image: none;
	border-color: transparent;
	color: #fff;
}
.btn-link{
	background: transparent;
	border: none;
	color: var(--brand-dark);
	box-shadow: none;
}
.btn-link:hover{ text-decoration: underline; background: transparent; box-shadow: none; }

/* ------------------------------------------------------------------------
   Alerts / labels / tooltips
   ------------------------------------------------------------------------ */
.alert{
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	padding: 12px 16px;
	font-size: 13.5px;
	/* several pages hard-code width/height/margin-left inline (legacy
	   fixed-width hack) which throws these bars out of alignment with
	   the cards below them — force them back to the content width */
	width: auto !important;
	height: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}
.alert h4{ margin: 0; font-size: 15px; }
.alert-info{
	background: var(--brand-light);
	border-color: #d4cccd;
	color: var(--brand-darker);
}
.alert-error, .alert-danger{
	background: #fdeceb;
	border-color: #f7c9c6;
	color: var(--danger-dark);
}
.alert-success{
	background: #e9f8f0;
	border-color: #bfe9d3;
	color: var(--success-dark);
}

.label{
	border-radius: 999px;
	font-weight: 600;
	font-size: 11px;
	padding: 3px 10px;
}
.label-info{
	background: var(--brand);
}

.red-tooltip, .icon-question-sign{
	color: var(--brand);
}

/* ------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------ */
/* Upload Documents table: label + choose-file + Upload-button + preview
   columns can add up to more than the page's width on narrower screens.
   The outer .container clips overflow (for its rounded corners), which
   silently cut off or overlapped the Upload column instead of just
   scrolling. Scope the scroll to this one wrapper so the rest of the page
   layout is untouched. */
.upload-table-wrap{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.table, .mphilTable{
	background: var(--card);
	border-radius: var(--radius-sm);
	/* No overflow:hidden here -- it was clipping the file-upload button
	   and its label text whenever a row needed more width than the table
	   naturally had (rounded corners were not worth breaking uploads). */
	font-size: 13.5px;
}
.table th{
	background: var(--brand-light);
	color: var(--brand-darker);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11.5px;
	letter-spacing: .03em;
	border-bottom: 2px solid var(--border) !important;
}
.table td, .table th{
	border-top: 1px solid var(--border) !important;
	vertical-align: middle;
	padding: 10px 12px;
}
.table-bordered{
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.table-striped tbody tr:nth-child(odd) td{
	background: var(--paper);
}
.table tbody tr:hover td,
.hover td{
	background: var(--brand-light) !important;
}

/* ------------------------------------------------------------------------
   Status badges (.alink family used for admission-status grids)
   ------------------------------------------------------------------------ */
.alink{
	background: var(--brand);
	height: 32px;
	width: 32px;
	float: left;
	margin: 3px;
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: var(--shadow-sm);
}
.alink1{
	background: var(--danger);
	height: 32px;
	width: 32px;
	float: left;
	margin: 3px;
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: var(--shadow-sm);
}
.selected{
	background: var(--success);
	height: 32px;
	width: 32px;
	float: left;
	margin: 3px;
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------------------
   Inline messages
   ------------------------------------------------------------------------ */
.error{
	color: var(--danger-dark);
	font-size: 12.5px;
	font-weight: 500;
}
.success{
	color: var(--success-dark);
	font-size: 12.5px;
	font-weight: 500;
}

/* ------------------------------------------------------------------------
   Misc containers seen across pages
   ------------------------------------------------------------------------ */
.community, .other, .sarc{
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: 16px;
}

/* ------------------------------------------------------------------------
   Admin dashboard (admin/home.php): sidebar + stat tiles + content pane
   ------------------------------------------------------------------------ */
#left_menu{
	width: 220px;
	height: auto;
	float: left;
	margin-right: 20px;
	padding: 16px 12px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
#left_menu .btn{ width: 100% !important; margin: 4px 0 !important; text-align: left; }

#right_menu{
	width: calc(100% - 240px);
	height: auto;
	float: left;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 16px;
}

.box1{
	width: 220px;
	height: 110px;
	float: none;
	margin: 0 !important;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	border: none;
}
.box1 h5{ margin: 0 0 6px 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.box1 h1{ margin: 0; font-size: 30px; font-weight: 800; }

#content{
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	margin: 0;
	padding: 16px;
	float: none;
}

/* Scrollbar polish (webkit) */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--paper); }
::-webkit-scrollbar-thumb{ background: #c3d2d8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: #a9bcc4; }

/* ------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 992px){
	.container{ width: 100%; max-width: 100%; margin: 0; border-radius: 0; }
	#header{ padding: 14px 16px; }
	.main_section{ padding: 0 16px; }
	.main_header{ margin: 16px; }
	#barheader{ margin: 16px -16px; padding: 10px 16px; }
	.widget, .well, .hero-unit{ width: 100%; margin: 20px auto; padding: 22px 18px; }
}

/* ------------------------------------------------------------------------
   Candidate application: left sidebar section menu
   ------------------------------------------------------------------------ */
/* #box is the "already submitted" view (View Application / Application
   Status buttons) shown in place of the app-menu once final=1 -- it needs
   the same wide-screen treatment as the multi-tab application below, since
   it's the other thing that can render straight into this same page shell. */
.container:has(.app-menu),
.container:has(#box){
	width: 96%;
	max-width: 1600px;
}
.app-menu{
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.app-menu-nav{
	flex: 0 0 240px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	position: sticky;
	top: 16px;
}
.app-menu-item{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 1px solid var(--border);
	font-weight: 600;
	font-size: 13.5px;
	position: relative;
	transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.app-menu-item:last-child{ border-bottom: none; }
.app-menu-item:hover{
	background: var(--brand-light);
	color: var(--brand-darker);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
	z-index: 1;
}
.app-menu-item.active:hover{ transform: none; box-shadow: none; }
.app-menu-item.active{ background: var(--brand-gradient); color: #fff; }
.app-menu-num{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--paper);
	color: var(--brand-darker);
	font-size: 11.5px;
	font-weight: 700;
	flex: 0 0 auto;
}
.app-menu-item.active .app-menu-num{ background: rgba(255,255,255,.25); color: #fff; }
.app-menu-item.is-done .app-menu-num{ background: #1fa971; color: #fff; font-size: 12px; }
.app-menu-item.is-done.active .app-menu-num{ background: rgba(255,255,255,.3); color: #fff; }
.app-menu-label{ line-height: 1.3; }
.app-menu-content{
	flex: 1;
	min-width: 0;
}
.app-menu-loading{
	padding: 60px 20px;
	text-align: center;
	color: var(--ink-soft);
	font-weight: 600;
}
@media (max-width: 768px){
	.app-menu{ flex-direction: column; }
	.app-menu-nav{
		flex: 0 0 auto;
		width: 100%;
		position: static;
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.app-menu-item{
		flex: 0 0 auto;
		border-bottom: none;
		border-right: 1px solid var(--border);
		white-space: nowrap;
	}
	.app-menu-item:last-child{ border-right: none; }
	/* .app-menu uses align-items:flex-start (set above, for the desktop
	   row layout) so sidebar and content don't stretch to match each
	   other's height. In column mode that same "don't stretch" behavior
	   applies to the cross axis (width) instead, so .app-menu-content
	   silently grows to fit its widest child (e.g. the Upload Documents
	   table) rather than staying within the page -- the exact thing
	   .upload-table-wrap's overflow-x:auto was meant to contain. Give it
	   an explicit width so wide content scrolls inside it instead. */
	.app-menu-content{ width: 100%; }
}

/* ------------------------------------------------------------------------
   Upload Documents: preview placeholders. Before a file is chosen, the
   preview <img> has an empty src (PHP has no path yet), which browsers
   render as a broken-image icon. Show a type-appropriate icon instead,
   and let it disappear automatically once a real image is picked (the
   [src=""] attribute selector stops matching the moment image_up.js sets
   a real src, no extra JS needed here).
   ------------------------------------------------------------------------ */
.preview-box{
	position: relative;
	display: inline-block;
	width: 100px;
}
.preview-box img{
	display: block;
	border: 2px solid var(--brand);
	border-radius: var(--radius-sm);
}
.preview-box img[src=""]{
	display: none;
}
.preview-placeholder{
	display: none;
	width: 100px;
	height: 130px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--brand-light);
	border: 1.5px dashed var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 4px;
}
.preview-box:has(img[src=""]) .preview-placeholder{
	display: flex;
}
.preview-icon{
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex: 0 0 auto;
}
.preview-label{
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
	color: var(--brand-darker);
	line-height: 1.3;
}
[data-icon="photo"] .preview-icon{
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357161e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c0-4%204-7%208-7s8%203%208%207%22/%3E%3C/svg%3E");
}
[data-icon="signature"] .preview-icon{
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357161e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z%22/%3E%3C/svg%3E");
}
[data-icon="document"] .preview-icon{
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357161e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8Z%22/%3E%3Cpath%20d%3D%22M14%202v6h6%22/%3E%3Cpath%20d%3D%22M16%2013H8%22/%3E%3Cpath%20d%3D%22M16%2017H8%22/%3E%3Cpath%20d%3D%22M10%209H8%22/%3E%3C/svg%3E");
}
[data-icon="certificate"] .preview-icon{
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357161e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%226%22/%3E%3Cpath%20d%3D%22M9%2013.5%207%2022l5-3%205%203-2-8.5%22/%3E%3C/svg%3E");
}
[data-icon="id-card"] .preview-icon{
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357161e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M14%2010h6%22/%3E%3Cpath%20d%3D%22M14%2014h4%22/%3E%3C/svg%3E");
}
[data-icon="document-check"] .preview-icon{
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357161e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8Z%22/%3E%3Cpath%20d%3D%22M14%202v6h6%22/%3E%3Cpath%20d%3D%22m9%2015%202%202%204-4%22/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------
   Toast notifications (replaces alert() for save-success messages).
   Fixed to the viewport so it survives AJAX section swaps; the container
   itself is created once by showToast() in js/section_menu.js.
   ------------------------------------------------------------------------ */
#app-toast-container{
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.app-toast{
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--card);
	border: 1px solid var(--border);
	border-left: 4px solid var(--success, #1fa971);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	padding: 12px 18px;
	min-width: 240px;
	max-width: 360px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .25s ease, transform .25s ease;
}
.app-toast.show{
	opacity: 1;
	transform: translateX(0);
}
.app-toast-icon{
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--success, #1fa971);
	display: flex;
	align-items: center;
	justify-content: center;
}
.app-toast-icon svg{
	width: 13px;
	height: 13px;
}
/* Error variant -- used for the Upload Documents "mandatory field" messages
   (and anything else that calls showToast(msg, 'error')) instead of the
   default green success styling. */
.app-toast-error{
	border-left-color: var(--danger, #e0463f);
}
.app-toast-error .app-toast-icon{
	background: var(--danger, #e0463f);
}
@media (max-width: 480px){
	#app-toast-container{
		left: 12px;
		right: 12px;
		top: 12px;
	}
	.app-toast{
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------------
   Login page: sits directly inside the single outer .container (the page
   shell from header.php) -- no separate bordered/shadowed card nested
   inside it, so there's only one visible outer boundary on the page.
   ------------------------------------------------------------------------ */
.login-shell{
	width: 360px;
	max-width: 100%;
	margin: 28px auto 8px auto;
	padding: 0 28px;
}
.login-title{
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var(--brand-darker);
	text-align: center;
	margin-bottom: 18px;
}
.login-shell .nav-list > li > label{
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}
.login-links{
	margin-top: 18px;
	text-align: left;
}
.login-links a{
	display: block;
	margin: 6px 0;
}

/* ------------------------------------------------------------------------
   Custom confirm modal (js/confirm_modal.js) -- replaces native browser
   confirm() popups with a dialog styled to match the rest of the portal.
   ------------------------------------------------------------------------ */
#app-confirm-overlay{
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(22,43,54,.45);
	z-index: 10000;
	align-items: center;
	justify-content: center;
}
#app-confirm-overlay.show{
	display: flex;
}
.app-confirm-box{
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	width: 380px;
	max-width: 90%;
	padding: 28px 28px 22px 28px;
	transform: translateY(-14px);
	opacity: 0;
	animation: appConfirmIn .18s ease forwards;
}
@keyframes appConfirmIn{
	to{ transform: translateY(0); opacity: 1; }
}
.app-confirm-title{
	font-size: 17px;
	font-weight: 700;
	color: var(--brand-darker);
	margin-bottom: 10px;
}
.app-confirm-msg{
	font-size: 14px;
	color: var(--ink);
	line-height: 1.5;
	margin-bottom: 24px;
}
.app-confirm-actions{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.app-confirm-actions .btn{
	border-radius: 999px;
	padding: 8px 22px;
	font-weight: 700;
	border: none;
}
.app-confirm-actions .app-confirm-cancel{
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--border);
}
.app-confirm-actions .app-confirm-cancel:hover{
	background: var(--border);
}
.app-confirm-actions .app-confirm-ok{
	background: var(--brand-gradient);
	color: #fff;
	box-shadow: 0 4px 12px rgba(22,80,106,.25);
}
.app-confirm-actions .app-confirm-ok:hover{
	box-shadow: 0 6px 16px rgba(22,80,106,.32);
}
@media (max-width: 480px){
	.app-confirm-box{
		width: 92%;
		padding: 22px 20px 18px 20px;
	}
}

/* ------------------------------------------------------------------------
   Pay Now modal (payment/edit.php's "Click for payment" button) -- shows
   the bank payment form (the Online Payment Section summary + the real
   "Pay" button that posts to GRI's bank gateway) as an overlay dialog on
   top of the Payment page, instead of navigating to a separate page.
   Content is fetched from Payment::pay() and injected into
   #payment-pay-box by the script in payment/edit.php.

   Deliberately its own overlay/box (not a reuse of #app-confirm-overlay)
   because that one is single-purpose (js/confirm_modal.js always fills
   it with a fixed message + OK/Cancel) and always exists as at most one
   instance rebuilt per call - this one needs to hold a whole table and a
   real <form>, and only needs to exist while the candidate is on the
   Payment page.
   ------------------------------------------------------------------------ */
#payment-pay-overlay{
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(22,43,54,.45);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
#payment-pay-overlay.show{
	display: flex;
}
.payment-pay-box{
	position: relative;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	width: 480px;
	max-width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px 28px 24px 28px;
	transform: translateY(-14px);
	opacity: 0;
	animation: appConfirmIn .18s ease forwards;
}
/* The hero-unit/#inform box this content used to sit in on the old
   full-page version has its own card border+shadow+width - all of
   that would just double up on top of the modal box's own, so strip
   it back to a plain block here. */
.payment-pay-box .hero-unit{
	width: auto;
	max-width: none;
	margin: 0;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}
.payment-pay-close{
	position: absolute;
	top: 14px;
	right: 18px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--ink-soft);
	cursor: pointer;
	padding: 4px;
}
.payment-pay-close:hover{
	color: var(--ink);
}
@media (max-width: 480px){
	.payment-pay-box{
		width: 100%;
		padding: 26px 18px 18px 18px;
	}
}

/* ------------------------------------------------------------------------
   Academic Details (Step 2): the UG / PG / M.Phil tables pack 7-8 dense
   columns into one row (degree, subject, grade, a combined "month + year
   + reg no" cell, %, mode, college/university). The page-wide
   span1/span2/span3 widths set above (46px/126px/206px - tuned for the
   shorter fields elsewhere, like Personal Details) were cutting a
   candidate's own typed answers off mid-word here. Scoped to just these
   three tables (see the .academic-table class in academic/edit.php) so
   it doesn't change anything on the other step pages, which now use the
   full width the page already has available (see .container:has(.app-
   menu) above) instead. The wrapping .academic-table-wrap still lets the
   table scroll sideways instead of overflowing the page on a narrow
   screen or phone.
   ------------------------------------------------------------------------ */
.academic-table-wrap{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.academic-table input.span1, .academic-table select.span1{ width: 130px; }
.academic-table input.span2, .academic-table select.span2{ width: 260px; }
.academic-table input.span3, .academic-table select.span3{ width: 340px; }
.academic-table textarea{ width: 260px; }
@media (max-width: 480px){
	.academic-table input.span1, .academic-table select.span1,
	.academic-table input.span2, .academic-table select.span2,
	.academic-table input.span3, .academic-table select.span3,
	.academic-table textarea{ width: 100%; max-width: 260px; }
}


/* ---- Redesigned banner: big logo + three separate lines ---- */
#header{
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 22px;
	padding: 14px 28px;
	text-align: left;
}
#header img.hdr-logo{
	height: 110px;
	width: auto;
	max-width: none;
	max-height: none;
	flex: 0 0 auto;
}
#header .hdr-text{ display: flex; flex-direction: column; gap: 6px; }
#header .hdr-name{
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .01em;
	text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
#header .header-caption{ font-size: 15px; line-height: 1.3; }
#header .session_header{ font-size: 21px; margin: 0; white-space: normal; }
@media (max-width: 767px){
	#header{ flex-direction: column; text-align: center; gap: 10px; }
	#header img.hdr-logo{ height: 80px; }
	#header .hdr-name{ font-size: 18px; }
	#header .header-caption{ font-size: 12px; }
	#header .session_header{ font-size: 16px; }
}


/* ---- Banner: one line each (desktop) ---- */
@media (min-width: 768px){
	#header{ padding: 12px 20px; gap: 16px; }
	#header img.hdr-logo{ height: 90px; }
	#header .hdr-name{ font-size: 19px; letter-spacing: 0; white-space: nowrap; }
	#header .header-caption{ font-size: 11.5px; white-space: nowrap; }
	#header .session_header{ font-size: 18px; white-space: nowrap; }
}


/* ---- Side menu: hide / show arrow ---- */
.app-menu-side{ flex: 0 0 auto; position: sticky; top: 16px; display: flex; align-items: flex-start; }
.app-menu-side .app-menu-nav{ flex: 0 0 240px; width: 240px; }
.app-menu-toggle{
	position: absolute;
	top: 10px;
	right: -14px;
	z-index: 5;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: #fff;
	color: var(--brand-darker);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	padding: 0;
}
.app-menu-toggle:hover{ background: var(--brand-light); }
.app-menu-side.is-collapsed .app-menu-nav{ display: none; }
.app-menu-side.is-collapsed .app-menu-toggle{ right: auto; left: 0; }
.app-menu-side.is-collapsed{ width: 30px; }
@media (max-width: 768px){
	.app-menu-side{ width: 100%; display: block; position: static; }
	.app-menu-side .app-menu-nav{ width: 100%; }
	.app-menu-toggle{ display: none; }
	.app-menu-side.is-collapsed .app-menu-nav{ display: flex; }
}

/* ---- Academic Details: fit the tables to the page (no sideways scrollbar) on desktop ---- */
@media (min-width: 992px){
	.academic-table-wrap{ overflow-x: visible; }
	.academic-table{ width: 100%; table-layout: auto; }
	.academic-table input.span1, .academic-table select.span1,
	.academic-table input.span2, .academic-table select.span2,
	.academic-table input.span3, .academic-table select.span3,
	.academic-table textarea{
		width: 100%;
		min-width: 70px;
		max-width: 100%;
		box-sizing: border-box;
	}
	.academic-table th, .academic-table td{ padding-left: 8px; padding-right: 8px; }
}


/* ---- Menu hide/show: labelled button above the menu ---- */
.app-menu-side{ flex-direction: column; align-items: stretch; }
.app-menu-toggle{
	position: static;
	width: auto;
	height: auto;
	border-radius: 18px;
	padding: 7px 14px;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	align-self: flex-start;
}
.app-menu-side.is-collapsed .app-menu-toggle{ margin-bottom: 0; }
.app-menu-side.is-collapsed{ width: auto; }

/* ---- Menu hide/show button: coloured, readable pill ---- */
.app-menu-side{ flex: 0 0 auto; min-width: max-content; }
.app-menu-side .app-menu-nav{ min-width: 240px; }
.app-menu-toggle{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	white-space: nowrap;
	background: var(--brand-gradient, linear-gradient(135deg, #7b1e2b, #57161e));
	color: #fff;
	border: 0;
	border-radius: 22px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .2px;
	box-shadow: 0 4px 12px rgba(123,30,43,.35);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.app-menu-toggle:hover{
	background: var(--brand-gradient, linear-gradient(135deg, #7b1e2b, #57161e));
	filter: brightness(1.12);
	transform: translateY(-1px);
	box-shadow: 0 7px 16px rgba(123,30,43,.45);
}
.app-menu-side.is-collapsed{ width: max-content; min-width: max-content; }

/* Fix: the side wrapper is a column, so the nav's old "flex: 0 0 240px" was acting as a fixed HEIGHT
   (cutting off the last menu items). Use width instead and let the height follow the content. */
.app-menu-side .app-menu-nav{ flex: 0 0 auto; width: 240px; height: auto; }
@media (max-width: 768px){
	.app-menu-side .app-menu-nav{ width: 100%; }
}

/* Make sure the full words "Hide menu" / "Show menu" always show (never clipped) */
.app-menu-toggle{ width: auto !important; min-width: 44px; max-width: none; overflow: visible; justify-content: center; }

/* Centre the "Ph.D. Admission October-2026" line under the university name */
#header .session_header{ text-align: center !important; width: 100%; }

/* ---- Mobile header (instruction page etc.): solid maroon, small logo ---- */
@media (max-width: 767px){
	#header, .navbar-inner#header{
		background: var(--brand, #7a1f2b) !important;
		background-image: none !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		padding: 10px 12px !important;
		text-align: left !important;
		border-radius: 0 !important;
	}
	#header img.hdr-logo{ height: 52px !important; width: auto !important; flex: 0 0 auto; }
	#header .hdr-text{ flex: 1 1 auto; min-width: 0; gap: 3px; }
	#header .hdr-name{ font-size: 13px !important; line-height: 1.2; white-space: normal !important; color: #fff !important; }
	#header .header-caption{ font-size: 9.5px !important; line-height: 1.25; white-space: normal !important; color: #fff !important; }
	#header .session_header{ font-size: 13px !important; text-align: left !important; white-space: normal !important; color: #ffd166 !important; }
}

/* ---- Overall text size: a little larger across the whole application ---- */
@media (min-width: 768px){
	body{ zoom: 1.1; }
}

/* ---- Mobile safety rules (phones only; desktop unchanged) ---- */
@media (max-width: 767px){
	.first_main .widget.well{ margin-left:auto !important; margin-right:auto !important; max-width:100%; box-sizing:border-box; }
	.first_main .widget.well input.span3, .first_main .widget.well select.span3{ width:100% !important; box-sizing:border-box; }
	.main_section{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
	#initial{ width:80px !important; }
	img{ max-width:100%; height:auto; }
}