/* MIL Procurement System — phone / tablet layer on top of DashForge.
 *
 * Injected last into every HTML page by the output filter (app/bootstrap.php),
 * so it wins over dashforge.css and the per-page <style> blocks without
 * touching 90+ legacy pages. Everything here is scoped to the breakpoints
 * where DashForge collapses the sidebar (< 992px) or to touch devices;
 * desktop rendering is unchanged.
 */

/* ---------------------------------------------------------------------------
 * 1. Natural document scrolling.
 *    DashForge's dashboard layout is a fixed 100vh pane with .content-body as
 *    its own scroll container. On phones that fights the browser chrome
 *    (100vh is taller than the visible area on iOS, pull-to-refresh and the
 *    collapsing address bar stop working, full-page screenshots are cut off).
 *    Below the sidebar breakpoint let the document scroll instead.
 * ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  .content.ht-100v {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .content-body {
    height: auto !important;
    overflow: visible !important;
  }
  /* Safe areas on notched phones when installed as a PWA. */
  .content-body {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
    padding-bottom: max(15px, env(safe-area-inset-bottom));
  }
  /* Page titles and breadcrumbs: no fixed-width hero areas. */
  .content-body .container.pd-x-0 {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Tables.
 *    Wide tables scroll sideways inside their card instead of being clipped;
 *    mil-mobile.js wraps any bare <table> in .table-responsive and turns on
 *    the DataTables Responsive extension (column collapsing with a "+" toggle).
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table td, .table th {
    padding: 8px 10px;
    white-space: normal;
  }
  /* DataTables toolbar: one control per line, full-width search. */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin-bottom: 10px;
  }
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
  .dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
  }
  .dataTables_wrapper .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
  }
  /* The Responsive extension's child rows ("+" details). */
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
  table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before,
  table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
    top: 50%;
    transform: translateY(-50%);
    background-color: #83bf48;
    border-color: #83bf48;
    box-shadow: none;
    width: 18px;
    height: 18px;
    line-height: 16px;
  }
  table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
  }
  table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(72, 94, 144, 0.12);
  }
  table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 110px;
    color: #8392a5;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Forms and controls.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* iOS zooms into any input smaller than 16px; keep the legacy look on desktop. */
  .form-control, .custom-select, select, textarea, input[type="text"], input[type="email"],
  input[type="number"], input[type="date"], input[type="password"], input[type="search"],
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 16px !important;
  }
  .form-control, .custom-select, .select2-container--default .select2-selection--single {
    min-height: 44px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
  }
  .select2-container {
    max-width: 100%;
  }
  input[type="file"] {
    max-width: 100%;
  }
  /* Multi-button rows stack instead of overflowing. */
  .btn-group:not(.dropdown) {
    flex-wrap: wrap;
  }
  /* Legacy inline widths (thead cells, hero blocks) never exceed the viewport. */
  [style*="width:"], [style*="width :"] {
    max-width: 100%;
  }
  .wd-300, .wd-400, .wd-450, .wd-500, .wd-600, .wd-sm-450 {
    width: 100% !important;
  }
  /* Modals use the whole width. */
  .modal-dialog {
    margin: 8px;
    max-width: none;
  }
  .modal-dialog-centered {
    min-height: calc(100% - 16px);
  }
  /* Tab strips scroll sideways rather than wrapping into a staircase. */
  .nav-tabs, .nav-pills.flex-nowrap-sm {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs .nav-link {
    white-space: nowrap;
  }
  /* Cards and stat blocks. */
  .card-body {
    padding: 15px;
  }
  h1, .h1 { font-size: 26px; }
  h2, .h2 { font-size: 22px; }
  h3, .h3 { font-size: 19px; }
  h4, .h4 { font-size: 17px; }
  /* Images (logos, signatures, previews) never force horizontal scroll. */
  img {
    max-width: 100%;
    height: auto;
  }
  /* Signature pads and canvases. */
  canvas {
    max-width: 100%;
  }
  /* Footer text is long; let it wrap. */
  .footer {
    flex-direction: column;
    text-align: center;
  }
  .footer > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Touch targets — applies to any touch device, whatever its width.
 * ------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn, button.btn, a.btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-xs, .btn-sm {
    min-height: 36px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
  }
  .table .btn-xs {
    white-space: nowrap;
  }
  .nav-aside .nav-link {
    min-height: 44px;
  }
  .dropdown-item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .custom-control-label::before,
  .custom-control-label::after {
    width: 20px;
    height: 20px;
  }
}

/* ---------------------------------------------------------------------------
 * 5. Brand mark (pwa/logo.svg) beside the "MIL Procurement" wordmark in the
 *    sidebar and on the sign-in / OTP headers — every width.
 * ------------------------------------------------------------------------- */
.mil-logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  margin-right: 8px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 23, 55, .25);
}
/* 28px mark + "MIL Procurement" must fit the 240px sidebar on one line. */
.aside-logo {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 19px !important;
  letter-spacing: -0.5px;
  padding-right: 6px;
}

/* ---------------------------------------------------------------------------
 * 5b. Web Push toggle in the sidebar (mil-mobile.js sets data-state).
 * ------------------------------------------------------------------------- */
.mil-push-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1b2e4b;
  background: rgba(131, 191, 72, .12);
  border: 1px solid rgba(131, 191, 72, .35);
  text-decoration: none;
  min-height: 40px;
}
.mil-push-toggle:hover { color: #001737; text-decoration: none; background: rgba(131, 191, 72, .2); }
.mil-push-toggle svg { width: 16px; height: 16px; stroke-width: 2.2px; flex-shrink: 0; color: #83bf48; }
.mil-push-toggle[data-state="on"] { background: #83bf48; border-color: #83bf48; color: #fff; }
.mil-push-toggle[data-state="on"] svg { color: #fff; }
.mil-push-toggle[data-state="busy"] { opacity: .6; pointer-events: none; }
.mil-push-toggle[data-state="denied"],
.mil-push-toggle[data-state="install"] { background: #f5f6fa; border-color: #e3e7ed; color: #8392a5; cursor: default; }
.mil-push-toggle[data-state="denied"] svg,
.mil-push-toggle[data-state="install"] svg { color: #8392a5; }
.aside.minimize .mil-push-toggle span { display: none; }
.aside.minimize .mil-push-toggle { justify-content: center; padding: 8px 0; }

/* ---------------------------------------------------------------------------
 * 6. "Install this app" banner (shown by mil-mobile.js when the browser
 *    offers beforeinstallprompt, or once on iOS Safari with instructions).
 * ------------------------------------------------------------------------- */
.mil-install {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1050;
  background: #001737;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 23, 55, .35);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  animation: mil-install-in .3s ease-out;
}
@keyframes mil-install-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.mil-install img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex-shrink: 0;
}
.mil-install .mil-install-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.mil-install .mil-install-text small {
  display: block;
  opacity: .8;
  font-size: 12px;
}
.mil-install .btn {
  background: #83bf48;
  border-color: #83bf48;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.mil-install .mil-install-close {
  background: none;
  border: 0;
  color: #fff;
  opacity: .7;
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
@media (min-width: 768px) {
  .mil-install {
    left: auto;
    right: 20px;
    max-width: 420px;
  }
}

/* When running installed (standalone) hide the browser-only hints. */
@media (display-mode: standalone) {
  .mil-install { display: none !important; }
}