/* ==========================================================================
   appsc-responsive.css
   Corrective responsive layer for appsc.gov.in

   WHY THIS FILE EXISTS
   The views in this project are written with Bootstrap 4 markup
   (col-xl-*, d-none/d-md-block, justify-content-*, mb-3, card, form-row)
   but the stylesheet that is actually loaded, public/assets/css/bootstrap.css,
   is Bootstrap 3 with a small hand-written shim on top. The Bootstrap 4
   classes therefore resolved to nothing, and the gaps were papered over in
   appsc_style.css with device-specific pixel offsets that only hold at a few
   exact screen widths.

   This file closes those gaps in one place:
     1. viewport / box-model guards
     2. fluid media
     3. the col-xl-* tier and the display utilities the markup expects
     4. tables that never force the page to scroll sideways
     5. forms that are usable on a phone
     6. navigation: a drawer on mobile, and the inner-page section menu
        that was hidden outright below 1000px
     7. overrides for the fixed-width wrappers that overflowed every viewport

   SCOPE - read this before adding anything.
   This layer fixes things that are broken: content you cannot reach, pages
   that scroll sideways, zoom that is disabled, text too small to read on
   the device it was sized for. It deliberately does NOT restyle pages that
   merely look dated.

   The one sanctioned exception is section 6a-bis, the navigation bar, whose
   appearance was asked for directly. It is confined to the nav, uses only
   colours already present in the site, and is the only place here that
   changes how something looks for its own sake. Keep it that way: if a new
   request is about appearance, give it its own clearly marked section rather
   than spreading style changes through the fixes.

   An earlier revision went further and defined the rest of the Bootstrap 4
   surface - the bare .col-N grid, .card, the spacing scale, the flex
   alignment utilities - plus mobile type and width overrides for the
   homepage ticker, quote block and action buttons. Every one of those
   silently changed the appearance of pages that were working, because the
   markup carries classes the authors never saw take effect: defining
   .col-6, for example, turned the homepage's six stacked action buttons
   into a cramped two-across grid inside a 16%-wide column, at every screen
   size. They were removed for that reason. If you reinstate any of them,
   look at the homepage first, on a real screen.

   Note that col-xl-* is kept: on the homepage every col-xl-N is paired with
   an identical col-lg-N, which Bootstrap 3 already applies at the same
   1200px breakpoint, so it provably changes nothing there.

   LOAD ORDER: must be the LAST stylesheet in the document so it wins over
   bootstrap.css, style.css and appsc_style.css without needing !important
   everywhere.
   ========================================================================== */


/* ==========================================================================
   1. Guards
   ========================================================================== */

/* Keep iOS from inflating text in landscape, without disabling user zoom. */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* A single stray wide element used to give the whole page a horizontal
   scrollbar. Contain it at the root instead of hunting every offender. */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

/* Long unbroken strings - roll numbers, URLs, notification codes - were
   widening their containers past the viewport. */
h1, h2, h3, h4, h5, h6,
p, li, td, th, dd, dt,
.panel-body, .box-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}


/* ==========================================================================
   2. Fluid media
   ========================================================================== */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  max-width: 100%;
}

img,
video,
canvas {
  height: auto;
}

/* bootstrap.css defines .img-fluid as max-width:104%, which pushed every
   logo and banner 4% past its column and was a direct cause of sideways
   scroll on phones. 100% is what the class is supposed to mean. */
.img-fluid {
  max-width: 100% !important;
  height: auto;
}

/* Embedded PDFs and maps: give them a usable height on small screens
   instead of the 800px+ fixed heights set inline in several views. */
@media (max-width: 767px) {
  iframe[height],
  embed[height],
  object[height] {
    max-height: 70vh;
  }
}


/* ==========================================================================
   3. The missing Bootstrap 4 classes
   Expressed with float + percentage width so they behave correctly inside
   the Bootstrap 3 .row (negative margin + clearfix) already in the markup.
   .row is deliberately NOT redefined as flex - that would reflow every
   existing col-xs/sm/md/lg column on the site.
   ========================================================================== */

/* -- 3a. Column padding for the tier BS3 does not know about -------------- */
.col-xl-1,  .col-xl-2,  .col-xl-3,  .col-xl-4,  .col-xl-5,  .col-xl-6,
.col-xl-7,  .col-xl-8,  .col-xl-9,  .col-xl-10, .col-xl-11, .col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

