/* UTT Platform Custom Styles */

/* Tell the browser to render native chrome (select dropdowns, date pickers,
   scrollbars, autofill highlights) in dark mode. Paired with
   data-bs-theme="dark" on <html> so Bootstrap's own components follow suit. */
html {
    color-scheme: dark;
}

/* ── Global dark-background text ───────────────────────────────── */
:root {
    --bs-body-color: #e8edf5;
    --bs-heading-color: #ffffff;
    --bs-link-color: #93c5fd;
    --bs-link-hover-color: #bfdbfe;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --clr-purple:  #8b5cf6;
    --clr-amber:   #f59e0b;
    --clr-emerald: #10b981;
}
body {
    color: #e8edf5;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
}
p, li, label, .form-label, .form-text {
    color: #cbd5e1;
}
/* Muted text lightened for dark bg */
.text-muted {
    color: #94a3b8 !important;
}
/* Links on dark bg */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
    color: #93c5fd;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover {
    color: #bfdbfe;
}

/* General */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Navbar */
.navbar-brand i {
    font-size: 1.5rem;
}

/* ── Cards — glassmorphism dark-surface design ─────────────────── */
.card {
    background: rgba(10, 20, 45, 0.72);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(99, 179, 255, 0.15);
    border-top: 2px solid rgba(99, 179, 255, 0.28);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: box-shadow 0.18s ease, transform 0.15s ease;
}
.card:hover {
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 179, 255, 0.15);
    transform: translateY(-1px);
}
@media (pointer: coarse) {
    .card {
        backdrop-filter: blur(8px) saturate(140%);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
    }
}

/* Headings and text inside cards inherit the global dark-bg palette */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 {
    color: #ffffff !important;
}
.card .text-muted {
    color: #94a3b8 !important;
}
.card a:not(.btn) {
    color: #93c5fd;
}
.card a:not(.btn):hover {
    color: #bfdbfe;
}

/* Card header */
.card-header {
    background-color: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 500;
}

/* Form controls inside cards */
.card .form-control,
.card .form-select {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}
.card .form-control::placeholder {
    color: #64748b;
}
.card .form-control:focus,
.card .form-select:focus {
    background-color: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(99, 179, 255, 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 179, 255, 0.18) !important;
}

/* Native <select> option list — browsers render the open dropdown using OS
   chrome. The .form-select sets a light text colour that gets inherited into
   the options, but the option background stays browser-default white, giving
   white-on-white. Force a dark surface + light text on the options themselves. */
.form-select option,
select option {
    background-color: #0d2240;
    color: #e8edf5;
}
.form-select option:checked,
.form-select option:hover,
select option:checked,
select option:hover {
    background-color: #1e3a6f;
    color: #ffffff;
}
/* Firefox uses a separate CSS variable for option hover; ensure it's dark too. */
.form-select optgroup,
select optgroup {
    background-color: #0d2240;
    color: #94a3b8;
}

/* Tables — dark-theme defaults (Bootstrap 5.3 sets --bs-table-color from
   var(--bs-emphasis-color) which resolves dark; the per-cell rule wins over
   any plain `color:` on .table, so we must set the CSS variable directly). */
.table {
    --bs-table-color: #e2e8f0;
    --bs-table-color-type: #e2e8f0;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
    --bs-table-striped-color: #e2e8f0;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: rgba(99, 179, 255, 0.08);
    --bs-table-active-color: #ffffff;
    --bs-table-active-bg: rgba(99, 179, 255, 0.12);
    color: #e2e8f0;
}
.table > thead {
    --bs-table-color: #cbd5e1;
    --bs-table-color-type: #cbd5e1;
    color: #cbd5e1;
}
.table > :not(caption) > * > * {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Bootstrap contextual thead variant — legibility on dark bg */
.table-light,
.table > thead.table-light,
.table-light > th,
.table-light > td {
    --bs-table-color: #cbd5e1;
    --bs-table-color-type: #cbd5e1;
    --bs-table-bg: rgba(255, 255, 255, 0.04);
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1 !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Row-highlight variants — keep enough contrast that text stays readable */
.table-danger,
.table-danger > th,
.table-danger > td {
    --bs-table-color: #fee2e2;
    --bs-table-color-type: #fee2e2;
    color: #fee2e2 !important;
    background-color: rgba(220, 53, 69, 0.18) !important;
}
.table-warning,
.table-warning > th,
.table-warning > td {
    --bs-table-color: #fef3c7;
    --bs-table-color-type: #fef3c7;
    color: #fef3c7 !important;
    background-color: rgba(255, 193, 7, 0.14) !important;
}
.table-success,
.table-success > th,
.table-success > td {
    --bs-table-color: #d1fae5;
    --bs-table-color-type: #d1fae5;
    color: #d1fae5 !important;
    background-color: rgba(25, 135, 84, 0.15) !important;
}

/* Tables inside cards (finer border colour) */
.card .table th {
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.1);
}
.card .table td {
    border-color: rgba(255, 255, 255, 0.06);
}

/* List-group items inside cards */
.card .list-group-item,
.list-group-item {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    --bs-list-group-color: #e2e8f0;
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: rgba(255, 255, 255, 0.08);
}
.card .list-group-item .text-muted,
.list-group-item .text-muted,
.card .list-group-item small,
.list-group-item small {
    color: #94a3b8 !important;
}

/* Coloured stat cards keep their own bg */
.card.bg-primary .card-footer,
.card.bg-success .card-footer,
.card.bg-info .card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Tables */
.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Badges */
.badge {
    font-weight: 500;
}

/* List groups */
.list-group-item {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child {
    border-top: none;
}

.list-group-item:last-child {
    border-bottom: none;
}

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* Buttons */
.btn {
    font-weight: 500;
}

/* Profile avatar placeholder */
.bg-primary.rounded-circle {
    font-weight: 600;
}

/* Messages/Alerts */
.messages .alert {
    margin-bottom: 0.5rem;
}

.messages .alert:last-child {
    margin-bottom: 1rem;
}

/* Breadcrumbs */
.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
}

/* Footer */
footer {
    margin-top: auto;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }

    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
    }
}

