:root {
  --orca-surface: #f3f4f6;
  --orca-surface-strong: #e5e7eb;
  --orca-surface-muted: #eef1f4;
  --orca-text: #111827;
  --orca-text-muted: #4b5563;
  --orca-border: #c7ced8;
  --orca-focus: #2563eb;
  --orca-accent: #dbeafe;
}

html, body, #root {
  background: var(--orca-surface) !important;
  color: var(--orca-text) !important;
}

body, button, input, select, textarea, .tooltip, .popover, .dropdown-menu,
.modal-content, .card, .panel, .form-control, .btn, .nav, .navbar,
.table, .list-group, .treeview {
  color: var(--orca-text) !important;
  background-color: var(--orca-surface) !important;
  border-color: var(--orca-border) !important;
}

input, select, textarea,
.MuiInputBase-root, .MuiOutlinedInput-root,
.MuiTextField-root .MuiInputBase-root,
.ag-root-wrapper, .ag-root, .ag-body-viewport, .ag-center-cols-viewport,
.ag-center-cols-container, .ag-row, .ag-cell, .slick-pane, .slick-viewport,
.slick-row, .slick-cell {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--orca-text) !important;
  -webkit-text-fill-color: var(--orca-text) !important;
}

/* Keep table headings and row-number gutters on a light surface with explicit text. */
.ag-header, .ag-header-viewport, .ag-header-container,
.ag-header-row, .ag-header-cell, .ag-header-cell-label,
.ag-header-cell-text, .slick-header, .slick-header-columns,
.slick-header-column, .slick-header-column span,
.table thead, .table thead th, .table th,
.ag-row-number, .ag-row-number-cell, .slick-row-number,
.row-number, .row-header, .column-name, .column-header {
  background: var(--orca-surface-strong) !important;
  background-color: var(--orca-surface-strong) !important;
  color: var(--orca-text) !important;
  -webkit-text-fill-color: var(--orca-text) !important;
}

.pgadmin-table-editor [class*="columnName"],
.pgadmin-table-editor [class*="column-name"],
.pgadmin-table-editor [class*="header-cell"],
[data-test="table-editor"] .column-name,
[data-test="table-editor"] .column-header {
  background: var(--orca-surface-strong) !important;
  color: var(--orca-text) !important;
  -webkit-text-fill-color: var(--orca-text) !important;
}

.ag-cell-value, .ag-cell-wrapper, .slick-cell, .slick-cell *,
.ag-header-cell *, .ag-header-cell-label * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.ag-row-selected .ag-cell, .ag-cell-focus,
.slick-cell.selected, .slick-cell.active {
  background: var(--orca-accent) !important;
  color: var(--orca-text) !important;
  -webkit-text-fill-color: var(--orca-text) !important;
}

* { border-color: var(--orca-border) !important; }

a, a:hover, a:focus, a:active, button, .btn-link,
.text-primary, .text-info, .text-success, .text-warning,
.text-danger, .text-muted { color: var(--orca-text) !important; }

.btn, .btn-primary, .btn-info, .btn-success, .btn-warning,
.btn-danger, .btn-secondary, .btn-dark, .btn-light,
.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger,
.bg-secondary, .bg-dark, .badge, .navbar-dark, .navbar-inverse,
.panel-header, .modal-header, .topbar {
  background-color: var(--orca-surface-strong) !important;
  border-color: var(--orca-border) !important;
  color: var(--orca-text) !important;
}

.navbar a, .navbar button, .navbar .nav-link, .navbar .navbar-brand,
.navbar-dark a, .navbar-inverse a, .panel-header a,
.panel-header button, .modal-header, .modal-header button,
.topbar a, .topbar button { color: var(--orca-text) !important; }

.btn:hover, .btn:focus, .btn:active, .btn.active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--orca-accent) !important;
  border-color: var(--orca-focus) !important;
  color: var(--orca-text) !important;
}

.form-control:focus, select:focus, textarea:focus, input:focus,
button:focus, .btn:focus {
  background-color: #ffffff !important;
  border-color: var(--orca-focus) !important;
  box-shadow: 0 0 0 2px #93c5fd !important;
  color: var(--orca-text) !important;
  -webkit-text-fill-color: var(--orca-text) !important;
}

