/* =========================================================================================
   m90Dashboard theme -- carried over from m90Confluence so the two look like one family
   =========================================================================================

   Five given colours, used as surfaces:

     #FFFFFF  white     content
     #FDF4D2  cream     titles
     #B0CDE6  blue      navigation and secondary surfaces
     #A290B7  purple    primary actions and the current selection
     #946D6D  rose      destructive and cautionary things

   Two things were derived rather than invented:

   * Washes. The full colours are too strong across a whole sidebar or page background, so
     large areas use them diluted with white. The named colours stay for bands and accents,
     where they read as deliberate rather than as a tint.

   * Darker variants for anything carrying WHITE text. Measured against WCAG AA (4.5:1):
     white on #A290B7 is only 2.91:1 and on #946D6D 4.50:1 -- right on the boundary. Buttons
     therefore use #746783 (5.24:1) and #765757 (6.42:1). The original colours are unchanged
     wherever dark text sits on them, which is everywhere else.

   Ink is #26232B rather than pure black: a near-black carrying a trace of the purple, which
   sits better on the cream than #000 does. 15.5:1 on white.
   ========================================================================================= */

:root {
    /* the palette, as given */
    --c-white: #FFFFFF;
    --c-cream: #FDF4D2;
    --c-blue: #B0CDE6;
    --c-purple: #A290B7;
    --c-rose: #946D6D;

    /* darkened, for white text only -- see the note above */
    --c-purple-deep: #746783;
    --c-rose-deep: #765757;
    --c-blue-deep: #667685;

    /* washes for large areas */
    --c-cream-wash: #FFFDF5;
    --c-blue-wash: #EEF4FA;
    --c-purple-wash: #EBE7EF;
    --c-rose-wash: #E7DFDF;

    /* lines, a step stronger than the wash they sit against */
    --c-cream-line: #F2E8C4;
    --c-blue-line: #D4E4F1;
    --c-purple-line: #CCC2D7;
    --c-rose-line: #C4AFAF;

    --c-ink: #26232B;
    --c-ink-muted: #6B6577;
    --c-line: #E4DFD6;
}

body {
    background: var(--c-cream-wash);
    color: var(--c-ink);
}

/* --- navigation ------------------------------------------------------------------------ */

.navbar {
    background: var(--c-white) !important;
    border-bottom: 1px solid var(--c-blue-line) !important;

    /* A thin blue rule under the bar, rather than a drop shadow: it separates the chrome
       from the page without adding depth the rest of the design does not use. */
    box-shadow: inset 0 -3px 0 var(--c-blue-wash) !important;
}

.navbar-brand {
    color: var(--c-purple-deep) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.navbar .nav-link {
    color: var(--c-ink) !important;
    border-radius: 4px;
    padding-inline: .6rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background: var(--c-blue-wash);
    color: var(--c-purple-deep) !important;
}

/* --- page titles ----------------------------------------------------------------------- */
/* The cream band is what the palette calls "title", so page headings get it. Applied to the
   h1 only, so a page with several headings does not turn into stripes. */

main > h1,
main > .row h1,
main h1.page-title {
    background: var(--c-cream);
    border-left: 4px solid var(--c-purple);
    border-radius: 0 6px 6px 0;
    padding: .6rem .9rem;
    margin-bottom: 1rem;
}

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

.card {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 8px;
}

.card-header {
    background: var(--c-cream-wash);
    border-bottom: 1px solid var(--c-cream-line);
}

.list-group-item {
    background: var(--c-white);
    border-color: var(--c-line);
}

.list-group-item-action:hover {
    background: var(--c-blue-wash);
}

.breadcrumb {
    background: transparent;
    padding: .4rem 0;
}

.breadcrumb a {
    color: var(--c-purple-deep);
}

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

.btn-primary {
    background: var(--c-purple-deep);
    border-color: var(--c-purple-deep);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #63576F;
    border-color: #63576F;
}

.btn-outline-primary {
    color: var(--c-purple-deep);
    border-color: var(--c-purple);
}

.btn-outline-primary:hover {
    background: var(--c-purple-deep);
    border-color: var(--c-purple-deep);
    color: var(--c-white);
}

.btn-outline-secondary {
    color: var(--c-ink);
    border-color: var(--c-blue-line);
}

.btn-outline-secondary:hover {
    background: var(--c-blue-wash);
    border-color: var(--c-blue);
    color: var(--c-ink);
}

/* Destructive actions take the rose, which is the only colour here that reads as a caution
   without shouting. Bootstrap's own red is left alone for genuine errors. */
.btn-danger {
    background: var(--c-rose-deep);
    border-color: var(--c-rose-deep);
}

.btn-danger:hover,
.btn-danger:focus {
    background: #5F4646;
    border-color: #5F4646;
}

.btn-outline-danger {
    color: var(--c-rose-deep);
    border-color: var(--c-rose);
}

.btn-outline-danger:hover {
    background: var(--c-rose-deep);
    border-color: var(--c-rose-deep);
    color: var(--c-white);
}

.btn-link {
    color: var(--c-purple-deep);
}

a {
    color: var(--c-purple-deep);
}

a:hover {
    color: #63576F;
}

/* --- badges -------------------------------------------------------------------------------- */
/* Tinted fills with dark text, rather than saturated fills with white. At badge size the
   text is small, and small light-on-dark text is the first thing to become unreadable. */

.badge.text-bg-primary {
    background: var(--c-purple) !important;
    color: var(--c-ink) !important;
}

.badge.text-bg-secondary {
    background: var(--c-blue) !important;
    color: var(--c-ink) !important;
}

.badge.text-bg-light {
    background: var(--c-cream) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-cream-line) !important;
}

