/*
 The workspace's colours, type and shared shapes, in light and dark.

 The palette is the app's own: the navy and the burnt orange the reader and the
 phone app already use, on a warm paper ground rather than the cold slate the
 workspace had drifted into. The dark theme is the app's warm near-black, so an
 author who writes at night on the web and reads on their phone sees one
 product, not two.

 Everything that has a colour should take it from one of these variables. A
 hex written anywhere else is a colour that will be wrong in one of the two
 themes.

 The theme is set on <html> as data-theme, before the first paint, by
 js/ThemeInterop.js. MudBlazor keeps its own palette, which MainLayout sets
 from the same values.
*/

:root,
html[data-theme="light"] {
    color-scheme: light;

    --nv-bg: #F7F5F2;
    --nv-surface: #FFFFFF;
    --nv-surface-raised: #FFFFFF;
    --nv-surface-sunken: #F1EEEA;
    --nv-border: #E7E2DC;
    --nv-border-strong: #D5CEC6;

    --nv-text: #2B3438;
    --nv-heading: #1F3945;
    --nv-muted: #6B7A83;
    --nv-faint: #97A3AA;

    --nv-primary: #274555;
    --nv-primary-hover: #1C3440;
    --nv-on-primary: #FFFFFF;
    --nv-primary-soft: rgba(39, 69, 85, 0.08);

    --nv-accent: #C25719;
    --nv-accent-hover: #A84A13;
    --nv-on-accent: #FFFFFF;
    --nv-accent-soft: rgba(194, 87, 25, 0.1);

    --nv-link: #274555;

    --nv-success: #2F7A45;
    --nv-success-soft: #E8F3EB;
    --nv-warning: #9A5B0B;
    --nv-warning-soft: #FBF1E1;
    --nv-danger: #B8432F;
    --nv-danger-soft: #FAEAE6;
    --nv-info: #2D5F86;
    --nv-info-soft: #E8F0F7;

    --nv-focus: rgba(39, 69, 85, 0.28);
    --nv-overlay: rgba(20, 18, 16, 0.45);

    --nv-shadow-sm: 0 1px 2px rgba(31, 41, 46, 0.06);
    --nv-shadow-md: 0 1px 2px rgba(31, 41, 46, 0.05), 0 4px 16px rgba(31, 41, 46, 0.06);
    --nv-shadow-lg: 0 12px 40px rgba(31, 41, 46, 0.14), 0 0 0 1px rgba(31, 41, 46, 0.04);

    --nv-radius-sm: 6px;
    --nv-radius: 10px;
    --nv-radius-lg: 14px;

    --nv-font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nv-font-serif: 'Literata', Georgia, 'Times New Roman', serif;

    --nv-navbar-height: 60px;
    --nv-content-width: 960px;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --nv-bg: #0E0D0C;
    --nv-surface: #171514;
    --nv-surface-raised: #1F1C1A;
    --nv-surface-sunken: #131110;
    --nv-border: #2A2626;
    --nv-border-strong: #3A3431;

    --nv-text: #D6CDC7;
    --nv-heading: #F0DFD8;
    --nv-muted: #978D84;
    --nv-faint: #6E655E;

    /* Navy on near-black disappears, so the main action flips to the warm
       light the headings use, with dark text on it. */
    --nv-primary: #E9DCD3;
    --nv-primary-hover: #F7EEE8;
    --nv-on-primary: #161413;
    --nv-primary-soft: rgba(240, 223, 216, 0.08);

    --nv-accent: #DB6A2A;
    --nv-accent-hover: #EB7C3D;
    --nv-on-accent: #FFFFFF;
    --nv-accent-soft: rgba(219, 106, 42, 0.14);

    --nv-link: #F0DFD8;

    --nv-success: #7CC495;
    --nv-success-soft: rgba(124, 196, 149, 0.12);
    --nv-warning: #E3AE5B;
    --nv-warning-soft: rgba(227, 174, 91, 0.12);
    --nv-danger: #EE8A77;
    --nv-danger-soft: rgba(238, 138, 119, 0.12);
    --nv-info: #8DB8DB;
    --nv-info-soft: rgba(141, 184, 219, 0.12);

    --nv-focus: rgba(240, 223, 216, 0.3);
    --nv-overlay: rgba(0, 0, 0, 0.6);

    --nv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --nv-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    --nv-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/*
 BASE
*/

html,
body {
    background-color: var(--nv-bg);
}

body {
    color: var(--nv-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Theme changes fade rather than snap. Only the colours, and only while the
   switch is happening, so nothing else on the page starts animating. */
html.nv-theme-switching,
html.nv-theme-switching *,
html.nv-theme-switching *::before,
html.nv-theme-switching *::after {
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, fill 200ms ease !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--nv-heading);
}

/* The page titles and the handful of headings that name a thing are set in
   the reader's serif. Everything that is a control stays in the sans. */
h1, h2, .h1, .h2,
.nv-serif {
    font-family: var(--nv-font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--nv-link);
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--nv-link);
}

hr {
    border-top-color: var(--nv-border);
}

::selection {
    background: var(--nv-accent-soft);
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--nv-focus);
    outline-offset: 2px;
}

