/* ==========================================================================
   OMS Web — mobile layer

   Loaded by views/layout/layout.pug immediately after public/css/app.css.

   This file never restyles the desktop layout. Everything below lives inside a
   max-width media query, so the rendering at 901px and wider is byte-for-byte
   the previous desktop result.

   Page-specific overrides stay in the page-local <style> blocks each view
   already owns; this file carries only the primitives those pages build on:

     1.  Breakpoints
     2.  App shell / topbar
     3.  Navigation drawer
     4.  Page furniture (header, cards, stacks, stats)
     5.  Alerts and empty states
     6.  Forms and touch targets
     7.  Buttons
     8.  Tables (three strategies)
     9.  Mobile action bar / safe areas
     10. Dialogs
     11. <details> progressive disclosure
     12. DataTables / Select2 controls
     13. Utilities
     14. Print
   ========================================================================== */

/* 1. Breakpoints ========================================================= */

/* 900px  — tablet and narrow desktop: only density changes.
   720px  — phone: the main mobile layout.
   480px  — compact phones: the last refinements. */

/* 2. App shell / topbar ================================================== */

@media (max-width: 900px) {
  .oms-content {
    padding: var(--oms-space-4);
  }

  .oms-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .oms-content {
    padding: 14px 14px 0;
  }

  .oms-content__inner {
    width: 100%;
  }

  .oms-topbar {
    gap: var(--oms-space-2);
    padding: 0 12px;
  }

  .oms-topbar__brand {
    font-size: var(--oms-text-base);
  }

  .oms-topbar__spacer {
    min-width: var(--oms-space-2);
  }

  /* The hamburger is the only way into the navigation on a phone. */
  .oms-topbar__menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -6px;
    font-size: var(--oms-text-md);
  }

  .oms-topbar__account {
    gap: var(--oms-space-2);
  }

  .oms-topbar__account .oms-btn--sm {
    min-height: 2.5rem;
  }
}

/* 3. Navigation drawer =================================================== */

/* Only rendered/visible below the desktop navigation breakpoint (60rem), so
   the desktop sidebar is untouched. */
.oms-nav-backdrop {
  display: none;
}

@media (max-width: 60rem) {
  .oms-nav-backdrop {
    display: block;
    position: fixed;
    top: var(--oms-topbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    padding: 0;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.45);
    border: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .oms-shell--sidebar-open .oms-nav-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .oms-sidebar {
    width: min(19rem, 86vw);
    height: calc(100vh - var(--oms-topbar-height));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  @supports (height: 100dvh) {
    .oms-sidebar {
      height: calc(100dvh - var(--oms-topbar-height));
    }
  }
}

/* Set by public/js/app.js while the drawer is open, so the page behind the
   drawer does not scroll away under the user's thumb. */
body.oms-drawer-open {
  overflow: hidden;
}

@media (max-width: 60rem) {
  .oms-sidebar__heading {
    padding-block: 2px;
  }

  .oms-sidebar__link {
    min-height: 44px;
    padding-block: 9px;
  }

  .oms-sidebar__group + .oms-sidebar__group {
    margin-top: var(--oms-space-3);
    padding-top: var(--oms-space-3);
  }
}

/* 4. Page furniture ====================================================== */

@media (max-width: 720px) {
  /* title / subtitle, then the actions on their own full-width row. */
  .oms-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--oms-space-3);
    margin-bottom: var(--oms-space-3);
  }

  .oms-page-header__actions {
    width: 100%;
    gap: var(--oms-space-2);
  }

  /* Actions share the available width instead of stacking into four full-width
     buttons; wrapping keeps long rows from squeezing the targets. */
  .oms-page-header__actions .oms-btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* The desktop .oms-stack gap is already a single --oms-space-3, so sections
     stay visually separated on a phone without extra shrinking. */

  .oms-card__header {
    padding: 12px 14px;
  }

  .oms-card__body {
    padding: 14px;
  }

  .oms-card__footer {
    padding: 12px 14px;
  }

  .oms-card__footer .oms-btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .oms-toolbar {
    gap: var(--oms-space-2);
  }

  .oms-stat-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .oms-stat {
    padding: 14px;
  }

  .oms-stat__value {
    font-size: 1.6rem;
  }

  .oms-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The auth card sits in a centred shell with no topbar; on a narrow phone the
     desktop padding would eat a third of the card. */
  .oms-centered {
    padding: var(--oms-space-3);
  }

  .oms-login-card {
    padding: var(--oms-space-5);
  }

  /* Read-first definition lists: label above value, no side-by-side columns. */
  .oms-definitions > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oms-space-1);
  }

  .oms-definitions dt {
    font-size: var(--oms-text-xs);
    letter-spacing: 0.02em;
  }

  .oms-list-divided__row {
    gap: 2px var(--oms-space-2);
  }
}

