/* ============================================================
   secretaire.lu — Client portal (/portal/ and /en/portal/)
   Layers on top of style.css: same Warm European Concierge
   tokens, no new colours, no new fonts.
   ============================================================ */

/* The portal toggles whole regions with the `hidden` attribute. Several of
   them are flex/grid containers, whose display value would otherwise win over
   the UA's `display: none`. This one rule is load-bearing for every state
   switch on the page. */
[hidden] {
  display: none !important;
}

/* style.css gives every <section> 6rem of vertical padding — right for a
   landing page, far too airy for an application view. */
.portal-state {
  padding: 0;
}

/* --- Shell --- */
.portal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 248, 243, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.portal-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem var(--space-md);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem var(--space-sm);
}

.portal-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.portal-logo:hover {
  color: var(--color-primary);
}

.portal-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* The account chip is a sibling of the controls, not a child, so it can wrap
   onto its own full-width line on phones while the controls stay beside the
   logo. Whichever of the two comes first carries the auto margin that pushes
   the group to the right — including when the chip is `hidden` (logged out). */
.portal-account {
  margin-left: auto;
}

.portal-account[hidden] + .portal-header-right {
  margin-left: auto;
}

/* The signed-in address is a security affordance, not decoration: it is how a
   customer notices they are looking at the wrong account. Never hide it to
   save space — it shrinks, it does not disappear. */
.portal-account {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 15rem;
  min-width: 0; /* lets the ellipsis actually engage inside a flex row */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.85rem;
}

.portal-lang {
  font-size: var(--font-small);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  padding: 0.35rem 0.5rem;
}

.portal-lang:hover {
  color: var(--color-primary);
}

.btn-sm {
  padding: 0.45rem 1.1rem;
  font-size: var(--font-small);
}

.portal-main {
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  min-height: 60vh;
}

.portal-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) 0;
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

.portal-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
}

.portal-footer a:hover {
  color: var(--color-primary);
}

/* --- Headings --- */
.portal-title {
  font-size: clamp(1.6rem, 2.4vw + 0.6rem, 2.4rem);
  margin-bottom: 0.35rem;
}

.portal-lede {
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.portal-welcome {
  margin-bottom: var(--space-md);
}

.portal-account-line {
  color: var(--color-text-muted);
  font-size: var(--font-small);
}

.portal-account-line strong {
  color: var(--color-text);
}

.portal-muted {
  color: var(--color-text-muted);
}

.portal-fineprint {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* --- Cards --- */
.portal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.portal-card--login {
  max-width: 30rem;
  margin: var(--space-lg) auto;
}

.portal-card-title {
  font-size: var(--font-h3);
  margin-bottom: 0.35rem;
}

.portal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* --- Alerts --- */
.portal-alert {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: var(--font-small);
  line-height: 1.6;
  margin-top: var(--space-sm);
  border: 1px solid transparent;
}

.portal-alert--ok {
  background: rgba(74, 158, 109, 0.1);
  border-color: rgba(74, 158, 109, 0.35);
  color: #2F6B48;
}

.portal-alert--warn {
  background: var(--color-primary-bg);
  border-color: rgba(212, 118, 60, 0.35);
  color: var(--color-primary-dark);
}

.portal-alert--error {
  background: rgba(184, 90, 36, 0.08);
  border-color: rgba(184, 90, 36, 0.3);
  color: var(--color-primary-dark);
}

/* --- Tabs --- */
.portal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.portal-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.portal-tab:hover:not(:disabled) {
  color: var(--color-text);
}

.portal-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.portal-tab:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.portal-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-secondary);
  background: rgba(91, 74, 138, 0.1);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.55rem;
}

/* --- Stat tiles --- */
.portal-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.portal-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-sm) var(--space-md);
}

.portal-stat-label {
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--color-text-muted);
}

.portal-stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-primary);
}

.portal-stat-note {
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

/* --- Tables --- */
.portal-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-sm);
}