/* -- 3c. .col-xl-N : the xl tier, used ~6000 times in these views -------- */
@media (min-width: 1200px) {
  .col-xl-1,  .col-xl-2,  .col-xl-3,  .col-xl-4,  .col-xl-5,  .col-xl-6,
  .col-xl-7,  .col-xl-8,  .col-xl-9,  .col-xl-10, .col-xl-11, .col-xl-12 {
    float: left;
  }

  .col-xl-1  { width: 8.333333%; }
  .col-xl-2  { width: 16.666667%; }
  .col-xl-3  { width: 25%; }
  .col-xl-4  { width: 33.333333%; }
  .col-xl-5  { width: 41.666667%; }
  .col-xl-6  { width: 50%; }
  .col-xl-7  { width: 58.333333%; }
  .col-xl-8  { width: 66.666667%; }
  .col-xl-9  { width: 75%; }
  .col-xl-10 { width: 83.333333%; }
  .col-xl-11 { width: 91.666667%; }
  .col-xl-12 { width: 100%; }
}

/* -- 3d. Display utilities, plain and responsive -------------------------- */
.d-none         { display: none !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block        { display: block !important; }
.d-table        { display: table !important; }
.d-table-row    { display: table-row !important; }
.d-table-cell   { display: table-cell !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }

@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
}

/* -- 3g. Odds and ends the markup asks for ------------------------------- */
.w-100 { width: 100% !important; }
.w-75  { width: 75% !important; }
.w-50  { width: 50% !important; }
.w-25  { width: 25% !important; }
.h-100 { height: 100% !important; }

.float-left  { float: left !important; }
.float-right { float: right !important; }
.float-none  { float: none !important; }

.text-nowrap { white-space: nowrap !important; }
.text-break  { overflow-wrap: break-word !important; word-break: break-word; }

.rounded    { border-radius: .25rem !important; }
.rounded-0  { border-radius: 0 !important; }

/* .form-row is a .row with tighter gutters. */
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
}

