/*
 * Shared styles for both frontend and backend.
 * Add global design tokens (colors, fonts) or shared components here
 * so they stay in sync across both UIs.
 */

/* ---- Tone palette (shared subset) ----------------------------------------
 * Mirrors the frontend tone tokens. Kept here so the backend can reuse the
 * same soft tinted surfaces (alerts, badges) without loading frontend.css.
 * ----------------------------------------------------------------------- */
:root {
    --fe-tone-sage-rgb:       143,168,117;
    --fe-tone-sage-dark:      #5d7a48;
    --fe-tone-copper-rgb:     192,133,82;
    --fe-tone-copper-dark:    #8a4f25;
    --fe-tone-olive-rgb:      122,140,61;
    --fe-tone-olive-dark:     #536127;
    --fe-tone-mustard-rgb:    212,168,67;
    --fe-tone-mustard-dark:   #9a7820;
}

/* ---- Soft alert helper ---------------------------------------------------
 * Replaces Tabler's harsh .alert-important .alert-success / .alert-danger.
 * Uses the shared tone tokens for a muted, brand-consistent look. The dark
 * theme variants keep contrast legible without the neon green/red feel.
 * ----------------------------------------------------------------------- */
.s-alert {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    font-weight: 500;
}
.s-alert .s-alert-icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
}
.s-alert-success {
    background: rgba(var(--fe-tone-sage-rgb), 0.18);
    border-color: rgba(var(--fe-tone-sage-rgb), 0.35);
    color: var(--fe-tone-sage-dark);
}
.s-alert-danger {
    background: rgba(var(--fe-tone-copper-rgb), 0.18);
    border-color: rgba(var(--fe-tone-copper-rgb), 0.40);
    color: var(--fe-tone-copper-dark);
}
.s-alert-info {
    background: rgba(var(--fe-tone-olive-rgb), 0.16);
    border-color: rgba(var(--fe-tone-olive-rgb), 0.35);
    color: var(--fe-tone-olive-dark);
}
.s-alert-warning {
    background: rgba(var(--fe-tone-mustard-rgb), 0.20);
    border-color: rgba(var(--fe-tone-mustard-rgb), 0.45);
    color: var(--fe-tone-mustard-dark);
}
[data-theme="dark"] .s-alert-success,
[data-bs-theme="dark"] .s-alert-success {
    background: rgba(var(--fe-tone-sage-rgb), 0.22);
    color: #cfe0b8;
    border-color: rgba(var(--fe-tone-sage-rgb), 0.45);
}
[data-theme="dark"] .s-alert-danger,
[data-bs-theme="dark"] .s-alert-danger {
    background: rgba(var(--fe-tone-copper-rgb), 0.22);
    color: #e8c4a4;
    border-color: rgba(var(--fe-tone-copper-rgb), 0.45);
}
[data-theme="dark"] .s-alert-info,
[data-bs-theme="dark"] .s-alert-info {
    background: rgba(var(--fe-tone-olive-rgb), 0.26);
    color: #d4de9f;
    border-color: rgba(var(--fe-tone-olive-rgb), 0.50);
}
[data-theme="dark"] .s-alert-warning,
[data-bs-theme="dark"] .s-alert-warning {
    background: rgba(var(--fe-tone-mustard-rgb), 0.26);
    color: #f0d88a;
    border-color: rgba(var(--fe-tone-mustard-rgb), 0.50);
}

/* Leaflet "Use my location" custom control */
.leaflet-control-geolocate {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    background: #fff;
}
.leaflet-control-geolocate:hover { color: #000; background: #f4f4f4; }
.leaflet-control-geolocate-loading { opacity: 0.6; pointer-events: none; }