/* Global responsive helpers for Kongsi pages */
:root { --gap: 12px; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Make containers breathe on small screens */
@media (max-width: 768px){
  .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
  h1, h2, h3 { line-height: 1.2; }
}

/* === Tablet (iPad/Android tablet) PORTRAIT & LANDSCAPE ===
   Bootstrap container max-width can shrink at these widths (e.g. 720px at ~820px wide),
   leaving large empty side areas and making dashboard cards look "kepotong".
   Make containers fluid on tablets while keeping nice padding. */
/* NOTE:
   iPad landscape widths can be 1080–1366px (e.g., iPad Air ~1180px, iPad Pro 12.9 ~1366px).
   The old 1024px cap caused big empty side spaces on those tablets.
   (hover:none) + (pointer:coarse) limits this override to touch/tablet devices,
   so it won't change the layout on small desktop browser windows.
*/
@media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Buttons & forms */
.btn { white-space: nowrap; }
input, select, textarea { max-width: 100%; }

/* Tables: keep "desktop-like" readability by enabling horizontal scroll on small screens */
@media (max-width: 992px){
  table { width: 100%; }
  table.table, table.table-bordered, table.table-striped, table.table-hover {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  thead, tbody, tr { width: max-content; }
  th, td { vertical-align: middle; }
}

/* Reduce accidental layout overflow from long text */
.text-truncate-mobile{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Improve tap targets on mobile */
@media (max-width: 768px){
  .btn, .form-control, .form-select { min-height: 40px; }
}

/* === Landscape mobile & tablet (HP posisi landscape / iPad landscape) === */
@media (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  body{ font-size: 0.9rem; }

  /* Make dashboard & pages truly full-width on mobile landscape.
     Bootstrap sets container max-width (e.g., 720px) at ~896px wide screens,
     which creates large empty side areas. Override it here. */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .card { border-radius: 14px; }
}

/* Dashboard: on tablets (portrait), Bootstrap md breakpoint would force 4 cards/row.
   Some cards have minimum content widths, making the last one appear "kepotong".
   Keep 2 cards per row for 768-991px widths (common iPad portrait). */
@media (min-width: 768px) and (max-width: 991.98px){
  body.page-dashboard .stats-row > [class*="col-md-3"]{
    flex: 0 0 auto;
    width: 50% !important;
  }
}

/* Universal table wrapper (injected by responsive.js) */
.table-responsive{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep columns on one line; enable smooth horizontal scroll instead of wrapping */
.table-responsive > table,
.table-responsive > table.table,
table.table, table.table-bordered, table.table-striped, table.table-hover{
  white-space: nowrap !important;
}

@media (max-width: 1024px){
  .table-responsive > table{
    width: max-content;
    min-width: 100%;
  }
  .table-responsive th, .table-responsive td{
    white-space: nowrap !important;
    vertical-align: middle !important;
  }
}

/* Prevent common Bootstrap utilities from forcing wrap inside action cells */
.table-responsive .btn,
.table-responsive .badge,
.table-responsive .status-badge{
  white-space: nowrap !important;
}


/* --- Dashboard (index.php) tuning for LANDSCAPE (phones & small tablets) --- */
@media (max-width: 1024px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  /* Use full viewport width to avoid "desktop-like" narrow centered layout */
  body.page-dashboard .container-xxl{
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Reduce empty whitespace (top/bottom) so sections look "full" */
  body.page-dashboard .navbar{ margin-bottom: .75rem !important; }
  body.page-dashboard .page-header{ padding-top: .75rem !important; padding-bottom: 0 !important; }
  body.page-dashboard .row.mb-3{ margin-bottom: .75rem !important; }
  body.page-dashboard .row.g-3.mb-4{ margin-bottom: 1rem !important; }
  body.page-dashboard footer{ padding-bottom: .5rem !important; }

  /* Quick actions: keep on one line with smooth horizontal scroll */
  body.page-dashboard .quick-actions{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 6px;
  }
  body.page-dashboard .quick-actions .btn{ flex: 0 0 auto; }

  /* Stats cards: prevent Bootstrap md breakpoint from forcing 4 cards/row on landscape phones */
  body.page-dashboard .stats-row > [class*="col-md-3"]{
    flex: 0 0 auto;
    width: 50% !important; /* 2 cards per row */
  }
  body.page-dashboard .stats-row .card-dashboard{ height: 100%; }

  /* Tighten dashboard cards so content feels aligned & balanced */
  body.page-dashboard .card-dashboard .card-body{ padding: 1rem 1.1rem; }
  body.page-dashboard .table-sm td, body.page-dashboard .table-sm th{ padding: .38rem .5rem; }

  /* Slightly tighten typography so it fits cleanly */
  body.page-dashboard .page-title{ font-size: 1.1rem; }
  body.page-dashboard .page-subtitle{ font-size: .86rem; }
}

/* --- Dashboard on iPad landscape (wider tablets): keep desktop 4 cards/row, but still full-width --- */
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse){
  body.page-dashboard .container-xxl{
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.page-dashboard .quick-actions{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 6px;
  }
  body.page-dashboard .quick-actions .btn{ flex: 0 0 auto; }
}

/* --- Dashboard (index.php) tuning for TABLET (iPad portrait/landscape) --- */
@media (min-width: 768px) and (max-width: 991.98px){
  /* Keep stats cards from being forced into 4 tiny columns on iPad portrait */
  body.page-dashboard .stats-row > [class*="col-md-3"]{
    flex: 0 0 auto;
    width: 50% !important; /* 2 cards per row */
  }

  /* Quick actions: stay on one line and scroll if needed */
  body.page-dashboard .quick-actions{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 10px !important;
  }
  body.page-dashboard .quick-actions .btn{ flex: 0 0 auto; }
}
/* === Phone (mobile) FULL-WIDTH override === */


/* === Phone (mobile) FULL-WIDTH override ===
   Goal: on handphone (portrait & landscape), content/list/table should fill the screen
   with no big empty side spaces, while NOT affecting desktop.
*/
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse){
  html, body{ width: 100%; overflow-x: hidden; }

  /* Bootstrap containers: make truly fluid */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Common wrappers (safe even if not present on some pages) */
  .content,
  .content-area,
  .main,
  .main-content,
  .page-content{
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Invoice wrappers */
  .invoice-container,
  .invoice-wrap{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Rows/cols: prevent odd side gaps */
  .row{ margin-left: 0 !important; margin-right: 0 !important; }
  .row > *{ padding-left: 8px !important; padding-right: 8px !important; }

  /* Cards should stretch full width */
  .card{ width: 100% !important; }
}

/* Mobile landscape can exceed width breakpoints on some phones; catch by height */
@media (max-height: 500px) and (hover: none) and (pointer: coarse){
  html, body{ width: 100%; overflow-x: hidden; }

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .content,
  .content-area,
  .main,
  .main-content,
  .page-content{
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Invoice wrappers */
  .invoice-container,
  .invoice-wrap{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row{ margin-left: 0 !important; margin-right: 0 !important; }
  .row > *{ padding-left: 8px !important; padding-right: 8px !important; }

  .card{ width: 100% !important; }
}

/* Tables & lists: always use full available width on mobile */
@media (max-width: 991.98px) and (hover: none) and (pointer: coarse){
  .table-responsive{ width: 100% !important; }
  table{ width: 100% !important; }
}



/* === SN column (global) === */
.sn-truncate{
  display:inline-block;
  max-width:120px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
}
@media (min-width:577px) and (max-width:991.98px){
  .sn-truncate{ max-width:110px; }
}
@media (max-width:576px){
  .sn-truncate{ max-width:90px; }
}
/* Hint table column to stay tight (apply on th/td with .sn-col) */
.table-sn-tight th.sn-col,
.table-sn-tight td.sn-col{
  width: 140px;
  max-width: 140px;
  white-space: nowrap;
}