/* =================================================================
   Mars Technologies brand theme
   Palette sourced from marstech.co.za
     Red (signature) ......... #ED1C24  ->  #8B0000 (deep)
     Ink / near-black ........ #282626 / #1f1f1f
     Steel grey .............. #727272
     Light grey .............. #e2e2e2 / #f5f2f2
     Blue accent ............. #0088CB
     Yellow accent ........... #FFCB05
   Typeface: Poppins (brand font)
   ================================================================= */

:root {
    --mars-red: #ED1C24;
    --mars-red-hover: #c41219;
    --mars-red-dark: #8B0000;
    --mars-red-deep: #550000;
    --mars-ink: #282626;
    --mars-ink-2: #1f1f1f;
    --mars-grey: #727272;
    --mars-grey-light: #e2e2e2;
    --mars-surface: #f5f2f2;
    --mars-blue: #0088cb;
    --mars-yellow: #ffcb05;

    /* Re-map Bootstrap theme colours to the Mars palette */
    --bs-primary: #ED1C24;
    --bs-primary-rgb: 237, 28, 36;
    --bs-link-color: #c41219;
    --bs-link-color-rgb: 196, 18, 25;
    --bs-link-hover-color: #8B0000;
    --bs-link-hover-color-rgb: 139, 0, 0;
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: #2b2b2b;
    --bs-body-bg: #ffffff;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* The same #2b2b2b and #ffffff as :root sets in light mode; read through the variables so the dark mode block below can swap them */
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mars-ink);
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    color: var(--mars-red-hover);
    text-decoration: none;
}

a:hover {
    color: var(--mars-red-dark);
}

/* ---------- Navbar ---------- */
.navbar.mars-navbar {
    background-color: var(--mars-ink) !important;
    border-bottom: 3px solid var(--mars-red);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.mars-navbar .navbar-brand img {
    height: 38px;
    width: auto;
    display: block;
}

.mars-navbar .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500;
    border-radius: 6px;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    transition: color 0.15s, background-color 0.15s;
}

.mars-navbar .nav-link:hover,
.mars-navbar .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.mars-navbar .nav-link.active {
    color: #fff !important;
}

.mars-navbar .navbar-nav > .nav-item > .nav-link.active::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--mars-red);
    border-radius: 2px;
    margin-top: 2px;
}

.mars-navbar .dropdown-menu {
    border: none;
    border-top: 2px solid var(--mars-red);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ---------- Buttons ---------- */
.btn-primary {
    --bs-btn-bg: var(--mars-red);
    --bs-btn-border-color: var(--mars-red);
    --bs-btn-hover-bg: var(--mars-red-hover);
    --bs-btn-hover-border-color: var(--mars-red-hover);
    --bs-btn-active-bg: var(--mars-red-dark);
    --bs-btn-active-border-color: var(--mars-red-dark);
    --bs-btn-disabled-bg: var(--mars-red);
    --bs-btn-disabled-border-color: var(--mars-red);
    color: #fff;
    background-image: linear-gradient(180deg, #f23037 0%, var(--mars-red) 55%, var(--mars-red-dark) 160%);
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(237, 28, 36, 0.25);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-image: linear-gradient(180deg, var(--mars-red) 0%, var(--mars-red-dark) 120%);
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.35);
}

.btn-outline-primary {
    --bs-btn-color: var(--mars-red-hover);
    --bs-btn-border-color: var(--mars-red);
    --bs-btn-hover-bg: var(--mars-red);
    --bs-btn-hover-border-color: var(--mars-red);
    --bs-btn-active-bg: var(--mars-red-dark);
    --bs-btn-active-border-color: var(--mars-red-dark);
    font-weight: 600;
}

.btn-link {
    color: var(--mars-red-hover);
}
.btn-link:hover {
    color: var(--mars-red-dark);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--mars-red);
}

/* ---------- Text / utility accents ---------- */
.text-primary { color: var(--mars-red) !important; }
.bg-primary { background-color: var(--mars-red) !important; }
.spinner-border.text-primary,
.spinner-grow.text-primary { color: var(--mars-red) !important; }