.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.portal-table th,
.portal-table td {
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.portal-table th {
  font-size: var(--font-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.portal-table tbody tr:last-child td {
  border-bottom: none;
}

.portal-table .portal-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.portal-row {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.portal-row:hover,
.portal-row:focus-visible {
  background: var(--color-bg-alt);
  outline: none;
}

.portal-row.expanded {
  background: var(--color-primary-bg);
}

.portal-row-summary {
  color: var(--color-text-muted);
  max-width: 32rem;
}

.portal-chevron {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.portal-row.expanded .portal-chevron {
  transform: rotate(90deg);
}

/* --- Call detail --- */
.portal-detail-cell {
  background: var(--color-bg);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.portal-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.portal-detail-item {
  font-size: var(--font-small);
}

.portal-detail-item span {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.portal-detail-item strong {
  font-weight: 600;
}

.portal-transcript {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 26rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.portal-turn {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.portal-turn-role {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: var(--font-small);
}

.portal-turn--agent .portal-turn-role {
  color: var(--color-primary);
}

.portal-turn--user .portal-turn-role {
  color: var(--color-secondary);
}

.portal-turn-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Documents --- */
.portal-upload {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

/* Visually hidden but still focusable, so the styled <label> works as the
   button and keyboard users keep a real focus target. */
.portal-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.portal-file-input:focus-visible + label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.portal-file-input:disabled + label {
  opacity: 0.6;
  cursor: not-allowed;
}

.portal-quota {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.portal-doc-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.portal-doc-actions {
  text-align: right;
  white-space: nowrap;
}

.btn-danger {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-border);
}

.btn-danger:hover:not(:disabled) {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-bg);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* --- Assistant card (Overview) --- */
.portal-phone {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-xs);
  overflow-wrap: anywhere;
}

/* --- Account tab: read-only key/value lists --- */
.portal-deflist {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: 0.5rem var(--space-md);
  margin-top: var(--space-sm);
}

.portal-deflist dt {
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--color-text-muted);
}

.portal-deflist dd {
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.portal-deflist a {
  color: var(--color-primary-dark);
}

/* A stored address keeps the line breaks it was entered with. */
.portal-multiline {
  white-space: pre-line;
}

/* The one support line at the bottom of the Account tab. */
.portal-support {
  margin-top: calc(var(--space-md) * -0.5);
  text-align: center;
}

/* One column on narrow screens: a 14rem label column next to a wrapped address
   is unreadable on a phone. */
@media (max-width: 34rem) {
  .portal-deflist {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .portal-deflist dd {
    margin-bottom: var(--space-xs);
  }
}

/* --- Agent editors --- */
.portal-counter {
  align-self: flex-end;
  font-size: var(--font-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.portal-counter--warn {
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* Screen-reader-only label text. */
.portal-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Misc --- */
.portal-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.portal-empty {
  color: var(--color-text-muted);
  padding: var(--space-sm) 0;
}

@media (max-width: 640px) {
  /* Logo on its own line, then one control row: account · language · sign out.
     The account chip leads that row so it stays the first thing read. */
  .portal-header-inner {
    padding: 0.7rem var(--space-sm);
    row-gap: 0.5rem;
  }

  .portal-header-right,
  .portal-account[hidden] + .portal-header-right {
    margin-left: auto;
  }

  /* Line 1: logo + controls. Line 2: the full address, never truncated —
     it is how the customer verifies which account they are looking at. */
  .portal-account {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    max-width: none;
    justify-content: center;
  }

  .portal-card {
    padding: var(--space-sm);
  }

  .portal-turn {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  /* Drop the summary column on narrow screens. Keeping four columns pushed the
     table into horizontal scroll, which clipped the expanded transcript at the
     wrapper edge and stretched collapsed rows to absurd heights. The summary is
     not lost — it is the first thing the expanded row shows. */
  .portal-table--calls th:nth-child(4),
  .portal-table--calls td:nth-child(4) {
    display: none;
  }

  /* Same reasoning for the documents table: drop "Added" so name, size and the
     delete button fit without horizontal scroll. */
  .portal-table--docs th:nth-child(3),
  .portal-table--docs td:nth-child(3) {
    display: none;
  }
}

/* --- Test widget white-label badge --- */
/* Replaces the vendor banner that is suppressed inside the widget's shadow
   root. Rendered by the page, never injected into the shadow DOM, so a widget
   update cannot remove or restyle it.

   Placement: the widget host is position:fixed, inset:0, z-index:1000 and
   anchors its controls to the bottom-right, leaving a padding strip beneath
   them (--el-overlay-padding, 32px) that the vendor banner used to occupy.
   Measured against the running widget: controls end at 12px above that strip
   and the vendor label's right edge sat 32px in from the host edge, so these
   offsets drop the badge into exactly that slot — same corner, same 10px type,
   clear of the bubble and of the expanded panel (which is inset by the same
   padding). z-index clears the host by one; pointer-events:none guarantees it
   can never swallow a click meant for the widget. */
.portal-widget-badge {
  position: fixed;
  right: 32px;
  bottom: 6px;
  z-index: 1001;
  pointer-events: none;
  padding: 2px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.6;
  white-space: nowrap;
}

/* --- Subscription plan card --- */
/* Rendered only when the usage response carries a recognised plan; the element
   stays [hidden] otherwise, so an unset subscription_plan costs nothing. */
.portal-plan-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.portal-plan-usage {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* Track + fill. The fill is capped at 100% width so an over-quota month reads
   as a full bar rather than overflowing the card; the exact overage is spelled
   out in .portal-plan-over instead of being implied by an impossible bar. */
.portal-progress {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.portal-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.portal-progress-fill--over {
  background: var(--color-primary-dark);
}

.portal-plan-over {
  margin-top: var(--space-xs);
  font-size: var(--font-small);
  color: var(--color-primary-dark);
}