/* PiratesBargain — small CSS-only touches that DMC can't express cleanly. */

/* ---------- Body baselines ---------- */
body {
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide whichever theme icon doesn't match the active scheme. */
html[data-mantine-color-scheme="light"] #theme-icon-moon,
html[data-mantine-color-scheme="dark"]  #theme-icon-sun {
    display: none;
}

/* ---------- Live indicator pulse ---------- */
.sails-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mantine-color-tidal-5);
    box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.6);
    animation: sails-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes sails-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(42, 157, 143, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(42, 157, 143, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(42, 157, 143, 0);   }
}

/* ---------- Agent status chip: subtle tidal glow when online ---------- */
.sails-agent-status--online {
    box-shadow: 0 0 0 1px var(--mantine-color-tidal-3), 0 0 16px -4px var(--mantine-color-tidal-5);
}

/* ---------- 404 ship animation ---------- */
.sails-404-ship {
    animation: sails-bob 4s ease-in-out infinite, sails-drift 28s linear infinite;
    transform-origin: center;
}

@keyframes sails-bob {
    0%, 100% { transform: translateY(0)    rotate(-1deg); }
    50%      { transform: translateY(-8px) rotate(1deg);  }
}

@keyframes sails-drift {
    from { margin-left: -10%; }
    to   { margin-left: 110%; }
}

/* ---------- Monospace meta lines ---------- */
.sails-meta {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--mantine-color-dimmed);
}

/* ---------- Reduce motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
    .sails-live-dot,
    .sails-404-ship,
    .sails-arc-segment--current::after {
        animation: none !important;
    }
}

/* ============================================================
 * UNLOCKS PAGE — the ship's manifest
 * ============================================================ */

/* --- Status line ruled like a telegram header --- */
.sails-status-line {
    border-top: 1px solid var(--mantine-color-default-border);
    border-bottom: 1px solid var(--mantine-color-default-border);
    padding: 0.75rem 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
}

/* --- Arc ribbon — the memorable moment --- */
.sails-arc {
    display: grid;
    grid-template-columns: repeat(var(--chapters, 8), 1fr);
    gap: 6px;
    width: 100%;
}

.sails-arc-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.sails-arc-segment {
    height: 28px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    transition: transform 120ms ease-out;
}

.sails-arc-segment:hover {
    transform: translateY(-1px);
}

/* past legs — weathered brass with inset highlight */
.sails-arc-segment--complete {
    background: linear-gradient(
        180deg,
        var(--mantine-color-brass-5) 0%,
        var(--mantine-color-brass-7) 100%
    );
    border: 1px solid var(--mantine-color-brass-7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* current leg — tidal with pulsing border */
.sails-arc-segment--current {
    background: linear-gradient(
        180deg,
        var(--mantine-color-tidal-4) 0%,
        var(--mantine-color-tidal-6) 100%
    );
    border: 1px solid var(--mantine-color-tidal-7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.sails-arc-segment--current::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.4);
    animation: sails-arc-pulse 2.2s infinite ease-in-out;
}

@keyframes sails-arc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.45); opacity: 1; }
    50%      { box-shadow: 0 0 0 6px rgba(42, 157, 143, 0);   opacity: 0.8; }
}

/* pending legs — hollow, dashed, uncharted */
.sails-arc-segment--pending {
    background: transparent;
    border: 1.5px dashed var(--mantine-color-default-border);
    opacity: 0.55;
}

html[data-mantine-color-scheme="dark"] .sails-arc-segment--pending {
    border-color: var(--mantine-color-dark-4);
    opacity: 0.65;
}

.sails-arc-label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--mantine-color-dimmed);
    white-space: nowrap;
}

