/* AquaBest Mobile App Layout v1
   This file is intentionally separate from the desktop theme. */
.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
  body { background: #07111f; }
  #appContainer.active { display: block !important; }
  .sidebar { width: min(88vw, 340px); }
  .main-content { display: block; min-height: 100dvh; }
  .header {
    position: sticky; top: 0; z-index: 120;
    min-height: 62px; margin-top: 0; padding: .5rem .65rem .5rem 4.7rem;
    background: rgba(15, 31, 51, .96); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(56,189,248,.18); border-radius: 0;
  }
  .header::before {
    content: ''; position: absolute; left: 4.75rem; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 9px; background: #fff url('../icon-96x96.png') center / 28px 28px no-repeat;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
  }
  .header > div:first-child { gap: .05rem !important; }
  .header > div:first-child > span:first-child { color: #f3f8ff; font-size: .8rem; font-weight: 800; letter-spacing: .01em; }
  .header > div:first-child > span:first-child::after { content: '  •  AquaBest Portal'; color: #7dd3fc; font-weight: 600; }
  #syncIndicator { color: #6ee7b7 !important; font-size: .61rem !important; }
  .header > div:last-child .btn { min-height: 36px; padding: .4rem .5rem; border-radius: 10px; }
  .header > div:last-child .btn-danger { font-size: 0; width: 40px; }
  .header > div:last-child .btn-danger::after { content: '↪'; font-size: 1.05rem; }
  #menuToggle {
    display: inline-flex; align-items: center; justify-content: center;
    top: .75rem; left: .65rem; width: 64px; height: 42px; padding: 0;
    border-radius: 12px; background: #123452; border-color: rgba(56,189,248,.32);
    font-size: 0; box-shadow: 0 5px 18px rgba(0,0,0,.2);
  }
  #menuToggle::before { content: '☰'; font-size: 1.15rem; }
  .page-content { padding: .75rem .65rem calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
  .page-header { padding: 1rem !important; border-radius: 16px !important; background: linear-gradient(145deg,#132b45,#0d1d31) !important; }
  .page-header h2 { font-size: 1.35rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .stat-card { padding: .8rem .7rem; border-radius: 14px; background: #10243a; }
  .stat-value { font-size: 1.22rem; }
  .card { border-radius: 15px; background: #0e2034; border-color: rgba(56,189,248,.15); }
  .card-header { padding: .8rem .85rem; }
  .card-body { padding: .75rem; }
  .search-bar { padding: .6rem; border-radius: 14px; background: #0e2034; }
  .search-bar > .btn, .page-content .btn-primary { border-radius: 11px; }
  .mobile-bottom-nav {
    position: fixed; display: grid; grid-template-columns: repeat(5, 1fr);
    left: .55rem; right: .55rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 250; padding: .35rem .25rem; border: 1px solid rgba(56,189,248,.2);
    border-radius: 18px; background: rgba(14,32,52,.96); backdrop-filter: blur(16px);
    box-shadow: 0 12px 35px rgba(0,0,0,.42);
  }
  .mobile-nav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .12rem; min-height: 48px; padding: .2rem; border: 0; border-radius: 13px;
    color: #91a9bf; background: transparent; font: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-btn span { font-size: 1.2rem; line-height: 1; }
  .mobile-nav-btn small { font-size: .62rem; font-weight: 700; }
  .mobile-nav-btn.active, .mobile-nav-btn:active { color: #67d5ff; background: rgba(2,132,199,.18); }
  .modal-overlay { padding: .45rem; }
  .modal { border-radius: 18px; }
  table { font-size: .82rem; }
}

@media (max-width: 430px) {
  .header { padding-left: 4.7rem; }
  .header::before { left: 4.75rem; }
  .header > div:first-child > span:first-child { max-width: 128px; }
  .header > div:last-child #topRefreshBtn { display: none; }
  .page-header h2 { font-size: 1.22rem; }
  .stat-card { padding: .68rem .55rem; }
  .stat-value { font-size: 1.05rem; }
  .mobile-bottom-nav { left: .35rem; right: .35rem; }
}

/* Responsive hardening for tablets and narrow browsers.
   This layer only changes layout; menu/data/business logic is untouched. */
html { max-width: 100%; overflow-x: hidden; }
body { min-width: 0; }
#appContainer, #appContainer.active, .main-content, .page-content { min-width: 0; max-width: 100%; }
.page-content > *, .card, .card-body, .card-header, .search-bar, .form-grid { min-width: 0; max-width: 100%; }
.card-body, .card-header, .page-header, .search-bar { overflow-wrap: anywhere; }
.table-container { width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: visible; }
.table-container table { max-width: none; }

/* Tablet portrait/landscape: keep the useful desktop navigation while making
   the content area wide enough for forms, cards, and document previews. */
@media (min-width: 769px) and (max-width: 1100px) {
  body.portal-design-v286 .sidebar, .sidebar { width: 220px; }
  body.portal-design-v286 .main-content, .main-content { margin-left: 220px; }
  body.portal-design-v286 .header, .header { padding: .65rem .85rem; gap: .65rem; }
  .header > div:first-child { min-width: 0; }
  .header > div:first-child > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .header > div:last-child { flex-shrink: 0; }
  body.portal-design-v286 .page-content, .page-content { padding: 1rem; }
  .portal-dashboard-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-summary-panel { min-width: 0; width: 100%; }
  .modal { width: min(94vw, 700px); max-width: 94vw; }
}

@media (max-width: 768px) {
  /* Prevent inline flex rows and document tables from creating horizontal
     page overflow on Samsung Browser and iOS Safari. */
  .header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .header > div:first-child { min-width: 0; max-width: 100%; }
  .header > div:last-child { min-width: 0; max-width: 100%; }
  .header > div:last-child .btn-danger { flex: 0 0 40px; }
  .page-header h2, .card-header h3 { overflow-wrap: anywhere; }
  .form-grid > *, .search-bar > *, .card-header > * { min-width: 0; max-width: 100%; }
  .table-container table:not(.mobile-ready) { min-width: 560px; }
  .table-container table.mobile-ready { min-width: 0; }
  .table-container:has(table.mobile-ready) { overflow-x: visible !important; }
  .modal-overlay { overscroll-behavior: contain; }
  .mobile-bottom-nav { max-width: calc(100vw - 1.1rem); }
}

@media (max-width: 430px) {
  .header { grid-template-columns: minmax(0, 1fr) 40px; }
  .header > div:first-child > span:first-child { max-width: 100%; }
  .page-content { padding-left: .55rem; padding-right: .55rem; }
  .card-body { padding-left: .65rem; padding-right: .65rem; }
  .mobile-nav-btn small { font-size: .58rem; }
}

/* ===================================================================
   TABLET IN LANDSCAPE  -  added 15 Sep 2026
   ===================================================================
   The tablet layout stopped at 1100px. Every tablet held sideways is
   wider than that:

       iPad mini landscape       1133
       iPad 10.9 landscape       1180
       iPad Pro 11 landscape     1194
       Galaxy Tab S9 landscape   1280
       iPad Pro 12.9 landscape   1366

   so all of them fell through to the desktop layout - full 260px
   sidebar, desktop spacing, mouse-sized buttons.

   Width alone cannot separate an iPad Pro in landscape (1366) from a
   1366x768 laptop, which is a very common office screen. So this block
   also requires `pointer: coarse` - a finger rather than a mouse. A
   laptop keeps the desktop layout; a tablet gets the tablet layout,
   whichever way it is held.
   =================================================================== */
@media (min-width: 1101px) and (max-width: 1400px) and (pointer: coarse) {
  body.portal-design-v286 .sidebar, .sidebar { width: 220px; }
  body.portal-design-v286 .main-content, .main-content { margin-left: 220px; }
  body.portal-design-v286 .header, .header { padding: .65rem .85rem; gap: .65rem; }
  .header > div:first-child { min-width: 0; }
  .header > div:first-child > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .header > div:last-child { flex-shrink: 0; }
  body.portal-design-v286 .page-content, .page-content { padding: 1rem; }
  .portal-dashboard-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quote-line-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quote-summary-panel { min-width: 0; width: 100%; }
  .modal { width: min(92vw, 900px); max-width: 92vw; }
}

/* ===================================================================
   WIDE TABLES ON TABLETS
   ===================================================================
   .table-container only became horizontally scrollable below 768px.
   Between 769px and the desktop range it had no overflow rule at all,
   so a wide table - the invoice, quotation and schedule tables all
   have many columns - pushed the page sideways instead of scrolling
   inside its own box. This gives tablets the same behaviour phones
   already had.
   =================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
  .table-container {
    width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}
@media (min-width: 1101px) and (max-width: 1400px) and (pointer: coarse) {
  .table-container {
    width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ===================================================================
   TOUCH TARGETS
   ===================================================================
   Any touch device at tablet size: make the action buttons finger
   sized. The invoice and schedule rows carry a lot of small buttons
   that are fine with a mouse and fiddly with a thumb. Desktop is
   untouched - this only applies where the pointer is coarse.
   =================================================================== */
@media (min-width: 769px) and (pointer: coarse) {
  .btn, .btn-sm { min-height: 38px; }
  .table-container .btn-sm { min-height: 34px; padding-inline: .6rem; }
  .form-input, .form-select, select.form-input { min-height: 40px; }
  .nav-item { padding-block: .6rem; }
}


/* Mobile sidebar rail and width correction for the open drawer. */
@media (max-width: 991.98px) {
  html body.kanakku-skin .k-rail {
    display: none !important;
    visibility: hidden !important;
  }
  html body.kanakku-skin #sidebar {
    left: 0 !important;
    right: auto !important;
    width: min(86vw, 300px) !important;
    max-width: 300px !important;
    transform: translateX(-100%) !important;
  }
  html body.kanakku-skin #sidebar.open {
    transform: translateX(0) !important;
  }
  html body.kanakku-skin .main-content {
    margin-left: 0 !important;
  }
}

/* Site Visits: readable register text and touch-friendly actions. */
body[data-ab-page="site-visits"] #pageContent .page-header p {
  color: var(--k-ink-2, #45505C);
  font-size: 15px;
  line-height: 1.5;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table {
  width: 100%;
  font-size: 15px;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table th {
  font-size: 14px !important;
  padding: 12px 14px !important;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table td {
  color: var(--k-ink-2, #45505C) !important;
  font-size: 15px !important;
  line-height: 1.45;
  padding: 12px 14px !important;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table td strong {
  color: var(--k-ink, #051321) !important;
  font-size: 15px;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table td small {
  display: inline-block;
  margin-top: 4px;
  color: var(--k-muted, #5D6772) !important;
  font-size: 13px;
  line-height: 1.45;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table td .btn {
  min-height: 34px;
  margin: 2px;
  padding: 6px 10px;
  font-size: 13px !important;
}

@media (max-width: 768px) {
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready tbody { gap: 12px; }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready tr {
    padding: 8px 12px;
    border-radius: 12px;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td {
    min-height: 42px;
    padding: 9px 0 !important;
    font-size: 15px !important;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td::before {
    max-width: 38%;
    color: var(--k-ink-2, #45505C) !important;
    font-size: 13px !important;
    line-height: 1.4;
    text-transform: none;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td[data-label="Actions"] { text-align: left !important; }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td[data-label="Actions"]::before {
    display: block;
    float: none;
    max-width: 100%;
    margin-bottom: 6px;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td[data-label="Actions"] .btn {
    min-height: 38px;
    margin: 3px 4px 3px 0;
    font-size: 13px !important;
  }
}

/* Jobs & Installations: readable details and thumb-sized actions. */
body[data-ab-page="jobs-installations"] #pageContent .page-header p {
  color: var(--k-ink-2, #45505C);
  font-size: 15px;
  line-height: 1.5;
}
body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table { width: 100%; font-size: 15px; }
body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table th {
  font-size: 14px !important;
  padding: 12px 14px !important;
}
body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table td {
  color: var(--k-ink-2, #45505C) !important;
  font-size: 15px !important;
  line-height: 1.45;
  padding: 12px 14px !important;
}
body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table td strong {
  color: var(--k-ink, #051321) !important;
  font-size: 15px;
}
body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table td small {
  display: inline-block;
  margin-top: 4px;
  color: var(--k-muted, #5D6772) !important;
  font-size: 13px;
  line-height: 1.45;
}
body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table td .btn {
  min-height: 34px;
  margin: 2px;
  padding: 6px 10px;
  font-size: 13px !important;
}
@media (max-width: 768px) {
  body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table.mobile-ready tbody { gap: 12px; }
  body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table.mobile-ready tr {
    padding: 8px 12px;
    border-radius: 12px;
  }
  body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table.mobile-ready td {
    min-height: 42px;
    padding: 9px 0 !important;
    font-size: 15px !important;
  }
  body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table.mobile-ready td::before {
    max-width: 38%;
    color: var(--k-ink-2, #45505C) !important;
    font-size: 13px !important;
    line-height: 1.4;
    text-transform: none;
  }
  body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table.mobile-ready td[data-label="Actions"] { text-align: left !important; }
  body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table.mobile-ready td[data-label="Actions"]::before {
    display: block;
    float: none;
    max-width: 100%;
    margin-bottom: 6px;
  }
  body[data-ab-page="jobs-installations"] #pageContent .installation-jobs-table.mobile-ready td[data-label="Actions"] .btn {
    min-height: 38px;
    margin: 3px 4px 3px 0;
    font-size: 13px !important;
  }
}

/* Site Visits: keep register text and controls easy to read on desktop and phones. */
body[data-ab-page="site-visits"] #pageContent .page-header p {
  color: var(--k-ink-2, #45505C);
  font-size: 15px;
  line-height: 1.5;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table {
  width: 100%;
  font-size: 15px;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table th {
  font-size: 14px !important;
  padding: 12px 14px !important;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table td {
  color: var(--k-ink-2, #45505C) !important;
  font-size: 15px !important;
  line-height: 1.45;
  padding: 12px 14px !important;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table td strong {
  color: var(--k-ink, #051321) !important;
  font-size: 15px;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table td small {
  display: inline-block;
  margin-top: 4px;
  color: var(--k-muted, #5D6772) !important;
  font-size: 13px;
  line-height: 1.45;
}
body[data-ab-page="site-visits"] #pageContent .site-visits-table td .btn {
  min-height: 34px;
  margin: 2px;
  padding: 6px 10px;
  font-size: 13px !important;
}

@media (max-width: 768px) {
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready tbody {
    gap: 12px;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready tr {
    padding: 8px 12px;
    border-radius: 12px;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td {
    min-height: 42px;
    padding: 9px 0 !important;
    font-size: 15px !important;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td::before {
    max-width: 38%;
    color: var(--k-ink-2, #45505C) !important;
    font-size: 13px !important;
    line-height: 1.4;
    text-transform: none;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td[data-label="Actions"] {
    text-align: left !important;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td[data-label="Actions"]::before {
    display: block;
    float: none;
    max-width: 100%;
    margin-bottom: 6px;
  }
  body[data-ab-page="site-visits"] #pageContent .site-visits-table.mobile-ready td[data-label="Actions"] .btn {
    min-height: 38px;
    margin: 3px 4px 3px 0;
    font-size: 13px !important;
  }
}