/* MailOcean dark appearance. Scoped to screen so invoices still print on white. */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --dark-canvas: #101114;
    --dark-chrome: #15171c;
    --dark-surface: #1b1e24;
    --dark-raised: #22262e;
    --dark-hover: #2a303a;
    --dark-input: #15171c;
    --dark-border: #343a45;
    --dark-control-border: #626c7d;
    --dark-text: #e9ecf2;
    --dark-muted: #aeb7c6;
    --dark-link: #91b9ff;
    --dark-link-hover: #c2d8ff;
    --dark-selected: #243754;
    --dark-primary: #245fce;
    --dark-primary-hover: #2b67d7;
    --dark-focus: #9ac1ff;
    --dark-success-bg: #162d24;
    --dark-success-border: #35664e;
    --dark-success-text: #a3e4bb;
    --dark-warning-bg: #33291a;
    --dark-warning-border: #79603b;
    --dark-warning-text: #f5d595;
    --dark-danger-bg: #352228;
    --dark-danger-border: #85505b;
    --dark-danger-text: #ffc2ca;

    --ink: var(--dark-text);
    --muted: var(--dark-muted);
    --blue: var(--dark-link);
    --cyan: #5bd4df;
    --line: var(--dark-border);
    --paper: var(--dark-canvas);
    --navy: #12283e;
    --primary: var(--dark-link);
    --secondary: var(--dark-link);
    --accent: #fff;
    --primary-fg: #fff;
    --body-fg: var(--dark-text);
    --body-bg: var(--dark-canvas);
    --body-quiet-color: var(--dark-muted);
    --body-loud-color: var(--dark-text);
    --header-color: var(--dark-text);
    --header-branding-color: var(--dark-text);
    --header-bg: var(--dark-chrome);
    --header-link-color: var(--dark-link);
    --breadcrumbs-fg: var(--dark-muted);
    --breadcrumbs-link-fg: var(--dark-link);
    --breadcrumbs-bg: var(--dark-canvas);
    --link-fg: var(--dark-link);
    --link-hover-color: var(--dark-link-hover);
    --link-selected-fg: var(--dark-link-hover);
    --hairline-color: var(--dark-border);
    --border-color: var(--dark-control-border);
    --darkened-bg: var(--dark-raised);
    --selected-bg: var(--dark-selected);
    --selected-row: var(--dark-selected);
    --error-fg: var(--dark-danger-text);
    --button-bg: var(--dark-primary);
    --button-hover-bg: var(--dark-primary-hover);
    --default-button-bg: var(--dark-primary);
    --default-button-hover-bg: var(--dark-primary-hover);
    --object-tools-bg: var(--dark-primary);
    --object-tools-hover-bg: var(--dark-primary-hover);
  }
  html[data-theme="dark"] body { background:var(--dark-canvas); color:var(--dark-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) {
    --ink:var(--dark-text); --muted:var(--dark-muted); --blue:var(--dark-link); --line:var(--dark-border);
    background:var(--dark-canvas); color:var(--dark-text);
  }
  html[data-theme="dark"] :is(.sidebar,.app-header) { background:var(--dark-chrome); border-color:var(--dark-border); }
  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:var(--dark-muted); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .sidebar nav a:hover { background:var(--dark-raised); color:var(--dark-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .sidebar nav a.active { background:var(--dark-selected); color:var(--dark-link); box-shadow:inset 3px 0 var(--dark-focus); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.panel,.stats article,.ops-metrics,.domain-overview>div,.billing-grid article) { background:var(--dark-surface); color:var(--dark-text); border-color:var(--dark-border); }
  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:var(--dark-raised); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) th { background:var(--dark-raised); color:var(--dark-muted); border-color:var(--dark-border); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(td,th,.panel-heading,.mailbox-summary-grid>div,.domain-overview-grid>div) { border-color:var(--dark-border); }
  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:var(--dark-raised); border-color:var(--dark-control-border); color:var(--dark-text); }
  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:var(--dark-hover); border-color:var(--dark-link); color:#fff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .button:not(.outline) { background:var(--dark-primary); color:#fff; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .button:not(.outline):hover { background:var(--dark-primary-hover); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { background:var(--dark-input); border-color:var(--dark-control-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(input,textarea)::placeholder { color:var(--dark-muted); opacity:1; }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.domain-status-grid>div,.mailbox-capacity,.manual-payment,.reply,.qpay-panel) { background:var(--dark-raised); border-color:var(--dark-control-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.notice,.notice.subtle) { background:var(--dark-selected); border-color:var(--dark-border); color:var(--dark-link-hover); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.notice.success,.dns-status-ok) { background:var(--dark-success-bg); border-color:var(--dark-success-border); color:var(--dark-success-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.notice.warning,.dns-status-pending,.ops-status.amber) { background:var(--dark-warning-bg); border-color:var(--dark-warning-border); color:var(--dark-warning-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.notice.error,.errorlist,.field-format-error) { background:var(--dark-danger-bg); border-color:var(--dark-danger-border); color:var(--dark-danger-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.badge,.ops-status,.ops-count,.empty-icon) { background:var(--dark-selected); border-color:var(--dark-border); color:var(--dark-link-hover); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .badge.dns-status-ok { background:var(--dark-success-bg); border-color:var(--dark-success-border); color:var(--dark-success-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) .badge.dns-status-pending { background:var(--dark-warning-bg); border-color:var(--dark-warning-border); color:var(--dark-warning-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.copy-value,.plan-tabs a) { background:var(--dark-selected); border-color:var(--dark-control-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.copy-value:hover,.plan-tabs a.selected) { background:var(--dark-primary); 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:not(.button),.qpay-wait) { color:var(--dark-link); }
  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(.report-filters label,.overview-section-title) { color:var(--dark-muted); }
  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:var(--dark-text); }
  html[data-theme="dark"] :is(.site-header,footer) .logo { content:url('brand/mailocean-logo-dark.svg'); }
  html[data-theme="dark"] .site-header nav { color:var(--dark-muted); }
  html[data-theme="dark"] :is(.site-header,.hero,.pricing-section,.auth-main) .button:not(.outline):not(.theme-toggle) { background:var(--dark-primary); color:#fff; }
  html[data-theme="dark"] :is(.site-header,.hero,.pricing-section,.auth-main) .button.outline { background:var(--dark-raised); border-color:var(--dark-control-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(.site-header,.hero,.pricing-section,.auth-main) .button:hover { border-color:var(--dark-link); }
  html[data-theme="dark"] .pricing-section { background:var(--dark-chrome); }
  html[data-theme="dark"] :is(.price-card,.billing-grid article) { background:var(--dark-raised); border-color:var(--dark-control-border); }
  html[data-theme="dark"] .price-card.featured { border-color:var(--dark-link); }
  html[data-theme="dark"] :is(.feature-icon,.badge) { background:var(--dark-selected); border-color:var(--dark-border); color:var(--dark-link-hover); }
  html[data-theme="dark"] .segmented { background:var(--dark-canvas); }
  html[data-theme="dark"] .segmented button { color:var(--dark-muted); }
  html[data-theme="dark"] .segmented button.selected { background:var(--dark-hover); 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:var(--dark-input); border-color:var(--dark-control-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(.calculator input,.auth-main input)::placeholder { color:var(--dark-muted); opacity:1; }
  html[data-theme="dark"] .address-chip { background:var(--dark-raised); color:var(--dark-text); border-color:var(--dark-control-border); }
  html[data-theme="dark"] .auth-main .errorlist { background:var(--dark-danger-bg); color:var(--dark-danger-text); }

  html[data-theme="dark"] :is(.operator-shell,.client-shell) :is(a,button,input,select,textarea,summary):focus-visible {
    outline: 2px solid var(--dark-focus);
    outline-offset: 2px;
  }

  /* The staff interface uses Django's admin plus MailOcean's custom styles. */
  html[data-theme="dark"] :is(#container,#main,#content,div.breadcrumbs) { background:var(--dark-canvas); color:var(--dark-text); }
  html[data-theme="dark"] #container>.sidebar, html[data-theme="dark"] #header { background:var(--dark-chrome); color:var(--dark-text); border-color:var(--dark-border); }
  html[data-theme="dark"] :is(#header a,#header button,div.breadcrumbs a) { color:var(--dark-link); }
  html[data-theme="dark"] :is(#content h1,#content h2,.form-row .readonly,#content-related h3) { color:var(--dark-text); }
  html[data-theme="dark"] :is(.module,#changelist-form,#toolbar,#changelist-filter,#content-related,.submit-row,.mo-query-panel,.login #content) { background:var(--dark-surface); border-color:var(--dark-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(.module h2,.module caption,.inline-group h2,#changelist-filter h2,#content-related .module h2) { background:var(--dark-raised); color:var(--dark-text); }
  html[data-theme="dark"] :is(#changelist .actions,#changelist .paginator,#changelist tbody th,#changelist tbody td,.row1,.row2) { background:var(--dark-surface); border-color:var(--dark-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(#changelist table thead th,#changelist table thead th a) { background:var(--dark-raised); color:var(--dark-muted); border-color:var(--dark-border); }
  html[data-theme="dark"] :is(#changelist tbody tr:hover td,#changelist tbody tr:hover th) { background:var(--dark-hover); }
  html[data-theme="dark"] #changelist tbody tr.selected :is(td,th) { background:var(--dark-selected); }
  html[data-theme="dark"] :is(#changelist .actions button:not(.mo-bulk-toolbar button),#content .submit-row a.mo-cancel) { background:var(--dark-raised); border-color:var(--dark-control-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(.aligned label,#changelist-filter .mo-filter,.help,.helptext) { color:var(--dark-muted); }
  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:var(--dark-input); border-color:var(--dark-control-border); color:var(--dark-text); }
  html[data-theme="dark"] :is(.form-row,.module table td,.module table th) { border-color:var(--dark-border); }
  html[data-theme="dark"] :is(.messagelist li,.mo-role-guide) { background:var(--dark-selected); border-color:var(--dark-border); color:var(--dark-link-hover); }
  html[data-theme="dark"] :is(.mo-role-guide h2,.mo-role-guide dt) { color:var(--dark-text); }
  html[data-theme="dark"] .mo-role-guide code { background:var(--dark-raised); color:var(--dark-text); }
  html[data-theme="dark"] .selector h2 { background:var(--dark-raised) !important; color:var(--dark-text) !important; }
}