.sails-arc-cell--complete .sails-arc-label {
    color: var(--mantine-color-brass-7);
}
html[data-mantine-color-scheme="dark"] .sails-arc-cell--complete .sails-arc-label {
    color: var(--mantine-color-brass-4);
}
.sails-arc-cell--current .sails-arc-label {
    color: var(--mantine-color-tidal-7);
    font-weight: 700;
}
html[data-mantine-color-scheme="dark"] .sails-arc-cell--current .sails-arc-label {
    color: var(--mantine-color-tidal-4);
}

/* --- Up-next panel: hollow / dashed / uncharted --- */
.sails-upnext {
    border: 1.5px dashed var(--mantine-color-default-border) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-mantine-color-scheme="dark"] .sails-upnext {
    border-color: var(--mantine-color-dark-4) !important;
}

/* --- Manifest panel background: navigation-chart hairline grid --- */
.sails-manifest {
    position: relative;
    background-image:
        linear-gradient(var(--mantine-color-default-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--mantine-color-default-border) 1px, transparent 1px);
    background-size: 48px 48px, 48px 48px;
    background-position: -1px -1px;
    border-top: 1px solid var(--mantine-color-brass-6);
    border-bottom: 1px solid var(--mantine-color-brass-6);
}

html[data-mantine-color-scheme="dark"] .sails-manifest {
    background-image:
        linear-gradient(rgba(201, 169, 97, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 169, 97, 0.08) 1px, transparent 1px);
    border-color: var(--mantine-color-brass-7);
}

.sails-manifest::before,
.sails-manifest::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--mantine-color-brass-4);
    opacity: 0.4;
}
.sails-manifest::before { top: 3px; }
.sails-manifest::after  { bottom: 3px; }

/* --- Manifest rows --- */
.sails-manifest-entry {
    position: relative;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--mantine-color-default-border);
    transition: background-color 120ms ease-out;
}

.sails-manifest-entry:last-child {
    border-bottom: none;
}

.sails-manifest-entry--current {
    background-color: color-mix(in srgb, var(--mantine-color-tidal-0) 55%, transparent);
    border-left: 3px solid var(--mantine-color-tidal-6);
    padding-left: 1.5rem;
}

html[data-mantine-color-scheme="dark"] .sails-manifest-entry--current {
    background-color: color-mix(in srgb, var(--mantine-color-tidal-9) 25%, transparent);
}

.sails-manifest-entry--pending {
    opacity: 0.7;
}

.sails-manifest-entry--pending:hover {
    opacity: 1;
}

/* --- Big monospace chapter codes in the manifest gutter --- */
.sails-manifest-code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}

.sails-manifest-code--complete { color: var(--mantine-color-brass-7); }
html[data-mantine-color-scheme="dark"] .sails-manifest-code--complete { color: var(--mantine-color-brass-4); }
.sails-manifest-code--current  { color: var(--mantine-color-tidal-7); }
html[data-mantine-color-scheme="dark"] .sails-manifest-code--current  { color: var(--mantine-color-tidal-4); }
.sails-manifest-code--pending  { color: var(--mantine-color-dimmed); }

/* --- Field labels: small-caps monospace --- */
.sails-field-label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mantine-color-dimmed);
}

/* --- Counter readout (e.g. 32/50) --- */
.sails-counter {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Thin brass rule used in hero/between sections --- */
.sails-rule-brass {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--mantine-color-brass-5) 15%,
        var(--mantine-color-brass-5) 85%,
        transparent 100%
    );
    opacity: 0.5;
}

/* ============================================================
 * GRAND EXCHANGE — /shop slot grid
 * ============================================================ */

.sails-agent-strip {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mantine-color-brass-0) 60%, var(--mantine-color-body)) 0%,
        var(--mantine-color-body) 100%
    );
}
html[data-mantine-color-scheme="dark"] .sails-agent-strip {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mantine-color-brass-9) 40%, var(--mantine-color-body)) 0%,
        var(--mantine-color-body) 100%
    );
}