.link-primary {
    color: var(--mars-red-hover) !important;
}

/* ---------- Cards & surfaces ---------- */
.card {
    border: 1px solid #ececec;
    border-radius: 12px;
}

.card.shadow-sm {
    box-shadow: 0 .25rem .9rem rgba(40, 38, 38, 0.07) !important;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* ---------- Forms ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(237, 28, 36, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(237, 28, 36, 0.15);
}

.form-check-input:checked {
    background-color: var(--mars-red);
    border-color: var(--mars-red);
}

.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(237, 28, 36, 0.4);
}

/* ---------- Drop zone ---------- */
.drop-zone {
    border: 2px dashed #d2cfcf;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    background-color: var(--mars-surface);
    user-select: none;
}

.drop-zone:hover,
.drop-zone--over {
    border-color: var(--mars-red);
    background-color: #fdecec;
}

.drop-zone--disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.drop-zone__content {
    pointer-events: none;
}

/* ---------- Result area ---------- */
#html-output {
    font-size: 0.78rem;
    resize: vertical;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 8px;
}

/* ---------- Alerts ---------- */
.alert-danger {
    --bs-alert-color: #8B0000;
    --bs-alert-border-color: #f3b9bb;
    --bs-alert-bg: #fdecec;
}

/* ---------- Footer ---------- */
.mars-footer {
    background-color: var(--mars-ink);
    color: rgba(255, 255, 255, 0.7);
    border-top: 3px solid var(--mars-red);
}

.mars-footer img {
    height: 30px;
    width: auto;
    opacity: 0.95;
}

.mars-footer .mars-tagline {
    color: var(--mars-grey-light);
    font-style: italic;
    font-size: 0.85rem;
}

/* ---------- Landing page ---------- */
.mars-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(237, 28, 36, 0.45) 0%, rgba(237, 28, 36, 0) 45%),
        radial-gradient(circle at 100% 100%, rgba(139, 0, 0, 0.6) 0%, rgba(139, 0, 0, 0) 55%),
        linear-gradient(135deg, var(--mars-ink) 0%, var(--mars-ink-2) 100%);
    border-bottom: 4px solid var(--mars-red);
}

.mars-hero::after {
    /* faint grid texture */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
    pointer-events: none;
}

.mars-hero__body {
    position: relative;
    z-index: 1;
    padding: 3.5rem 2.5rem;
    max-width: 44rem;
}

@media (max-width: 575.98px) {
    .mars-hero__body { padding: 2.5rem 1.25rem; }
}

.mars-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(237, 28, 36, 0.18);
    border: 1px solid rgba(237, 28, 36, 0.45);
    color: #ffb3b6;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.mars-hero__title {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 1rem;
}

.mars-hero__title span { color: var(--mars-red); }

.mars-hero__title .rainbow-name {
    background: linear-gradient(90deg, #ff3b3b, #ff9f1c, #ffe14d, #3ddc84, #2ec4ff, #7b61ff, #ff3bd4, #ff3b3b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color:transparent;
    animation:rainbow-shift 4s linear infinite;
}

@keyframes rainbow-shift{
    to { background-position: 200% center; }
}

@media(prefers-reduced-motion: reduce){
    .mars-hero__title .rainbow-name { animation: none; }
}

.mars-hero__lead {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.1rem;
    margin-bottom: 1.75rem;
}

.mars-hero .btn-outline-light:hover { color: var(--mars-ink); }

.tool-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 .25rem .9rem rgba(40, 38, 38, 0.07);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tool-card:hover {
    transform: translateY(-3px);
    border-color: rgba(237, 28, 36, 0.35);
    box-shadow: 0 .75rem 1.75rem rgba(40, 38, 38, 0.12);
}

.tool-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: #fdecec;
    color: var(--mars-red);
}

.tool-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.tool-card__badge {
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--mars-surface);
    color: var(--mars-grey);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.tool-card__text {
    color: var(--mars-grey);
    font-size: .95rem;
    flex-grow: 1;
}