/* Success, warning and danger keep their meaning -- a "live version" badge has to read as
   affirmative, and no colour in this palette does that. They are muted to sit alongside it. */
.badge.text-bg-success {
    background: #CFE3D4 !important;
    color: #1F3D28 !important;
}

.badge.text-bg-warning {
    background: var(--c-cream) !important;
    color: #6B5518 !important;
}

.badge.text-bg-danger {
    background: var(--c-rose-deep) !important;
    color: var(--c-white) !important;
}

/* --- alerts ---------------------------------------------------------------------------------- */

.alert-info {
    background: var(--c-blue-wash);
    border-color: var(--c-blue-line);
    color: var(--c-ink);
}

.alert-secondary {
    background: var(--c-purple-wash);
    border-color: var(--c-purple-line);
    color: var(--c-ink);
}

.alert-warning {
    background: var(--c-cream);
    border-color: var(--c-cream-line);
    color: var(--c-ink);
}

.alert-success {
    background: #E4F0E7;
    border-color: #C3DCCA;
    color: #1F3D28;
}

.alert-danger {
    background: var(--c-rose-wash);
    border-color: var(--c-rose-line);
    color: #4A3636;
}

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

.table > thead {
    background: var(--c-blue-wash);
}

.table > thead th {
    border-bottom-color: var(--c-blue-line);
    font-weight: 600;
}

.table-hover > tbody > tr:hover > * {
    background: var(--c-cream-wash);
}

.table-active > * {
    background: var(--c-purple-wash) !important;
}

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

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--c-purple);
    box-shadow: 0 0 0 .2rem var(--c-purple-wash);
}

.form-check-input:checked {
    background-color: var(--c-purple-deep);
    border-color: var(--c-purple-deep);
}

/* Overrides the white-then-blue focus ring inherited from the project template, which does
   not belong against these softer surfaces. */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--c-purple-wash);
}

/* --- footer ------------------------------------------------------------------------------------------------- */

.footer {
    border-top-color: var(--c-blue-line) !important;
    color: var(--c-ink-muted) !important;
}

/* --- the sign-in page ----------------------------------------------------------------------------------------- */

.login-card {
    border-color: var(--c-blue-line) !important;
    box-shadow: 0 1px 3px rgba(38, 35, 43, .08) !important;
}

.login-card h1 {
    color: var(--c-purple-deep);
}

/* =========================================================================================
   Square edges
   =========================================================================================
   Everything loses its corner radius: cards, buttons, inputs, badges, alerts, panels,
   thumbnails, the sidebar, the page body, macro blocks and the editor.

   Done as one sweeping rule rather than by hunting down every declaration. There are twenty
   radii in our own stylesheets and a great many more inherited from Bootstrap, and the
   sweeping version cannot miss one -- nor can a component added next month quietly arrive
   with rounded corners.

   The `rounded` and `rounded-pill` utility classes are covered by the same rule, so markup
   using them needs no change.
   ========================================================================================= */

