/*
 * 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. */
html,
body {
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ */
/* 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. */
  #facultate,
  table.statsTable,
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* bootstrap-table results/statistics already render inside a scrollable
     container; make sure it can scroll horizontally on small screens. */
  .bootstrap-table .fixed-table-body {
    overflow-x: auto;
  }
}

/* ------------------------------------------------------------------ */
/* 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;
  }
}