.text-muted {
    color: var(--nv-muted) !important;
}

.text-danger {
    color: var(--nv-danger) !important;
}

.text-success {
    color: var(--nv-success) !important;
}

.text-warning {
    color: var(--nv-warning) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--nv-border) !important;
}

.bg-white,
.bg-light {
    background-color: var(--nv-surface) !important;
}

/*
 PAGE HEADER

 A title, a line under it, and the page's main action on the right. It is what
 the big gradient banners used to do, in a fraction of the height, so the page
 starts with the author's own work rather than a slogan about it.
*/

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 2rem 0 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--nv-border);
}

.page-header__text {
    min-width: 0;
    flex: 1 1 320px;
}

.page-header__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nv-muted);
    margin-bottom: 0.35rem;
}

.page-header__eyebrow a {
    color: inherit;
    text-decoration: none;
}

.page-header__eyebrow a:hover {
    color: var(--nv-heading);
}

.page-header__title {
    font-family: var(--nv-font-serif);
    font-size: 1.85rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--nv-heading);
    margin: 0;
}

.page-header__subtitle {
    margin: 0.4rem 0 0;
    max-width: 62ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--nv-muted);
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 600px) {
    .page-header {
        padding-top: 1.25rem;
    }

    .page-header__title {
        font-size: 1.5rem;
    }

    .page-header__actions {
        width: 100%;
    }
}

/*
 PANELS

 The one card shape: a plain surface with a hairline border. No gradients and
 no glow, so the thing inside it is what gets looked at.
*/

.panel {
    background: var(--nv-surface);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--nv-shadow-sm);
}

.panel + .panel {
    margin-top: 1.25rem;
}

.panel--flush {
    padding: 0;
    overflow: hidden;
}

.panel--sunken {
    background: var(--nv-surface-sunken);
    box-shadow: none;
}

.panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.1rem;
}

.panel--flush > .panel__header {
    padding: 1.25rem 1.5rem 0;
}

.panel__title {
    font-family: var(--nv-font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--nv-heading);
    margin: 0;
}

.panel__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--nv-muted);
}

.panel__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--nv-border);
}

.panel__divider {
    border: 0;
    border-top: 1px solid var(--nv-border);
    margin: 1.25rem 0;
}

/* A heading for a group of things inside a page, below the page header. */
.section-title {
    font-family: var(--nv-font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--nv-heading);
    margin: 0 0 0.75rem;
}

.section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nv-muted);
    margin: 0 0 0.6rem;
}

/*
 NOTICES

 One line of news with an optional action, for the things that used to be full
 banners: this week's prompt, the publishing allowance, payouts not set up.
 They sit quietly above the content instead of on top of it.
*/

.notice {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: var(--nv-radius);
    border: 1px solid var(--nv-border);
    background: var(--nv-surface);
    color: var(--nv-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.notice + .notice {
    margin-top: 0.6rem;
}

.notice__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--nv-surface-sunken);
    color: var(--nv-muted);
}

