:root {
  --perivallon-primary: #4B58A6;
  --perivallon-form-bg: #ffffff;
  --perivallon-form-border: #9AA1C2;
  --perivallon-form-input-bg: #F2F4F8;
  --perivallon-text: #1d2143;
  --perivallon-muted: #5f6e8d;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f3f6fc;
  color: var(--perivallon-text);
}

.leaflet-control-attribution {
  display: none !important;
}

/* ===== PAGE TITLE ROW + BRAND LOCKUP =====
   Shared by every page: the title sits left, the Perivallon.City logo right.
   See templates/includes/page-brand.html.twig. */

.perivallon-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-width: 0;
}

.perivallon-page-brand {
  height: 2rem;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  flex-shrink: 0;
  display: block;
}

/* Below 768px the mobile header already carries the logo, so drop this one
   instead of showing it twice. Matches the breakpoint in layout.css. */
@media (max-width: 768px) {
  .perivallon-page-brand {
    display: none;
  }
}

/* Suppress browser-native validation pseudo-class styling only */
input:valid,
input:invalid {
  box-shadow: none !important;
}

input::required,
input:required {
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus,
details:focus,
details > summary:focus,
details:focus-visible,
details > summary:focus-visible,
.form-text:focus,
.form-email:focus,
.form-password:focus,
.form-search:focus,
.form-url:focus,
.form-number:focus,
.form-textarea:focus,
.form-submit:focus,
.button:focus,
.button--primary:focus,
.form-item input:focus,
.form-item textarea:focus,
.form-item select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

.leaflet-container,
.leaflet-container:focus,
.leaflet-container:focus-visible,
.leaflet-marker-icon,
.leaflet-marker-icon:focus,
.leaflet-marker-icon:focus-visible,
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Login-specific styles moved to css/login.css */

/* ─────────────────────────────────────────────────────────────────────────
   Role-based UI hiding — administrators only.
   NOTE: this is VISUAL hiding only, not access control; the routes remain
   reachable by direct URL. `ds_core_preprocess_html` adds a `user-role-<role>`
   class to <body> for each of the current user's roles, so everyone except
   administrators matches `body:not(.user-role-administrator)`.
   ───────────────────────────────────────────────────────────────────────── */

/* new location (add term button on /locations) */
body:not(.user-role-administrator) .perivallon-locations__add-btn,
/* edit location (edit link column in the locations view) */
/* body:not(.user-role-administrator) .view-id-locations .views-field-edit-taxonomy-term, */
/* edit station / measurement (edit button in the stations view) */
body:not(.user-role-administrator) .station-edit-btn,
/* edit notification (edit link column in the notifications view) */
body:not(.user-role-administrator) .view-id-notifications .views-field-edit-node,
/* «Δημοσιευμένο» (published) column in the locations table — header + cells */
body:not(.user-role-administrator) .view-id-locations .views-field-status {
  display: none !important;
}

/* Location edit form — hide the coordinates, publish status and sensor-status
   cards from everyone except administrators (e.g. appadmin can edit a location
   but must not see/change these). Visual only, not access control. */
body:not(.user-role-administrator) .af-card--lf-coords,
body:not(.user-role-administrator) .af-card--lf-status,
body:not(.user-role-administrator) .af-card--lf-sensor-status {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Leaflet map controls — modern theme styling (all maps site-wide):
   rounded button groups, white buttons with the primary colour, primary hover
   fill and a soft shadow, to match the rest of the UI.
   ───────────────────────────────────────────────────────────────────────── */
.leaflet-bar {
  border: none;
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(75, 88, 166, 0.18);
}

.leaflet-bar a {
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
  font-size: 1.125rem;
  color: #4B58A6;
  /* background-color (not the `background` shorthand) so icon buttons like
     fullscreen keep their background-image. */
  background-color: #ffffff;
  border-bottom: 1px solid #EEF1F8;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.leaflet-bar a:last-child {
  border-bottom: none;
}

.leaflet-bar a:hover {
  background-color: #EEF1F8;
  color: #3746a0;
}

.leaflet-bar a.leaflet-disabled {
  background-color: #F4F6FB;
  color: #B8BEDA;
  cursor: default;
}

/* A little more space between separate control groups (zoom / fullscreen). */
.leaflet-control-zoom {
  margin-bottom: 0.625rem;
}

/* Hide the CKEditor 5 "Powered by CKEditor" badge. It renders as a balloon
   appended to <body> (outside the form), so it must be targeted globally. */
.ck-powered-by,
.ck.ck-balloon-panel.ck-powered-by-balloon {
  display: none !important;
}