/* TerminalT shared mobile hardening layer.
   Loaded last so it can safely correct page-specific desktop layouts on small screens. */

html {
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

button,
.btn,
a.btn,
.logout-btn,
.nav-btn,
.track-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Keep long content contained without splitting normal words into vertical letters. */
.card,
.modal-content,
.form-card,
.form-wrapper,
.employee-card,
.driver-card,
.track-summary-item,
.track-health-card,
.page-header-main,
.cell,
td,
th,
p,
li,
label,
strong {
  overflow-wrap: break-word;
  word-break: normal;
}

button,
.btn,
a.btn,
span,
label,
th,
td {
  word-break: normal;
  hyphens: none;
}

/* Shared site header: keep logout inside the blue header instead of absolutely positioned. */
body > header {
  width: 100%;
  box-sizing: border-box;
}

body > header form {
  position: static !important;
  margin: 0 0 0 auto !important;
  flex: 0 0 auto;
}

body > header .logout-btn {
  position: static !important;
  inset: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.logout-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.standalone-logout-form {
  margin: 0;
  flex: 0 0 auto;
}

.standalone-logout-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.loads-hero-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-left: auto;
}

.van-mobile-label {
  display: none;
}

@media screen and (max-width: 900px) {
  main,
  .page-wrapper,
  .main-content,
  .main,
  .container,
  .wrap,
  .content,
  .form-container,
  .form-card,
  .form-wrapper {
    min-width: 0;
    max-width: 100%;
  }

  .page-wrapper,
  .main-content,
  .wrap {
    width: 100%;
  }

  .page-header,
  .owners-hero,
  .toolbar,
  .top-navbar,
  .hero,
  .header__inner,
  .header__controls,
  .guildcare-titlebar,
  .packing-hero-actions,
  .summary-meta,
  .track-hero,
  .track-date-toolbar {
    flex-wrap: wrap;
    min-width: 0;
  }

  .toolbar-left,
  .toolbar-right,
  .hero__actions,
  .btn-group,
  .form-actions,
  .modal-footer-actions,
  .packing-hero-actions,
  .summary-actions,
  .track-date-shortcuts,
  .track-date-picker,
  .track-date-stepper,
  .track-map-actions {
    min-width: 0;
    max-width: 100%;
  }

  .table-wrapper,
  .table-responsive,
  .table-scroll,
  .activities-scroll,
  .track-gap-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Legacy pages that do not have a .table-wrapper still get a safe horizontal scroller. */
  main > table,
  .container > table,
  .form-container > table,
  .form-card > table,
  .card > table,
  .absence-table,
  .history-table,
  body > table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal {
    max-width: 100vw;
    padding: 0.75rem !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-content,
  .modal-medium,
  .modal-wide,
  .missed-modal-content,
  .driver-history-content {
    width: min(100%, 760px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 1.5rem) !important;
    margin: auto !important;
  }

  .choices,
  .choices__inner,
  .choices__list,
  .choices__list--dropdown,
  .choices__list[aria-expanded] {
    max-width: 100%;
  }

  /* Medium-width grids should never create sideways page scrolling. */
  .dashboard-grid,
  .kpi-grid,
  .kpi-grid-monthly,
  .dayloads-grid,
  .packing-kpi-grid,
  .packing-details-grid,
  .packing-weight-grid,
  .filters-grid,
  .modal-form-grid,
  .driver-modal-grid,
  .driver-live-summary-grid,
  .track-summary-grid,
  .track-health-card,
  .print-details-grid,
  .print-weight-grid,
  .range-grid {
    min-width: 0;
  }
}

@media screen and (max-width: 640px) {
  body {
    min-width: 0;
  }

  body > header,
  .topbar {
    width: 100%;
    min-height: auto;
    padding: 0.75rem 0.9rem !important;
    gap: 0.65rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  body > header h1,
  .topbar h1,
  .topbar__brand,
  .app-logo {
    margin: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1.2;
  }

  body > header form,
  .topbar form,
  .logout-form {
    margin-left: auto !important;
  }

  body > header {
    flex-wrap: nowrap !important;
  }

  body > header h1 {
    min-width: 0;
  }

  .logout-btn {
    min-height: 44px;
  }

  body > header .logout-btn,
  .top-navbar .logout-btn {
    position: static !important;
  }

  .logout-btn--icon-mobile {
    min-width: 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 10px !important;
    flex: 0 0 44px;
  }

  .logout-btn--icon-mobile .logout-label {
    display: none !important;
  }

  .logout-btn--icon-mobile .logout-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  .standalone-logout-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .standalone-logout-btn .logout-label {
    display: none !important;
  }

  .standalone-logout-btn .logout-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  .loads-hero-controls {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .loads-hero-controls .standalone-logout-form {
    align-self: flex-end;
  }

  .loads-hero-controls .week-nav {
    width: 100%;
  }

  .photo-weekly-hero {
    position: relative;
    padding-right: 4.35rem !important;
  }

  .photo-weekly-hero .standalone-logout-form {
    position: absolute !important;
    top: 0.85rem;
    right: 0.85rem;
    margin: 0 !important;
  }

  .top-navbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.65rem !important;
  }

  .top-navbar h1 {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-navbar .user-options {
    margin-left: auto;
    flex: 0 0 auto;
  }

  main {
    max-width: 100%;
    padding: 0.75rem !important;
  }

  .page-wrapper,
  .main,
  .main-content,
  .wrap,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-wrapper,
  .main-content,
  .wrap,
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .page-header,
  .owners-hero,
  .hero,
  .track-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
    padding: 1rem !important;
    border-radius: 16px !important;
  }

  .page-title,
  .hero h1,
  .top-navbar h1,
  h1 {
    max-width: 100%;
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.12 !important;
  }

  h2 {
    max-width: 100%;
    line-height: 1.2;
  }

  .page-subtitle,
  .hero__subtitle {
    max-width: 100%;
  }

  .toolbar,
  .header__controls,
  .summary-meta,
  .guildcare-titlebar {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  .toolbar-left,
  .toolbar-right,
  .hero__actions,
  .btn-group,
  .packing-hero-actions,
  .summary-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }

  .toolbar-left > *,
  .toolbar-right > *,
  .hero__actions > *,
  .btn-group > *,
  .packing-hero-actions > *,
  .summary-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .week-nav,
  .month-nav-inline,
  .track-date-toolbar,
  .track-date-shortcuts,
  .track-date-picker,
  .track-date-stepper,
  .track-map-actions {
    width: 100% !important;
    max-width: 100% !important;
  }

  .week-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  .week-nav > *,
  .month-nav-inline > * {
    max-width: 100%;
  }

  .week-nav .btn,
  .week-nav a,
  .week-nav button {
    width: 100% !important;
    min-height: 44px;
    justify-content: center;
  }

  .week-label {
    width: 100%;
    padding: 0.35rem 0.2rem;
    white-space: normal !important;
    text-align: center;
  }

  .grid-container,
  .cards,
  .driver-grid,
  .dashboard-grid,
  .dayloads-grid,
  .filters-grid,
  .kpi-grid,
  .kpi-grid-monthly,
  .packing-kpi-grid,
  .packing-details-grid,
  .packing-weight-grid,
  .packing-search-grid,
  .modal-grid,
  .modal-form-grid,
  .driver-modal-grid,
  .driver-live-summary-grid,
  .track-summary-grid,
  .track-health-card,
  .thumb-grid,
  .range-grid,
  .print-details-grid,
  .print-weight-grid,
  .custom-dates,
  .existing-docs {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .card,
  .employee-card,
  .driver-card,
  .form-card,
  .form-wrapper,
  .track-tabs-card,
  .track-health-card,
  .track-map-shell {
    max-width: 100%;
  }

  .card,
  .employee-card,
  .driver-card,
  .form-card,
  .form-wrapper {
    padding: 1rem !important;
  }

  .form-wrapper {
    margin: 0 auto !important;
  }

  /* Old driver form uses a desktop-only two-column form. */
  .form-wrapper form {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }

  .form-wrapper form label,
  .form-wrapper form small,
  .form-wrapper .form-actions,
  .form-wrapper .driver-photo {
    grid-column: 1 !important;
  }

  .form-wrapper .form-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.6rem;
    text-align: stretch !important;
  }

  .form-wrapper .form-actions .btn,
  .form-actions .btn,
  .modal-footer-actions .btn,
  .modal-footer-actions button {
    width: 100% !important;
    margin: 0 !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important; /* prevents iOS focus zoom */
  }

  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="datetime-local"] {
    min-height: 44px;
  }

  button,
  .btn,
  a.btn,
  .nav-btn,
  .track-button {
    min-height: 44px;
  }

  textarea {
    resize: vertical;
  }

  .modal {
    align-items: flex-start !important;
    padding: 0.5rem !important;
  }

  .modal-content,
  .modal-medium,
  .modal-wide,
  .missed-modal-content,
  .driver-history-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 1rem) !important;
    padding: 2.7rem 0.9rem 1rem !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-content > .close-modal,
  .close-modal {
    top: 0.55rem !important;
    right: 0.55rem !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
  }

  .modal-footer-actions,
  .form-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.55rem !important;
  }

  .pagination-groups,
  .pagination-group,
  .pager {
    max-width: 100%;
    justify-content: center !important;
  }

  .pager button,
  .pagination a,
  .pagination button {
    min-height: 40px;
  }

  /* Make old/simple report tables scroll instead of shrinking unreadably. */
  main > table,
  .container > table,
  .form-container > table,
  .form-card > table,
  .card > table,
  .absence-table,
  .history-table,
  body > table {
    white-space: nowrap;
    font-size: 0.88rem;
  }

  .table-wrapper {
    border-radius: 12px;
    overscroll-behavior-inline: contain;
  }

  .table-wrapper table {
    margin-left: 0;
    margin-right: 0;
  }

  /* Choices.js / searchable selects */
  .choices {
    width: 100% !important;
  }

  .choices__list--dropdown,
  .choices__list[aria-expanded] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Tracking UI: tabs and map actions remain reachable on narrow phones. */
  .track-date-toolbar,
  .track-date-shortcuts,
  .track-date-picker,
  .track-date-stepper,
  .track-map-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }

  .track-date-toolbar button,
  .track-date-toolbar input,
  .track-map-actions button {
    width: 100% !important;
  }

  .track-tabs {
    display: flex !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .track-tab {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  /* Home launcher */
  .top-navbar {
    margin-bottom: 1rem !important;
  }

  .grid-container {
    gap: 0.85rem !important;
  }

  .grid-container .card .btn {
    width: 100%;
  }

  /* Directory cards */
  .employee-card__header,
  .employee-details p {
    min-width: 0;
  }

  .employee-card__actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .employee-card__actions form,
  .employee-card__actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Photo pages */
  .thumb-card,
  .thumb-card img {
    width: 100%;
    max-width: 100%;
  }

  /* Customer/combo controls inside horizontally scrolling docket tables. */
  .customer-combo,
  .customer-combo-trigger,
  .customer-combo-menu {
    max-width: 100%;
  }

  /* Bank map/filter screens often contain multiple horizontal controls. */
  .view-toggle,
  .active-filters {
    margin-left: 0 !important;
    width: 100%;
  }
}

@media screen and (max-width: 420px) {
  main,
  .page-wrapper,
  .main-content,
  .container,
  .wrap {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .page-header,
  .owners-hero,
  .hero,
  .top-navbar,
  .card,
  .employee-card,
  .driver-card,
  .form-card,
  .form-wrapper {
    border-radius: 14px !important;
  }

  .btn,
  button,
  a.btn,
  .logout-btn,
  .nav-btn,
  .track-button {
    max-width: 100%;
  }
}


/* Van Services: convert the wide desktop table into readable mobile cards. */
@media screen and (max-width: 760px) {
  .vans-page .table-wrapper {
    overflow: visible !important;
    border: 0 !important;
  }

  .vans-page .vans-table {
    display: block !important;
    width: 100% !important;
    border-spacing: 0 !important;
    white-space: normal !important;
  }

  .vans-page .vans-table thead {
    display: none !important;
  }

  .vans-page .vans-table tbody {
    display: grid !important;
    gap: 0.8rem;
    width: 100%;
  }

  .vans-page .vans-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.15rem;
    width: 100%;
    padding: 0.75rem 0.8rem;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }

  .vans-page .vans-table td {
    display: grid !important;
    grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 0.65rem;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.45rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .vans-page .vans-table td::before {
    display: none !important;
    content: none !important;
  }

  .vans-page .van-mobile-label {
    display: block;
    min-width: 0;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: normal;
    text-align: left;
  }

  .vans-page .vans-table td[colspan] {
    display: block !important;
    text-align: center !important;
  }

  .vans-page .vans-table td[colspan]::before {
    display: none;
  }

  .vans-page .vans-table .cell {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111827;
    font-size: 0.92rem;
    line-height: 1.35;
    text-align: right !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .vans-page .vans-table .cell.num {
    text-align: right !important;
  }

  .vans-page .vans-table .cell-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.55rem;
  }

  .vans-page .actions-cell .icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }

  .vans-page .pill {
    margin-right: 0.3rem;
    vertical-align: middle;
  }

  .vans-page .inline-field {
    flex-direction: column;
    align-items: stretch;
  }

  .vans-page .inline-field .btn {
    width: 100%;
  }

  /* Expenses dashboard: remove the decorative radial blobs that read as odd circles on phones. */
  .expenses-dashboard .summary-card::before {
    display: none !important;
  }

  .expenses-dashboard .week-nav {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important;
  }

  .expenses-dashboard .week-nav .btn {
    border-radius: 12px !important;
  }
}

@media print {
  /* The mobile layer must never alter dedicated print/PDF output. */
  .print-actions {
    display: none !important;
  }
}