/*
 * Dunally Portal Theme — premium component polish (Wave-00 0k)
 * ------------------------------------------------------------
 * Loads AFTER portal-mobile.css. The mobile CSS sized the components;
 * this themes them so the customer-portal pages (my-quotes, my-invoices,
 * my-bills-of-lading, my-bookings, track, ...) look as polished as the
 * /dashboard hub in BOTH light and dark mode.
 *
 * Root cause it fixes: the pages use stock Bootstrap components (card,
 * table, badge, form-control, links) whose default colours are tuned for a
 * white background. When portal-mobile.js paints the page dark, those
 * elements rendered dark-on-dark (invisible quote numbers, invisible card
 * titles, washed-out badges). Everything here drives off the injected
 * --c-* theme tokens, which flip with the system theme, so it is correct
 * on light AND dark, LTR AND RTL.
 */

/* ---- page shell: generous, centered, readable -------------------- */
.dunally-portal-page {
  max-width: 1080px;
  margin: 0 auto;
}
.dunally-portal-page h1 {
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--c-secondary, #3498db), var(--c-primary, #1a3a52));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .dunally-portal-page h1,
.dunally-portal h1 { /* keep a solid fallback colour where gradient text is unsupported */ }
.dunally-portal-page .lead { color: var(--c-text-2, #6c757d); max-width: 60ch; }

/* ---- links: always visible on either background ------------------ */
.dunally-portal-page a:not(.btn) {
  color: var(--c-secondary, #3498db);
  text-decoration: none;
  font-weight: 600;
}
.dunally-portal-page a:not(.btn):hover { text-decoration: underline; }

/* ---- cards: an elevated surface with a clear, readable title ----- */
.dunally-portal-page .card {
  background: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #e5e9ec);
  border-radius: 14px;
  box-shadow: var(--el-1, 0 1px 3px rgba(0,0,0,.10));
}
.dunally-portal-page .card-body { padding: clamp(16px, 3vw, 28px); }
.dunally-portal-page .card-title,
.dunally-portal-page .card h2,
.dunally-portal-page .card h3,
.dunally-portal-page .card h4,
.dunally-portal-page .card h5 {
  color: var(--c-text, #1f2933);
  font-weight: 700;
  margin-bottom: 14px;
}
/* a small accent rule under a card title, for structure */
.dunally-portal-page .card-title::after {
  content: ""; display: block; width: 38px; height: 3px; margin-top: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c-secondary, #3498db), transparent);
}

/* ---- forms: dark-aware inputs with a clear focus ring ------------ */
.dunally-portal-page label { color: var(--c-text, #1f2933); font-weight: 600; font-size: 14px; }
.dunally-portal-page .form-control {
  background: var(--c-bg, #fff);
  color: var(--c-text, #1f2933);
  border: 1px solid var(--c-border, #cbd2d9);
  border-radius: 10px;
}
.dunally-portal-page .form-control::placeholder { color: var(--c-text-2, #9aa5b1); opacity: 1; }
.dunally-portal-page .form-control:focus {
  border-color: var(--c-secondary, #3498db);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-secondary, #3498db) 28%, transparent);
}

/* ---- buttons: solid, branded, obvious affordance ---------------- */
.dunally-portal-page .btn { border-radius: 10px; font-weight: 600; border: 1px solid transparent; }
.dunally-portal-page .btn-primary {
  background: var(--c-primary, #1a3a52); border-color: var(--c-primary, #1a3a52); color: #fff;
}
.dunally-portal-page .btn-primary:hover { filter: brightness(1.12); }
.dunally-portal-page .btn-success {
  background: var(--c-success, #28a745); border-color: var(--c-success, #28a745); color: #fff;
}
.dunally-portal-page .btn-success:hover { filter: brightness(1.10); }
.dunally-portal-page .btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }

/* ---- table: a real data surface, links + cells readable --------- */
.dunally-portal-page .table-responsive {
  border: 1px solid var(--c-border, #e5e9ec);
  border-radius: 14px; overflow: hidden; box-shadow: var(--el-1);
}
.dunally-portal-page table.table { margin: 0; color: var(--c-text, #1f2933); }
.dunally-portal-page table.table thead th {
  background: var(--c-surface, #f1f5f9);
  color: var(--c-text-2, #52606d);
  text-transform: uppercase; letter-spacing: .04em; font-size: 12px; font-weight: 700;
  border-bottom: 1px solid var(--c-border, #e5e9ec);
}
.dunally-portal-page table.table tbody td {
  color: var(--c-text, #1f2933);
  border-top: 1px solid var(--c-border, #eceff1);
  background: transparent;
}
.dunally-portal-page table.table tbody tr:hover td {
  background: color-mix(in srgb, var(--c-secondary, #3498db) 8%, transparent);
}
.dunally-portal-page table.table.table-striped tbody tr:nth-of-type(odd) td {
  background: color-mix(in srgb, var(--c-text, #1f2933) 4%, transparent);
}
.dunally-portal-page table.table a { color: var(--c-secondary, #3498db); font-weight: 700; }

/* ---- status badges: pill + colour-by-meaning -------------------- */
.dunally-portal-page .badge {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
  border: 1px solid transparent;
}
.dunally-portal-page .badge-secondary,
.dunally-portal-page .badge-default {
  background: color-mix(in srgb, var(--c-text-2, #6c757d) 18%, transparent);
  color: var(--c-text, #1f2933);
  border-color: color-mix(in srgb, var(--c-text-2, #6c757d) 35%, transparent);
}
.dunally-portal-page .badge-success {
  background: color-mix(in srgb, var(--c-success, #28a745) 18%, transparent);
  color: var(--c-success, #1e7e34);
  border-color: color-mix(in srgb, var(--c-success, #28a745) 45%, transparent);
}
.dunally-portal-page .badge-warning {
  background: color-mix(in srgb, var(--c-warning, #ffc107) 22%, transparent);
  color: var(--c-warning, #b8860b);
  border-color: color-mix(in srgb, var(--c-warning, #ffc107) 50%, transparent);
}
.dunally-portal-page .badge-danger {
  background: color-mix(in srgb, var(--c-danger, #dc3545) 18%, transparent);
  color: var(--c-danger, #c82333);
  border-color: color-mix(in srgb, var(--c-danger, #dc3545) 45%, transparent);
}
.dunally-portal-page .badge-primary,
.dunally-portal-page .badge-info {
  background: color-mix(in srgb, var(--c-secondary, #3498db) 18%, transparent);
  color: var(--c-secondary, #2471a3);
  border-color: color-mix(in srgb, var(--c-secondary, #3498db) 45%, transparent);
}

/* ---- alerts / empty states: friendly, not a grey bar ----------- */
.dunally-portal-page .alert {
  border-radius: 12px; border: 1px dashed var(--c-border, #cbd2d9);
  background: var(--c-surface, #f8f9fa); color: var(--c-text-2, #52606d);
  text-align: center; padding: 28px 20px;
}
.dunally-portal-page .alert-info { border-color: color-mix(in srgb, var(--c-secondary, #3498db) 40%, transparent); }

/* ---- small helpers --------------------------------------------- */
.dunally-portal-page .text-right { text-align: right; }
[dir="rtl"] .dunally-portal-page .text-right { text-align: left; }
.dunally-portal-page .card-title::after { } /* keep cascade order */

/* ---- persistent portal nav (injected by portal-mobile.js) ------- */
.dunally-portal-page .dunally-portal-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 26px; padding: 6px;
  background: var(--c-surface, #f8f9fa); border: 1px solid var(--c-border, #e5e9ec);
  border-radius: 12px; box-shadow: var(--el-1);
}
.dunally-portal-page .dunally-portal-nav a {
  padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 14px;
  color: var(--c-text-2, #6c757d); text-decoration: none; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.dunally-portal-page .dunally-portal-nav a:hover {
  background: color-mix(in srgb, var(--c-secondary, #3498db) 14%, transparent);
  color: var(--c-text, #1f2933); text-decoration: none;
}
.dunally-portal-page .dunally-portal-nav a.active {
  background: var(--c-primary, #1a3a52); color: #fff;
}
@media (max-width: 575.98px) {
  .dunally-portal-page .dunally-portal-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ---- Wave-00 0k: premium light depth (portal is intentionally light) ----
 * A soft grey app surface so the white cards/tables/nav lift off the page,
 * with branded shadows. This is what makes it read as "designed", not default. */
body.dunally-portal { background: #eef2f7; }
.dunally-portal-page .card,
.dunally-portal-page .table-responsive,
.dunally-portal-page .dunally-portal-nav,
.dunally-portal-page .dunally-stat,
.dunally-portal-page .dunally-balance {
  background: #ffffff !important;
  border-color: #e3e9f0 !important;
  box-shadow: 0 1px 2px rgba(16,42,67,.05), 0 8px 24px rgba(16,42,67,.06) !important;
}
.dunally-portal-page table.table thead th { background: #f4f7fb; }
.dunally-portal-page .dunally-portal-nav { padding: 8px; }
/* a slim branded top accent on the page header for identity */
.dunally-portal-page h1 { position: relative; }
.dunally-portal-page > h1:first-of-type::before,
.dunally-portal-page > .dunally-portal-nav + h1::before { content: none; }