/* 5. Alerts and empty states ============================================= */

@media (max-width: 720px) {
  .oms-alert {
    gap: var(--oms-space-2);
    padding: 12px 14px;
    /* Long Japanese validation text must wrap, never scroll sideways. */
    overflow-wrap: anywhere;
  }

  .oms-alert__icon {
    line-height: 1.6;
  }

  .oms-empty {
    padding: var(--oms-space-5) var(--oms-space-3);
  }

  .oms-empty .oms-cluster {
    flex-direction: column;
    align-items: stretch;
  }

  .oms-empty .oms-cluster .oms-btn {
    min-height: 44px;
  }
}

/* 6. Forms and touch targets ============================================= */

@media (max-width: 720px) {
  .oms-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .oms-field,
  .oms-field--wide {
    grid-column: auto;
  }

  .oms-field--narrow {
    max-width: none;
  }

  .oms-label {
    font-size: var(--oms-text-base);
  }

  .oms-hint {
    /* Metadata may be one step smaller than the desktop 0.75rem, but stays
       legible outdoors. */
    font-size: 0.78rem;
  }

  /* 16px keeps iOS from zooming the viewport when a field takes focus. */
  .oms-input,
  .oms-select,
  .oms-textarea {
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    font-size: 16px;
  }

  .oms-textarea {
    min-height: 6rem;
  }

  .oms-field__error {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
  }

  .oms-checkbox {
    min-height: 44px;
  }

  .oms-checkbox input {
    width: 1.15rem;
    height: 1.15rem;
  }

  .oms-choice {
    min-height: 44px;
    padding: 8px 12px;
    font-size: var(--oms-text-base);
  }

  .oms-choice input {
    width: 1.15rem;
    height: 1.15rem;
  }

  .oms-form__actions {
    gap: var(--oms-space-2);
  }

  /* Unit suffixes ("1000 円") stay attached — only action groups stack. */
  .oms-input-group__addon {
    padding: 0 10px;
    font-size: var(--oms-text-base);
  }
}

@media (max-width: 480px) {
  /* An action group (e.g. 郵便番号 + 住所を検索) is two controls competing for
     one narrow row. Stacking keeps both targets full size. */
  .oms-input-group:has(> .oms-btn) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .oms-input-group:has(> .oms-btn) .oms-input {
    border-radius: var(--oms-radius);
  }

  .oms-input-group:has(> .oms-btn) .oms-btn {
    width: 100%;
    min-height: 44px;
    border-radius: var(--oms-radius);
  }
}

/* 7. Buttons ============================================================= */

@media (max-width: 720px) {
  .oms-btn {
    min-height: 44px;
    padding: 0.55rem 1rem;
  }

  .oms-btn--sm {
    min-height: 40px;
    padding: 0.35rem 0.75rem;
  }

  .oms-btn--lg {
    min-height: 48px;
  }

  /* Inline text links used as row actions become comfortable tap targets. */
  .oms-row-action {
    min-height: 44px;
    font-size: var(--oms-text-sm);
  }

  .oms-cluster {
    gap: var(--oms-space-2);
  }
}

/* 8. Tables ============================================================== */

/* Strategy A — keep the table, add a scroll affordance.
   Only on phones, so desktop tables keep their current appearance. The four
   layered backgrounds switch with scrollLeft by themselves, no JS needed. */

