/* Shared TRP branding and themes; loaded after the portal styles. */
:root {
  color-scheme: dark;
  --portal-heading-font: "Eurostile", "Eurostile Extended", "Inter", sans-serif;
  --portal-nav-height: 104px;
  --portal-header: #080b0f;
  --portal-shadow: 0 10px 40px rgba(0, 0, 0, 0.24);
  --portal-highlight: #d9ecff;
  --portal-primary: #f3f5f7;
  --portal-primary-text: #0b0f14;
  --portal-warning: #ffd08c;
  --portal-blue: #a5caff;
  --portal-success: #ade5cc;
  --portal-body-background: linear-gradient(180deg, #090c11, #0d1218);
  --login-bg: var(--page-bg);
  --login-panel-bg: var(--surface);
  --login-border: var(--border);
  --login-text: var(--text);
  --login-muted: var(--text-2);
  --login-faint: var(--muted);
  --login-danger: var(--danger);
  --bg: #0a0d12;
  --sidebar: #080b0f;
  --sidebar-2: #11161d;
  --sidebar-3: #1a222d;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-text: #f3f5f7;
  --sidebar-muted: #a4afbd;
  --page-bg: #0d1218;
  --surface: #11161d;
  --surface-2: #171e27;
  --border: rgba(255, 255, 255, 0.1);
  --border-2: rgba(255, 255, 255, 0.2);
  --border-color: var(--border);
  --text: #f3f5f7;
  --text-2: #bbc4d0;
  --muted: #a0acbc;
  --accent: #1a6ef5;
  --accent-hover: #1258d0;
  --accent-bg: rgba(74, 145, 255, 0.14);
  --green: #6bd7a5;
  --green-bg: rgba(107, 215, 165, 0.12);
  --danger: #ff9494;
  --danger-bg: rgba(255, 148, 148, 0.12);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa;
  --sidebar: #ffffff;
  --sidebar-2: #f3f5f9;
  --sidebar-3: #e6ebf2;
  --sidebar-border: #dbe2ec;
  --sidebar-text: #172339;
  --sidebar-muted: #58677d;
  --page-bg: #f1f4f8;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --border: #dbe2ec;
  --border-2: #b8c5d7;
  --text: #172339;
  --text-2: #4b5d75;
  --muted: #63738b;
  --accent-bg: rgba(26, 110, 245, 0.08);
  --green: #116847;
  --green-bg: rgba(17, 104, 71, 0.08);
  --danger: #b42318;
  --danger-bg: rgba(180, 35, 24, 0.08);
  --portal-header: #ffffff;
  --portal-shadow: 0 10px 36px rgba(23, 35, 57, 0.07);
  --portal-highlight: #1754bc;
  --portal-primary: #1a6ef5;
  --portal-primary-text: #ffffff;
  --portal-warning: #8a4d05;
  --portal-blue: #1754bc;
  --portal-success: #116847;
  --portal-body-background: linear-gradient(180deg, #f9fbff, #f1f4f8);
}

html, body {
  font-family: "Inter", system-ui, sans-serif;
}

.portal-login-nav { background: var(--portal-header); }
.portal-login-nav-inner { min-height: var(--portal-nav-height); }
.portal-login-hero { min-height: calc(100vh - var(--portal-nav-height)); }
.portal-login-title, .portal-login-card h2 { font-family: var(--portal-heading-font); }
.portal-login-title { overflow-wrap: anywhere; hyphens: auto; }

.portal-login-wordmark, .sidebar-brand {
  --logo-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: calc(var(--logo-width) * 0.15);
  color: var(--text);
  text-decoration: none;
  vertical-align: middle;
}

.portal-brand-logo {
  display: block;
  width: var(--logo-width);
  height: auto;
  max-width: none;
  filter: none;
  mix-blend-mode: normal;
}

.portal-brand-logo[data-logo-theme="light"] { display: none; }
:root[data-theme="light"] .portal-brand-logo[data-logo-theme="dark"] { display: none; }
:root[data-theme="light"] .portal-brand-logo[data-logo-theme="light"] { display: block; }

.portal-login-wordmark:focus-visible, .sidebar-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sidebar { background: var(--sidebar); }
.sidebar-header { text-align: center; }
.sidebar-sub { color: var(--sidebar-muted); }
.topbar-title, .panel-title, .stat-value { font-family: var(--portal-heading-font); }

/* Keep legacy support, account and production surfaces consistent. */
.table-search-input, .users-filter-select, .doc-filter:hover,
.support-list-panel, .support-filter-chip:hover, .support-ticket-row,
.support-detail-header, .support-meta-grid, .support-action-bar,
.support-card-section, .support-message,
.support-assignee-trigger, .support-assignee-trigger:hover,
.support-assignee-trigger[aria-expanded="true"],
.support-assignee-menu, .support-assignee-menu-list, .support-assignee-menu-item,
.support-detail-panel.support-create-mode .support-detail-header,
.support-detail-panel.support-create-mode .support-create-form,
.support-detail-panel.support-create-mode input,
.support-detail-panel.support-create-mode select,
.support-detail-panel.support-create-mode textarea,
.support-detail-panel.support-create-mode input:focus,
.support-detail-panel.support-create-mode select:focus,
.support-detail-panel.support-create-mode textarea:focus,
.support-detail-panel.support-create-mode .support-retention-note,
.support-new-attachment-item, .user-engine-assignment-row,
.representative-clean-checkbox, .representative-field-box input[type="checkbox"],
#editUserModal .modal-actions, .engine-filter-card, .ecf-request-card,
.support-control-field select, #saveTicketMetaButton, #saveTicketMetaButton:hover {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.support-detail-panel, .support-detail-panel.support-create-mode,
.support-ticket-meta-grid span, .support-attachment-row, .support-attachment-form,
.support-assignee-menu-header, .support-assignee-menu-footer,
.support-assignee-menu-item:hover, .support-attachment-thumb,
.support-new-attachments, .user-company-row td, .user-engine-editor,
.representative-control-box, .representative-field-box,
.engine-filter-all, .order-badge, .order-priority-low, .order-progress-track,
.ecf-engine-scope, .ecf-sender-note, .ecf-detail-summary {
  background: var(--surface-2);
  border-color: var(--border);
}

.support-filter-bar { background: var(--surface); }
.support-ticket-row.active, .engine-filter-card.active,
.user-company-toggle:hover, .user-engine-summary, .company-access-note {
  background: var(--accent-bg);
  border-color: rgba(74, 145, 255, 0.4);
}

#dashboardSupportOverview.dashboard-support-overview,
#dashboardSupportOverview .dashboard-support-header,
#dashboardSupportOverview .dashboard-support-body,
#dashboardSupportOverview .dashboard-support-ticket { background: var(--surface); }
#dashboardSupportOverview .dashboard-support-stat { background: var(--surface-2); }

.table-search-input::placeholder, .support-ticket-date,
.support-ticket-people, .support-ticket-meta-grid span,
.user-company-main span, .user-company-engines,
.representative-checkbox small, .engine-filter-meta,
.ecf-table th, .ecf-table td small, .ecf-request-card > span,
.ecf-request-card > small, .ecf-sender-note span, .ecf-sender-note small,
.ecf-detail-summary span, .ecf-detail-section span,
.testflight-filters label { color: var(--text-2); }

.user-company-toggle, .representative-checkbox strong,
.representative-clean-checkbox, .engine-filter-title,
.ecf-request-top b { color: var(--text); }
.representative-field-text { color: var(--text) !important; }
.user-engine-summary, .company-access-note, .user-company-chevron { color: var(--portal-blue); }

.ecf-table th, .ecf-table td, .ecf-detail-section,
.ecf-detail-section > div, .modal-form textarea,
.user-engine-assignment-row select, .user-engine-assignment-row input {
  border-color: var(--border);
}

/* Preserve status meaning with readable colors on dark surfaces. */
.ecf-status, .order-badge {
  color: var(--text-2);
  background: var(--surface-2);
  border-color: var(--border);
}

.tag-warning, .support-ticket-tags .tag-warning, .support-internal-pill,
.order-status-blocked, .order-priority-high,
.ecf-status-opened, .ecf-status-reviewing {
  color: var(--portal-warning);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
}
.support-message.internal { background: rgba(245, 158, 11, 0.06); }
.support-ticket-tags .tag-danger, .order-priority-urgent,
.order-remove-part, .order-danger-button {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: rgba(255, 148, 148, 0.3);
}
.support-ticket-tags .tag-blue, .order-status-planned,
.order-status-ready, .order-priority-normal, .order-status-in_progress,
.ecf-status-converted {
  color: var(--portal-blue);
  background: var(--accent-bg);
  border-color: rgba(74, 145, 255, 0.3);
}
.order-status-completed, .ecf-status-active, .ecf-status-submitted,
.ecf-access-result {
  color: var(--green);
  background: var(--green-bg);
  border-color: rgba(107, 215, 165, 0.3);
}
.ecf-access-result > span, .ecf-access-result > small { color: var(--portal-success); }
.support-ticket-tags .tag-neutral, .order-status-cancelled,
.order-priority-low,
.ecf-status-revoked, .ecf-status-expired, .ecf-status-closed {
  color: var(--text-2);
  background: var(--surface-2);
  border-color: var(--border);
}

@media (min-width: 761px) and (max-width: 900px) {
  .sidebar-brand { --logo-width: 120px; }
}

@media (max-width: 760px) {
  .sidebar-brand { --logo-width: 128px; }
  .sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  .sidebar-sub {
    margin-top: 0;
    letter-spacing: 0.08em;
    line-height: 1.5;
  }
  .topbar { gap: 12px; }
  .topbar > div:first-child { min-width: 0; }
  .topbar-title { overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
  :root { --portal-nav-height: 132px; }
  .portal-login-wordmark { --logo-width: 120px; grid-column: 1; grid-row: 1; justify-self: start; }
  .portal-login-nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding-bottom: 12px;
  }
  .portal-login-nav .portal-theme-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .portal-login-nav .language-switcher { grid-column: 1; grid-row: 2; justify-self: start; }
  .portal-login-backlink { grid-column: 2; grid-row: 2; }
  .portal-login-title { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .portal-login-grid { min-width: 0; }
  .portal-login-grid > * { min-width: 0; }
}

/* Theme-aware surfaces include authentication and MFA, not just the dashboard. */
.portal-login-body { background: var(--portal-body-background); color: var(--text); }
.portal-login-nav { border-color: var(--border); }
.portal-login-title span:nth-child(2) { color: var(--portal-highlight); }
.portal-login-card { background: var(--surface); border-color: var(--border); box-shadow: var(--portal-shadow); }
.portal-login-card h2, .portal-login-field label, .portal-login-helper a { color: var(--text); }
.portal-login-lede, .portal-login-card-copy, .portal-login-helper { color: var(--text-2); }
.portal-login-meta, .portal-login-card-kicker, .portal-login-mono { color: var(--muted); }
.portal-login-divider { background: var(--border-2); }
.portal-login-dot { background: var(--green); box-shadow: 0 0 12px var(--green-bg); }
.portal-login-badges span { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.portal-login-field input { background: var(--surface-2); color: var(--text); border-color: var(--border); font: inherit; }
.portal-login-field input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.portal-login-submit { background: var(--portal-primary); color: var(--portal-primary-text); }
.portal-login-submit:hover { background: var(--portal-primary); opacity: 0.9; }
.portal-login-error { color: var(--danger); }
.portal-login-backlink, .portal-login-nav .language-switcher summary {
  color: var(--text); background: var(--surface-2); border-color: var(--border);
}
.portal-login-backlink:hover, .portal-login-nav .language-switcher summary:hover,
.portal-login-nav .language-switcher[open] summary { background: var(--surface); border-color: var(--border-2); }
.portal-login-nav .language-switcher-menu { background: var(--surface); border-color: var(--border); }
.portal-login-nav .language-switcher-menu a { color: var(--text-2); }
.portal-login-nav .language-switcher-menu a:hover,
.portal-login-nav .language-switcher-menu a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.portal-login-secondary { min-height: 44px; border-radius: 12px; color: var(--text); border-color: var(--border); background: var(--surface-2); }
.portal-login-secondary:hover { color: var(--portal-highlight); }
.portal-mfa-qr-wrap, .portal-mfa-manual code, .portal-mfa-recovery-list code { background: var(--surface-2); border-color: var(--border); }
.portal-mfa-panel { color: var(--text); border-color: var(--border); }
.sidebar-footer { background: var(--sidebar); }
.sidebar-user-card { border-color: var(--sidebar-border); }
.nav-item:hover { background: var(--sidebar-2); }
.nav-item.active, .nav-item.active:hover { background: var(--accent); color: #fff; }
.topbar { gap: 12px; }
.topbar > div:first-child { min-width: 0; }
.topbar .portal-theme-toggle { margin-left: auto; }
.topbar .language-switcher, .portal-login-nav .language-switcher { margin-left: 0; }
.topbar .language-switcher-menu { left: auto; right: 0; transform: none; }
.portal-login-wordmark { margin-right: auto; }

.portal-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 2px;
  width: 76px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
}
.portal-theme-toggle svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; pointer-events: none; }
.portal-theme-toggle:hover { border-color: var(--border-2); }
.portal-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-theme="dark"] .portal-theme-moon { background: #334155; color: #f8fafc; }
:root[data-theme="light"] .portal-theme-sun { background: #fff; color: #1754bc; box-shadow: 0 1px 4px rgba(23, 35, 57, 0.12); }

@media (max-width: 760px) {
  .portal-layout { grid-template-rows: auto minmax(0, 1fr); }
  .sidebar { background: var(--page-bg); padding: 0 12px 8px; }
  .sidebar-header { padding: 0; }
  .sidebar-header .sidebar-sub { display: none; }
  .sidebar-brand { --logo-width: 120px; padding: 18px; }
  .sidebar-nav { gap: 6px; padding-bottom: 4px; }
  .nav-item { min-height: 44px; }
  .nav-item-label { font-size: 0.8rem; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) 76px 44px; gap: 8px; padding: 14px 12px; }
  .topbar-title { font-size: 1.1rem; line-height: 1.25; }
  .topbar-subtitle { font-size: 0.78rem; }
  .topbar .language-switcher summary { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .topbar .language-switcher-current, .topbar .language-switcher-chevron { display: none; }
  .content-area { padding: 12px; }
}

@media (max-width: 640px) {
  .portal-login-hero { min-height: calc(100svh - var(--portal-nav-height)); padding: 22px 0 36px; align-items: flex-start; }
  .portal-login-grid { gap: 20px; }
  .portal-login-title { display: block; line-height: 1.15; letter-spacing: -0.035em; }
  .portal-login-title span + span::before { content: " "; }
  .portal-login-meta { font-size: 10px; gap: 8px; margin-bottom: 12px; }
  .portal-login-lede, .portal-login-badges { display: none; }
  .portal-login-card { padding: 22px 18px; }
  .portal-login-card h2 { font-size: 1.8rem; }
  .portal-login-card-copy { font-size: 0.9rem; margin-bottom: 20px; }
  .portal-login-field input { font-size: 16px; height: 48px; }
  .portal-login-form { gap: 14px; }
  .portal-login-backlink { min-height: 44px; padding: 0 12px; font-size: 12px; text-align: center; line-height: 1.3; }
  .portal-login-nav .language-switcher summary { width: auto; min-height: 44px; padding: 0 12px; }
  .portal-login-nav .language-switcher-current { display: inline; font-size: 12px; }
  .portal-login-nav .language-switcher-menu { left: 0; right: auto; transform: none; }
}