/* ==========================================================================
   Dark mode override layer
   --------------------------------------------------------------------------
   Loaded LAST, after pages.css and style.css. Every themed rule is scoped
   under html.epaper-dark, so with the class absent this file contributes
   nothing and light mode renders exactly as it always has.

   The class is stamped server-side by theme.php; the toggle that sets the
   cookie is theme-toggle.php, rendered inside the page bar.

   The selectors below mirror the rules in pages.css / style.css that paint
   this app's markup a light colour. Mirroring with the html.epaper-dark
   prefix always raises specificity above the original, so source order and
   the 310KB template are both irrelevant.
   ========================================================================== */

html.epaper-dark {
	--dm-bg:          #14161a;  /* page background          */
	--dm-surface:     #1e2126;  /* bars, cards, panels      */
	--dm-surface-alt: #23272d;  /* inputs, hovers, stripes  */
	--dm-raised:      #2b3037;  /* hover on a raised object */
	--dm-border:      #2c3138;
	--dm-text:        #e8eaed;  /* primary copy             */
	--dm-text-dim:    #9aa0a6;  /* secondary / hint copy    */
	--dm-brand:       #da2128;  /* brand red, filled fills  */
	--dm-brand-text:  #f2555b;  /* lightened for contrast   */

	color-scheme: dark;
}

/* --------------------------------------------------------------- base --- */

html.epaper-dark,
html.epaper-dark body,
html.epaper-dark body.homepage-body,
html.epaper-dark body.login-body,
html.epaper-dark body.plan-body,
html.epaper-dark body.mobile {
	background-color: var(--dm-bg);
	color: var(--dm-text);
}

html.epaper-dark .page-container,
html.epaper-dark body.dashboard .page-container,
html.epaper-dark .page-content-wrapper,
html.epaper-dark .content,
html.epaper-dark .jumbotron {
	background: var(--dm-bg);
	color: var(--dm-text);
}

/* ------------------------------------------------- the bars (top/side) --- */