*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* One exception, and it is not decorative. A radio button is round because that is what
   distinguishes it from a checkbox -- squaring it would make "pick exactly one" look like
   "tick any that apply". The shape is carrying meaning, so it stays. */
input[type="radio"],
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}


/* =========================================================================================
   Dark mode
   =========================================================================================
   Switched on by data-mode="dark" on <html>, set inline in the head before the first paint.
   The reader chooses it from the account menu and the choice is remembered per device.

   Almost all of this is one block of token redefinitions, because the light theme was built
   on variables. What follows the tokens is the part that cannot be: Bootstrap's own
   components carry hardcoded light colours of their own, so cards, menus, inputs, tables and
   the light utility classes each need restating.

   Note what does NOT change: the brand bar keeps #1a65a6. It is the one fixed point of the
   identity, it already carries white text, and a dark surface reads perfectly well beneath
   it. Inverting it would make the application look like a different product at night.
   ========================================================================================= */

:root[data-mode="dark"] {
    /* surfaces, from the page ground upward */
    --c-cream-wash: #14171c;   /* body */
    --c-white: #1c2027;        /* raised surfaces: cards, the editor, page body */
    --c-surface: #1c2027;
    --c-cream: #262b34;

    /* the accents, pulled down to sit under light text */
    --c-blue: #2d4c66;
    --c-purple: #493e56;
    --c-rose: #5a4444;

    --c-blue-wash: #1a2530;
    --c-purple-wash: #221d29;
    --c-rose-wash: #291f1f;

    --c-cream-line: #333a45;
    --c-blue-line: #2f4356;
    --c-purple-line: #3d3448;
    --c-rose-line: #4a3939;

    /* text and rules */
    --c-ink: #e4e1e8;
    --c-ink-muted: #9d97a8;
    --c-line: #333945;
}

/* --- Bootstrap's own components, which do not read our tokens ------------------------- */

:root[data-mode="dark"] .card,
:root[data-mode="dark"] .list-group-item,
:root[data-mode="dark"] .modal-content,
:root[data-mode="dark"] .accordion-item {
    background-color: var(--c-white);
    color: var(--c-ink);
    border-color: var(--c-line);
}

:root[data-mode="dark"] .dropdown-menu {
    background-color: var(--c-white);
    border-color: var(--c-line);
}

:root[data-mode="dark"] .dropdown-item {
    color: var(--c-ink);
}

:root[data-mode="dark"] .dropdown-item:hover,
:root[data-mode="dark"] .dropdown-item:focus {
    background-color: var(--c-blue-wash);
    color: var(--c-ink);
}

:root[data-mode="dark"] .dropdown-divider {
    border-top-color: var(--c-line);
}

/* Inputs. The border is deliberately a step lighter than the surrounding rule: a field the
   reader is expected to type into should be findable without hunting for its edge. */
:root[data-mode="dark"] .form-control,
:root[data-mode="dark"] .form-select {
    background-color: #11141a;
    border-color: #3f4654;
    color: var(--c-ink);
}

:root[data-mode="dark"] .form-control:focus,
:root[data-mode="dark"] .form-select:focus {
    background-color: #11141a;
    color: var(--c-ink);
    border-color: var(--c-brand);
    box-shadow: 0 0 0 .2rem rgba(26, 101, 166, .35);
}

:root[data-mode="dark"] .form-control::placeholder {
    color: #7d8595;
}

:root[data-mode="dark"] .input-group-text {
    background-color: var(--c-cream);
    border-color: #3f4654;
    color: var(--c-ink);
}

:root[data-mode="dark"] .table {
    --bs-table-color: var(--c-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--c-line);
    --bs-table-striped-color: var(--c-ink);
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-hover-color: var(--c-ink);
    --bs-table-hover-bg: rgba(255, 255, 255, .055);
}

/* The light utility classes are used throughout the markup for panels and badges. */
:root[data-mode="dark"] .bg-white,
:root[data-mode="dark"] .bg-light {
    background-color: var(--c-white) !important;
}

:root[data-mode="dark"] .text-dark {
    color: var(--c-ink) !important;
}

:root[data-mode="dark"] .text-muted {
    color: var(--c-ink-muted) !important;
}