.notice__icon .mud-icon-root,
.notice__icon svg {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.notice__body {
    flex: 1;
    min-width: 0;
}

.notice__title {
    display: block;
    font-weight: 600;
    color: var(--nv-heading);
}

.notice__text {
    display: block;
    margin: 0.1rem 0 0;
    color: var(--nv-muted);
}

.notice__action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--nv-radius-sm);
    border: 1px solid var(--nv-border-strong);
    background: var(--nv-surface);
    color: var(--nv-heading);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.notice__action:hover {
    background: var(--nv-surface-sunken);
    color: var(--nv-heading);
    text-decoration: none;
}

/* The one notice on a page that carries its main invitation, such as this
   week's prompt. */
.notice__action--accent,
.notice__action--accent:hover {
    background: var(--nv-accent);
    border-color: var(--nv-accent);
    color: var(--nv-on-accent);
}

.notice__action--accent:hover {
    background: var(--nv-accent-hover);
    border-color: var(--nv-accent-hover);
}

.notice__dismiss {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--nv-faint);
    padding: 0.25rem;
    border-radius: var(--nv-radius-sm);
    line-height: 1;
    cursor: pointer;
}

.notice__dismiss:hover {
    color: var(--nv-heading);
    background: var(--nv-surface-sunken);
}

.notice--accent .notice__icon { background: var(--nv-accent-soft); color: var(--nv-accent); }
.notice--info .notice__icon { background: var(--nv-info-soft); color: var(--nv-info); }
.notice--success .notice__icon { background: var(--nv-success-soft); color: var(--nv-success); }
.notice--warning .notice__icon { background: var(--nv-warning-soft); color: var(--nv-warning); }
.notice--danger .notice__icon { background: var(--nv-danger-soft); color: var(--nv-danger); }

.notice--warning { border-color: color-mix(in srgb, var(--nv-warning) 30%, var(--nv-border)); }
.notice--danger { border-color: color-mix(in srgb, var(--nv-danger) 30%, var(--nv-border)); }

@media (max-width: 600px) {
    .notice {
        flex-wrap: wrap;
    }

    .notice__action {
        margin-left: calc(32px + 0.85rem);
    }
}

/*
 STATS

 A figure and what it counts. The figure is in the serif, so a row of them
 reads like a line from a statement rather than a dashboard.
*/

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.stat {
    padding: 1rem 1.1rem;
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius);
    background: var(--nv-surface);
}

.stat__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--nv-muted);
}

.stat__value {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--nv-font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--nv-heading);
    font-variant-numeric: tabular-nums;
}

.stat__hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--nv-faint);
}

/*
 EMPTY STATES
*/

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--nv-border-strong);
    border-radius: var(--nv-radius-lg);
    background: var(--nv-surface);
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--nv-surface-sunken);
    color: var(--nv-muted);
    margin-bottom: 1rem;
}

.empty-state__icon .mud-icon-root,
.empty-state__icon svg {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.empty-state__title {
    font-family: var(--nv-font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--nv-heading);
    margin: 0 0 0.35rem;
}

.empty-state__text {
    max-width: 44ch;
    margin: 0 auto;
    color: var(--nv-muted);
    line-height: 1.55;
}

.empty-state__actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* The illustrations are drawn for a white page. On the dark one they are
   dimmed rather than left glaring. */
html[data-theme="dark"] img[src*="undraw_"] {
    opacity: 0.75;
    filter: brightness(0.9);
}

/* The logo is the navy mark on a transparent ground, which all but disappears
   on the dark page. It is drawn in the warm light the headings use instead. */
html[data-theme="dark"] img[src$="novellea_logo.png"],
html[data-theme="dark"] img[src$="novellea_logo_navbar.png"] {
    filter: brightness(0) invert(1) sepia(0.25);
    opacity: 0.92;
}

/*
 PILLS
*/

.nv-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--nv-surface-sunken);
    color: var(--nv-muted);
    border: 1px solid var(--nv-border);
}