/* --- Slot card base --- */
.sails-slot-card {
    min-height: 320px;
    transition: transform 140ms ease-out, box-shadow 140ms ease-out,
                border-color 140ms ease-out;
    cursor: pointer;
}
.sails-slot-card--admin {
    cursor: default;
}

.sails-slot-card:hover {
    transform: translateY(-2px);
    border-color: var(--mantine-color-brass-5);
    box-shadow: 0 4px 14px rgba(11, 22, 40, 0.08);
}
.sails-slot-card--admin:hover {
    transform: none;
}

.sails-slot-card--empty {
    border-style: dashed !important;
    border-color: var(--mantine-color-brass-4) !important;
    background: color-mix(in srgb, var(--mantine-color-brass-0) 25%, transparent) !important;
    opacity: 0.85;
}
html[data-mantine-color-scheme="dark"] .sails-slot-card--empty {
    background: color-mix(in srgb, var(--mantine-color-brass-9) 15%, transparent) !important;
    border-color: var(--mantine-color-brass-7) !important;
}

.sails-slot-card--sold {
    border-color: var(--mantine-color-signal-4) !important;
}
html[data-mantine-color-scheme="dark"] .sails-slot-card--sold {
    border-color: var(--mantine-color-signal-6) !important;
}

/* --- Image plate --- */
.sails-slot-plate-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    border-radius: var(--mantine-radius-sm);
}

.sails-slot-plate {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--mantine-color-brass-1) 80%, transparent) 0%,
            color-mix(in srgb, var(--mantine-color-brass-0) 60%, transparent) 100%
        );
    border: 1px solid var(--mantine-color-brass-3);
    border-radius: var(--mantine-radius-sm);
    overflow: hidden;
}
html[data-mantine-color-scheme="dark"] .sails-slot-plate {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--mantine-color-brass-9) 50%, transparent) 0%,
            color-mix(in srgb, var(--mantine-color-brass-8) 30%, transparent) 100%
        );
    border-color: var(--mantine-color-brass-7);
}

.sails-slot-plate--empty {
    border-style: dashed;
}

/* --- SOLD diagonal stamp --- */
.sails-slot-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--mantine-color-signal-7);
    border: 3px solid var(--mantine-color-signal-7);
    padding: 4px 16px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mantine-color-body) 70%, transparent);
    pointer-events: none;
    text-shadow: 0 1px 0 var(--mantine-color-body);
}

html[data-mantine-color-scheme="dark"] .sails-slot-stamp {
    color: var(--mantine-color-signal-3);
    border-color: var(--mantine-color-signal-3);
}

/* ---------- Hero gradient overlay wash (paper texture cue) ---------- */
.sails-hero-paper {
    background-image:
        radial-gradient(ellipse at top left, rgba(201, 169, 97, 0.06), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(42, 157, 143, 0.04), transparent 55%);
}
html[data-mantine-color-scheme="dark"] .sails-hero-paper {
    background-image:
        radial-gradient(ellipse at top left, rgba(201, 169, 97, 0.1), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(42, 157, 143, 0.08), transparent 55%);
}

/* ---------- Heartbeat pulse (maintainer dashboard) -------------------- */
/*
   Three nested rings. Outer ring carries the slow "breath"; middle ring
   echoes on a half-offset so the overall rhythm feels alive. Core is a
   steady disc with an icon. Colours are wired to theme tokens via
   --hb-color-* custom props set inline, so the phase-class only needs
   to change the animation speed + add accents.
*/
.hb-pulse {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hb-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity, box-shadow;
}
.hb-pulse-ring--outer {
    width: 100%;
    height: 100%;
    background: var(--hb-color-1);
    opacity: 0.35;
    animation: hb-breathe 3.2s ease-in-out infinite;
}
.hb-pulse-ring--mid {
    width: 72%;
    height: 72%;
    background: var(--hb-color-2);
    opacity: 0.55;
    animation: hb-breathe 3.2s ease-in-out infinite;
    animation-delay: -1.1s;
}
.hb-pulse-ring--core {
    width: 46%;
    height: 46%;
    background: var(--mantine-color-body);
    border: 2px solid var(--hb-color-3);
    box-shadow: 0 0 0 4px var(--hb-color-1), 0 0 24px -4px var(--hb-color-3);
}

