/* Organization Structure Visual Theme (non-destructive)
   Apply by adding class `org-structure-theme` on the chart container
   This only changes visuals (colors, fonts, shadows), not layout.
*/

.org-structure-theme {
  /* Theme tokens */
  --org-node-bg: #ffffff;
  --org-node-stroke: #0f4c81; /* deep corporate blue */
  --org-connector: #0f4c81;
  --org-text: #111827; /* near-black */
  --org-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --org-shadow-2: 0 4px 8px rgba(0, 0, 0, 0.08);
  --org-stroke-width: 1.75;
}

/* Ensure the SVG scales properly inside the container */
.org-structure-theme svg {
  width: 100%;
  height: auto; /* let intrinsic aspect ratio decide height */
  display: block;
}

/* Node boxes */
.org-structure-theme svg rect {
  fill: var(--org-node-bg);
  stroke: var(--org-node-stroke);
  stroke-width: var(--org-stroke-width);
  shape-rendering: geometricPrecision;
  /* Soft elevation to mimic polished card look */
  filter: drop-shadow(var(--org-shadow-1)) drop-shadow(var(--org-shadow-2));
}

/* Connectors */
.org-structure-theme svg line {
  stroke: var(--org-connector);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

/* Labels */
.org-structure-theme svg text {
  fill: var(--org-text) !important; /* override inline presentation fills */
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Icons styling */
.org-structure-theme svg .org-icon-root {
  pointer-events: none;
}

.org-structure-theme svg .org-icon-root *:not(.org-icon__badge) {
  stroke: var(--org-node-stroke);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.org-structure-theme svg .org-icon__badge {
  stroke: var(--org-node-stroke);
  stroke-width: 1.5;
  fill: #ffffff;
}

.org-structure-theme svg .org-icon__accent {
  stroke-width: 1.5;
  fill: rgba(15, 76, 129, 0.08);
}

.org-structure-theme svg .org-icon--executive .org-icon__accent {
  stroke: #b45309;
  fill: rgba(180, 83, 9, 0.16);
}

.org-structure-theme svg .org-icon--executive .org-icon__badge { stroke: #b45309; }

.org-structure-theme svg .org-icon--manager .org-icon__accent {
  stroke: #2563eb;
  fill: rgba(37, 99, 235, 0.14);
}

.org-structure-theme svg .org-icon--manager .org-icon__badge { stroke: #2563eb; }

.org-structure-theme svg .org-icon--division .org-icon__accent {
  stroke: #047857;
  fill: rgba(4, 120, 87, 0.16);
}

.org-structure-theme svg .org-icon--division .org-icon__badge { stroke: #047857; }

.org-structure-theme svg .org-icon--team .org-icon__accent {
  stroke: #4b5563;
  fill: rgba(75, 85, 99, 0.18);
}

.org-structure-theme svg .org-icon--team .org-icon__badge { stroke: #4b5563; }

/* Node role palettes */
.org-structure-theme svg .org-node {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.org-structure-theme svg .org-node--executive {
  fill: #fef3c7;
  stroke: #b45309;
}

.org-structure-theme svg .org-node--manager {
  fill: #dbeafe;
  stroke: #2563eb;
}

.org-structure-theme svg .org-node--division {
  fill: #dcfce7;
  stroke: #047857;
}

.org-structure-theme svg .org-node--team {
  fill: #e5e7eb;
  stroke: #4b5563;
}

/* Container polish */
.org-structure-theme {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
}

/* Override container sizing: follow SVG height and add outer margin */
.org-structure-theme.org-container {
  height: auto;
  margin: 40px auto;
}

/* Device-specific outer margins */
@media (max-width: 767.98px) {
  .org-structure-theme.org-container {
    margin: 24px auto; /* Mobile */
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .org-structure-theme.org-container {
    margin: 32px auto; /* Tablet */
  }
}

/* Optional: subtle background for the section behind the chart if needed */
.org-structure-theme__surface {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
}