/* ==========================================================
   Mobile list cards
   Shared "elevated card per row" pattern for list pages on
   small screens. Each list item becomes a clearly bounded
   card with a colored left accent, label/value field rows,
   and a separated actions footer — making it obvious which
   data belongs to which item.

   Usage:
     <div class="d-lg-none mobile-list">
       <div class="mobile-list__card">
         <div class="mobile-list__header">
           <div>
             <h6 class="mobile-list__title">Title</h6>
             <div class="mobile-list__subtitle">Subtitle</div>
           </div>
           <span class="status-pill ...">Status</span>
         </div>
         <div class="mobile-list__divider"></div>
         <div class="mobile-list__fields">
           <div class="mobile-list__field">
             <span class="mobile-list__label">Terminal</span>
             <span class="mobile-list__value">Tecon Suape</span>
           </div>
         </div>
         <div class="mobile-list__actions">…</div>
       </div>
     </div>
   ========================================================== */

.mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem 0 0.25rem;
}

.mobile-list__card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.06);
  padding: 0.875rem 1rem;
  overflow: hidden;
}

.mobile-list__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.mobile-list__header > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.mobile-list__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}

.mobile-list__subtitle {
  font-size: var(--fs-sm);
  color: #6b7280;
  line-height: 1.35;
  margin-top: 0.125rem;
  word-break: break-word;
}

.mobile-list__subtitle + .mobile-list__subtitle {
  margin-top: 0.0625rem;
}

.mobile-list__meta {
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  font-size: var(--fs-sm);
  color: #6b7280;
  line-height: 1.3;
}

.mobile-list__divider {
  border-top: 1px solid #eef0f3;
  margin: 0.75rem 0;
}

.mobile-list__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-list__field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  line-height: 1.3;
  min-width: 0;
}

.mobile-list__label {
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

.mobile-list__value {
  flex: 1 1 auto;
  text-align: right;
  color: #1f2937;
  font-weight: 500;
  word-break: break-word;
  min-width: 0;
}

.mobile-list__value--muted {
  color: #6b7280;
  font-weight: 400;
}

.mobile-list__value--strong {
  font-weight: 700;
  color: #111827;
}

.mobile-list__value--danger {
  color: var(--bs-danger);
  font-weight: 600;
}

.mobile-list__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eef0f3;
}

.mobile-list__actions-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.mobile-list__actions-row > .btn,
.mobile-list__actions-row > form {
  flex: 1 1 0;
  min-width: 0;
}

.mobile-list__actions-row > form > .btn {
  width: 100%;
  height: 100%;
}

.mobile-list__actions-row > .btn,
.mobile-list__actions-row > form > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Left-edge accent modifiers — convey item state at a glance.
   Only applied to cards that carry a status (issues, payables,
   appointments…). Status-less lists (terminals, clients, users…)
   keep the plain bordered card. */
.mobile-list__card--success,
.mobile-list__card--warning,
.mobile-list__card--danger,
.mobile-list__card--info,
.mobile-list__card--neutral {
  border-left-width: 3px;
}
.mobile-list__card--success { border-left-color: var(--bs-success); }
.mobile-list__card--warning { border-left-color: var(--bs-warning); }
.mobile-list__card--danger  { border-left-color: var(--bs-danger); }
.mobile-list__card--info    { border-left-color: var(--bs-info); }
.mobile-list__card--neutral { border-left-color: #cbd5e1; }

/* Warning import-stripe override: keep the diagonal pattern but
   layer it on top of the white card. */
.mobile-list__card.row-warning {
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 8px,
    rgba(var(--bs-danger-rgb), 0.06) 8px,
    rgba(var(--bs-danger-rgb), 0.06) 16px
  );
  border-left-width: 3px;
  border-left-color: var(--bs-danger);
}

/* Tighter on very small viewports */
@media (max-width: 360px) {
  .mobile-list__card {
    padding: 0.75rem 0.875rem;
  }
  .mobile-list__field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
  }
  .mobile-list__value {
    text-align: left;
  }
}