.dropdown-item:hover, .dropdown-item:focus,
.list-group-item-action:hover, .list-group-item-action:focus,
.nav-tabs .nav-link.active, .nav-pills .nav-link.active,
.table-striped tbody tr:nth-of-type(odd), .table-hover tbody tr:hover {
  background-color: var(--orca-surface-muted) !important;
  color: var(--orca-text) !important;
}

.MuiPaper-root, .MuiCard-root, .MuiDialog-paper, .MuiPopover-paper,
.MuiMenu-paper, .MuiAlert-root {
  background: #ffffff !important;
  color: var(--orca-text) !important;
  border-radius: 6px !important;
  border: 1px solid var(--orca-border) !important;
  box-shadow: 0 4px 14px rgba(31, 41, 55, .12) !important;
}

.MuiDialogTitle-root, .MuiCardHeader-root, .MuiTableHead-root,
.MuiDataGrid-columnHeaders {
  background: var(--orca-surface-strong) !important;
  color: var(--orca-text) !important;
}

.MuiDialogTitle-root *, .MuiCardHeader-root *, .MuiTableHead-root *,
.MuiDataGrid-columnHeaders * { color: var(--orca-text) !important; }
.MuiIconButton-root, .MuiSvgIcon-root { color: var(--orca-text) !important; }

.MuiTooltip-tooltip, .tooltip-inner {
  background: var(--orca-text-muted) !important;
  color: #ffffff !important;
  border: 1px solid var(--orca-border) !important;
}