@media (max-width: 720px) {
  .oms-table-wrap:not(.oms-table-wrap--plain) {
    background-image:
      linear-gradient(to right, var(--oms-surface) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, var(--oms-surface) 30%, rgba(255, 255, 255, 0)),
      radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Strategy B — record transformation for entity directories.
   `.oms-table--record` is opt-in per page; the desktop table is untouched.
   Each cell needs data-label so the stacked value keeps its meaning. The row
   header (th[scope="row"]) becomes the record title and carries no label. */

@media (max-width: 720px) {
  .oms-table--record,
  .oms-table--record tbody,
  .oms-table--record tr,
  .oms-table--record td,
  .oms-table--record th {
    display: block;
    width: auto;
  }

  .oms-table--record thead {
    display: none;
  }

  .oms-table--record tbody tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--oms-border);
  }

  .oms-table--record tbody tr:last-child {
    border-bottom: 0;
  }

  .oms-table--record tbody tr:hover {
    background: transparent;
  }

  .oms-table--record tbody th,
  .oms-table--record tbody td {
    padding: 3px 0;
    border-bottom: 0;
    text-align: left;
  }

  .oms-table--record tbody th {
    margin-bottom: 4px;
    font-size: var(--oms-text-md);
  }

  .oms-table--record tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px var(--oms-space-3);
    font-size: var(--oms-text-sm);
    overflow-wrap: anywhere;
  }

  .oms-table--record tbody td::before {
    flex: 0 0 auto;
    max-width: 40%;
    font-size: var(--oms-text-xs);
    color: var(--oms-text-muted);
    content: attr(data-label);
  }

  .oms-table--record tbody td > * {
    min-width: 0;
  }

  .oms-table--record tbody td.oms-num {
    text-align: right;
  }

  /* The row action is the way into the record: give it the whole bottom row.
     Matched structurally so every list gets it without adding a class per view. */
  .oms-table--record tbody td.oms-table__action,
  .oms-table--record tbody td:has(> .oms-row-action) {
    padding-top: 8px;
  }

  .oms-table--record tbody td.oms-table__action::before,
  .oms-table--record tbody td:has(> .oms-row-action)::before {
    content: none;
  }

  .oms-table--record tbody td.oms-table__action .oms-row-action,
  .oms-table--record tbody td:has(> .oms-row-action) .oms-row-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 44px;
    border: 1px solid var(--oms-border-strong);
    border-radius: var(--oms-radius);
  }

  /* DataTables wraps the table in its own container; the card layout survives
     because the record table's own borders now do the separating. */
  .oms-table--record caption.oms-visually-hidden {
    position: absolute;
  }
}

/* Strategy C — condensed operational record (order lists).
   Row becomes a small grid so the decision-making fields sit in the first two
   lines: customer + status, then the item, then date and amount. */

@media (max-width: 720px) {
  .oms-table--condensed thead {
    display: none;
  }

  .oms-table--condensed,
  .oms-table--condensed tbody {
    display: block;
  }

  .oms-table--condensed tbody tr {
    display: grid;
    gap: 2px var(--oms-space-3);
    padding: 12px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid var(--oms-border);
  }

  .oms-table--condensed tbody tr:hover {
    background: transparent;
  }

  .oms-table--condensed tbody td,
  .oms-table--condensed tbody th {
    display: block;
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }

  .oms-table--condensed .oms-order-group-start {
    border-top: 2px solid #a9bfcb;
  }

  /* DOM order stays the desktop column order; the placement below only decides
     where each cell is painted. */
  .oms-table--condensed tbody td:nth-of-type(1) {
    grid-row: 3;
    grid-column: 1;
  }

  .oms-table--condensed tbody td:nth-of-type(2) {
    grid-row: 1;
    grid-column: 1;
  }

  .oms-table--condensed tbody td:nth-of-type(3) {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .oms-table--condensed tbody td:nth-of-type(4) {
    grid-row: 4;
    grid-column: 1;
  }

  .oms-table--condensed tbody td:nth-of-type(5) {
    grid-row: 3;
    grid-column: 2;
    font-size: var(--oms-text-md);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
  }

  .oms-table--condensed tbody td:nth-of-type(6) {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .oms-table--condensed tbody td:nth-of-type(7) {
    grid-row: 4;
    grid-column: 2;
    justify-self: end;
    align-self: center;
  }

  .oms-table--condensed tbody td:nth-of-type(1)::before,
  .oms-table--condensed tbody td:nth-of-type(4)::before {
    display: inline-block;
    margin-right: 4px;
    font-size: var(--oms-text-xs);
    color: var(--oms-text-muted);
    content: attr(data-label);
  }

  .oms-table--condensed tbody td:nth-of-type(7)::before {
    content: none;
  }

  .oms-table--condensed tbody td:nth-of-type(7) a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--oms-border-strong);
    border-radius: var(--oms-radius);
  }

  .oms-table--condensed tbody td:nth-of-type(2) .oms-table__title,
  .oms-table--condensed tbody td:nth-of-type(3) .oms-table__title {
    font-weight: 750;
  }
}

