/**
 * responsive.css
 * Mobile-responsive overrides for SPK ICT frontend.
 * Loaded AFTER all Sneat vendor CSS, demo.css, and mydigital.css.
 *
 * Breakpoints:
 *   Desktop: >= 992px (sidebar inline)
 *   Tablet:  768px – 991px (sidebar overlay, 2-col grids)
 *   Mobile:  < 768px (single column, stacked UI)
 */

/* ==========================================================================
   1. Global Overflow Prevention
   ========================================================================== */

.layout-wrapper {
  overflow-x: hidden;
  /* `clip` prevents horizontal overflow like `hidden` but, unlike it, does not
     turn the wrapper into a scroll container — which would break every
     `position: sticky` element on the page. `hidden` stays as the fallback for
     browsers without `clip` support. */
  overflow-x: clip;
  max-width: 100vw;
}

.content-wrapper *,
.layout-page * {
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   2. Typography Scaling
   ========================================================================== */

html {
  font-size: clamp(14px, 0.875rem + 0.1vw, 16px);
}

body {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (max-width: 767.98px) {
  h1, .h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
  h2, .h2 { font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
  h3, .h3 { font-size: clamp(1.125rem, 3vw, 1.5rem); }
  h4, .h4 { font-size: clamp(1rem, 2.5vw, 1.25rem); }

  body {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   3. Responsive Images and Media
   ========================================================================== */

.content-wrapper img,
.layout-page img {
  max-width: 100%;
  height: auto;
}

iframe,
video,
embed,
object {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  .avatar img,
  .avatar-online img {
    object-fit: cover;
    aspect-ratio: 1;
  }
}

/* ==========================================================================
   4. Off-Canvas Sidebar (below 992px)
   ========================================================================== */

@media (max-width: 991.98px) {
  .layout-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1080;
    width: min(260px, 80vw);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    overflow: hidden;
  }

  .layout-menu-expanded .layout-menu {
    transform: translateX(0);
    overflow: visible;
  }

  .layout-menu-expanded .layout-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1079;
  }
}

/* ==========================================================================
   5. Hamburger Toggle Visibility Override & Navbar Layout
   ========================================================================== */

@media (max-width: 991.98px) {
  /* Show hamburger below 992px */
  .layout-menu-toggle.d-lg-none {
    display: flex !important;
  }

  /* Force navbar to full-width, edge-to-edge on tablet/mobile */
  #layout-navbar,
  .layout-navbar.navbar-detached {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Reduce navbar height for mobile comfort */
  #layout-navbar {
    min-height: 56px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* Ensure navbar-nav-right fills available space */
  #layout-navbar .navbar-nav-right {
    flex: 1;
    min-width: 0;
  }

  /* Constrain breadcrumb area so it doesn't push action icons off-screen */
  #layout-navbar .navbar-nav-right > .d-flex:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  #layout-navbar .breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #layout-navbar .breadcrumb-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
}

@media (min-width: 992px) {
  .layout-menu-toggle.d-lg-none {
    display: none !important;
  }
}

/* ==========================================================================
   7. Touch Target Sizing (below 992px)
   ========================================================================== */

@media (max-width: 991.98px) {
  /* Buttons and links */
  .btn,
  .nav-link,
  .menu-link,
  .dropdown-item,
  .page-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
  }

  /* Form controls */
  .form-control,
  .form-select {
    min-height: 44px;
  }

  /* Sidebar menu items */
  .menu-inner .menu-item .menu-link {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Spacing between interactive elements */
  .btn + .btn,
  .nav-item + .nav-item {
    margin-left: 8px;
  }
}

/* ==========================================================================
   6. TopNavbar Responsive Adaptations
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Hide breadcrumb non-active items (keep only page title) */
  .breadcrumb-item:not(.active) {
    display: none;
  }

  /* Make page title prominent */
  .breadcrumb-item.active {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--bs-heading-color, #566a7f);
  }

  /* Tighter navbar padding on small phones */
  #layout-navbar,
  .layout-navbar.navbar-detached {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Reduce gap between hamburger and content */
  .layout-menu-toggle.d-xl-none .nav-link {
    padding-right: 0.25rem;
  }

  /* Enlarge action icon touch targets */
  .navbar-nav .nav-link,
  .navbar-nav .btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Constrain action icons area to not overflow */
  #layout-navbar .navbar-nav.flex-row {
    gap: 0.25rem !important;
    flex-wrap: nowrap;
  }

  /* Fix announcement dropdown overflow on small screens */
  .navbar-nav .dropdown-menu {
    width: calc(100vw - 1.5rem) !important;
    max-width: 380px;
    right: -0.5rem;
  }

  /* User dropdown menu width */
  .dropdown-user .dropdown-menu {
    width: auto !important;
    min-width: 200px;
  }
}

/* ==========================================================================
   8. Responsive Tables
   ========================================================================== */

@media (max-width: 767.98px) {
  .table-responsive,
  .card-body > .table,
  .card > .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Scroll shadow indicator */
  .table-responsive {
    background:
      linear-gradient(to right, white 30%, transparent),
      linear-gradient(to left, white 30%, transparent),
      linear-gradient(to right, rgba(0,0,0,0.1), transparent 15px),
      linear-gradient(to left, rgba(0,0,0,0.1), transparent 15px);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 15px 100%, 15px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Table cell touch padding */
  .table td,
  .table th {
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
  }
}

/* ==========================================================================
   9. Responsive Forms
   ========================================================================== */

@media (max-width: 767.98px) {
  .row > [class*="col-md-"],
  .row > [class*="col-lg-"],
  .row > [class*="col-xl-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea {
    width: 100%;
    min-height: 44px;
  }
}

/* ==========================================================================
   10. Responsive Modals
   ========================================================================== */

@media (max-width: 767.98px) {
  .modal-dialog {
    width: 95vw;
    max-width: 95vw;
    margin: 0.5rem auto;
  }

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

  .modal-header .btn-close {
    width: 44px;
    height: 44px;
    padding: 0;
  }
}

/* ==========================================================================
   11. Responsive Card Grids
   ========================================================================== */

@media (max-width: 767.98px) {
  .row > [class*="col-md-"],
  .row > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }

  .card {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .row > [class*="col-lg-3"],
  .row > [class*="col-xl-3"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row > [class*="col-lg-4"],
  .row > [class*="col-xl-4"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ==========================================================================
   12. Footer Responsive Behavior
   ========================================================================== */

@media (max-width: 767.98px) {
  .content-footer .container-xxl {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}