/*
 * responsive.css
 * Public-only (licentamaster candidate site) mobile responsiveness overrides.
 *
 * This file is deployed ONLY to the public server (html/public/css -> /css),
 * never to the private committee server, and it is linked last so it can
 * override the shared rules in style.css / main.css / style_tabel_facultati.css
 * without changing those shared files. Use !important where a shared rule or an
 * inline style would otherwise win.
 */

/* ------------------------------------------------------------------ */
/* Global: fluid container + responsive media                         */
/* ------------------------------------------------------------------ */

/* style.css / main.css force .container { min-width: 800px } which causes
   horizontal scrolling on phones. Drop the floor so Bootstrap's own
   responsive container widths take over. */
.container,
.containerLarge {
  min-width: 0 !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* Avoid full-page horizontal scrolling from stray wide elements on small
   screens (table wrappers handle scroll in the Tables section below).
   Above tablet, allow the page to scroll horizontally so wide result
   tables (rezultate_admitere.php) remain fully reachable. */
html,
body {
  overflow-x: hidden;
}

@media (min-width: 769px) {
  html,
  body {
    overflow-x: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Navbar (collapsible) + top auth bar                                */
/* ------------------------------------------------------------------ */

/* navbar.php no longer hard-codes min-width:1200px; make sure nothing else
   forces it wider than the viewport. */
.navbar .container,
.navbar .container-fluid {
  min-width: 0 !important;
}

@media (max-width: 767px) {
  /* The main section navbar links should stack cleanly when collapsed. */
  .navbar-nav {
    margin: 0;
  }
  .navbar-nav > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Keep the main section navbar horizontally centered on tablet/desktop,
   matching the previous (non-collapsing) layout. */
@media (min-width: 768px) {
  .navbar-default .navbar-collapse {
    text-align: center;
  }
  .navbar-default .navbar-collapse > .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
}

/* ------------------------------------------------------------------ */
/* Header / carousel                                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
  .carousel {
    height: auto;
  }
  .carousel-inner,
  .item {
    height: auto;
  }
  .carousel-inner img,
  .item img {
    width: 100%;
    height: auto;
  }
  .carousel-caption {
    position: absolute;
    padding-bottom: 10px;
  }
  .carousel-caption h2 {
    font-size: 16px;
  }
  .carousel-caption h2 span {
    font-size: 1em !important;
  }
  .carousel-caption h3 {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .carousel-caption {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Tables                                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
  /* Faculty grid (inscriere_online.php, rezultate_admitere.php):
     turn the multi-column grid into a single stacked column. */
  .listaFacultati,
  .listaFacultati tbody,
  .listaFacultati tr,
  .listaFacultati td {
    display: block !important;
    width: 100% !important;
  }
  .listaFacultati td a {
    height: auto !important;
  }

  /* Wide data tables: allow horizontal scroll instead of overflowing.
     body/html use overflow-x:hidden (above), so the scroll must happen
     inside a width-constrained wrapper — otherwise the table is clipped
     with no scrollbar (rezultate_admitere.php bootstrap-table lists). */
  #facultate,
  table.statsTable,
  .table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep results section and panels within the viewport. */
  section.containerLarge,
  .statsPanel,
  .statsPanel .panel-body,
  .bootstrap-table,
  .bootstrap-table .fixed-table-container {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Scrollport for bootstrap-table (admission results, statistics, etc.). */
  .statsPanel .panel-body,
  .bootstrap-table .fixed-table-container,
  .bootstrap-table .fixed-table-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Let the table keep its natural width so the scrollbar appears. */
  .bootstrap-table .fixed-table-body > table.table {
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
}

/* ------------------------------------------------------------------ */
/* Registration form (formular.php + formular/* sections)             */
/* Scoped to #formular so only the candidate form is affected.        */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
  /* Override the many inline width:..px / width:..% + display:inline rules
     in the shared formular section files. Text-like inputs and selects go
     full width and stack; radio/checkbox/file inputs are left untouched. */
  #formular input[type="text"],
  #formular input[type="email"],
  #formular input[type="number"],
  #formular input[type="tel"],
  #formular input[type="date"],
  #formular input[type="password"],
  #formular input:not([type]),
  #formular select,
  #formular textarea {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* The two name fields at the top of the options panel. */
  #optiuni_nume,
  #optiuni_prenume {
    width: 100% !important;
    display: block !important;
  }

  /* Buttons that were pinned to a fixed pixel width. */
  #buton_formular,
  #formular .btn[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Options picker (#optiuniTuiasiDiv) two-column layout -> stacked.
   Widths are defined in style_tabel_facultati.css (150px / 440px). */
@media (max-width: 768px) {
  #optiuniTuiasiDiv {
    flex-direction: column !important;
  }
  #optiuniTuiasiDiv > #optiuniTuiasiDiv1,
  #optiuniTuiasiDiv > #optiuniTuiasiDiv2 {
    width: 100% !important;
  }
  #optiuniTuiasiDiv > #optiuniTuiasiDiv1 ul li,
  #optiuniTuiasiDiv > #optiuniTuiasiDiv2 li {
    width: 100% !important;
  }
  .optiune-div-legenda {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ------------------------------------------------------------------ */
/* Auth pages (Register / Login / Recovery)                           */
/* These mix Bootstrap 3 with a few Bootstrap 4 utility classes.      */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
  .w-75,
  .w-50 {
    width: 100% !important;
  }
  .auth-card,
  .login-form,
  form.form-set {
    width: 100% !important;
    max-width: 100% !important;
  }
}