::selection { background: #bfdbfe; color: var(--orca-text); }

/* Authenticator QR: preserve a white quiet zone and render it large enough to scan. */
.orca-security-shell img[alt*="QR"],
.orca-security-shell img[alt*="qr"],
body.orca-security-page img[src^="data:image/"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(360px, 100%) !important;
  min-width: 280px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  background: #ffffff !important;
  color: var(--orca-text) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  border: 12px solid #ffffff !important;
  box-sizing: border-box !important;
}

body.orca-security-page .mfa-qrcode,
body.orca-security-page .qr-code,
body.orca-security-page [class*="qr-code"],
body.orca-security-page [class*="qrcode"] {
  background: #ffffff !important;
  color: var(--orca-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 12px !important;
}

.orca-app-icon, .app-icon {
  background: url('../img/orca-logo.svg') center / contain no-repeat !important;
  color: transparent !important;
  display: inline-block;
}
.pg-sp-icon { background-image: url('../img/orca-logo.svg') !important; background-size: 75px 75px !important; }
.orca-welcome-logo { display: flex; align-items: center; gap: 1rem; width: 100% !important; padding: 1rem .5rem; }
.orca-welcome-logo img { width: 112px; height: 112px; object-fit: contain; }
.orca-welcome-wordmark, .orca-welcome-tagline { color: var(--orca-text); }
.orca-welcome-wordmark { font-size: 2rem; font-weight: 800; letter-spacing: .08em; line-height: 1; }
.orca-welcome-tagline { font-size: .78rem; font-weight: 700; letter-spacing: .16em; line-height: 1.2; }

body.orca-security-page { background: var(--orca-surface) !important; color: var(--orca-text) !important; color-scheme: light; }
body.orca-security-page #root { min-height: 100vh; position: relative; z-index: 1; }
body.orca-security-page [data-test="app-menu-bar"], body.orca-security-page .AppMenuBar,
body.orca-security-page .app-menu-bar, body.orca-security-page #orca-splash-overlay { display: none !important; }
body.orca-security-page .orca-security-shell { min-height: 100vh; width: 100%; background: transparent !important; color: var(--orca-text) !important; }
body.orca-security-page .BasePage-pageContent { box-sizing: border-box; width: min(450px, calc(100vw - 32px)); max-width: 450px; background: #ffffff !important; color: var(--orca-text) !important; }
body.orca-security-page .BasePage-pageContent * { color: var(--orca-text); }
body.orca-security-page .BasePage-pageContent button, body.orca-security-page .BasePage-pageContent .btn { color: var(--orca-text) !important; background: var(--orca-surface-strong) !important; }

@media (max-width: 640px) {
  .orca-welcome-logo { flex-direction: column; justify-content: center; }
  .orca-welcome-wordmark { font-size: 1.35rem; }
  body.orca-security-page .orca-security-shell > .MuiBox-root { padding: 16px !important; }
  body.orca-security-page .BasePage-pageContent { min-width: 0; width: 100%; }
}

/* The current data view uses react-table/react-data-grid classes rather than
   the legacy ag-grid and slick-grid classes. Keep both table implementations
   readable on the ORCA light surface. */
.DataGridView-grid,
.DataGridView-table,
.DataGridView-table .pgrt-table,
.DataGridView-table .pgrt-header,
.DataGridView-table .pgrt-body,
.DataGridView-table .pgrt-row,
.ReactGrid-root,
.ReactGrid-root .rdg-header-row,
.ReactGrid-root .rdg-row {
  background-color: var(--orca-surface) !important;
  color: var(--orca-text) !important;
}

.DataGridView-table .pgrt-header-cell,
.DataGridView-table .pgrt-header-cell > div,
.DataGridView-table .pgrt-header-cell span,
.ReactGrid-root .rdg-header-row .rdg-cell,
.ReactGrid-root .rdg-header-row .rdg-cell > *,
.ReactGrid-root .rdg-header-sort-name {
  background-color: var(--orca-surface-strong) !important;
  color: var(--orca-text) !important;
  -webkit-text-fill-color: var(--orca-text) !important;
  border-color: var(--orca-border) !important;
}

.DataGridView-table .pgrd-row-cell,
.DataGridView-table .pgrd-row-cell-content,
.ReactGrid-root .rdg-row .rdg-cell,
.ReactGrid-root .rdg-row .rdg-cell > *,
.ReactGrid-root .rdg-cell-value {
  background-color: #ffffff !important;
  color: var(--orca-text) !important;
  -webkit-text-fill-color: var(--orca-text) !important;
  border-color: var(--orca-border) !important;
}

/* The first react-data-grid column is the row-number/selection gutter. */
.ReactGrid-root .rdg-cell[aria-colindex="1"]:not([role="columnheader"]) {
  background-color: var(--orca-surface-strong) !important;
  color: var(--orca-text) !important;
  -webkit-text-fill-color: var(--orca-text) !important;
  font-weight: 600;
}

.DataGridView-table .pgrt-header-resizer {
  background-color: var(--orca-border) !important;
}

.DataGridView-table .pgrd-row-cell:focus-within,
.ReactGrid-root .rdg-cell:focus-within {
  outline: 2px solid var(--orca-focus) !important;
  outline-offset: -2px;
}

/* Keep the authentication card and QR code compact, centred, and scannable. */
body.orca-security-page .BasePage-pageContent {
  box-sizing: border-box !important;
  width: min(430px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-width: 430px !important;
  padding: 24px !important;
  background: #ffffff !important;
  color: var(--orca-text) !important;
  border: 1px solid var(--orca-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(31, 41, 55, .14) !important;
}

body.orca-security-page .orca-mfa-qr-wrap {
  box-sizing: border-box !important;
  width: min(280px, 100%) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 1px solid var(--orca-border) !important;
  border-radius: 10px !important;
}

body.orca-security-page .orca-mfa-qr-wrap .orca-mfa-qr,
body.orca-security-page .orca-security-shell img[alt*="QR"],
body.orca-security-page .orca-security-shell img[alt*="qr"],
body.orca-security-page img[src^="data:image/"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(220px, 100%) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  background: #ffffff !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  border: 8px solid #ffffff !important;
  box-sizing: border-box !important;
}

body.orca-security-page .BasePage-bgVideo,
body.orca-security-page .BasePage-bgVeil {
  display: block !important;
}

body.orca-security-page .BasePage-bgVideo {
  pointer-events: none;
}

body.orca-security-page .BasePage-bgVeil {
  background: rgba(255, 255, 255, .48) !important;
  pointer-events: none;
}

@media (max-width: 640px) {
  body.orca-security-page .BasePage-pageContent {
    width: calc(100vw - 32px) !important;
    padding: 20px !important;
  }
  body.orca-security-page .orca-mfa-qr-wrap {
    width: min(250px, 100%) !important;
    padding: 12px !important;
  }
  body.orca-security-page .orca-mfa-qr-wrap .orca-mfa-qr,
  body.orca-security-page .orca-security-shell img[alt*="QR"],
  body.orca-security-page .orca-security-shell img[alt*="qr"],
  body.orca-security-page img[src^="data:image/"] {
    width: min(190px, 100%) !important;
  }
}