.nv-pill--accent { background: var(--nv-accent-soft); color: var(--nv-accent); border-color: transparent; }
.nv-pill--info { background: var(--nv-info-soft); color: var(--nv-info); border-color: transparent; }
.nv-pill--success { background: var(--nv-success-soft); color: var(--nv-success); border-color: transparent; }
.nv-pill--warning { background: var(--nv-warning-soft); color: var(--nv-warning); border-color: transparent; }
.nv-pill--danger { background: var(--nv-danger-soft); color: var(--nv-danger); border-color: transparent; }

/*
 BUTTONS

 The workspace mixes MudButton and bootstrap's .btn. These make the bootstrap
 ones match: the navy for the main action, a bordered neutral for the rest,
 and bootstrap's own bright blue nowhere.
*/

.btn {
    border-radius: var(--nv-radius-sm);
    font-weight: 500;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--nv-primary);
    border-color: var(--nv-primary);
    color: var(--nv-on-primary);
    box-shadow: none;
}

.btn-primary:hover {
    background-color: var(--nv-primary-hover);
    border-color: var(--nv-primary-hover);
    color: var(--nv-on-primary);
}

.btn-outline-primary {
    color: var(--nv-primary);
    border-color: var(--nv-border-strong);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--nv-primary-soft);
    border-color: var(--nv-primary);
    color: var(--nv-primary);
}

.btn-secondary,
.btn-outline-secondary,
.btn-light {
    background-color: var(--nv-surface);
    border-color: var(--nv-border-strong);
    color: var(--nv-text);
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--nv-surface-sunken);
    border-color: var(--nv-border-strong);
    color: var(--nv-heading);
}

.btn-outline-danger {
    color: var(--nv-danger);
    border-color: color-mix(in srgb, var(--nv-danger) 45%, var(--nv-border));
}

.btn-outline-danger:hover {
    background-color: var(--nv-danger-soft);
    border-color: var(--nv-danger);
    color: var(--nv-danger);
}

.btn-link {
    color: var(--nv-link);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--nv-focus) !important;
}

/* A MudButton with Class="nv-btn-accent" for the one action a page exists
   for, such as publishing. Used sparingly: one per screen at most. */
.mud-button-root.nv-btn-accent,
.btn.nv-btn-accent {
    background-color: var(--nv-accent) !important;
    border-color: var(--nv-accent) !important;
    color: var(--nv-on-accent) !important;
}

.mud-button-root.nv-btn-accent:hover,
.btn.nv-btn-accent:hover {
    background-color: var(--nv-accent-hover) !important;
    border-color: var(--nv-accent-hover) !important;
}

/*
 BOOTSTRAP CONTROLS
*/

.form-control,
.custom-select {
    background-color: var(--nv-surface);
    border-color: var(--nv-border-strong);
    color: var(--nv-text);
    border-radius: var(--nv-radius-sm);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--nv-surface);
    border-color: var(--nv-primary);
    color: var(--nv-text);
    box-shadow: 0 0 0 3px var(--nv-focus);
}

.form-control::placeholder {
    color: var(--nv-faint);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--nv-surface-sunken);
    color: var(--nv-muted);
}

.input-group-text {
    background-color: var(--nv-surface-sunken);
    border-color: var(--nv-border-strong);
    color: var(--nv-muted);
}

label,
.col-form-label {
    color: var(--nv-heading);
}

.form-text {
    color: var(--nv-muted);
}

.custom-control-label::before {
    background-color: var(--nv-surface);
    border-color: var(--nv-border-strong);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--nv-primary);
    border-color: var(--nv-primary);
}

.card {
    background-color: var(--nv-surface);
    border-color: var(--nv-border);
    border-radius: var(--nv-radius-lg);
}

.card-header,
.card-footer {
    background-color: var(--nv-surface-sunken);
    border-color: var(--nv-border);
}