.tool-card__action { align-self: flex-start; margin-top: .5rem; }

.tool-card__note {
    margin-top: .5rem;
    color: var(--mars-grey);
    font-size: .85rem;
    font-style: italic;
}

.tool-card--locked { background: var(--mars-surface); box-shadow: none; }
.tool-card--locked:hover { transform: none; border-color: #ececec; box-shadow: none; }
.tool-card--locked .tool-card__icon { background: var(--mars-grey-light); color: var(--mars-grey); }

.tool-card--admin .tool-card__icon { background: rgba(0, 136, 203, 0.1); color: var(--mars-blue); }
.tool-card--admin .tool-card__badge { background: rgba(0, 136, 203, 0.1); color: var(--mars-blue); }

/* ---------- Form floating placeholder (retained) ---------- */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Update notice banner (wwwroot/js/broadcast.js): stays in view while the page scrolls */
.site-broadcast {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--mars-yellow);
    color: var(--mars-ink);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* ---------- Dark mode ----------
   The navbar toggle (_Layout.cshtml) sets data-bs-theme="dark" on <html>, Bootstrap darkens its own components, and the rules below put them on the Mars inks: the page on --mars-ink-2, cards, menus and dialogs on --mars-ink like the navbar.
   Light mode has no attribute, so none of this applies to it. Anything that is part of a document (PDF pages, the editor's page, exports) stays white as it prints. */
:root[data-bs-theme=dark] {
    --mars-surface: var(--mars-ink);
    --mars-dark-border: #3a3737;
    --mars-dark-muted: #a8a6a6;

    --bs-body-bg: #1f1f1f;
    --bs-body-bg-rgb: 31, 31, 31;
    --bs-body-color: #e2e2e2;
    --bs-body-color-rgb: 226, 226, 226;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #a8a6a6;
    --bs-secondary-color-rgb: 168, 166, 166;
    --bs-secondary-bg: #282626;
    --bs-secondary-bg-rgb: 40, 38, 38;
    --bs-tertiary-bg: #242222;
    --bs-tertiary-bg-rgb: 36, 34, 34;
    --bs-border-color: #3a3737;
    /* The darker reds read poorly on the inks, so links use the signature red */
    --bs-link-color: #ED1C24;
    --bs-link-color-rgb: 237, 28, 36;
    --bs-link-hover-color: #f23037;
    --bs-link-hover-color-rgb: 242, 48, 55;
}

/* :where() adds nothing to a selector's weight, so each rule here weighs the same as the light rule it replaces and wins only by coming later; nav links, buttons and menu items keep beating them as they do in light mode */
:where([data-bs-theme=dark]) h1, :where([data-bs-theme=dark]) h2, :where([data-bs-theme=dark]) h3,
:where([data-bs-theme=dark]) h4, :where([data-bs-theme=dark]) h5, :where([data-bs-theme=dark]) h6,
:where([data-bs-theme=dark]) .h1, :where([data-bs-theme=dark]) .h2, :where([data-bs-theme=dark]) .h3,
:where([data-bs-theme=dark]) .h4, :where([data-bs-theme=dark]) .h5, :where([data-bs-theme=dark]) .h6 {
    color: var(--bs-emphasis-color);
}

:where([data-bs-theme=dark]) a,
:where([data-bs-theme=dark]) .btn-link { color: var(--mars-red); }
:where([data-bs-theme=dark]) a:hover,
:where([data-bs-theme=dark]) .btn-link:hover { color: #f23037; }
:where([data-bs-theme=dark]) .link-primary { color: var(--mars-red) !important; }

[data-bs-theme=dark] .card {
    --bs-card-bg: var(--mars-ink);
    border-color: var(--mars-dark-border);
}
[data-bs-theme=dark] .card.shadow-sm { box-shadow: 0 .25rem .9rem rgba(0, 0, 0, 0.35) !important; }
[data-bs-theme=dark] .list-group { --bs-list-group-bg: var(--mars-ink); }
[data-bs-theme=dark] .modal { --bs-modal-bg: var(--mars-ink); }
/* The navbar's Admin menu is already dark and keeps its own look */
[data-bs-theme=dark] .dropdown-menu:not(.dropdown-menu-dark) { --bs-dropdown-bg: var(--mars-ink); }

/* Tables sit on the card's ink rather than painting the page colour over it; header rows marked table-light become a lighter ink rather than staying light grey */
[data-bs-theme=dark] .table { --bs-table-bg: transparent; }
[data-bs-theme=dark] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--mars-dark-border);
    --bs-table-border-color: #4a4646;
    --bs-table-striped-bg: #403d3d;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: #4a4646;
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: #454141;
    --bs-table-hover-color: var(--bs-body-color);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-bs-theme=dark] .btn:focus, [data-bs-theme=dark] .btn:active:focus,
[data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem rgba(237, 28, 36, 0.4);
}

[data-bs-theme=dark] .drop-zone { border-color: #4a4646; }
[data-bs-theme=dark] .drop-zone:hover,
[data-bs-theme=dark] .drop-zone--over { border-color: var(--mars-red); background-color: rgba(237, 28, 36, 0.12); }

[data-bs-theme=dark] .alert-danger {
    --bs-alert-color: #ffb3b6;
    --bs-alert-border-color: rgba(237, 28, 36, 0.45);
    --bs-alert-bg: rgba(237, 28, 36, 0.15);
}

[data-bs-theme=dark] .tool-card { background: var(--mars-ink); border-color: var(--mars-dark-border); box-shadow: 0 .25rem .9rem rgba(0, 0, 0, 0.35); }
[data-bs-theme=dark] .tool-card:hover { border-color: rgba(237, 28, 36, 0.5); box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, 0.45); }
[data-bs-theme=dark] .tool-card__icon { background: rgba(237, 28, 36, 0.15); }
[data-bs-theme=dark] .tool-card__badge { background: var(--mars-dark-border); color: var(--mars-dark-muted); }
[data-bs-theme=dark] .tool-card__text,
[data-bs-theme=dark] .tool-card__note { color: var(--mars-dark-muted); }
[data-bs-theme=dark] .tool-card--locked { background: var(--mars-ink-2); box-shadow: none; }
[data-bs-theme=dark] .tool-card--locked:hover { border-color: var(--mars-dark-border); box-shadow: none; }
[data-bs-theme=dark] .tool-card--locked .tool-card__icon { background: var(--mars-dark-border); color: var(--mars-dark-muted); }

/* Bootstrap turns close buttons white in dark mode, which would vanish on the yellow update banner */
[data-bs-theme=dark] .site-broadcast .btn-close { filter: none; }

/* The editor's page is the document: it stays white, so its text keeps the light mode colour rather than taking the dark mode's light text */
[data-bs-theme=dark] .ck.ck-editor__editable { color: #2b2b2b; }

/* Alertify confirm dialogs and plain messages; the coloured success, error and warning messages keep their own colours */
[data-bs-theme=dark] .alertify .ajs-dialog,
[data-bs-theme=dark] .alertify .ajs-header,
[data-bs-theme=dark] .alertify .ajs-footer { background-color: var(--mars-ink); border-color: var(--mars-dark-border); }
[data-bs-theme=dark] .alertify .ajs-header,
[data-bs-theme=dark] .alertify .ajs-body { color: var(--bs-body-color); }
[data-bs-theme=dark] .alertify .ajs-commands button { filter: invert(1); }
[data-bs-theme=dark] .alertify-notifier .ajs-message:not(.ajs-success):not(.ajs-error):not(.ajs-warning) {
    background: rgba(40, 38, 38, 0.95);
    color: var(--bs-body-color);
    border-color: var(--mars-dark-border);
}

/* The theme toggle shows the mode it switches to: a moon for dark, a sun for light, drawn in the nav link colour */
.theme-toggle svg {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-bs-theme=dark] .theme-to-dark,
:root:not([data-bs-theme=dark]) .theme-to-light { display: none; }