@keyframes hb-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.28; }
    50%      { transform: translate(-50%, -50%) scale(1.00); opacity: 0.55; }
}

.hb-pulse--working .hb-pulse-ring--outer,
.hb-pulse--working .hb-pulse-ring--mid {
    animation-duration: 0.9s;
}
.hb-pulse--working .hb-pulse-ring--core {
    animation: hb-core-glow 0.9s ease-in-out infinite alternate;
}
@keyframes hb-core-glow {
    from { box-shadow: 0 0 0 4px var(--hb-color-1), 0 0 18px -4px var(--hb-color-3); }
    to   { box-shadow: 0 0 0 6px var(--hb-color-2), 0 0 36px -2px var(--hb-color-3); }
}

.hb-pulse--error .hb-pulse-ring--outer,
.hb-pulse--error .hb-pulse-ring--mid {
    animation: hb-panic 0.55s ease-in-out infinite;
}
@keyframes hb-panic {
    0%, 40%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.55; }
    20%, 60%      { transform: translate(-50%, -50%) scale(1.05); opacity: 0.9;  }
}

.hb-pulse--cancelled .hb-pulse-ring--outer,
.hb-pulse--cancelled .hb-pulse-ring--mid,
.hb-pulse--scheduled .hb-pulse-ring--outer,
.hb-pulse--scheduled .hb-pulse-ring--mid {
    animation-duration: 4.2s;
    animation-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .hb-pulse-ring--outer,
    .hb-pulse-ring--mid,
    .hb-pulse-ring--core {
        animation: none !important;
    }
}

/* ---------- FullCalendar + maintainer scaffolding -------------------- */
.sails-fullcalendar .fc {
    --fc-border-color: var(--mantine-color-default-border);
    --fc-page-bg-color: var(--mantine-color-body);
    --fc-neutral-bg-color: var(--mantine-color-default);
    --fc-list-event-hover-bg-color: var(--mantine-color-default-hover);
    --fc-today-bg-color: rgba(42, 157, 143, 0.08);
    font-family: "Inter", sans-serif;
}
.sails-fullcalendar .fc-toolbar-title {
    font-family: "Fraunces", serif;
    font-size: 1.25rem;
    font-weight: 600;
}
.sails-fullcalendar .fc-button {
    background: var(--mantine-color-default);
    border-color: var(--mantine-color-default-border);
    color: var(--mantine-color-text);
    text-transform: capitalize;
    font-size: 0.8rem;
    box-shadow: none;
}
.sails-fullcalendar .fc-button:hover {
    background: var(--mantine-color-default-hover);
}
.sails-fullcalendar .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--mantine-color-harbor-6);
    border-color: var(--mantine-color-harbor-7);
    color: white;
}
.sails-fullcalendar .fc-event {
    border-radius: 3px;
    font-size: 0.75rem;
    padding: 1px 3px;
}
.sails-fullcalendar .fc-list-event:hover td {
    background: var(--mantine-color-default-hover);
}
html[data-mantine-color-scheme="dark"] .sails-fullcalendar .fc {
    --fc-today-bg-color: rgba(42, 157, 143, 0.14);
}

/* ============================================================
 * MUI X Charts — theme alignment for axes, legends, tooltips
 * (dash-mui-charts doesn't ship theme-aware tokens, so the
 *  chart SVG inherits raw Material defaults which are too light
 *  against dark backgrounds. These overrides use Mantine tokens
 *  so everything tracks the site's color-scheme toggle.)
 * ============================================================ */