.list-group-item {
    background-color: var(--nv-surface);
    border-color: var(--nv-border);
    color: var(--nv-text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--nv-surface-sunken);
    color: var(--nv-heading);
}

.table {
    color: var(--nv-text);
}

.table th,
.table td,
.table thead th {
    border-color: var(--nv-border);
}

.table thead th {
    color: var(--nv-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.table-hover tbody tr:hover {
    background-color: var(--nv-surface-sunken);
    color: var(--nv-text);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--nv-surface-sunken);
}

.modal-content {
    background-color: var(--nv-surface-raised);
    border-color: var(--nv-border);
    color: var(--nv-text);
}

.modal-header,
.modal-footer {
    border-color: var(--nv-border);
}

.modal-backdrop.show {
    background-color: var(--nv-overlay);
    opacity: 1;
}

.close {
    color: var(--nv-heading);
    text-shadow: none;
}

.alert {
    border-radius: var(--nv-radius);
    border-color: var(--nv-border);
}

.alert-info {
    background-color: var(--nv-info-soft);
    color: var(--nv-info);
    border-color: transparent;
}

.alert-success {
    background-color: var(--nv-success-soft);
    color: var(--nv-success);
    border-color: transparent;
}

.alert-warning {
    background-color: var(--nv-warning-soft);
    color: var(--nv-warning);
    border-color: transparent;
}

.alert-danger {
    background-color: var(--nv-danger-soft);
    color: var(--nv-danger);
    border-color: transparent;
}

.alert-secondary,
.alert-light {
    background-color: var(--nv-surface-sunken);
    color: var(--nv-text);
    border-color: var(--nv-border);
}

.badge-light,
.badge-secondary {
    background-color: var(--nv-surface-sunken);
    color: var(--nv-muted);
}

.page-link {
    background-color: var(--nv-surface);
    border-color: var(--nv-border);
    color: var(--nv-heading);
}

.page-link:hover {
    background-color: var(--nv-surface-sunken);
    border-color: var(--nv-border);
    color: var(--nv-heading);
}

.page-item.active .page-link {
    background-color: var(--nv-primary);
    border-color: var(--nv-primary);
    color: var(--nv-on-primary);
}

.page-item.disabled .page-link {
    background-color: var(--nv-surface);
    border-color: var(--nv-border);
    color: var(--nv-faint);
}

.nav-tabs {
    border-color: var(--nv-border);
}

.nav-tabs .nav-link {
    color: var(--nv-muted);
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--nv-heading);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border-color: transparent transparent var(--nv-primary);
    border-bottom-width: 2px;
    color: var(--nv-heading);
}

.spinner-border {
    color: var(--nv-muted);
}

/*
 MUDBLAZOR

 Most of MudBlazor follows the palette MainLayout gives it. These are the
 places where it draws a colour of its own.
*/

.mud-paper {
    background-color: var(--mud-palette-surface);
}

.mud-dialog {
    border-radius: var(--nv-radius-lg) !important;
    box-shadow: var(--nv-shadow-lg) !important;
}

.mud-overlay-dark {
    background-color: var(--nv-overlay) !important;
}

.mud-input-control .mud-input-label {
    color: var(--nv-muted);
}

.mud-button-filled.mud-button-filled-primary {
    box-shadow: none;
}

.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: none;
}

.mud-table {
    background-color: var(--nv-surface);
}

.mud-tabs-toolbar {
    background-color: transparent !important;
}

/*
 THIRD PARTY
*/

/* Toasts keep toastr's colours for their meaning, on the theme's raised
   surface instead of a solid slab of colour. */
#toast-container > div {
    background-color: var(--nv-surface-raised) !important;
    background-image: none !important;
    color: var(--nv-text) !important;
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius) !important;
    box-shadow: var(--nv-shadow-lg) !important;
    padding: 14px 18px 14px 16px !important;
}

/* toastr's icons are white, drawn for a coloured slab, and vanish on a light
   surface. The coloured edge says the same thing. */
