/*
 * 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.
 */

/* ---- Tabler filled-variant icons ----------------------------------------
 * The bundled tabler-icons.min.css ships outline glyphs only. For specific
 * places where a filled glyph reads better (active toggles, accent flags),
 * we register the relevant filled glyphs here against a separate font-face
 * so both frontend and backend can use them without loading the full
 * tabler-icons-filled stylesheet.
 *
 * Add a new entry by looking up the glyph code in
 * libs/tabler/css/tabler-icons-filled.min.css and copying the .ti-NAME:before
 * { content: "\\xxxx" } rule.
 * ----------------------------------------------------------------------- */
@font-face {
  font-family: "tabler-icons-filled";
  font-style: normal;
  font-weight: 400;
  src: url("/libs/tabler/css/fonts/tabler-icons-filled.woff2") format("woff2"),
       url("/libs/tabler/css/fonts/tabler-icons-filled.woff") format("woff"),
       url("/libs/tabler/css/fonts/tabler-icons-filled.ttf") format("truetype");
}
.ti-star-filled:before {
  font-family: "tabler-icons-filled" !important;
  content: "\f6a6";
}
.ti-lock-filled:before {
  font-family: "tabler-icons-filled" !important;
  content: "\fe15";
}
.ti-alert-triangle-filled:before {
  font-family: "tabler-icons-filled" !important;
  content: "\f6f0";
}
.ti-heart-filled:before {
  font-family: "tabler-icons-filled" !important;
  content: "\f67c";
}

/* ---- 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; }

/* Touch-locked map hint badge — applied by window.feLeafletTouchPan on
   coarse-pointer devices so a single-finger swipe scrolls the page
   instead of dragging the map. Two-finger pan stays enabled. Used for
   every Leaflet map in the app (frontend + backend). */
.fe-map-touch-locked,
.fe-obs-map--touch-locked { position: relative; }
.fe-map-touch-locked::after,
.fe-obs-map--touch-locked::after {
    content: attr(data-touch-hint);
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.78rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 500;
}

.strong, b, strong {
    font-weight: 900;
}