/* Cairn — custom styles on top of Bootstrap 5.3. */

:root {
    /* Business palette mirrors App\Enum\TrailCondition::color() —
       used only for static UI accents; never as the source of truth. */
    --cairn-green: #22c55e;
    --cairn-orange: #f97316;
    --cairn-red: #ef4444;
}

/* Required field marker: Symfony adds the .required class on the <label>. */
label.required::after {
    content: ' *';
    color: var(--bs-danger);
    font-weight: 700;
}
/* …but NOT on Bootstrap's per-radio/checkbox labels of an expanded choice
   field: they're rendered once per option and would print a lone "*" on each
   line (the group already shows a single "*" on its heading). */
.form-check-label.required::after {
    content: none;
}

/* Sticky footer layout. */
html,
body {
    height: 100%;
}

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

main {
    flex: 1 0 auto;
}

/* Leaflet map — needs an explicit height or the container collapses to 0. */
.cairn-map {
    height: 70vh;
    min-height: 360px;
    width: 100%;
    border-radius: 0.5rem;
}

/* Keep Leaflet panes below Bootstrap's navbar / dropdowns / modals. */
.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
    z-index: 400;
}

/* --- Auth pages (login / register) --------------------------------------- */

.cairn-auth-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
}

.cairn-auth-card {
    width: 100%;
    max-width: 27rem;
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.12);
}

.cairn-auth-header {
    background: linear-gradient(135deg, #15803d 0%, #0e7490 100%);
    color: #fff;
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
}

.cairn-auth-header .cairn-auth-logo {
    font-size: 2rem;
    line-height: 1;
}

/* Bigger, comfier inputs on auth forms. */
.cairn-auth-card .form-control {
    padding: 0.6rem 0.85rem;
}

/* Input with a leading icon (input-group look without extra markup). */
.cairn-auth-card .input-group-text {
    background: var(--bs-tertiary-bg);
    border-right: 0;
    color: var(--bs-secondary-color);
}
.cairn-auth-card .input-group .form-control {
    border-left: 0;
}

/* Large preview modal: 90% of the viewport, both dimensions. */
.cairn-modal-xl {
    width: 90vw;
    max-width: 90vw;
    height: 90vh;
    margin: 5vh auto;
}
.cairn-modal-xl .modal-content {
    height: 100%;
}
/* The map fills whatever vertical space the header/footer leave. */
.cairn-modal-xl .modal-body {
    display: flex;
    flex-direction: column;
}
.cairn-modal-xl .modal-body [data-controller="preview-map"] {
    flex: 1 1 auto;
    min-height: 0;
}
.cairn-modal-xl .cairn-map {
    height: 100%;
    min-height: 0;
}

/* "Vous êtes ici" SVG marker — no default divIcon chrome. */
.cairn-here-icon {
    background: none;
    border: none;
}

/* --- Trail submission form ------------------------------------------------ */

/* Clickable condition options (radio cards). */
.cairn-condition-option {
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.cairn-condition-option:hover {
    background-color: var(--bs-tertiary-bg);
}
.cairn-condition-option:has(input:checked) {
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-tertiary-bg);
}

/* Small coloured pill mirroring TrailCondition::color(). */
.cairn-state-pill {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* The draw map sits inside a card body — a touch shorter than the public map. */
.card .cairn-map {
    height: 60vh;
    min-height: 320px;
    border-radius: 0.375rem;
}

/* Draggable trail vertex (divIcon). */
.cairn-draw-point-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #1d4ed8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: grab;
}
.cairn-draw-point-icon:active {
    cursor: grabbing;
}

/* Start / end / loop badges. Colours are intentionally blue/violet/teal —
   OUTSIDE the green/orange/red business palette (TrailCondition::color()) — so
   a "Départ" marker is never mistaken for a condition. */
.cairn-draw-endpoint {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    cursor: grab;
}
.cairn-draw-endpoint:active {
    cursor: grabbing;
}
.cairn-draw-endpoint-start {
    background: #1d4ed8; /* blue */
}
.cairn-draw-endpoint-end {
    background: #7c3aed; /* violet */
}
.cairn-draw-endpoint-loop {
    background: #0f766e; /* teal */
    font-size: 0.6rem;
}
.cairn-draw-endpoint-turn {
    background: #475569; /* slate — turnaround (demi-tour) */
    font-size: 0.85rem;
}

/* Right-click context menu on points / the trail line. */
.cairn-ctx-menu {
    position: absolute;
    z-index: 1000; /* above Leaflet panes (400) */
    min-width: 12rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.25rem;
    overflow: hidden;
}
.cairn-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    cursor: pointer;
}
.cairn-ctx-item:hover {
    background: var(--bs-tertiary-bg);
}
.cairn-ctx-dot {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Section condition + comment popover. */
.cairn-ctx-form {
    width: 16rem;
    padding: 0.6rem;
}
.cairn-ctx-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Make the trail line easier to grab for the drag-to-insert gesture. */
.leaflet-interactive {
    cursor: pointer;
}

/* --- Landing page --------------------------------------------------------- */

/* Hero: a calm outdoor green→teal gradient evoking trails & mountains. */
.cairn-hero {
    background: linear-gradient(135deg, #15803d 0%, #0f766e 60%, #0e7490 100%);
}

/* Coloured business-state dot used on the landing cards. */
.cairn-state-dot {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.05);
}

/* Numbered "how it works" step badge. */
.cairn-step {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #15803d, #0e7490);
}

/* Subtle lift on the landing feature cards. */
.card.shadow-sm {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card.shadow-sm:hover {
    transform: translateY(-3px);
}