/* Safe-area insets — notched iPhones (X, 11, 12+, Dynamic Island) */
#navToggle {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
}
.quick-feedback-btn {
    bottom: max(84px, calc(84px + env(safe-area-inset-bottom)));
    right: max(20px, calc(20px + env(safe-area-inset-right)));
}
.message-notification-badge {
    bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
    right: max(20px, calc(20px + env(safe-area-inset-right)));
}

/* Dropdown menu styling */
.dropdown-menu {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: none;
}

.dropdown-item:active {
    background-color: var(--bs-primary);
}

/* Tag badges */
.badge a {
    text-decoration: none;
}

.badge a:hover {
    opacity: 0.8;
}

/* ── Animated background orbs ─────────────────────────────────── */
.bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.bg-orb-1 {
    width: 65vw; height: 65vw;
    background: radial-gradient(circle, rgba(99, 179, 255, 0.32) 0%, transparent 70%);
    top: -15%; left: -15%;
    animation: orb-drift 22s ease-in-out infinite alternate;
}
.bg-orb-2 {
    width: 55vw; height: 55vw;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.26) 0%, transparent 70%);
    bottom: -10%; right: -15%;
    animation: orb-drift-b 28s ease-in-out infinite alternate;
}
.bg-orb-3 {
    width: 45vw; height: 45vw;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, transparent 70%);
    top: 30%; left: 55%;
    animation: orb-drift-c 18s ease-in-out infinite alternate;
    animation-delay: -9s;
}
@keyframes orb-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(10vw, 8vh, 0) scale(1.08); }
}
@keyframes orb-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-8vw, -6vh, 0) scale(1.05); }
}
@keyframes orb-drift-c {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-5vw, 10vh, 0) scale(0.95); }
}

/* ── Scroll fade-in ───────────────────────────────────────────── */
.fade-in-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in-up.is-visible {
    opacity: 1;
    transform: none;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up { animation: none; transition: none; opacity: 1; transform: none; }
    .bg-orb { animation: none; }
}

/* ── Colour accents ───────────────────────────────────────────── */
.text-purple  { color: var(--clr-purple)  !important; }
.text-amber   { color: var(--clr-amber)   !important; }
.text-emerald { color: var(--clr-emerald) !important; }

/* Revival clip and film cards
   --------------------------------------------------------------------
   The tick box sits over a still that can be replaced by a video or an
   embedded player. Both of those are positioned, so without an explicit
   layer the player paints over the tick box and the card can no longer be
   selected while it is playing. */
.pick-box {
    position: absolute;
    z-index: 3;
    margin: 0;
    cursor: pointer;
}
/* Every box needs to be findable against a moving picture, so it carries a
   shadow whatever its state. */
.pick-box .form-check-input {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
/* UNCHECKED only. Setting the background for both states overrode
   Bootstrap's checked colour -- same specificity, loaded later -- which left
   a white tick drawn on a white box, so a selected card looked unselected. */
.pick-box .form-check-input:not(:checked) {
    background-color: rgba(255, 255, 255, .85);
    border-color: rgba(0, 0, 0, .5);
}
/* Checked: stated outright rather than inherited, so no later rule can
   quietly turn the tick invisible again. */
.pick-box .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0b5ed7;
}
/* The play button has to stay reachable for the same reason. */
.clip-play, .embed-play { z-index: 3; }

/* Scrub bar across a single clip
   --------------------------------------------------------------------
   The browser's own controls scrub the whole film. For a twenty-second
   clip inside a forty-minute reel that is a sliver a few pixels wide, so
   finding a moment within the clip is impossible. This bar spans the clip
   and nothing else. */