/* Axis tick labels + axis title */
.MuiChartsAxis-tickLabel,
.MuiChartsAxis-tickLabel tspan,
.MuiChartsAxis-label,
.MuiChartsAxis-label tspan {
    fill: var(--mantine-color-text) !important;
}

/* Axis spine + tick marks */
.MuiChartsAxis-line,
.MuiChartsAxis-tick {
    stroke: var(--mantine-color-default-border) !important;
}

/* Grid lines */
.MuiChartsGrid-line {
    stroke: var(--mantine-color-default-border) !important;
    opacity: 0.55;
}

/* Legend (v8 uses HTML spans + SVG text depending on chart) */
.MuiChartsLegend-label,
.MuiChartsLabel-root {
    color: var(--mantine-color-text) !important;
}
.MuiChartsLegend-root text,
.MuiChartsLegend-series text,
.MuiChartsLegend-root tspan {
    fill: var(--mantine-color-text) !important;
}

/* Tooltip shell */
.MuiChartsTooltip-paper,
.MuiChartsTooltip-root .MuiPaper-root {
    background-color: var(--mantine-color-body) !important;
    color: var(--mantine-color-text) !important;
    border: 1px solid var(--mantine-color-default-border) !important;
    box-shadow: 0 6px 18px -4px rgba(11, 22, 40, 0.18) !important;
    font-family: "Inter", sans-serif !important;
}

/* Tooltip rows + heatmap header (table rendered as <th>/<td>) */
.MuiChartsTooltip-cell,
.MuiChartsTooltip-labelCell,
.MuiChartsTooltip-valueCell,
.MuiChartsTooltip-axisValueCell,
.MuiChartsTooltip-markCell,
.MuiChartsTooltip-table th,
.MuiChartsTooltip-table td,
.MuiChartsTooltip-header,
.MuiChartsTooltip-row,
.MuiChartsTooltip-paper * {
    color: var(--mantine-color-text) !important;
    background: transparent !important;
}
.MuiChartsTooltip-mark {
    border-color: var(--mantine-color-default-border) !important;
}

/* Reference-line + bar labels */
.MuiChartsReferenceLine-label {
    fill: var(--mantine-color-text) !important;
}
.MuiBarLabel-root {
    fill: var(--mantine-color-text) !important;
}

/* Toolbar buttons (Pro zoom toolbar) */
.MuiChartsToolbar-root button,
.MuiChartsToolbar-root svg {
    color: var(--mantine-color-text) !important;
    fill: var(--mantine-color-text) !important;
}

/* Zoom slider handle / range */
.MuiChartsZoomSlider-root,
.MuiSlider-root {
    color: var(--mantine-color-harbor-6) !important;
}

/* Dark-scheme contrast tune: tooltip needs more weight, grid fades further */
html[data-mantine-color-scheme="dark"] .MuiChartsTooltip-paper,
html[data-mantine-color-scheme="dark"] .MuiChartsTooltip-root .MuiPaper-root {
    background-color: var(--mantine-color-dark-6) !important;
    border-color: var(--mantine-color-dark-4) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6) !important;
}
html[data-mantine-color-scheme="dark"] .MuiChartsGrid-line {
    stroke: rgba(255, 255, 255, 0.08) !important;
}
html[data-mantine-color-scheme="dark"] .MuiChartsAxis-line,
html[data-mantine-color-scheme="dark"] .MuiChartsAxis-tick {
    stroke: rgba(255, 255, 255, 0.24) !important;
}

/* Heatmap legend (ColorLegend) */
.MuiChartsColorLegend-mark {
    stroke: var(--mantine-color-default-border) !important;
}
.MuiChartsColorLegend-tickLabel,
.MuiChartsColorLegend-label {
    fill: var(--mantine-color-text) !important;
}

/* Live trading — forecast band / alert label sanity in dark */
html[data-mantine-color-scheme="dark"] .MuiChartsLegend-root .MuiChartsLegend-mark {
    stroke: rgba(255, 255, 255, 0.2) !important;
}