/**
 * GAIA graphical styles
 *
 * Supports:
 * - Geographic SVG compositions created by GaiaGraphicsDevice
 * - Individual Leaflet divIcon markers
 * - Role-specific silhouette colors
 * - Authentication badges
 * - Operational status indicators
 *
 * Visual conventions:
 * - Main silhouette: role color
 * - Silhouette details: white
 * - Authentication badge: independent of role
 * - Status indicator: independent of role and authentication
 */

/* ---------------------------------------------------------
 * Role colors
 * --------------------------------------------------------- */

 .gaia-web-portal {
  --role-color: var(--gaia-web-portal-color, #2563eb);
}

.gaia-knowledge {
  --role-color: var(--gaia-knowledge-color, #7c3aed);
}

.gaia-hub {
  --role-color: var(--gaia-hub-color, #059669);
}

.gaia-router {
  --role-color: var(--gaia-router-color, #ea580c);
}

.gaia-client {
  --role-color: var(--gaia-client-color, #64748b);
}

/* ---------------------------------------------------------
* Geographic SVG composition
* --------------------------------------------------------- */

/* SVG root generated by GaiaGraphicsDevice. */
.gaia-graphics {
  display: block;
  overflow: visible;
}

/* Geographic region path, when present. */
.gaia-region {
  fill: var(--gaia-region-fill, transparent);
  stroke: var(--gaia-region-stroke, currentColor);
  stroke-width: 1;
  fill-rule: evenodd;
}

/* Group containing all GAIA silhouettes. */
.gaia-silhouettes {
  pointer-events: visiblePainted;
}

/* Shared silhouette styling. */
.gaia-silhouette {
  fill: var(--role-color, #2563eb);
  stroke: white;
  stroke-width: 2.5;
  stroke-linejoin: round;

  filter: drop-shadow(
      0 3px 3px rgba(0, 0, 0, 0.4)
  );
}

/* ---------------------------------------------------------
* Silhouette details
* --------------------------------------------------------- */

/* Web portal: white central circle. */
.gaia-web-portal__center {
  fill: white;
  stroke: none;
}

/* Router: directional arrows. */
.gaia-router__arrows {
  fill: none;
  stroke: white;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Knowledge: cylinder top and separators. */
.gaia-knowledge__top,
.gaia-knowledge__lines {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Client: head and body. */
.gaia-client__head,
.gaia-client__body {
  fill: var(--role-color, #64748b);
}

/* ---------------------------------------------------------
* Legacy Leaflet divIcon markers
* --------------------------------------------------------- */

/* Leaflet divIcon container. */
.gaia-icon {
  background: transparent;
  border: none;
  overflow: visible;
}

/**
* Main marker container.
*
* Positioned relatively so badges and status indicators
* can be placed around the main SVG.
*/
.gaia-symbol {
  position: relative;
  width: 44px;
  height: 50px;
  overflow: visible;
}

/* Standalone role SVG within a divIcon. */
.gaia-role-svg {
  display: block;
  width: 44px;
  height: 46px;
  overflow: visible;

  filter: drop-shadow(
      0 3px 3px rgba(0, 0, 0, 0.4)
  );
}

/* Legacy main silhouette shape. */
.gaia-icon .symbol > :first-child {
  fill: var(--role-color, #2563eb);
  stroke: white;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* Legacy white outline details. */
.gaia-icon .detail {
  fill: none;
  stroke: white;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Legacy white filled details. */
.gaia-icon .detail-fill {
  fill: white;
}

/* ---------------------------------------------------------
* Operational status indicator
* --------------------------------------------------------- */

/**
* Operational state dot.
*
* Independent of role, client identity, and authentication.
*
* Set --state-color on the marker or status element.
*/
.gaia-status {
  position: absolute;
  right: 0;
  bottom: 0;

  width: 15px;
  height: 15px;
  box-sizing: border-box;

  background: var(--state-color, #94a3b8);
  border: 2px solid white;
  border-radius: 50%;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  z-index: 1;
}

/* ---------------------------------------------------------
* Authentication badges
* --------------------------------------------------------- */

/**
* Semantic badge container.
*
* Currently used for authenticated clients.
* Guest clients have no authentication badge.
*/
.gaia-badge {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 2;
  overflow: visible;

  filter: drop-shadow(
      0 1px 2px rgba(0, 0, 0, 0.3)
  );
}

.gaia-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Authenticated-user badge: upper-right corner. */
.gaia-badge-access {
  top: -6px;
  right: -6px;
}