/* The standalone customer portal shares the application's saved appearance. */
.portal-theme-controls {
  width: min(340px, calc(100% - 32px));
  min-width: 0;
  margin: 0 auto 24px;
  padding: .5rem 0;
}

.app-customer-portal .portal-login-shell {
  min-height: calc(100vh - 116px);
}

@media screen {
  :root[data-bs-theme="dark"] {
    --portal-bg: var(--app-bg);
    --portal-ink: var(--app-text);
    --portal-muted: var(--app-muted);
    --portal-border: var(--app-border);
    --portal-panel: var(--app-surface);
    --portal-primary: var(--app-primary);
    --portal-primary-dark: var(--app-primary-fill);
    --portal-soft: var(--app-primary-soft);
    --portal-success: var(--app-success-text);
    --portal-warning: var(--app-warning-text);
    --portal-danger: var(--app-danger-text);
    --page-bg: var(--app-bg);
    --panel-border: var(--app-border);
    --ink: var(--app-text);
    --muted: var(--app-muted);
  }

  html[data-bs-theme="dark"] body.app-customer-portal {
    background: var(--app-bg);
    color: var(--app-text);
  }

  html[data-bs-theme="dark"] .portal-login-info {
    background: linear-gradient(135deg, var(--app-surface), var(--app-primary-soft));
  }

  html[data-bs-theme="dark"] :is(.portal-login-form-wrap, .ticket-card, .attachment-item, .document-card, .support-panel) {
    background: var(--app-surface);
    border-color: var(--app-border);
  }

  html[data-bs-theme="dark"] :is(.portal-info-list li, .portal-login-form .form-label, .portal-panel .form-label, .portal-modal .form-label) {
    color: var(--app-text);
  }

  html[data-bs-theme="dark"] :is(.portal-stat, .summary-item, .description-box, .attachment-chip, .attachment-thumb, .empty-box, .chat-bubble) {
    background: var(--app-surface-muted);
    border-color: var(--app-border);
    color: var(--app-text);
  }

  html[data-bs-theme="dark"] :is(.portal-table thead th, .ticket-id) {
    color: var(--app-muted);
  }

  html[data-bs-theme="dark"] .portal-table thead th {
    background: var(--app-surface-muted);
  }

  html[data-bs-theme="dark"] .portal-modal-note {
    background: var(--app-info-soft);
    border-color: var(--app-info-text);
    color: var(--app-info-text);
  }

  html[data-bs-theme="dark"] .chat-message-portal .chat-bubble {
    background: var(--app-primary-soft);
    border-color: var(--app-border);
  }

  html[data-bs-theme="dark"] .attachment-item:hover {
    border-color: var(--app-primary);
  }

  html[data-bs-theme="dark"] .portal-login-form .input-group .btn {
    border-color: var(--app-border);
  }

  html[data-bs-theme="dark"] .portal-login-form .btn-primary {
    background: var(--app-primary-fill);
    border-color: var(--app-primary-fill);
    color: var(--app-on-primary);
  }

  html[data-bs-theme="dark"] .portal-login-form .btn-primary:hover {
    background: #3d6dd7;
    border-color: #3d6dd7;
  }

  html[data-bs-theme="dark"] .status-primary {
    background: var(--app-primary-soft);
    color: var(--app-primary);
  }

  html[data-bs-theme="dark"] .status-warning {
    background: var(--app-warning-soft);
    color: var(--app-warning-text);
  }

  html[data-bs-theme="dark"] .status-success {
    background: var(--app-success-soft);
    color: var(--app-success-text);
  }

  html[data-bs-theme="dark"] .status-danger {
    background: var(--app-danger-soft);
    color: var(--app-danger-text);
  }

  html[data-bs-theme="dark"] .status-muted {
    background: var(--app-surface-muted);
    color: var(--app-muted);
  }

  /* Keep brand artwork readable without changing its original colours. */
  html[data-bs-theme="dark"] :is(.portal-brand-logo, .portal-logo, .brand-logo) {
    background: #fff;
    padding: 5px 7px;
    border-radius: 5px;
  }
}

/* Shared customer navigation, including the document and ticket detail pages. */
body.has-portal-sidebar { padding-left: 248px; }
.customer-portal-sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 1030; display: flex; flex-direction: column; gap: 28px; padding: 28px 20px; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #172033); border-right: 1px solid var(--bs-border-color, #d9e2ef); }
.customer-portal-sidebar a { color: inherit; text-decoration: none; border-radius: 8px; padding: 12px; display: block; }
.customer-portal-home { font-weight: 700; font-size: 1.1rem; }
.customer-portal-sidebar nav { display: grid; gap: 8px; }
.customer-portal-sidebar nav a:hover, .customer-portal-sidebar a:focus-visible { background: var(--bs-secondary-bg, #eef2f7); }
.customer-portal-sidebar a[aria-current="page"] { background: var(--bs-primary, #0d6efd); color: #fff; font-weight: 600; }
.customer-portal-account { margin-top: auto; display: grid; gap: 6px; overflow-wrap: anywhere; }
.customer-portal-account span { font-size: .85rem; }
@media (max-width: 767.98px) {
  body.has-portal-sidebar { padding-left: 0; }
  .customer-portal-sidebar { position: static; width: auto; padding: 16px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--bs-border-color, #d9e2ef); }
  .customer-portal-sidebar nav { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .customer-portal-account { grid-template-columns: 1fr auto; align-items: center; }
  .customer-portal-account span { grid-column: 1; }
  .customer-portal-account > a { grid-column: 2; grid-row: 1 / 3; }
}