/* ============================================================
   responsive.css
   Mobile-first responsive layer for ELMS.
   Loaded AFTER alpha.min.css / style.css / custom.css / materialdesign.css
   so these rules can override the fixed-width desktop template safely.
   Breakpoints follow Bootstrap 4 conventions already used in the markup:
     <576px   phones
     576–768  large phones / small tablets
     768–992  tablets
     >=992    desktop (existing template default)
   ============================================================ */

/* ---- Global, mobile-first resets ---- */
* {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

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

table {
  width: 100%;
}

/* Wrap wide data tables (DataTables, employee/leave lists) so they scroll
   horizontally instead of breaking the layout on small screens. */
.table-responsive-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Top navbar (login pages) ---- */
.navbar {
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
}

.navbar-nav {
  flex-direction: column;
  text-align: center;
}

.navbar-nav .nav-link {
  padding: 0.5rem 0;
}

/* ---- Main content / cards ---- */
main.mn-inner {
  padding: 0 12px;
}

.card {
  width: 100% !important;
  margin: 10px 0;
}

.col-md-3,
.col-md-6,
.col-md-9,
.col-md-12 {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/* ---- Forms ---- */
.input-field {
  width: 100%;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100% !important;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
}

.btn, input[type="submit"], button {
  width: 100%;
  margin-top: 8px;
}

/* ---- Dashboard-specific layout (admin/employee area) ---- */
#slide-out.side-nav {
  width: 260px;
}

.header-bg {
  padding-left: 0;
}

/* Push main content full-width once the sidebar becomes an off-canvas
   drawer on small/medium screens (Materialize handles the toggle; this just
   makes sure the content area doesn't reserve empty space for it). */
@media only screen and (max-width: 992px) {
  .mn-content,
  .content-wrapper,
  main.mn-inner {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .top-navbar,
  .navbar-fixed {
    padding-left: 0 !important;
  }
}

/* ---- Small tablets / large phones (576px–768px) ---- */
@media only screen and (max-width: 768px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }
  h3, h4 { font-size: 1.1rem; }

  .card-title {
    font-size: 16px !important;
  }

  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .col-md-3:empty {
    display: none; /* collapse the empty spacer columns used to center cards */
  }
}

/* ---- Phones (<576px) ---- */
@media only screen and (max-width: 576px) {
  body {
    font-size: 14px;
  }

  .navbar-toggler {
    margin-left: auto;
  }

  .card .card-content {
    padding: 14px;
  }

  table.dataTable,
  table {
    font-size: 12px;
  }

  #slide-out.side-nav {
    width: 85vw;
    max-width: 300px;
  }

  .sidebar-profile-image img {
    width: 60px;
    height: 60px;
  }
}

/* ---- Larger desktops: keep template's original multi-column feel ---- */
@media only screen and (min-width: 993px) {
  .col-md-3 { width: 25%; float: left; }
  .col-md-6 { width: 50%; float: left; }
  .col-md-9 { width: 75%; float: left; }
}