/* ==========================================================================
   KIMIH PWA & MOBILE RESPONSIVE DESIGN SYSTEM
   Supports: 320px, 360px, 375px, 390px, 414px, 480px, 768px, 820px, 1024px, 1280px, 1440px, 1920px
   ========================================================================== */

/* 1. Global Touch & Viewport Boundaries */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 2. Touch-Friendly Interactive Targets */
button, .btn, input[type="submit"], input[type="button"], a.btn, select, .nav-link {
  min-height: 44px;
  touch-action: manipulation;
}

/* 3. Fluid Responsive Containers */
.container, .container-fluid {
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* 4. Table Mobile Wrapping */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* 5. Responsive Media & Images */
img, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* 6. Breakpoint Media Queries */

/* --- Extra Small Phones (320px - 360px) --- */
@media (max-width: 360px) {
  h1, .fs-1 { font-size: 1.5rem !important; }
  h2, .fs-2 { font-size: 1.35rem !important; }
  h3, .fs-3 { font-size: 1.2rem !important; }
  .card-body { padding: 10px !important; }
  .btn { padding: 8px 12px !important; font-size: 13px !important; }
  .col-6 { width: 100% !important; } /* Stack 2-col cards into single column on tiny screens */
}

/* --- Standard Mobile Phones (375px - 480px) --- */
@media (max-width: 480px) {
  .page-content { padding: 12px 8px !important; }
  .modal-dialog { margin: 8px !important; max-width: calc(100% - 16px) !important; }
  .nav-tabs-custom { overflow-x: auto; flex-nowrap: nowrap; }
  .table th, .table td { padding: 8px 6px !important; font-size: 13px !important; }
  .avatar-md { width: 48px !important; height: 48px !important; }
  .avatar-sm { width: 36px !important; height: 36px !important; }
}

/* --- Tablets & Foldables (481px - 768px) --- */
@media (min-width: 481px) and (max-width: 768px) {
  .container { max-width: 720px; }
  .card { margin-bottom: 16px; }
}

/* --- Small Laptops / iPads (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { max-width: 960px; }
}

/* --- Desktop Monitors & Large Displays (1025px+) --- */
@media (min-width: 1025px) {
  .container { max-width: 1320px; }
}

/* 7. PWA Installation Standalone Styles */
@media display-mode: standalone {
  body {
    user-select: none;
    -webkit-user-select: none;
  }
  header, navbar, .topbar {
    padding-top: env(safe-area-inset-top, 0px);
  }
}