.form-row > [class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

/* Float grid needs its rows cleared; several views use .row without it. */
.row:before,
.row:after,
.form-row:before,
.form-row:after {
  content: " ";
  display: table;
}

.row:after,
.form-row:after {
  clear: both;
}


/* ==========================================================================
   4. Tables
   Roughly 520 views render a table without a .table-responsive wrapper, many
   carrying width="700"/"900" attributes. The page must never scroll
   sideways because of one of them: the table scrolls inside its own box.
   appsc-responsive.js adds .appsc-scroll around any table that actually
   overflows; the rules below cover it and the no-JS fallback.
   ========================================================================== */

.appsc-scroll,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* A width attribute or inline width wider than the screen must not win. */
table[width],
table[style*="width"] {
  max-width: 100%;
}

/* Inside a scroller the table may keep its natural width - that box scrolls,
   the page does not. */
.appsc-scroll > table,
.table-responsive > table {
  max-width: none;
  margin-bottom: 0;
}

/* Cell-level fixed widths stop meaning anything useful on a phone. */
@media (max-width: 767px) {
  td[width],
  th[width] {
    max-width: 100%;
  }

  /* Tables that lay out a form rather than present data: one row per field,
     label in one cell and the control in the next. Dragging a form sideways
     to reach the field you are typing in is the wrong experience, so these
     stack - label above control - instead of getting a scroller.

     appsc-responsive.js adds this class at phone width to tables whose shape
     says "form layout" (see looksLikeFormLayout there for the test), and
     removes it above phone width. It can also be set by hand on a view.

     Both `> tbody > tr` and `> tr` are covered: the parser inserts a tbody
     for markup that omits one, but not every document here is parsed the
     same way, and a missed level would leave the row as a table-row inside a
     block parent. */
  table.appsc-stack,
  table.appsc-stack > tbody,
  table.appsc-stack > tbody > tr,
  table.appsc-stack > tbody > tr > td,
  table.appsc-stack > tbody > tr > th,
  table.appsc-stack > tr,
  table.appsc-stack > tr > td,
  table.appsc-stack > tr > th {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Once stacked, the cell borders read as boxes round every label. One rule
     per field is enough. */
  table.appsc-stack > tbody > tr > td,
  table.appsc-stack > tbody > tr > th,
  table.appsc-stack > tr > td,
  table.appsc-stack > tr > th {
    border: 0 !important;
    padding: 3px 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  table.appsc-stack > tbody > tr,
  table.appsc-stack > tr {
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 0;
  }

  table.appsc-stack > tbody > tr:last-child,
  table.appsc-stack > tr:last-child {
    border-bottom: 0;
  }

  /* Spacer cells that only existed to set column widths. */
  table.appsc-stack td:empty,
  table.appsc-stack th:empty {
    display: none;
  }
}

/* DataTables' own controls crowd on small screens. */
@media (max-width: 767px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: left;
    width: 100%;
    margin-bottom: .5rem;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0;
  }
}


/* ==========================================================================
   5. Forms
   The applicant portal is where candidates spend real time on a phone:
   registration, the application form, fee payment.
   ========================================================================== */

@media (max-width: 767px) {
  /* 16px is the threshold below which iOS Safari zooms the page on focus
     and leaves it zoomed - the single most common complaint on mobile forms. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
    max-width: 100%;
  }

  /* Fixed-width inputs, set both in CSS and inline across these views,
     stack to full width instead of spilling out of the form. */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="file"],
  select,
  textarea {
    width: 100% !important;
    display: block;
  }

  input[size] {
    width: 100% !important;
  }

  /* Labels above fields rather than in a cramped side column. */
  .form-horizontal .control-label {
    text-align: left;
    padding-top: 0;
    margin-bottom: .25rem;
  }

  /* Buttons wide enough to hit, and not jammed together. */
  .btn {
    margin-bottom: .35rem;
  }

  .btn-group-vertical-xs .btn,
  .btn-block {
    display: block;
    width: 100%;
    margin-left: 0;
  }

  /* Input groups (captcha, search, OTP) wrap instead of squeezing. */
  .input-group {
    display: flex;
    flex-wrap: wrap;
  }

  .input-group > .form-control {
    flex: 1 1 auto;
    width: auto !important;
  }
}

/* Touch targets: 44px is the accepted minimum. Applied at all widths for
   pointer:coarse devices rather than guessing from screen size. */
@media (pointer: coarse) {
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  .nav-link,
  .pagination > li > a {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 18px;
    min-height: 18px;
  }
}


/* ==========================================================================
   6. Navigation
   The public navbar markup is Bootstrap 4 (navbar-expand-lg, navbar-toggler)
   driven by Bootstrap 3 JavaScript, which toggles .in rather than .show.
   Both class names are honoured below so the menu works whichever script
   ends up handling the click.
   ========================================================================== */

/* -- The 50vw spacer ------------------------------------------------------
   appsc_style.css line 167:

       .nav1 { padding-right: 50vw; }

   .nav1 sits on `<a class="navbar-brand nav1" href="#"></a>` - an empty
   anchor, no text, no image - immediately before the menu. So an invisible
   element was reserving half the viewport, and the eleven menu items only
   ever had the right-hand 50% to lay themselves out in. That is why the bar
   never started at the left edge, and the main reason it wrapped: at 1366px
   the menu had about 683px of usable space for 1430px of content.

   It is also what the `.bttn { margin-left: 275px }` hamburger offsets in
   appsc_style.css were compensating for. Clearing it lets both the menu and
   the toggler sit where they belong. */
.main-navbar .navbar-brand.nav1,
.main-navbar .nav1 {
  padding-right: 0 !important;
}

/* -- The gap above the bar ------------------------------------------------
   appsc_style.css line 623 gives .main-navbar `margin-top: 10px`, which
   leaves a 10px strip of page background between the header logo row and
   the bar. The 3px border-top on the same rule is kept - that is the
   intended separator; the 10px of empty space is not.

   Nothing is needed below the bar: bootstrap.css already sets
   .navbar { margin-bottom: -1px }, so it butts straight onto the hero. */
.main-navbar {
  margin-top: 0 !important;
}


/* -- Row layout, aligned left ---------------------------------------------
   With the 50vw spacer gone the nav is a flex row: the collapse grows into
   the space the empty brand anchor does not use, and the items run from the
   left edge of the container rightwards, in their natural widths.

   justify-content is flex-start rather than space-between. Spreading the
   items to both edges was tried first and reads as an even band of links
   rather than a menu - it also puts the last item hard against the right
   edge while the gaps between items vary with the window. Left-aligned, the
   first item lines up with the page content and the leftover space collects
   harmlessly at the end of the row.

   Item padding is trimmed from roughly 30px per item so that eleven of them
   still fit on one line; see the container note below for the arithmetic.
   It is set with a direct-child selector so the About Us submenu links,
   which are also .nav-link, keep their own comfortable padding. */
@media (min-width: 1200px) {
  .main-navbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .main-navbar .navbar-brand.nav1 {
    flex: 0 0 auto;
  }

  .main-navbar .navbar-collapse {
    flex: 1 1 auto;
  }

  .main-navbar .navbar-nav {
    display: flex;
    width: 100%;
    float: none;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
  }

  .main-navbar .navbar-nav > li,
  .main-navbar .navbar-nav > .nav-item {
    float: none;
    flex: 0 0 auto;
  }

  .main-navbar .navbar-nav > li > a {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* The submenu is absolutely positioned, so it stays out of the flex row -
     but it needs .dropdown1 to remain its positioning context, and its own
     items must stack rather than inherit the row's layout. */
  .main-navbar .dropdown1 {
    position: relative;
  }

  .main-navbar .dropdown1 .dropdown-menu,
  .main-navbar .dropdown1 .dropdown-content {
    display: none;
    min-width: 230px;
    white-space: normal;
  }

  /* Three ways in, because three things can open this menu: the hover rule
     appsc_style.css relies on, the .open class Bootstrap 3's dropdown plugin
     sets on click, and the .appsc-open class appsc-responsive.js sets on tap.
     The display:none above outranks Bootstrap's own `.open > .dropdown-menu`
     on specificity, so .open has to be named explicitly here. */
  .main-navbar .dropdown1:hover .dropdown-menu,
  .main-navbar .dropdown1:hover .dropdown-content,
  .main-navbar .dropdown1.open .dropdown-menu,
  .main-navbar .dropdown1.open .dropdown-content,
  .main-navbar .dropdown1.appsc-open .dropdown-menu,
  .main-navbar .dropdown1.appsc-open .dropdown-content {
    display: block;
  }

  .main-navbar .dropdown1 .dropdown-menu > li,
  .main-navbar .dropdown1 .dropdown-content > li {
    float: none;
    display: block;
    width: 100%;
  }
}


/* SWITCH POINT: 1300px, not the 992px the navbar-expand-lg class implies.

   appsc_style.css hid the hamburger above 1300px, and an earlier revision of
   this file "corrected" that to 992px on the strength of the class name. That
   was wrong, and it is what put the menu in the wrong place between 992 and
   1299px. The eleven top-level items - About Us, Notifications, Previous Year
   Questions, Advertisement, Exam Calendar, Court Judgements & Orders, Forms &
   Download, RTI, FAQ, Contact Us plus the home icon - come to 138 characters
   at the 108% font-size header_name.php sets on .navbar-nav, which needs
   roughly 1430px on one line. Shown inline any narrower, the bar wraps onto a
   second row and overlaps what sits beneath it.

   So the original 1300px was a considered value, not an oversight. Restored.
   Note it is still about 130px short of what the menu truly needs, which is a
   pre-existing issue: between 1300 and 1430px the bar wraps. Fixing that
   means either carrying the drawer up to 1430px or trimming the nav's
   font-size and padding, and both change how the site looks on a laptop, so
   neither is done unilaterally here. */
@media (min-width: 1200px) {
  .navbar-expand-lg .navbar-toggler,
  .main-navbar .navbar-toggler {
    display: none !important;
  }

  .navbar-expand-lg .navbar-collapse,
  .main-navbar .navbar-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    /* Undo the off-canvas drawer from the mobile block below, so resizing a
       desktop window down and back up cannot leave the menu off-screen. */
    position: static;
    width: auto;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    visibility: visible;
    transform: none;
  }

  /* Injected by appsc-responsive.js for the mobile drawer; no place here. */
  .appsc-nav-close,
  .appsc-nav-backdrop {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  /* The toggler was positioned with a hardcoded margin-left:275px, which
     only landed correctly on one screen width. */
  .main-navbar .navbar-toggler,
  .navbar-toggler.bttn,
  .bttn {
    display: block !important;
    margin-left: auto !important;
    margin-right: 12px !important;
    margin-top: 6px !important;
    float: none !important;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 4px;
    padding: 6px 10px;
  }

  .main-navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* -- Off-canvas drawer ------------------------------------------------
     The main menu slides in from the left rather than expanding in place.

     Visibility is driven by transform + visibility rather than display,
     for two reasons. bootstrap.css carries
     `@media (min-width:768px) { .navbar-collapse.collapse { display:block
     !important } }` and the markup is `class="collapse navbar-collapse"`,
     so display is not reliably ours to control between 768 and 991px.
     And height is pinned to 100% !important because Bootstrap 3's collapse
     plugin leaves an inline `height` behind, which would otherwise
     determine the height of a panel that needs to be full-bleed.

     appsc-responsive.js drives the open/close and keeps using Bootstrap's
     .in as the open marker; .show is honoured too so that a later
     Bootstrap 4/5 build would work without a stylesheet change. */
  .main-navbar .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    height: 100% !important;
    margin: 0;
    padding: 0 0 24px;
    background-color: #0d1c43;
    box-shadow: 2px 0 14px rgba(0, 0, 0, .4);
    z-index: 1050;
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .28s ease, visibility .28s ease;
  }

  .main-navbar .navbar-collapse.in,
  .main-navbar .navbar-collapse.show {
    visibility: visible;
    transform: translateX(0);
  }

  /* Room for the injected close button. */
  .main-navbar .navbar-collapse .navbar-nav {
    padding-top: 8px;
  }

  /* Backdrop and close button are injected by appsc-responsive.js, so the
     11 view files need no markup changes. */
  .appsc-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }

  .appsc-nav-backdrop.appsc-visible {
    opacity: 1;
    visibility: visible;
  }

  .appsc-nav-close {
    display: block;
    width: 100%;
    padding: 12px 15px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    text-align: right;
    min-height: 44px;
  }

  /* While the drawer is open the page behind it must not scroll. */
  body.appsc-nav-open {
    overflow: hidden;
  }

  /* A vertical stack of full-width rows, not a wrapped horizontal bar. */
  .main-navbar .navbar-nav {
    float: none;
    margin: 0;
    width: 100%;
  }

  .main-navbar .navbar-nav > li,
  .main-navbar .navbar-nav > .nav-item {
    float: none;
    display: block;
    width: 100%;
  }

  .main-navbar .navbar-nav > li > a,
  .main-navbar .navbar-nav .nav-link {
    display: block;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  /* Dropdowns opened by hover are unreachable by touch. On small screens
     they render inline, and appsc-responsive.js toggles .appsc-open on tap. */
  .main-navbar .dropdown1 .dropdown-menu,
  .main-navbar .dropdown1 .dropdown-content {
    position: static;
    float: none;
    width: 100%;
    max-width: 100%;
    border: 0;
    box-shadow: none;
    background-color: rgba(0, 0, 0, .25);
    display: none;
  }

  .main-navbar .dropdown1.appsc-open .dropdown-menu,
  .main-navbar .dropdown1.appsc-open .dropdown-content,
  .main-navbar .dropdown1 .dropdown-menu.appsc-open,
  .main-navbar .dropdown1 .dropdown-content.appsc-open {
    display: block !important;
  }

  /* Hover must not fight the tap toggle on touch devices. */
  .main-navbar .dropdown1:hover .dropdown-content {
    display: none;
  }

  .main-navbar .dropdown1.appsc-open:hover .dropdown-content {
    display: block !important;
  }

  .main-navbar .dropdown1 .dropdown-menu > li > a,
  .main-navbar .dropdown1 .dropdown-content a {
    padding-left: 30px;
  }
}

/* ==========================================================================
   6a-bis. Nav presentation

   Explicitly requested, so this section is the one place in this file that
   changes appearance for its own sake rather than to fix breakage. It stays
   inside the palette the site already uses - the navy .main-navbar already
   declares as its own border-top - and adds no new colours.

   NO HOVER EFFECT, by request. Note that this takes rules rather than fewer:
   bootstrap.css and appsc_style.css both define hovers on these links, among
   them `.dropdown-menu > li > a:hover { background-color: #3e8e41 }` - a
   green carried over from a boilerplate snippet, in a site that is otherwise
   navy. Leaving a hover undeclared therefore does not mean "nothing happens",
   it means inheriting theirs. Each hover and focus state below is instead
   pinned to match the resting state, which is what actually removes the
   effect. Do not "tidy" those rules away.

   The only interactive state kept is :focus-visible, which is not a hover: it
   fires on keyboard navigation only, and without it a keyboard user has no
   way to see where they are in the menu.

   The :hover that opens the About Us submenu is also kept - that is how the
   menu opens on a desktop, not decoration. */
   ========================================================================== */

/* Bar and submenu share one surface. appsc_style.css has the bar at #000 and
   .dropdown-menu at #000; the navy it already declares as border-top reads
   better against the blues used through the rest of the page. */
.main-navbar {
  background-color: #0d1c43 !important;
  border-top-color: #1b2f66 !important;
}

.main-navbar .dropdown-menu,
.main-navbar .dropdown-content {
  background-color: #0d1c43 !important;
}

/* No hover effect: requested. The items are plain white labels that do not
   react to the pointer.

   Bootstrap 3 and appsc_style.css both define hovers of their own on these
   links, so "no hover effect" has to be stated rather than simply left out -
   the rules below hold the hover and focus states identical to the resting
   state, which suppresses bootstrap.css's
   `.navbar-default .navbar-nav > li > a:hover` without putting anything in
   its place. */
.main-navbar .navbar-nav > li > a {
  color: #fff;
}

.main-navbar .navbar-nav > li > a:hover,
.main-navbar .navbar-nav > li > a:focus,
.main-navbar .navbar-nav > li.open > a,
.main-navbar .navbar-nav > li.appsc-open > a,
.main-navbar .navbar-nav > li.active > a {
  background-color: transparent;
  color: #fff;
  text-decoration: none;
}

/* Keyboard focus needs to be visible, and :focus-visible keeps it off mouse
   clicks. Gold rather than the browser default, which disappears on navy. */
.main-navbar .navbar-nav > li > a:focus-visible,
.main-navbar .navbar-toggler:focus-visible,
.appsc-nav-close:focus-visible,
.appsc-section-toggle:focus-visible {
  outline: 2px solid #ffd900;
  outline-offset: -2px;
}

/* Submenu links, also with no hover effect.

   This override still has to exist: bootstrap.css sets
   `.dropdown-menu > li > a:hover { color: #262626; background-color: #3e8e41 }`
   - a green carried over from a boilerplate snippet - so leaving the hover
   undeclared does not mean "nothing happens", it means green. Holding the
   hover state equal to the resting state is what actually removes the
   effect. */
.main-navbar .dropdown1 .dropdown-menu > li > a,
.main-navbar .dropdown1 .dropdown-content > li > a {
  color: #fff !important;
  padding: 9px 18px;
  background-color: transparent !important;
}

.main-navbar .dropdown1 .dropdown-menu > li > a:hover,
.main-navbar .dropdown1 .dropdown-menu > li > a:focus,
.main-navbar .dropdown1 .dropdown-content > li > a:hover,
.main-navbar .dropdown1 .dropdown-content > li > a:focus {
  background-color: transparent !important;
  color: #fff !important;
  text-decoration: none;
}

@media (min-width: 1200px) {
  .main-navbar .dropdown1 .dropdown-menu,
  .main-navbar .dropdown1 .dropdown-content {
    border: 0;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    padding: 4px 0;
    margin-top: 0;
  }
}

/* -- Menu inside the container --------------------------------------------
   The bar's background still spans the window - that is what a nav bar does -
   but the menu itself is held to the same 1170px .container the header logo
   row and every section below it use, and centred, so the first item lines up
   with the page content rather than the window edge.

   This changes the arithmetic the earlier graduated type sizes were based on.
   Those scaled with the viewport, which is no longer what the menu has: the
   container gives 1170px less 15px of gutter each side, so about 1140px at
   every width from 1200px up - a fixed budget, which is why three sizes
   became one.

   The eleven labels come to 131 characters - Home, About Us, Notifications,
   Previous Year Questions, Advertisement, Exam Calendar, Court Judgements &
   Orders, Forms & Download, RTI, FAQ, Contact Us - plus the home icon. At
   13px with 7px of padding a side that is roughly 1070px of intrinsic width,
   inside the 1140px budget. 14px would need about 1150px and would wrap.
   Since the row is left-aligned the remainder simply sits at the end of the
   row rather than being distributed between the items.

   The budget is what holds the type at 13px. If that ever needs to be larger,
   the honest options are a wider cap for the nav alone - which breaks the
   alignment with the content that this block exists to create - or fewer
   top-level items. Do not raise the size without re-checking the sum.

   header_name.php forces `font-size: 108%` on .navbar-nav with !important,
   hence the !important and the extra class needed to win on specificity. */
@media (min-width: 1200px) {
  .main-navbar {
    justify-content: center;
  }

  .main-navbar .navbar-collapse {
    flex: 0 1 auto;
    width: 100%;
    max-width: 1170px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }

  .main-navbar .navbar-nav {
    font-size: 13px !important;
  }

  .main-navbar .navbar-nav > li > a {
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* -- Drawer presentation -------------------------------------------------- */
@media (max-width: 1199px) {
  /* Items read as a list of rows. The separator is the only decoration -
     no hover state here either. A :hover on a touch device tends to stick
     on the last thing tapped anyway, so there is nothing to miss. */
  .main-navbar .navbar-nav > li > a {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 12px 16px;
    font-size: 15px;
  }

  .main-navbar .navbar-nav > li > a:hover,
  .main-navbar .navbar-nav > li > a:focus,
  .main-navbar .navbar-nav > li.active > a,
  .main-navbar .navbar-nav > li.appsc-open > a {
    background-color: transparent;
    border-bottom-color: rgba(255, 255, 255, .12);
  }

  /* The submenu sits inside the drawer, so it is set back and darkened
     rather than floated over anything. */
  .main-navbar .dropdown1 .dropdown-menu,
  .main-navbar .dropdown1 .dropdown-content {
    background-color: rgba(0, 0, 0, .22) !important;
  }

  .main-navbar .dropdown1 .dropdown-menu > li > a,
  .main-navbar .dropdown1 .dropdown-content > li > a {
    padding: 10px 16px 10px 30px;
    font-size: 14px;
  }

  /* A caret on the one item that opens a submenu, so it is obvious that it
     expands rather than navigates. */
  .main-navbar .dropdown1 > .dropdown-toggle::after,
  .main-navbar .dropdown1 > .dropbtn::after {
    content: "";
    float: right;
    margin-top: 7px;
    border-top: 5px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform .2s ease;
  }

  .main-navbar .dropdown1.appsc-open > .dropdown-toggle::after,
  .main-navbar .dropdown1.appsc-open > .dropbtn::after {
    transform: rotate(180deg);
  }
}


/* ==========================================================================
   6b. Section menu on the inner pages

   The 11 "About Us" pages (chairman_message, presentcomm, history, rollcall,
   secretary_details, constprovi, functions, regulations, annualreport,
   orgsetup, links) carry their section navigation in
   `<div class="col-lg-2 col-xs-2 sidebarid">`, with an inline <style> block
   in each view that ends:

       @media screen and (max-width: 1000px) { div.sidebarid { display: none } }

   So all 11 section links were simply unreachable on a phone. And because
   col-lg-* only takes effect from 1200px in Bootstrap 3, between 1000px and
   1199px the col-xs-2 applied instead and the menu rendered as a 16%-wide
   sliver. Both ranges are handled here: the menu becomes a full-width
   panel above the content, collapsed behind a tappable header that
   appsc-responsive.js injects, so the 11 view files need no edits.
   ========================================================================== */

@media (max-width: 1199px) {
  div.sidebarid,
  .sidebarid {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px;
  }

  .sidebarid .vertical-menu {
    width: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    display: none;
    text-align: left;
  }

  .sidebarid.appsc-open .vertical-menu {
    display: block;
  }

  .sidebarid .vertical-menu a {
    border-bottom: 1px solid #ddd;
    min-height: 44px;
  }

  .appsc-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 3px;
    background-color: #0d1c43;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    min-height: 44px;
  }

  .appsc-section-toggle .appsc-caret {
    transition: transform .2s ease;
    font-size: 12px;
    margin-left: 10px;
  }

  .sidebarid.appsc-open .appsc-section-toggle .appsc-caret {
    transform: rotate(180deg);
  }
}

/* The toggle is a mobile affordance only; above 1199px the sidebar is a
   normal column again. */
@media (min-width: 1200px) {
  .appsc-section-toggle {
    display: none !important;
  }

  .sidebarid .vertical-menu {
    display: block;
  }
}

/* Header logo row: the brand and the emblem strip sat in fixed-percentage
   columns that left the logo a few pixels wide on a phone. */
@media (max-width: 767px) {
  .top_header .navbar-brand {
    float: none;
    display: block;
    height: auto;
    padding: 8px 0;
  }

  .top_header .navbar-brand img {
    max-width: 100%;
    height: auto;
  }

  .top_header .callogo .icon {
    max-width: 62px;
    height: auto;
  }
}


/* ==========================================================================
   7. Known fixed-width overflow offenders
   Each of these is a literal width in appsc_style.css or a view that is
   wider than a phone or tablet viewport.
   ========================================================================== */

/* .innercon is the content wrapper on the inner pages that matter most -
   Notifications, Advertisements, Results, Syllabus, Forms & Downloads,
   Contact, RTI, Court Judgements, Upcoming Exams. appsc_style.css gives it a
   fixed rem width at every breakpoint, and every one of them is wider than
   the viewport it applies to:

     viewport     width set        + margin-left   total
     <=378px      28rem (448px)    2rem  (32px)    480px
     379-576px    40rem (640px)    2rem  (32px)    672px
     577-698px    65rem (1040px)   2rem  (32px)    1072px
     699-800px    70rem (1120px)   2rem  (32px)    1152px
     801-1025px   82rem (1312px)   2rem  (32px)    1344px
     >=1026px     95rem (1520px)   21rem (336px)   1856px

   So those pages scrolled sideways on every screen size, phone to desktop.
   The 21rem left margin cleared a left sidebar (#leftbar) whose contents are
   now entirely commented out, so it is reserving space for nothing.

   Replaced with one fluid, centred container. Unconditional on purpose: a
   max-width media query would leave the desktop case (anything narrower
   than 1856px) still overflowing. 1430px matches the width the homepage
   already uses for its own content. */
.innercon,
.innercon1 {
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* ...and it is capped at the same widths bootstrap.css gives .container, so
   the content on these pages lines up with the header, announcement strip
   and footer above and below it instead of running wider than all of them.
   An earlier revision used 1430px here, which did not match anything. */
@media (min-width: 768px) {
  .innercon,
  .innercon1 {
    max-width: 750px !important;
  }
}

@media (min-width: 992px) {
  .innercon,
  .innercon1 {
    max-width: 970px !important;
  }
}

@media (min-width: 1200px) {
  .innercon,
  .innercon1 {
    max-width: 1170px !important;
  }
}

/* The homepage hero is the one content section with no container at all.
   Every other top-level section - announce, advertisement, img-div, footer -
   wraps its content in .container, but section.institute positions its
   caption with percentage insets instead:

       .carousel-caption1 { position: absolute; left: 10%; right: 7% }

   So on a 1920px screen the quote, the four action buttons and the icon
   panel span about 1594px while everything below them stops at 1170px, and
   the hero visibly fails to line up with the rest of the page. The insets
   are also asymmetric, 10% against 7%, so the block is not even centred.

   Replaced with the exact geometry bootstrap.css gives .container - same
   widths, same 15px gutters, centred by auto margins. Centring an absolutely
   positioned box needs left and right both pinned to 0 alongside the width,
   which is why they are reset here. Five separate media-query copies of this
   rule exist in appsc_style.css, each with its own `bottom`; only the
   horizontal placement is overridden, so those vertical offsets still
   apply. */
.institute .carousel-caption1 {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .institute .carousel-caption1 {
    width: 750px !important;
  }
}

@media (min-width: 992px) {
  .institute .carousel-caption1 {
    width: 970px !important;
  }
}

@media (min-width: 1200px) {
  .institute .carousel-caption1 {
    width: 1170px !important;
  }
}

/* The applicant login page has the same gap in its header bar: the row
   holding the logo and the home button is not wrapped in a container, so
   those sit hard against the window edges while the form below them is
   constrained. Only the content is centred here - the bar's own background
   still spans the full width, which is the point of a header bar. */
.header-bar > .row {
  max-width: 1170px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Two more unconditional fixed widths on the homepage, both wider than any
   phone and one wider than most desktops:

     .tickercontainer { width: 108rem }   -> 1728px   (style.css line 1242)
     .descp1          { width:  59rem }   ->  944px   (appsc_style.css line 22)

   These were removed once, as part of pulling out a batch of cosmetic
   overrides, and that was a mistake worth naming: the batch also changed the
   ticker's type size and made its items stack, which was restyling and
   rightly went - but capping a 1728px box so it stops pushing the page
   sideways is an overflow fix. Only the caps are back; the type sizes and
   the stacking are not.

   The cap does not interfere with the scrolling marquee. .tickercontainer
   already carries overflow:hidden, and the strip that actually moves is its
   child ul.newsticker, which keeps its own width and its nowrap. The
   container is the window the strip scrolls behind, so it wants to be the
   width of the page, not 1728px. */
.tickercontainer,
.tickercontainer1 {
  width: 100% !important;
  max-width: 100% !important;
}

.descp1 {
  width: auto !important;
  max-width: 100% !important;
}

/* .imp-lk - the three "Important Links" logos in the homepage footer - is
   68.333333% wide with `margin-left: 173px` between 699px and 992px, and 48px
   in the narrower blocks. Its parent is a column, not the window, so 68% of
   that plus a 173px indent reaches past the parent's right edge and pushes
   the page sideways. Only the indent is reset; the author's width stands. */
@media (max-width: 992px) {
  .imp-lk {
    margin-left: 0 !important;
  }
}

/* Same story, smaller blast radius: .fcontent1 in the footer is 28-29rem
   wide with a -24rem top margin inside a 378px breakpoint. */
.fcontent1 {
  width: auto !important;
  max-width: 100% !important;
}

@media (max-width: 991px) {
  .fcontent1 {
    margin-top: 0 !important;
  }
}

@media (max-width: 991px) {
  /* Panels positioned with large negative or absolute margins. */
  .dv,
  .footer-top-2,
  .footer-top-3,
  .message,
  .advt,
  .advt1 {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* These carried margin-top values in the 24rem range to clear a floated
     block that no longer floats once the columns stack. */
  .advt,
  .advt1 {
    margin-top: 1rem !important;
  }
}

/* Containers: BS3 caps .container at fixed widths per breakpoint, which is
   correct, but several views nest containers and add their own padding. */
@media (max-width: 767px) {
  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .container .container,
  .container-fluid .container {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Footer: a four-column strip that needs to become one column. */
@media (max-width: 767px) {
  .footer-logo li {
    display: block;
    border-left: 0;
    padding: 6px 0;
  }

  .footer-logo li img {
    max-width: 100%;
    height: auto;
  }
}


/* ==========================================================================
   8. Admin and applicant shells (AdminLTE / Bootstrap 3)
   ========================================================================== */

@media (max-width: 991px) {
  /* Report and setup tables are the main offenders in the admin panel;
     section 4 handles the scrolling, this keeps the surrounding box sane. */
  .box,
  .panel,
  .content-wrapper,
  .box-body,
  .panel-body {
    max-width: 100%;
  }

  .box-body,
  .panel-body {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Toolbars of filter controls above a report. */
  .box-header .box-tools,
  .panel-heading .panel-tools {
    position: static;
    float: none;
    display: block;
    margin-top: .5rem;
  }
}

/* The wizard / step indicator on the application form. */
@media (max-width: 767px) {
  .nav-tabs {
    border-bottom: 0;
  }

  .nav-tabs > li {
    float: none;
    width: 100%;
  }

  .nav-tabs > li > a {
    border-radius: 4px;
    margin-right: 0;
    margin-bottom: 3px;
  }

  /* Photograph / signature upload previews. */
  .img-thumbnail,
  .applicant-photo,
  .applicant-sign {
    max-width: 100%;
    height: auto;
  }
}

/* Modals were given fixed pixel widths in several views. */
@media (max-width: 767px) {
  .modal-dialog {
    width: auto !important;
    max-width: 100% !important;
    margin: 10px;
  }

  .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
}


/* ==========================================================================
   9. Print
   Admit cards and application printouts are generated server-side as PDFs
   and do not load this file, but candidates also print pages from the
   browser. Keep those free of navigation chrome.
   ========================================================================== */

@media print {
  .main-navbar,
  .navbar-toggler,
  .top_bar,
  .js-preloader,
  .tickercontainer,
  .footer-logo,
  .no-print {
    display: none !important;
  }

  .appsc-scroll,
  .table-responsive {
    overflow: visible !important;
  }
}