.clip-scrub {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1.6rem; background: rgba(0, 0, 0, .55);
    cursor: pointer; z-index: 4; user-select: none;
}
.clip-scrub-fill {
    position: absolute; inset: 0 auto 0 0; width: 0;
    background: rgba(13, 110, 253, .75);
}
.clip-scrub-time {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    font-size: .7rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    pointer-events: none; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Card-printing colour schemes (media centre print form)
   A swatch you can see beats a dropdown of colour names: the point of
   the schemes is that the four inks were chosen together, and only a
   visible chip row shows that.
   ------------------------------------------------------------------ */
.scheme-group-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(232, 237, 245, .55);
    margin: .65rem 0 .35rem;
}

.scheme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
}

.scheme-tile {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

/* The radio itself is hidden but still focusable, so the tile keeps
   keyboard and screen-reader behaviour; the ring below is drawn from
   :focus-visible on it. */
.scheme-tile > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.scheme-tile__body {
    display: block;
    height: 100%;
    padding: .55rem .6rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
    transition: border-color .15s ease, background .15s ease;
}

.scheme-tile:hover .scheme-tile__body {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .07);
}

.scheme-tile > input:checked + .scheme-tile__body {
    border-color: #4a9eff;
    background: rgba(74, 158, 255, .12);
    box-shadow: inset 0 0 0 1px #4a9eff;
}

.scheme-tile > input:focus-visible + .scheme-tile__body {
    outline: 2px solid #4a9eff;
    outline-offset: 2px;
}

.scheme-chips {
    display: flex;
    gap: 3px;
    margin-bottom: .4rem;
}

/* A hairline round each chip so a cream or ice ink is still a visible
   swatch and not a hole in the tile. */
.scheme-chip {
    display: block;
    width: 100%;
    height: 18px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}

/* The verse ink is the colour that matters most, so it gets the room. */
.scheme-chips .scheme-chip:first-child { flex: 2 1 0; }
.scheme-chips .scheme-chip { flex: 1 1 0; }

.scheme-name {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.25;
}

.scheme-note {
    display: block;
    font-size: .68rem;
    line-height: 1.3;
    color: rgba(232, 237, 245, .6);
    margin-top: .15rem;
}

/* The hand-picked colour controls, while ticked schemes are driving the
   card. Dimmed rather than hidden: taking them off the page made the
   randomise options look as though they had been removed. */
.scheme-overridden {
    opacity: .45;
}

.scheme-group-all {
    font-size: .72rem;
    text-decoration: none;
}

/* ── Rich-text editor (Quill) on a dark page ──────────────────────────────
   The editor is white because what it is editing is an EMAIL, and emails are
   white. The site's own light body colour cascaded into it, so the operator
   was typing light text on white paper and could not see a word of it.
   Reported 2026-10-09.

   Used by the campaign editor, the template editor and the vault note form —
   so the fix lives here rather than in any one of them. */
.ql-container {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.ql-editor {
    background: #ffffff;
    font-family: 'Segoe UI', Arial, sans-serif;
    min-height: 320px;
}
/* Setting the colour on the container alone is NOT enough, and that is why
   this looked white-on-white at first: the dark theme has
   `p, li, label { color: #cbd5e1 }`, which matches those elements INSIDE the
   editor directly — and a rule that matches an element beats a colour it
   would otherwise inherit from an ancestor, however specific that ancestor
   is. So every text element in here is named. */
.ql-editor,
.ql-editor p,
.ql-editor li,
.ql-editor span,
.ql-editor div,
.ql-editor td,
.ql-editor th,
.ql-editor blockquote,
.ql-editor strong,
.ql-editor em,
.ql-editor u {
    color: #1f2937 !important;   /* what the email will actually look like */
}
.ql-editor.ql-blank::before {
    color: #94a3b8;           /* the placeholder, legible on white */
    font-style: normal;
}
/* Headings and links inside the editor, so WYSIWYG means what it says. */
.ql-editor h1, .ql-editor h2, .ql-editor h3 { color: #0f3460 !important; }
/* `.card a:not(.btn)` is more specific than a bare `.ql-editor a`, so this
   has to say so outright or links in the editor come out dark-theme blue. */
.ql-editor a { color: #0f3460 !important; }
.ql-editor strong { color: inherit; }

/* A picture never widens the page it is in. The clip-art rules are 777px
   wide and the editor column is narrower than that, so an inserted rule
   pushed the layout out to twice its width. */
.ql-editor img {
    max-width: 100%;
    height: auto;
}
/* The plain divider, drawn as it will be in the email. */
.ql-editor hr {
    border: 0;
    border-top: 1px solid #d9dee6;
    margin: 22px 0;
}

/* The toolbar sits on the dark page, so it keeps dark-page colours. */
.ql-toolbar {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.ql-toolbar .ql-stroke { stroke: #cbd5e1; }
.ql-toolbar .ql-fill { fill: #cbd5e1; }
.ql-toolbar .ql-picker-label { color: #cbd5e1; }
.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke { stroke: #93c5fd; }
.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill { fill: #93c5fd; }
/* The dropdown panel, which Quill renders on a white sheet. */
.ql-toolbar .ql-picker-options { background: #0d2240; border-color: rgba(255,255,255,.15); }
.ql-toolbar .ql-picker-item { color: #e8edf5; }