:root[data-mode="dark"] .border,
:root[data-mode="dark"] .border-top,
:root[data-mode="dark"] .border-bottom,
:root[data-mode="dark"] .border-start,
:root[data-mode="dark"] .border-end {
    border-color: var(--c-line) !important;
}

:root[data-mode="dark"] .badge.text-bg-light {
    background-color: var(--c-cream) !important;
    color: var(--c-ink) !important;
}

/* Alerts: Bootstrap's pastel fills go muddy on a dark ground, so they are restated as a
   tinted wash with a coloured left edge carrying the meaning. */
:root[data-mode="dark"] .alert {
    background-color: var(--c-cream);
    border-color: var(--c-line);
    color: var(--c-ink);
}

:root[data-mode="dark"] .alert-info { border-left: .25rem solid #3d7fb5; }
:root[data-mode="dark"] .alert-warning { border-left: .25rem solid #b58a3d; }
:root[data-mode="dark"] .alert-danger { border-left: .25rem solid #b5563d; }
:root[data-mode="dark"] .alert-success { border-left: .25rem solid #4f9d5e; }

:root[data-mode="dark"] .alert a {
    color: #8dc2ea;
}

/* Code and preformatted text. */
:root[data-mode="dark"] code,
:root[data-mode="dark"] pre,
:root[data-mode="dark"] .font-monospace {
    color: #e0d7b8;
}

:root[data-mode="dark"] pre {
    background-color: #11141a;
    border-color: var(--c-line);
}

/* Links inside prose. The light theme's link colour is too dark to read here. */
:root[data-mode="dark"] a {
    color: #8dc2ea;
}

:root[data-mode="dark"] .btn-link {
    color: #8dc2ea;
}

/* Outline buttons: the default border and label are near-black. */
:root[data-mode="dark"] .btn-outline-secondary {
    color: var(--c-ink);
    border-color: #4a5261;
}

:root[data-mode="dark"] .btn-outline-secondary:hover {
    background-color: #2b313b;
    color: var(--c-ink);
    border-color: #5a6272;
}


/* =========================================================================================
   Page background tints
   =========================================================================================
   Seven choices, all of them barely there. The point is a change of temperature behind the
   tiles and charts, not a colour scheme -- anything stronger competes with the figures, and
   the white cards have to stay clearly the brightest thing on the page.

   Guarded against dark mode: :not([data-mode="dark"]) means a reader who picked pink and then
   switched to dark gets a proper dark ground, with the pink waiting for them if they switch
   back.
   ========================================================================================= */

:root:not([data-mode="dark"])[data-tint="white"]  { --c-cream-wash: #ffffff; }
:root:not([data-mode="dark"])[data-tint="grey"]   { --c-cream-wash: #f4f5f6; }
:root:not([data-mode="dark"])[data-tint="green"]  { --c-cream-wash: #f2f7f2; }
:root:not([data-mode="dark"])[data-tint="blue"]   { --c-cream-wash: #f1f5fa; }
:root:not([data-mode="dark"])[data-tint="pink"]   { --c-cream-wash: #faf2f4; }
:root:not([data-mode="dark"])[data-tint="purple"] { --c-cream-wash: #f5f2f8; }

/* On white, a panel would vanish into the page, so its edge earns a little more weight. */
:root:not([data-mode="dark"])[data-tint="white"] .card,
:root:not([data-mode="dark"])[data-tint="white"] .stat-tile,
:root:not([data-mode="dark"])[data-tint="white"] .chart-card {
    border-color: #dcdcdc;
}

/* --- the swatch picker in the account menu --------------------------------------------- */

.tint-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
}

.tint-swatch {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid var(--c-line);
    cursor: pointer;
}

.tint-swatch:hover {
    border-color: var(--c-ink-muted);
}

/* The chosen one is marked with a ring rather than a tick: at this size a glyph would be
   illegible, and the ring survives on every tint including white. */
.tint-swatch.chosen {
    outline: 2px solid var(--c-brand);
    outline-offset: 1px;
    border-color: var(--c-brand);
}

.tint-default { background: #fdf9ec; }
.tint-white   { background: #ffffff; }
.tint-grey    { background: #f4f5f6; }
.tint-green   { background: #f2f7f2; }
.tint-blue    { background: #f1f5fa; }
.tint-pink    { background: #faf2f4; }
.tint-purple  { background: #f5f2f8; }