/* MailOcean dark appearance. Scoped to screen so invoices still print on white. */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e6edf7;
    --muted: #a9b9cb;
    --blue: #80b4ff;
    --cyan: #5bd4df;
    --line: #314256;
    --paper: #101a28;
    --navy: #12283e;
    --primary: #72aaff;
    --secondary: #82b6ff;
    --accent: #fff;
    --primary-fg: #fff;
    --body-fg: #e6edf7;
    --body-bg: #101a28;
    --body-quiet-color: #a9b9cb;
    --body-loud-color: #f1f5fa;
    --header-color: #e6edf7;
    --header-branding-color: #e6edf7;
    --header-bg: #172638;
    --header-link-color: #9fc7ff;
    --breadcrumbs-fg: #a9b9cb;
    --breadcrumbs-link-fg: #9fc7ff;
    --breadcrumbs-bg: #101a28;
    --link-fg: #90bfff;
    --link-hover-color: #c1dcff;
    --link-selected-fg: #c1dcff;
    --hairline-color: #314256;
    --border-color: #405268;
    --darkened-bg: #1d3044;
    --selected-bg: #213d5c;
    --selected-row: #203d5c;
    --button-bg: #246dde;
    --button-hover-bg: #3982ee;
    --default-button-bg: #246dde;
    --default-button-hover-bg: #3982ee;
    --object-tools-bg: #246dde;
    --object-tools-hover-bg: #3982ee;
  }
  html[data-theme="dark"] body { background:#101a28; color:#e6edf7; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) {
    --ink:#e6edf7; --muted:#a9b9cb; --blue:#80b4ff; --line:#314256;
    background:#101a28; color:#e6edf7;
  }
  html[data-theme="dark"] :is(.sidebar,.app-header) { background:#172638; border-color:#314256; }
  html[data-theme="dark"] .sidebar .logo { content:url('brand/mailocean-logo-dark.svg'); }
  html[data-theme="dark"] :is(.sidebar nav a,.account-email,.text-button) { color:#b7c9dd; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .sidebar nav a:hover { background:#22364b; color:#e6edf7; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .sidebar nav a.active { background:#203d60; color:#a8ceff; box-shadow:inset 3px 0 #6caaff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.panel,.stats article,.ops-metrics,.domain-overview>div,.billing-grid article) { background:#192a3d; color:#e6edf7; border-color:#314256; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.ops-metrics>a:hover,.ops-ticket:hover,.tenant-dashboard-actions>a:hover,tbody tr:hover) { background:#22364b; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) th { background:#22364b; color:#b7c9dd; border-color:#314256; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(td,th,.panel-heading,.mailbox-summary-grid>div,.domain-overview-grid>div) { border-color:#314256; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.button.outline,.mailbox-detail-links a,.domain-section-nav a,.billing-section-nav a,.operator-billing-nav a) { background:#203348; border-color:#405670; color:#d4e6fa; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.button.outline,.mailbox-detail-links a,.domain-section-nav a,.billing-section-nav a,.operator-billing-nav a):is(:hover,:focus-visible) { background:#294663; border-color:#80b4ff; color:#fff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .button:not(.outline) { background:#246dde; color:#fff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .button:not(.outline):hover { background:#3982ee; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { background:#102033; border-color:#405670; color:#edf4fd; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(input,textarea)::placeholder { color:#9aadc2; opacity:1; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.domain-status-grid>div,.mailbox-capacity,.manual-payment,.reply,.qpay-panel) { background:#20354b; border-color:#405670; color:#e6edf7; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.notice,.notice.subtle) { background:#1c3952; border-color:#355d7d; color:#d2e8fc; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.notice.success,.dns-status-ok) { background:#173d32; border-color:#357e60; color:#a6edc5; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.notice.warning,.dns-status-pending,.ops-status.amber) { background:#4b381b; border-color:#8b682f; color:#ffe1a3; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.notice.error,.errorlist,.field-format-error) { background:#4a242d; border-color:#8c4b51; color:#ffd1d0; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.badge,.ops-status,.ops-count,.empty-icon) { background:#233d59; border-color:#405d7d; color:#c1dcff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .badge.dns-status-ok { background:#173d32; border-color:#357e60; color:#a6edc5; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .badge.dns-status-pending { background:#4b381b; border-color:#8b682f; color:#ffe1a3; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.copy-value,.plan-tabs a) { background:#203b56; border-color:#4f7193; color:#d4e8ff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.copy-value:hover,.plan-tabs a.selected) { background:#246dde; color:#fff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.mailbox-list-tools a,.domain-guide-link a,.billing-section-heading>a,.operator-section-heading a:not(.button),.ops-panel-footer,.panel-heading>a,.qpay-wait) { color:#a7cdff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.report-filters label,.overview-section-title) { color:#b7c9dd; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .invoice img[alt="MailOcean"] { content:url('brand/mailocean-logo-dark.svg'); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .qpay-qr { background:#fff; border-color:#fff; }

  /* Public pages and the ClientArea sign-in share the same preference. */
  html[data-theme="dark"] :is(.site-header,.auth-main) { color:#e6edf7; }
  html[data-theme="dark"] :is(.site-header,footer) .logo { content:url('brand/mailocean-logo-dark.svg'); }
  html[data-theme="dark"] .site-header nav { color:#b7c9dd; }
  html[data-theme="dark"] :is(.site-header,.hero,.pricing-section,.auth-main) .button:not(.outline):not(.theme-toggle) { background:#246dde; color:#fff; }
  html[data-theme="dark"] :is(.site-header,.hero,.pricing-section,.auth-main) .button.outline { background:#203348; border-color:#405670; color:#d4e6fa; }
  html[data-theme="dark"] :is(.site-header,.hero,.pricing-section,.auth-main) .button:hover { border-color:#80b4ff; }
  html[data-theme="dark"] .pricing-section { background:#172638; }
  html[data-theme="dark"] :is(.price-card,.billing-grid article) { background:#203348; border-color:#405670; }
  html[data-theme="dark"] .price-card.featured { border-color:#80b4ff; }
  html[data-theme="dark"] :is(.feature-icon,.badge) { background:#233d59; border-color:#405d7d; color:#c1dcff; }
  html[data-theme="dark"] .segmented { background:#101e2f; }
  html[data-theme="dark"] .segmented button { color:#b7c9dd; }
  html[data-theme="dark"] .segmented button.selected { background:#304961; color:#fff; }
  html[data-theme="dark"] :is(.calculator input,.calculator select,.auth-main input:not([type=checkbox]):not([type=radio]),.auth-main select,.auth-main textarea) { background:#102033; border-color:#405670; color:#edf4fd; }
  html[data-theme="dark"] :is(.calculator input,.auth-main input)::placeholder { color:#9aadc2; opacity:1; }
  html[data-theme="dark"] .address-chip { background:#203348; color:#e6edf7; border-color:#405670; }
  html[data-theme="dark"] .auth-main .errorlist { background:#4a242d; color:#ffd1d0; }

  /* The staff interface uses Django's admin plus MailOcean's custom styles. */
  html[data-theme="dark"] :is(#container,#main,#content,div.breadcrumbs) { background:#101a28; color:#e6edf7; }
  html[data-theme="dark"] #container>.sidebar, html[data-theme="dark"] #header { background:#172638; color:#e6edf7; border-color:#314256; }
  html[data-theme="dark"] :is(#container>.sidebar a,#header a,#header button,div.breadcrumbs a) { color:#b9d7ff; }
  html[data-theme="dark"] #container>.sidebar a.active { background:#203d60; color:#b9d7ff; }
  html[data-theme="dark"] :is(#content h1,#content h2,.form-row .readonly,#content-related h3) { color:#e6edf7; }
  html[data-theme="dark"] :is(.module,#changelist-form,#toolbar,#changelist-filter,#content-related,.submit-row,.mo-query-panel,.login #content) { background:#192a3d; border-color:#314256; color:#e6edf7; }
  html[data-theme="dark"] :is(.module h2,.module caption,.inline-group h2,#changelist-filter h2,#content-related .module h2) { background:#22364b; color:#e6edf7; }
  html[data-theme="dark"] :is(#changelist .actions,#changelist .paginator,#changelist tbody th,#changelist tbody td,.row1,.row2) { background:#192a3d; border-color:#314256; color:#e6edf7; }
  html[data-theme="dark"] :is(#changelist table thead th,#changelist table thead th a) { background:#22364b; color:#bfd0e3; border-color:#314256; }
  html[data-theme="dark"] :is(#changelist tbody tr:hover td,#changelist tbody tr:hover th,#changelist tbody tr.selected td,#changelist tbody tr.selected th) { background:#29415a; }
  html[data-theme="dark"] :is(#changelist .actions button,#content .submit-row a.mo-cancel) { background:#203348; border-color:#405670; color:#d4e6fa; }
  html[data-theme="dark"] :is(.aligned label,#changelist-filter .mo-filter,.help,.helptext) { color:#b7c9dd; }
  html[data-theme="dark"] :is(.form-row input:not([type=checkbox]):not([type=radio]),.form-row select,.form-row textarea,#toolbar input[type=text],#changelist-filter .mo-filter select) { background:#102033; border-color:#405670; color:#edf4fd; }
  html[data-theme="dark"] :is(.form-row,.module table td,.module table th) { border-color:#314256; }
  html[data-theme="dark"] :is(.messagelist li,.mo-role-guide) { background:#1c3952; border-color:#355d7d; color:#d2e8fc; }
  html[data-theme="dark"] :is(.mo-role-guide h2,.mo-role-guide dt) { color:#e6edf7; }
  html[data-theme="dark"] .mo-role-guide code { background:#263f57; color:#e6edf7; }
  html[data-theme="dark"] .selector h2 { background:#22364b !important; color:#e6edf7 !important; }
}