/*
 * Mobile / responsive layer.
 *
 * Loaded after dashboard.css so it can override the desktop layout without
 * tangling with it. Bootstrap's grid already stacks the forms; what it cannot
 * fix on its own is the sidebar (a flow element pushing the page sideways) and
 * the wide data tables, which are the two things that actually break on a
 * phone.
 *
 * Breakpoint is Bootstrap's md (768px), so this agrees with the col-md-*
 * classes used throughout the views.
 */

/* ── Off-canvas sidebar ──────────────────────────────────────────────────── */

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

@media (max-width: 767.98px) {
  /* Taken out of the flow so opening it overlays the page instead of shoving
     the content off to the right. */
  #sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 15rem;
    min-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #wrapper.toggled .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Holds the page still behind the open drawer. */
  body.sidebar-open {
    overflow: hidden;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #page-content-wrapper > .container-fluid.pt-4 {
    padding-top: 1rem !important;
  }
}

/* ── Typography and spacing ──────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  h1,
  .h1 {
    font-size: 1.5rem;
  }

  h2,
  .h2 {
    font-size: 1.3rem;
  }

  h5,
  .h5 {
    font-size: 1rem;
  }

  .lead {
    font-size: 0.95rem;
  }

  /* Anything below 16px makes iOS zoom the whole page in on focus, which then
     leaves the layout scrolled sideways. */
  .form-control,
  .form-select,
  input[type='text'],
  input[type='number'],
  input[type='password'],
  input[type='search'],
  input[type='email'] {
    font-size: 16px;
  }

  /* Comfortable thumb targets. Bootstrap's btn-sm is ~24px tall, which is well
     under the ~44px that is actually tappable. */
  .btn {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .btn-sm {
    min-height: 38px;
  }

  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
  }
}

/* ── Dashboard header: totals and controls ───────────────────────────────── */

@media (max-width: 767.98px) {
  /* The totals row is a d-flex; let it wrap rather than squeeze the badges to
     an unreadable width. */
  .dashboard-summary {
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start !important;
  }

  .dashboard-summary .badge {
    font-size: 0.8rem !important;
  }

  /* Toolbars that pair a search box with action buttons. */
  .toolbar-responsive {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .toolbar-responsive > form,
  .toolbar-responsive > div {
    width: 100%;
  }

  .toolbar-responsive .btn {
    flex: 1 1 auto;
  }
}

/* ── Tables as stacked cards ─────────────────────────────────────────────── */
/*
 * A table with eleven columns cannot be read on a 390px screen, and horizontal
 * scrolling hides exactly the columns that matter. Below md, rows become cards
 * and each cell is labelled from its data-label attribute.
 *
 * Opt in per table with .table-stack; cells must carry data-label.
 */

@media (max-width: 767.98px) {
  .table-responsive.stack-on-mobile {
    overflow-x: visible;
  }

  .table-stack {
    background: transparent;
  }

  .table-stack thead {
    display: none;
  }

  .table-stack,
  .table-stack tbody,
  .table-stack tbody tr,
  .table-stack tbody td {
    display: block;
    width: auto;
  }

  .table-stack tbody tr {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.75rem;
  }

  /* table-striped paints alternating rows; as cards they must all look alike. */
  .table-stack.table-striped > tbody > tr:nth-of-type(odd) > td,
  .table-stack.table-striped > tbody > tr > td {
    background: transparent;
    box-shadow: none;
  }

  .table-stack tbody td {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.25rem;
  }

  .table-stack tbody td:last-child {
    border-bottom: 0;
  }

  .table-stack tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted, #6c757d);
    text-align: left;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Cells with no label (an actions column, or an empty-state message) take the
     full width instead of leaving a gap where the label would be. */
  .table-stack tbody td:not([data-label])::before {
    content: none;
  }

  .table-stack tbody td[data-label=''] {
    justify-content: flex-end;
  }

  /* The row that says "no records found" spans every column; as a block it
     should just be centred text, not a labelled field. */
  .table-stack tbody td[colspan] {
    justify-content: center;
    text-align: center;
  }

  .table-stack tbody td[colspan]::before {
    content: none;
  }

  /* Action buttons: side by side, filling the row. */
  .table-stack td.actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
  }

  .table-stack td.actions-cell .btn,
  .table-stack td.actions-cell form {
    flex: 1 1 auto;
  }

  .table-stack td.actions-cell form .btn {
    width: 100%;
  }

  /* The primary identifier reads as the card's heading. */
  .table-stack tbody td.cell-primary {
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem;
  }

  /* Long free text (audit details) needs to wrap rather than stretch the card. */
  .table-stack tbody td.cell-longtext {
    display: block;
    text-align: left;
    word-break: break-word;
  }

  .table-stack tbody td.cell-longtext::before {
    display: block;
    margin-bottom: 0.25rem;
  }
}

/* Tables that stay tabular still need to scroll without dragging the page. */
@media (max-width: 767.98px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .pagination {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .pagination .page-link {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
}

/* ── Modals and cards ────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0.5rem;
  }

  .card-body {
    padding: 1rem;
  }

  .card-header {
    padding: 0.75rem 1rem;
  }

  /* Settings pairs a label with a narrow inline input; let it use the width. */
  .card-body input[style*='width'] {
    width: 100% !important;
  }
}

/* ── Stock picker on touch ───────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .stock-picker .dropdown-menu {
    max-height: 50vh;
    position: fixed;
    left: 1rem;
    right: 1rem;
    width: auto;
  }

  .stock-picker .dropdown-item {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* ── Landscape phones: reclaim vertical space ────────────────────────────── */

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 500px) {
  #page-content-wrapper > .container-fluid.pt-4 {
    padding-top: 0.5rem !important;
  }

  h1,
  .h1 {
    font-size: 1.25rem;
    margin-top: 0.5rem !important;
  }
}