/*
 * Dunally Portal Mobile Responsive CSS — Wave-07 P1.3
 *
 * Consumes CSS variables emitted by dunally.api.mobile_theme.css_vars().
 * Falls back to Dunally Mobile Theme defaults when vars are unset.
 *
 * Breakpoints (mobile-first, Bootstrap 5 ladder):
 *   xs  < 576  → phone portrait
 *   sm  ≥ 576  → phone landscape
 *   md  ≥ 768  → tablet
 *   lg  ≥ 992  → small desktop
 *   xl  ≥ 1200 → desktop
 *
 * WCAG references baked in:
 *   - 1.4.4 Reflow at 200% — body font ≥ 16px on mobile
 *   - 2.3.3 prefers-reduced-motion — all transitions suppressed
 *   - 2.5.5 Target Size — ≥ 44 × 44 CSS px for tappable elements
 *
 * Tested viewports:
 *   - iPhone 14 (390 × 844)
 *   - Pixel 7 (412 × 915)
 *   - iPad mini (744 × 1133)
 *   - Galaxy S22 (360 × 780)
 */

/* ============================================================
 * 1.  Root token fallback (when css_vars hasn't been injected)
 * ============================================================ */
:root {
  --bp-xs:   0px;
  --bp-sm:   576px;
  --bp-md:   768px;
  --bp-lg:   992px;
  --bp-xl:   1200px;
  --bp-xxl:  1400px;
  --touch-min: 44px;
  --touch-rec: 48px;
  --touch-lg:  56px;
  --tap-gap:   8px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --fs-base: 16px;
  --fs-sm:   14px;
  --fs-lg:   18px;
  --lh-base: 1.5;
  --c-primary:   #1a3a52;
  --c-secondary: #3498db;
  --c-bg:        #ffffff;
  --c-surface:   #f8f9fa;
  --c-text:      #212529;
  --c-text-2:    #6c757d;
  --c-border:    #dee2e6;
  --c-success:   #28a745;
  --c-warning:   #ffc107;
  --c-danger:    #dc3545;
  --el-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  --el-2: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
  --mo-fast: 150ms;
  --mo-base: 300ms;
  --mo-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ============================================================
 * 2.  Portal page base
 * ============================================================ */
.dunally-portal-page {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  padding: var(--sp-md);
  min-height: 60vh;
}

.dunally-portal-page h1 {
  color: var(--c-primary);
  font-weight: var(--fw-bold, 700);
  margin-bottom: var(--sp-md);
}

.dunally-portal-page .lead {
  color: var(--c-text-2);
  margin-bottom: var(--sp-lg);
}

.dunally-portal-page .card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: var(--el-1);
  margin-bottom: var(--sp-md);
  transition: box-shadow var(--mo-fast) var(--mo-ease);
}

.dunally-portal-page .card:hover {
  box-shadow: var(--el-2);
}

.dunally-portal-page .card-header {
  background: transparent;
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-md);
}

.dunally-portal-page .card-body {
  padding: var(--sp-md);
}

/* ============================================================
 * 3.  Touch-target enforcement (WCAG 2.5.5)
 * ============================================================ */
.dunally-portal-page .btn,
.dunally-portal-page a.btn,
.dunally-portal-page input[type="submit"],
.dunally-portal-page input[type="button"],
.dunally-portal-page button {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: calc(var(--sp-sm) + 2px) var(--sp-md);
  margin: var(--tap-gap) 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  border-radius: 4px;
  transition: background-color var(--mo-fast) var(--mo-ease),
              transform var(--mo-fast) var(--mo-ease);
}

.dunally-portal-page .btn:active {
  transform: translateY(1px);
}

.dunally-portal-page .btn-primary {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}

.dunally-portal-page input.form-control,
.dunally-portal-page select.form-control,
.dunally-portal-page textarea.form-control {
  min-height: var(--touch-min);
  font-size: var(--fs-base);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text);
  background: var(--c-bg);
}