/* 9. Mobile action bar / safe areas ====================================== */

.oms-mobile-actionbar {
  display: none;
}

@media (max-width: 720px) {
  .oms-mobile-actionbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: var(--oms-space-3);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--oms-surface);
    border-top: 1px solid var(--oms-border);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.1);
  }

  .oms-mobile-actionbar__info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .oms-mobile-actionbar__label {
    display: block;
    font-size: var(--oms-text-xs);
    color: var(--oms-text-muted);
  }

  .oms-mobile-actionbar__value {
    display: block;
    font-size: var(--oms-text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .oms-mobile-actionbar .oms-btn {
    flex: 0 0 auto;
    min-height: 48px;
  }

  /* Keep the last field clear of the bar, including the home-indicator area. */
  .oms-has-mobile-actionbar {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* The page footer renders below the page block, so it needs the same
     clearance or the bar would sit on top of it at the end of the scroll. */
  .oms-content__inner:has(> .oms-has-mobile-actionbar) .oms-footer {
    margin-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* 10. Dialogs =========================================================== */

@media (max-width: 720px) {
  .oms-modal {
    width: calc(100vw - 24px);
    max-width: none;
    max-height: calc(100vh - 32px);
  }

  @supports (max-height: 100dvh) {
    .oms-modal {
      max-height: calc(100dvh - 24px);
    }
  }

  .oms-modal__header {
    padding: 14px 16px 0;
  }

  .oms-modal__body {
    max-height: 55vh;
    padding: 12px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  @supports (max-height: 100dvh) {
    .oms-modal__body {
      max-height: 55dvh;
    }
  }

  .oms-modal__footer {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  /* Destructive and cancel get their own rows so they are never adjacent. */
  .oms-modal__footer .oms-btn {
    flex: 1 1 100%;
    min-height: 44px;
  }

  .oms-modal__close {
    width: 44px;
    height: 44px;
  }
}

/* 11. <details> progressive disclosure =================================== */

@media (max-width: 720px) {
  /* Summary rows are the disclosure control on a phone: keep them tappable
     without forcing any section open. */
  summary {
    min-height: 44px;
  }
}

/* 12. DataTables / Select2 controls ===================================== */

@media (max-width: 720px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    width: 100%;
    margin-bottom: var(--oms-space-2);
    text-align: left;
  }

  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label {
    display: block;
    margin-bottom: 4px;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .dataTables_wrapper .dataTables_info {
    padding: var(--oms-space-2) 0;
  }

  .dataTables_wrapper .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 44px;
    min-height: 44px;
    margin-left: 0;
    padding: 0 12px;
  }

  .dataTables_wrapper .dataTables_processing {
    padding: 6px 10px;
  }

  /* Select2 inherits the OMS input metrics so its dropdown trigger and its
     results list are as tappable as a native select. */
  .select2-container--default .select2-selection--single {
    min-height: 44px;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.4;
  }

  .select2-dropdown .select2-results__option {
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.5;
  }

  /* daterangepicker */
  .daterangepicker {
    width: calc(100vw - 16px) !important;
    font-size: 16px;
  }

  .daterangepicker .calendar-table td,
  .daterangepicker .calendar-table th {
    padding: 4px 2px;
  }
}

/* 13. Utilities ========================================================= */

@media (min-width: 721px) {
  .oms-mobile-only {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .oms-desktop-only {
    display: none !important;
  }
}

/* 14. Print ============================================================= */

@media print {
  .oms-mobile-actionbar,
  .oms-nav-backdrop {
    display: none !important;
  }
}