html.epaper-dark .page-topbar,
html.epaper-dark .page-topbar .topbar-header,
html.epaper-dark .topbar-header,
html.epaper-dark .topbar-menu,
html.epaper-dark .topbar_app_link {
	background: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .page-topbar {
	border-bottom: 1px solid var(--dm-border);
}

html.epaper-dark .page-topbar a,
html.epaper-dark .page-topbar button,
html.epaper-dark .page-topbar a:visited,
html.epaper-dark .page-topbar button:visited,
html.epaper-dark .page-topbar a:focus,
html.epaper-dark .page-topbar button:focus {
	color: var(--dm-text-dim);
}

html.epaper-dark .page-topbar a:hover,
html.epaper-dark .page-topbar button:hover,
html.epaper-dark .page-topbar a:active,
html.epaper-dark .page-topbar button:active {
	color: var(--dm-text);
}

html.epaper-dark .page-sidebar,
html.epaper-dark .page-sidebar .sidebar-header,
html.epaper-dark .sidebar-header,
html.epaper-dark .sidebar-menu,
html.epaper-dark .main_date_picker {
	background: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .page-sidebar a,
html.epaper-dark .page-sidebar button,
html.epaper-dark .page-sidebar a:visited,
html.epaper-dark .page-sidebar button:visited,
html.epaper-dark .page-sidebar a:focus,
html.epaper-dark .page-sidebar button:focus,
html.epaper-dark .icon-thumbnail,
html.epaper-dark .page-sidebar .sidebar-menu .muted {
	color: var(--dm-text-dim);
}

html.epaper-dark body.mobile .page-sidebar .sidebar-menu .menu-items li:hover > a,
html.epaper-dark .menu-items > li > a:hover {
	color: var(--dm-text);
}

/* The content-area header used by login.php / plan.php. */
html.epaper-dark .header,
html.epaper-dark body.box-layout .header > .container,
html.epaper-dark .header-inner,
html.epaper-dark .navbar,
html.epaper-dark .navbar-inner,
html.epaper-dark .navbar-default {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .header a,
html.epaper-dark .header a.btn,
html.epaper-dark .header .search-link {
	color: var(--dm-text-dim);
}

/* ---------------------------------------------------- surfaces / cards --- */

html.epaper-dark .card,
html.epaper-dark .panel,
html.epaper-dark .widget,
html.epaper-dark .grid-box,
html.epaper-dark .tab-content,
html.epaper-dark .nav-tabs-linetriangle ~ .tab-content,
html.epaper-dark .nav-tabs-fillup ~ .tab-content,
html.epaper-dark .list-view-group-container,
html.epaper-dark .view-port,
html.epaper-dark .well,
html.epaper-dark .quickview-wrapper {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .panel-transparent,
html.epaper-dark .bg-transparent {
	background: transparent;
	background-color: transparent;
}

/* .bg-white is used as a surface utility throughout this markup. */
html.epaper-dark .bg-white {
	background-color: var(--dm-surface) !important;
	color: var(--dm-text);
}

html.epaper-dark .panel.hover-fill:hover {
	background: var(--dm-raised);
}

/* ------------------------------------------------------ typography ------ */

/* Headings and copy inherit from body; blanket div/span rules are avoided
   here because they would outrank utility classes like .text-danger. */
html.epaper-dark h1, html.epaper-dark h2, html.epaper-dark h3,
html.epaper-dark h4, html.epaper-dark h5, html.epaper-dark h6 {
	color: var(--dm-text);
}

html.epaper-dark .text-master,
html.epaper-dark .text-black,
html.epaper-dark .news-col {
	color: var(--dm-text);
}

html.epaper-dark .hint-text,
html.epaper-dark .text-muted,
html.epaper-dark small,
html.epaper-dark .modal .modal-header p {
	color: var(--dm-text-dim);
}

html.epaper-dark a,
html.epaper-dark .link,
html.epaper-dark .btn-link {
	color: var(--dm-brand-text);
}

html.epaper-dark a:hover,
html.epaper-dark .link:hover,
html.epaper-dark .btn-link:hover {
	color: #ff7a80;
}

/* ------------------------------------------------------------- forms --- */

html.epaper-dark input[type="text"],
html.epaper-dark input[type="email"],
html.epaper-dark input[type="password"],
html.epaper-dark input[type="number"],
html.epaper-dark input[type="search"],
html.epaper-dark input[type="tel"],
html.epaper-dark input[type="date"],
html.epaper-dark select,
html.epaper-dark textarea,
html.epaper-dark .form-control {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .form-control:focus {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-brand-text);
	color: var(--dm-text);
}

html.epaper-dark .form-control[disabled],
html.epaper-dark .form-control[readonly],
html.epaper-dark fieldset[disabled] .form-control,
html.epaper-dark .form-group-default.disabled,
html.epaper-dark .form-group-default.disabled.focused {
	background: var(--dm-bg);
	color: var(--dm-text-dim);
}

html.epaper-dark .form-group-default,
html.epaper-dark .form-group-default.focused {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
}

html.epaper-dark .form-group-default label,
html.epaper-dark .form-group-default .form-control,
html.epaper-dark .form-group-default .form-control.error,
html.epaper-dark .login-body .form-group-default .form-control,
html.epaper-dark #subscription_cont1 .form-group-default .form-control {
	background-color: transparent;
	color: var(--dm-text);
}

html.epaper-dark .input-group-addon,
html.epaper-dark .has-success .input-group-addon,
html.epaper-dark .has-warning .input-group-addon,
html.epaper-dark .has-error .input-group-addon {
	background: var(--dm-surface-alt);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .radio label:before,
html.epaper-dark .checkbox label:before {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
}

html.epaper-dark .checkbox input[type="checkbox"]:focus + label {
	color: var(--dm-text);
}

html.epaper-dark .checkbox input[type="checkbox"]:focus + label:before,
html.epaper-dark .checkbox input[type=checkbox][disabled] + label:before,
html.epaper-dark .checkbox input[type=radio][disabled] + label:after {
	background-color: var(--dm-raised);
}

html.epaper-dark ::-webkit-input-placeholder { color: var(--dm-text-dim); }
html.epaper-dark ::-moz-placeholder          { color: var(--dm-text-dim); opacity: 1; }
html.epaper-dark :-ms-input-placeholder      { color: var(--dm-text-dim); }
html.epaper-dark ::placeholder               { color: var(--dm-text-dim); }

/* ----------------------------------------------------------- buttons --- */

html.epaper-dark .btn,
html.epaper-dark .btn-default,
html.epaper-dark .btn-default:focus {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .btn:hover,
html.epaper-dark .btn-default.hover,
html.epaper-dark .btn-default:hover,
html.epaper-dark .btn-default.active,
html.epaper-dark .btn-default:active,
html.epaper-dark .btn-default.active:hover,
html.epaper-dark .btn.active {
	background-color: var(--dm-raised);
	background: var(--dm-raised);
	color: var(--dm-text);
}

/* Brand-filled buttons keep the brand red; white-on-red already passes AA. */
html.epaper-dark .btn-primary,
html.epaper-dark .btn-danger {
	background-color: var(--dm-brand);
	border-color: var(--dm-brand);
	color: #fff;
}

/* .bg-success is NOT a fill in this app: pages.css defines it as
   `background-color: transparent` and the sidebar uses it as a marker class on
   the nav icons. Giving it a colour paints a box behind every icon. */
html.epaper-dark .bg-success {
	background-color: transparent;
}

html.epaper-dark .login-btn {
	background: var(--dm-brand);
	color: #fff;
}

html.epaper-dark .upload_profile_btn {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

/* The profile panel's action rows are bare <input type="button">. */
html.epaper-dark .login-user-logout input[type="button"],
html.epaper-dark .login-user-change-password input[type="button"],
html.epaper-dark .login-user-edit-profile input[type="button"] {
	background-color: var(--dm-surface-alt);
	border: 1px solid var(--dm-border);
	color: var(--dm-text);
}

/* ------------------------------------------------------ tabs / pills --- */

html.epaper-dark .nav-tabs {
	border-bottom-color: var(--dm-border);
}

html.epaper-dark .nav-tabs > li > a {
	color: var(--dm-text-dim);
	border-color: transparent;
}

html.epaper-dark .nav-tabs > li > a:hover,
html.epaper-dark .nav-tabs > li > a:focus,
html.epaper-dark .nav-tabs > li.active > a,
html.epaper-dark .nav-tabs > li.active > a:hover,
html.epaper-dark .nav-tabs > li.active > a:focus,
html.epaper-dark .nav-pills > li.active > a,
html.epaper-dark .nav-pills > li.active > a:hover,
html.epaper-dark .nav-pills > li.active > a:focus {
	background-color: var(--dm-raised);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

/* ---------------------------------------------------------- dropdowns --- */

html.epaper-dark .dropdown-menu,
html.epaper-dark .datepicker.dropdown-menu,
html.epaper-dark .bootstrap-timepicker-widget.dropdown-menu {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .dropdown-menu > li > a,
html.epaper-dark .datepicker.dropdown-menu {
	color: var(--dm-text);
}

html.epaper-dark .dropdown-menu > li > a:hover,
html.epaper-dark .dropdown-menu > li > a:focus,
html.epaper-dark .dropdown-menu > li.active > a,
html.epaper-dark .dropdown-menu > li.active > a:hover {
	background-color: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .dropdown-menu > li.disabled > a {
	color: var(--dm-text-dim);
}

html.epaper-dark .dropdown-menu .divider,
html.epaper-dark .dropdown-default .dropdown-menu:after {
	background-color: var(--dm-border);
}

/* -------------------------------------------------------- nice-select --- */

/* jquery-nice-select is loaded from cdnjs, so its stylesheet is not part of
   the local CSS scan. It paints .list white and sets no colour on .option, so
   the options were inheriting the light body colour onto a white panel. */

html.epaper-dark .nice-select {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .nice-select:hover,
html.epaper-dark .nice-select.open,
html.epaper-dark .nice-select:active,
html.epaper-dark .nice-select:focus {
	border-color: var(--dm-brand-text);
}

/* The chevron is drawn with borders, not a glyph. */
html.epaper-dark .nice-select:after {
	border-bottom-color: var(--dm-text-dim);
	border-right-color: var(--dm-text-dim);
}

html.epaper-dark .nice-select .list {
	background-color: var(--dm-surface);
	box-shadow: 0 0 0 1px var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .nice-select .option {
	color: var(--dm-text);
}

html.epaper-dark .nice-select .option.focus,
html.epaper-dark .nice-select .option.selected.focus,
html.epaper-dark .nice-select .option:hover {
	background-color: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .nice-select .option.disabled,
html.epaper-dark .nice-select.disabled {
	color: var(--dm-text-dim);
}

/* Native <option> elements still render with system colours in some browsers. */
html.epaper-dark select option {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

/* ------------------------------------------------------ notifications --- */

html.epaper-dark .notification-panel,
html.epaper-dark .notification-panel .notification-body .notification-item,
html.epaper-dark .notification-panel .notification-body .notification-item .heading,
html.epaper-dark .notification-panel .notification-body .notification-item .option {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .notification-panel .notification-body .notification-item:hover,
html.epaper-dark .notification-panel .notification-body .notification-item.unread {
	background-color: var(--dm-raised);
}

html.epaper-dark .notification-panel .notification-footer,
html.epaper-dark .notification-panel .notification-footer a {
	background-color: var(--dm-surface);
	color: var(--dm-text-dim);
}

/* ------------------------------------------------------------ lists --- */

html.epaper-dark .list-view-group-header,
html.epaper-dark .list-view-fake-header,
html.epaper-dark .email-wrapper .email-list .list-view-fake-header {
	background: var(--dm-surface-alt);
	color: var(--dm-text-dim);
	border-color: var(--dm-border);
}

html.epaper-dark .list-view li:hover,
html.epaper-dark .list-view li.active {
	background-color: var(--dm-raised);
}

html.epaper-dark .list-group-item {
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

/* ------------------------------------------------------------ tables --- */

html.epaper-dark .table,
html.epaper-dark .table > thead > tr > th,
html.epaper-dark .table > tbody > tr > td {
	background-color: transparent;
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--dm-surface-alt);
}

html.epaper-dark .table-hover > tbody > tr:hover,
html.epaper-dark .table tbody tr.selected td,
html.epaper-dark .table.table-hover tbody tr.selected:hover td {
	background: var(--dm-raised);
	background-color: var(--dm-raised);
}

html.epaper-dark .dataTables_wrapper .dataTables_paginate ul > li.active a {
	color: var(--dm-text);
}

/* ------------------------------------------------ modals / overlays ----- */

html.epaper-dark .modal-content,
html.epaper-dark .modal-header,
html.epaper-dark .modal-body,
html.epaper-dark .modal-footer,
html.epaper-dark .popover,
html.epaper-dark .redirect_newsstand .modal-content {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .redirect_newsstand .modal-footer .cancel {
	background: var(--dm-surface-alt);
	color: var(--dm-brand-text);
	border-color: var(--dm-border);
}

html.epaper-dark .modal-backdrop {
	background-color: #000;
}

/* --------------------------------------------- profile slide-out panel --- */

html.epaper-dark .custom-home-profile-content {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

html.epaper-dark .custom-home-profile-layer {
	background-color: rgba(0, 0, 0, .6);
}

html.epaper-dark .custom-home-profile .tab-content.bg-white {
	background-color: var(--dm-surface) !important;
}

html.epaper-dark .login-user-name { color: var(--dm-text); }
html.epaper-dark .login-user-email { color: var(--dm-text-dim); }

/* --------------------------------------------------- subscribe / chat --- */

html.epaper-dark .section-subcribe h3 {
	background-color: var(--dm-surface-alt);
	color: var(--dm-brand-text);
}

html.epaper-dark .section-subcribe .nav-tabs-linetriangle {
	background-color: var(--dm-surface-alt);
}

html.epaper-dark .chat-view .chat-bubble.from-me,
html.epaper-dark .chat-view .chat-bubble.from-them {
	background: var(--dm-surface-alt);
	color: var(--dm-text);
}

html.epaper-dark .chat-view .chat-input:focus,
html.epaper-dark .chat-view .chat-input:active {
	background-color: var(--dm-surface-alt);
}

/* --------------------------------------------------------- quickview --- */

html.epaper-dark .quickview-wrapper .quickview-toggle,
html.epaper-dark .quickview-wrapper .nav-tabs > li > a,
html.epaper-dark .quickview-wrapper .nav-tabs > li > a:hover {
	color: var(--dm-text-dim);
}

/* ------------------------------------------------------- misc chrome --- */

html.epaper-dark hr,
html.epaper-dark .divider,
html.epaper-dark .b-grey,
html.epaper-dark .b-l,
html.epaper-dark .b-r {
	border-color: var(--dm-border);
}

html.epaper-dark .scrollbar-inner > .scroll-element .scroll-bar {
	background-color: #3a4048;
}

html.epaper-dark input[type="checkbox"],
html.epaper-dark input[type="radio"] {
	accent-color: var(--dm-brand);
}

/* ------------------------------------------------- bootstrap leftovers --- */

/* Bootstrap 3 defaults that pages.css never restyled, and which therefore
   still paint dark-on-dark or light-on-dark once the background flips. */

/* The modal dismiss glyph is #000 on what is now a dark surface. */
html.epaper-dark .close,
html.epaper-dark .close:hover,
html.epaper-dark .close:focus {
	color: var(--dm-text);
	text-shadow: none;
	opacity: .7;
}

html.epaper-dark .nav > li > a:hover,
html.epaper-dark .nav > li > a:focus {
	background-color: var(--dm-raised);
}

html.epaper-dark .nav .nav-divider {
	background-color: var(--dm-border);
}

/* #8a6d3b sits at roughly 2.3:1 on the dark background. */
html.epaper-dark .text-warning {
	color: #e0b355;
}

html.epaper-dark a.text-warning:hover {
	color: #f0c877;
}

/* Bootstrap's muted small text is #777, about 3.5:1 here. */
html.epaper-dark .h1 .small, html.epaper-dark .h1 small,
html.epaper-dark .h2 .small, html.epaper-dark .h2 small,
html.epaper-dark .h3 .small, html.epaper-dark .h3 small,
html.epaper-dark h1 .small, html.epaper-dark h1 small,
html.epaper-dark h2 .small, html.epaper-dark h2 small,
html.epaper-dark h3 .small, html.epaper-dark h3 small,
html.epaper-dark blockquote .small,
html.epaper-dark blockquote small,
html.epaper-dark blockquote footer {
	color: var(--dm-text-dim);
}

html.epaper-dark .mark,
html.epaper-dark mark {
	background-color: #4a4326;
	color: var(--dm-text);
}

/* .text-danger is left alone deliberately: pages.css sets #f55753, which
   already reads at about 5.5:1 on this background. */

/* ============================================================== imagery ===
   Several nav glyphs are PNGs with the light theme baked in, so no colour
   property can fix them:
     home.png / search.png / Profile.png  - 0% transparent, solid white ground
     cart.png / apple.png / play.png      - transparent, but a pure black glyph
     calendar.png                         - transparent, pure black glyph
   Recoloured copies live alongside the originals in a dark/ subfolder, with
   the white ground converted to real transparency and the glyph set to
   --dm-text. Light mode keeps using the untouched originals.
   ========================================================================== */

html.epaper-dark .custom-home-icon:before,
html.epaper-dark .custom-home-icon.bg-success:before,
html.epaper-dark .custom-home-icon.bg-success.unhighlighted:before {
	content: url(../img/nav/dark/home.png);
}

html.epaper-dark .custom-search-icon:before,
html.epaper-dark .custom-search-icon.bg-success:before,
html.epaper-dark .custom-search-icon.bg-success.unhighlighted:before {
	content: url(../img/nav/dark/search.png);
}

html.epaper-dark .custom-profile-icon:before,
html.epaper-dark .custom-profile-icon.show-profile-tool:before {
	content: url(../img/nav/dark/Profile.png);
}

html.epaper-dark .custom-plan-icon:before,
html.epaper-dark .custom-plan-icon.bg-success:before,
html.epaper-dark .custom-plan-icon.bg-success.unhighlighted:before {
	content: url(../img/nav/dark/cart.png);
}

html.epaper-dark .app_store:before   { content: url(../img/nav/dark/apple.png); }
html.epaper-dark .google_play:before { content: url(../img/nav/dark/play.png); }

/* The masthead is brand red plus near-black lettering; only the lettering is
   lightened, so the red is untouched. `content` on an <img> is supported in
   current browsers and simply falls back to the original where it is not. */
html.epaper-dark .page-topbar .brand,
html.epaper-dark .topbar-header img.brand {
	content: url(../img/new_icons/dark/epaper_logo.png);
}

/* ----------------------------------------------------- date selection --- */

/* pages.css:767 sets `.main_date_picker .custom-date { color: black }`, which
   outranks a rule on the container alone. */
html.epaper-dark .main_date_picker .custom-date,
html.epaper-dark .main_date_picker .custom-pick-date {
	color: var(--dm-text);
}

html.epaper-dark .main_date_picker {
	background: var(--dm-surface);
	color: var(--dm-text);
	box-shadow: 0 6px 20px 1px rgba(0, 0, 0, .55);
}

/* The calendar glyph in front of the date is a black PNG. */
html.epaper-dark .main_date_picker::before {
	background-image: url(../img/new_icons/dark/calendar.png);
}

/* These sit on the page background, where white already reads correctly. */
html.epaper-dark .date_picker_container .date_picker_text,
html.epaper-dark .select_cat .text {
	color: var(--dm-text);
}

html.epaper-dark .select_cat .select_pub {
	box-shadow: 0 6px 20px 1px rgba(0, 0, 0, .55);
}

/* ======================================================= specificity ======
   pages.css styles several menu labels through deep descendant selectors such
   as `.page-topbar .topbar-menu .menu-items > li:first-child a span`, at
   specificity (0,4,3). A rule on `.icon-thumbnail` alone cannot reach them, so
   these are mirrored verbatim with the theme prefix.
   `li:first-child` is the Home item; `.profile_pan_open` is added at runtime
   when the profile panel opens.
   ========================================================================== */

html.epaper-dark .page-topbar .topbar-menu .menu-items > li:first-child a span,
html.epaper-dark .page-topbar .topbar-menu .menu-items > li.profile_pan_open a span,
html.epaper-dark .page-sidebar .sidebar-menu .menu-items li:first-child a span,
html.epaper-dark .page-sidebar .sidebar-menu .menu-items > li.profile_pan_open a span {
	color: var(--dm-text);
}

/* Sub-menu copy and its icons are near-black in the template. */
html.epaper-dark .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu {
	color: var(--dm-text);
	background: var(--dm-surface);
}

html.epaper-dark .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu > li .icon-thumbnail {
	color: var(--dm-text-dim);
}

html.epaper-dark .login-btn a {
	color: #fff;
}

/* Button states that pages.css sets on a light assumption. */
html.epaper-dark .btn-default:active:focus,
html.epaper-dark .btn-default:active:hover {
	background-color: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .btn-primary:hover,
html.epaper-dark .btn-primary:focus,
html.epaper-dark .btn-primary:active,
html.epaper-dark .btn-primary:active:focus,
html.epaper-dark .btn-primary:active:hover,
html.epaper-dark .btn-primary[disabled],
html.epaper-dark .btn-primary[disabled]:hover,
html.epaper-dark .btn-primary[disabled]:focus,
html.epaper-dark .btn-primary[disabled]:active,
html.epaper-dark fieldset[disabled] .btn-primary,
html.epaper-dark fieldset[disabled] .btn-primary:hover,
html.epaper-dark fieldset[disabled] .btn-primary:focus,
html.epaper-dark fieldset[disabled] .btn-primary:active {
	color: #fff;
}

html.epaper-dark .dropdown-menu > li.active > a:focus {
	background-color: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .notification-panel .notification-body .notification-item .heading {
	background-color: var(--dm-surface);
}

html.epaper-dark code {
	background-color: var(--dm-surface-alt);
	color: #ff9d9d;
}

html.epaper-dark address a {
	color: var(--dm-brand-text);
}

/* Quickview's sticky-note palette is a set of near-white pastels. */
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note-item,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note-item .note-content {
	background: var(--dm-surface-alt);
	color: var(--dm-text);
}

/* Quickview notes panel: the template's sticky-note palette is a set of
   near-white pastels, matched here at the same depth. */
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar > li > a:hover {
	background: var(--dm-surface-alt);
	color: var(--dm-text);
}

html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li:hover,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar > li > a.active {
	background: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul > li a:hover,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul > li a.selected {
	color: var(--dm-text);
}

html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content .quick-note-editor::selection {
	background: #4a4326;
}

html.epaper-dark .notification-panel .notification-body .notification-item .heading.open {
	background-color: var(--dm-surface);
}

html.epaper-dark .notification-panel .notification-body .notification-item .heading:after {
	background-color: var(--dm-border);
}

/* Firefox needs its own prefixed selection rule; it cannot be grouped. */
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content .quick-note-editor::-moz-selection {
	background: #4a4326;
}

/* ======================================================= inline styles ====
   index.php:633 carries the gradient on .custom-home-left as an INLINE style
   attribute (and spans two lines, which is how it evaded the first audit):

     style="background: rgb(153,164,168);
            background: linear-gradient(0deg, rgba(153,164,168,1) 23%,
                                              rgba(255,255,255,1) 70%);"

   Inline declarations outrank every selector regardless of specificity, so
   !important is the only way to reach them without editing the markup. It stays
   scoped to the theme, so light mode keeps its original grey-to-white gradient
   untouched. (The other !important uses in this file are on the .bg-white
   utility, which is itself declared !important upstream.)
   The dark gradient mirrors the original's shape: a lighter surface at the
   bottom easing up into the page background.
   ========================================================================== */

html.epaper-dark .custom-home-left {
	background: var(--dm-surface-alt) !important;
	background: linear-gradient(0deg,
		var(--dm-surface-alt) 23%,
		var(--dm-bg) 70%) !important;
}

/* ==========================================================================
   Page-level overrides
   These pages carry their own <style> blocks with hardcoded light colours
   that would otherwise punch white panels and black text through the theme.
   ========================================================================== */

/* --- search.php ---------------------------------------------------------- */

html.epaper-dark #loading {
	background-color: var(--dm-bg);
}

html.epaper-dark #mobile_view_top_bar_container {
	background-color: var(--dm-surface);
}

html.epaper-dark #mobile_view_top_bar_2 {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

/* #mobile_view_top_bar_1 is white-on-brand-red and already reads correctly. */

/* --- login.php ----------------------------------------------------------- */

/* `color: royalblue` sits at roughly 3.4:1 on the dark background. */
html.epaper-dark .first_time_login {
	color: #7fa4ff;
}

/* ==========================================================================
   Theme toggle control
   Intentionally NOT scoped to the dark class: the switch has to be visible
   and correct in light mode too, since light is the default and the toggle
   is how a user leaves it. It sits in the page bar, pushed to the right.
   ========================================================================== */

.dm-toggle-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 0 18px 0 10px;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* In the .header bars (login/plan) the bar is not a flexbox, so float it. */
.header .dm-toggle-row {
	float: right;
	margin-top: 18px;
}

.dm-toggle-row .dm-toggle-label {
	font-size: 12px;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	user-select: none;
}

.dm-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 40px;
	height: 22px;
	vertical-align: middle;
}

.dm-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 2;
}

.dm-switch .dm-slider {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: #bdc3c7;
	border-radius: 22px;
	transition: background-color .2s ease;
	pointer-events: none;
}

.dm-switch .dm-slider:before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	left: 3px;
	top: 3px;
	background-color: #fff;
	border-radius: 50%;
	transition: transform .2s ease;
}

.dm-switch input:checked + .dm-slider {
	background-color: #da2128;
}

.dm-switch input:checked + .dm-slider:before {
	transform: translateX(18px);
}

/* Keyboard focus must stay visible; the real input is transparent. */
.dm-switch input:focus-visible + .dm-slider {
	outline: 2px solid #f2555b;
	outline-offset: 2px;
}