.dunally-portal-page input.form-control:focus,
.dunally-portal-page select.form-control:focus,
.dunally-portal-page textarea.form-control:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26, 58, 82, 0.15);
  outline: none;
}

/* ============================================================
 * 4.  Table responsiveness
 * ============================================================ */
.dunally-portal-page .table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.dunally-portal-page table.table {
  width: 100%;
  margin-bottom: var(--sp-md);
}

.dunally-portal-page table.table th {
  background: var(--c-surface);
  border-bottom: 2px solid var(--c-border);
  font-weight: var(--fw-bold, 700);
  padding: var(--sp-sm) var(--sp-md);
  white-space: nowrap;
}

.dunally-portal-page table.table td {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

.dunally-portal-page table.table tr.table-danger {
  background-color: rgba(220, 53, 69, 0.08);
}

.dunally-portal-page .badge {
  padding: 4px 8px;
  font-size: var(--fs-sm);
  border-radius: 4px;
}

.dunally-portal-page .badge-secondary {
  background: var(--c-text-2);
  color: white;
}

/* ============================================================
 * 5.  Mobile-only overrides (< 768)
 * ============================================================ */
@media (max-width: 767.98px) {
  .dunally-portal-page {
    padding: var(--sp-sm);
  }

  .dunally-portal-page h1 {
    font-size: 24px; /* mobile h1 cap */
  }

  /* Stack form-inline on phones */
  .dunally-portal-page .form-inline {
    flex-direction: column;
    align-items: stretch !important;
  }

  .dunally-portal-page .form-inline .form-group {
    width: 100%;
    margin-bottom: var(--sp-sm);
    margin-right: 0 !important;
  }

  .dunally-portal-page .form-inline .form-group input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .dunally-portal-page .form-inline .btn {
    width: 100%;
  }

  /* Card padding reduce */
  .dunally-portal-page .card-header,
  .dunally-portal-page .card-body {
    padding: var(--sp-sm);
  }

  /* Table → horizontal scroll with sticky first column */
  .dunally-portal-page .table-responsive table.table {
    font-size: var(--fs-sm);
  }

  .dunally-portal-page .table-responsive table.table th,
  .dunally-portal-page .table-responsive table.table td {
    padding: 6px 8px;
  }

  /* Hide column 6+ on small phones — show "..." button */
  .dunally-portal-page .table-responsive table.table th:nth-child(n+5),
  .dunally-portal-page .table-responsive table.table td:nth-child(n+5) {
    /* Keep visible but allow scroll */
  }
}

/* ============================================================
 * 6.  Tablet overrides (768 - 991)
 * ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dunally-portal-page {
    padding: var(--sp-md);
  }

  .dunally-portal-page .card {
    margin-bottom: var(--sp-lg);
  }
}

/* ============================================================
 * 7.  Desktop overrides (≥ 992)
 * ============================================================ */
@media (min-width: 992px) {
  .dunally-portal-page {
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--sp-xl) var(--sp-md);
  }
}

/* ============================================================
 * 8.  RTL Arabic flip (when document direction is rtl)
 * ============================================================ */
[dir="rtl"] .dunally-portal-page {
  text-align: right;
}

[dir="rtl"] .dunally-portal-page table.table th,
[dir="rtl"] .dunally-portal-page table.table td {
  text-align: right;
}

[dir="rtl"] .dunally-portal-page table.table .text-right {
  text-align: left !important;
}

[dir="rtl"] .dunally-portal-page .form-inline .form-group {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* ============================================================
 * 9.  Reduced motion (WCAG 2.3.3)
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dunally-portal-page *,
  .dunally-portal-page *::before,
  .dunally-portal-page *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * 10. Print
 * ============================================================ */
@media print {
  .dunally-portal-page {
    background: white;
    color: black;
    max-width: none;
    padding: 0;
  }

  .dunally-portal-page form,
  .dunally-portal-page .btn {
    display: none;
  }

  .dunally-portal-page .card {
    box-shadow: none;
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  .dunally-portal-page table.table th {
    background: #eee !important;
  }
}