#toast-container > .toast-success { border-left: 4px solid var(--nv-success); }
#toast-container > .toast-info { border-left: 4px solid var(--nv-info); }
#toast-container > .toast-warning { border-left: 4px solid var(--nv-warning); }
#toast-container > .toast-error { border-left: 4px solid var(--nv-danger); }

.toast-progress {
    background-color: var(--nv-accent) !important;
    opacity: 0.35 !important;
}

.toast-close-button {
    color: var(--nv-muted) !important;
    text-shadow: none !important;
}

/* Quill. The editor is where authors spend their time, so in the dark it is
   the dark surface with the reader's warm ink, not a white sheet. */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--nv-border) !important;
}

.ql-snow .ql-stroke {
    stroke: var(--nv-muted);
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: var(--nv-muted);
}

.ql-snow .ql-picker {
    color: var(--nv-muted);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--nv-accent);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--nv-accent);
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active {
    color: var(--nv-accent);
}

.ql-snow .ql-picker-options {
    background-color: var(--nv-surface-raised);
    border-color: var(--nv-border) !important;
    box-shadow: var(--nv-shadow-lg) !important;
}

.ql-snow .ql-tooltip {
    background-color: var(--nv-surface-raised);
    border-color: var(--nv-border);
    color: var(--nv-text);
    box-shadow: var(--nv-shadow-md);
}

.ql-snow .ql-tooltip input[type=text] {
    background-color: var(--nv-surface);
    border-color: var(--nv-border-strong);
    color: var(--nv-text);
}

.ql-editor {
    color: var(--nv-text);
}

.ql-editor.ql-blank::before {
    color: var(--nv-faint);
}

/* Litepicker's calendar, used by the schedule dialog. */
html[data-theme="dark"] .litepicker {
    --litepicker-container-months-color-bg: var(--nv-surface-raised);
    --litepicker-container-months-box-shadow-color: rgba(0, 0, 0, 0.6);
    --litepicker-footer-color-bg: var(--nv-surface-raised);
    --litepicker-footer-box-shadow-color: var(--nv-border);
    --litepicker-tooltip-color-bg: var(--nv-surface-raised);
    --litepicker-month-header-color: var(--nv-heading);
    --litepicker-month-weekday-color: var(--nv-muted);
    --litepicker-month-week-number-color: var(--nv-faint);
    --litepicker-day-color: var(--nv-text);
    --litepicker-day-color-hover: var(--nv-accent);
    --litepicker-is-today-color: var(--nv-accent);
    --litepicker-is-in-range-color: var(--nv-accent-soft);
    --litepicker-is-locked-color: var(--nv-faint);
    --litepicker-is-start-color: var(--nv-on-accent);
    --litepicker-is-start-color-bg: var(--nv-accent);
    --litepicker-is-end-color: var(--nv-on-accent);
    --litepicker-is-end-color-bg: var(--nv-accent);
    --litepicker-button-prev-month-color: var(--nv-muted);
    --litepicker-button-next-month-color: var(--nv-muted);
    --litepicker-button-prev-month-color-hover: var(--nv-heading);
    --litepicker-button-next-month-color-hover: var(--nv-heading);
}

/* The cropper's checkerboard is a white and grey image that nothing else on a
   dark page looks like. */
html[data-theme="dark"] .cropper-bg {
    background-color: var(--nv-surface-sunken);
    background-image: none;
}

/*
 THEME TOGGLE
*/

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: var(--nv-radius);
    background: transparent;
    color: var(--nv-heading);
    cursor: pointer;
    transition: background-color 120ms ease;
}

.theme-toggle:hover {
    background-color: var(--nv-primary-soft);
}

.theme-toggle svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

/* A three-way choice laid out as one control, for the account page. */
.segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--nv-radius);
    background: var(--nv-surface-sunken);
    border: 1px solid var(--nv-border);
}

.segmented__option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--nv-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.segmented__option:hover {
    color: var(--nv-heading);
}

.segmented__option--active {
    background: var(--nv-surface);
    color: var(--nv-heading);
    box-shadow: var(--nv-shadow-sm);
}

.segmented__option svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}