/* ============================================================
   RADA Org Chart – Frontend Styles
   Beautiful hierarchical org charts with CSS connector lines.
   ============================================================ */

/* ── Reset & Container ─────────────────────────────────── */

.rada-oc {
  --oc-accent: #1a1a2e;
  --oc-accent2: #e94560;
  --oc-line-color: #d1d5db;
  --oc-line-style: solid;
  --oc-line-width: 2px;
  --oc-card-radius: 16px;
  --oc-card-padding: 24px;
  --oc-card-bg: #ffffff;
  --oc-card-border: #e5e7eb;
  --oc-spacing-h: 40px;
  --oc-spacing-v: 50px;
  --oc-photo-size: 80px;
  --oc-name-color: var(--oc-accent);
  --oc-title-color: var(--oc-accent2);
  --oc-root-scale: 1.15;
  --oc-max-width: 1200px;
  --oc-bg: transparent;

  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 20px;
  background: var(--oc-bg);
}

.rada-oc * {
  box-sizing: border-box;
}

.rada-oc-canvas {
  display: flex;
  justify-content: center;
  max-width: var(--oc-max-width);
  margin: 0 auto;
  min-width: min-content;
}

/* ================================================================
   VERTICAL ORIENTATION (top-down)
   ================================================================ */

.rada-oc-vertical .rada-oc-canvas {
  flex-direction: column;
  align-items: center;
}

/* Each node is a column: card on top, children below */
.rada-oc-vertical .rada-oc-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Children row */
.rada-oc-vertical .rada-oc-children {
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: var(--oc-spacing-v);
  gap: var(--oc-spacing-h);
}

/* ── Vertical connector lines ──────────────────────────── */

/* Vertical stub from parent card DOWN to horizontal bar */

.rada-oc-vertical .rada-oc-has-children > .rada-oc-children::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: calc(var(--oc-spacing-v) / 2);
  border-left: var(--oc-line-width) var(--oc-line-style) var(--oc-line-color);
}

/* Each child: vertical stub UP from card to horizontal bar level */
.rada-oc-vertical .rada-oc-children > .rada-oc-node::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: calc(var(--oc-spacing-v) / 2);
  border-left: var(--oc-line-width) var(--oc-line-style) var(--oc-line-color);
}

/* Horizontal bar: use border-top on children except first/last edges */
.rada-oc-vertical .rada-oc-children > .rada-oc-node {
  position: relative;
}

/* Horizontal bar segments: each child draws a bar from its left edge to its center,
   and from its center to its right edge (using border-top) */
.rada-oc-vertical .rada-oc-children > .rada-oc-node::after {
  content: '';
  position: absolute;
  top: calc(var(--oc-spacing-v) / 2);
  left: 0;
  right: 0;
  height: 0;
  border-top: var(--oc-line-width) var(--oc-line-style) var(--oc-line-color);
}

/* First child: bar only from center to right */
.rada-oc-vertical .rada-oc-children > .rada-oc-node:first-child::after {
  left: 50%;
}

/* Last child: bar only from left to center */
.rada-oc-vertical .rada-oc-children > .rada-oc-node:last-child::after {
  right: 50%;
}

/* Only child: no horizontal bar */
.rada-oc-vertical .rada-oc-children > .rada-oc-node:only-child::after {
  display: none;
}

/* Only child: extend vertical stub to full spacing */
.rada-oc-vertical .rada-oc-children > .rada-oc-node:only-child::before {
  height: var(--oc-spacing-v);
  top: calc(var(--oc-spacing-v) * -0);
}

/* Also the parent connector stub for single-child needs full height */
/* The parent's children::after already goes halfway, child::before goes other half — perfect */

/* ================================================================
   HORIZONTAL ORIENTATION (left-right)
   ================================================================ */

.rada-oc-horizontal .rada-oc-canvas {
  flex-direction: row;
  align-items: center;
}

.rada-oc-horizontal .rada-oc-node {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.rada-oc-horizontal .rada-oc-children {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-left: var(--oc-spacing-h);
  gap: var(--oc-spacing-v);
}

/* Horizontal stub from parent RIGHT */
.rada-oc-horizontal .rada-oc-has-children > .rada-oc-children::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0;
  width: calc(var(--oc-spacing-h) / 2);
  border-top: var(--oc-line-width) var(--oc-line-style) var(--oc-line-color);
}

/* Each child: horizontal stub LEFT */
.rada-oc-horizontal .rada-oc-children > .rada-oc-node::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0;
  width: calc(var(--oc-spacing-h) / 2);
  border-top: var(--oc-line-width) var(--oc-line-style) var(--oc-line-color);
}

/* Vertical bar segments on each child */
.rada-oc-horizontal .rada-oc-children > .rada-oc-node::after {
  content: '';
  position: absolute;
  left: calc(var(--oc-spacing-h) / 2);
  top: 0;
  bottom: 0;
  width: 0;
  border-left: var(--oc-line-width) var(--oc-line-style) var(--oc-line-color);
}

.rada-oc-horizontal .rada-oc-children > .rada-oc-node:first-child::after {
  top: 50%;
}

.rada-oc-horizontal .rada-oc-children > .rada-oc-node:last-child::after {
  bottom: 50%;
}

.rada-oc-horizontal .rada-oc-children > .rada-oc-node:only-child::after {
  display: none;
}

/* ================================================================
   CARD STYLES
   ================================================================ */

.rada-oc-card {
  position: relative;
  background: var(--oc-card-bg);
  border: 1px solid var(--oc-card-border);
  border-radius: var(--oc-card-radius);
  padding: var(--oc-card-padding);
  width: 240px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
  overflow: hidden;
}

.rada-oc-card:hover {
  transform: translateY(-4px);
  z-index: 5;
}

/* Root card scaling */
.rada-oc-root > .rada-oc-card {
  transform: scale(var(--oc-root-scale));
  transform-origin: center top;
}

.rada-oc-root > .rada-oc-card:hover {
  transform: scale(var(--oc-root-scale)) translateY(-4px);
}

.rada-oc-horizontal .rada-oc-root > .rada-oc-card {
  transform-origin: left center;
}

.rada-oc-horizontal .rada-oc-root > .rada-oc-card:hover {
  transform: scale(var(--oc-root-scale)) translateX(-4px);
}

.rada-oc-horizontal .rada-oc-card:hover {
  transform: translateX(-4px);
}

/* Card inner layout */
.rada-oc-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* ── Shadow presets ────────────────────────────────────── */

.rada-oc-shadow-soft .rada-oc-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
}
.rada-oc-shadow-soft .rada-oc-card:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rada-oc-shadow-medium .rada-oc-card {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.rada-oc-shadow-medium .rada-oc-card:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.rada-oc-shadow-strong .rada-oc-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
}
.rada-oc-shadow-strong .rada-oc-card:hover {
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(0, 0, 0, 0.12);
}

.rada-oc-shadow-glow .rada-oc-card {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--oc-accent) 12%, transparent),
              0 1px 4px rgba(0, 0, 0, 0.04);
}
.rada-oc-shadow-glow .rada-oc-card:hover {
  box-shadow: 0 12px 36px color-mix(in srgb, var(--oc-accent) 20%, transparent),
              0 4px 12px color-mix(in srgb, var(--oc-accent2) 10%, transparent);
}

.rada-oc-shadow-none .rada-oc-card {
  box-shadow: none;
}

/* ── Card style presets ────────────────────────────────── */

/* Bordered: accent top bar */
.rada-oc-style-bordered .rada-oc-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--oc-accent);
  border-radius: var(--oc-card-radius) var(--oc-card-radius) 0 0;
}

/* Gradient: accent gradient bar */
.rada-oc-style-gradient .rada-oc-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--oc-accent), var(--oc-accent2));
  border-radius: var(--oc-card-radius) var(--oc-card-radius) 0 0;
}

/* Elevated: deeper shadow handled by shadow-strong + no border */
.rada-oc-style-elevated .rada-oc-card {
  border-color: transparent;
}

/* Glass: frosted effect */
.rada-oc-style-glass .rada-oc-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Minimal: clean */
.rada-oc-style-minimal .rada-oc-card {
  border: none;
  box-shadow: none;
  background: transparent;
}
.rada-oc-style-minimal .rada-oc-card:hover {
  background: var(--oc-card-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ================================================================
   PHOTO
   ================================================================ */

.rada-oc-photo {
  width: var(--oc-photo-size);
  height: var(--oc-photo-size);
  flex-shrink: 0;
  overflow: hidden;
  border: 3px solid var(--oc-card-border);
  transition: border-color 0.3s ease;
}

.rada-oc-card:hover .rada-oc-photo {
  border-color: var(--oc-accent2);
}

.rada-oc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rada-oc-photo-circle .rada-oc-photo {
  border-radius: 50%;
}

.rada-oc-photo-rounded .rada-oc-photo {
  border-radius: 12px;
}

.rada-oc-photo-square .rada-oc-photo {
  border-radius: 4px;
}

/* Placeholder with initials */
.rada-oc-photo-placeholder {
  background: linear-gradient(135deg, var(--oc-accent), var(--oc-accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
}

.rada-oc-photo-placeholder span {
  color: #ffffff;
  font-size: calc(var(--oc-photo-size) * 0.35);
  font-weight: 700;
  letter-spacing: 1px;
}

/* ================================================================
   TEXT
   ================================================================ */

.rada-oc-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rada-oc-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--oc-name-color);
  line-height: 1.3;
}

.rada-oc-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--oc-title-color);
  line-height: 1.4;
  letter-spacing: 0.2px;
}

.rada-oc-subtitle {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.rada-oc-desc {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.6;
  margin-top: 6px;
}

/* ================================================================
   ANIMATION
   ================================================================ */

.rada-oc-animate .rada-oc-card {
  opacity: 0;
  transform: translateY(20px);
}

.rada-oc-animate.rada-oc-in-view .rada-oc-card {
  animation: radaOcFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rada-oc-animate .rada-oc-node:nth-child(1) .rada-oc-card { animation-delay: 0s; }
.rada-oc-animate .rada-oc-node:nth-child(2) .rada-oc-card { animation-delay: 0.08s; }
.rada-oc-animate .rada-oc-node:nth-child(3) .rada-oc-card { animation-delay: 0.16s; }
.rada-oc-animate .rada-oc-node:nth-child(4) .rada-oc-card { animation-delay: 0.24s; }
.rada-oc-animate .rada-oc-node:nth-child(5) .rada-oc-card { animation-delay: 0.32s; }
.rada-oc-animate .rada-oc-node:nth-child(6) .rada-oc-card { animation-delay: 0.40s; }

/* Root card special entrance */
.rada-oc-animate .rada-oc-root > .rada-oc-card {
  animation-delay: 0s;
}

/* Stagger children per level */
.rada-oc-animate .rada-oc-children > .rada-oc-node:nth-child(1) > .rada-oc-card { animation-delay: 0.15s; }
.rada-oc-animate .rada-oc-children > .rada-oc-node:nth-child(2) > .rada-oc-card { animation-delay: 0.25s; }
.rada-oc-animate .rada-oc-children > .rada-oc-node:nth-child(3) > .rada-oc-card { animation-delay: 0.35s; }
.rada-oc-animate .rada-oc-children > .rada-oc-node:nth-child(4) > .rada-oc-card { animation-delay: 0.45s; }
.rada-oc-animate .rada-oc-children > .rada-oc-node:nth-child(5) > .rada-oc-card { animation-delay: 0.55s; }
.rada-oc-animate .rada-oc-children > .rada-oc-node:nth-child(6) > .rada-oc-card { animation-delay: 0.65s; }
.rada-oc-animate .rada-oc-children > .rada-oc-node:nth-child(7) > .rada-oc-card { animation-delay: 0.75s; }
.rada-oc-animate .rada-oc-children > .rada-oc-node:nth-child(8) > .rada-oc-card { animation-delay: 0.85s; }

/* Deeper levels */
.rada-oc-animate .rada-oc-children .rada-oc-children > .rada-oc-node:nth-child(1) > .rada-oc-card { animation-delay: 0.35s; }
.rada-oc-animate .rada-oc-children .rada-oc-children > .rada-oc-node:nth-child(2) > .rada-oc-card { animation-delay: 0.45s; }
.rada-oc-animate .rada-oc-children .rada-oc-children > .rada-oc-node:nth-child(3) > .rada-oc-card { animation-delay: 0.55s; }
.rada-oc-animate .rada-oc-children .rada-oc-children > .rada-oc-node:nth-child(4) > .rada-oc-card { animation-delay: 0.65s; }

@keyframes radaOcFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Root scale animation */
.rada-oc-animate.rada-oc-in-view .rada-oc-root > .rada-oc-card {
  animation-name: radaOcScaleIn;
}

@keyframes radaOcScaleIn {
  from {
    opacity: 0;
    transform: scale(calc(var(--oc-root-scale) * 0.85));
  }
  to {
    opacity: 1;
    transform: scale(var(--oc-root-scale));
  }
}

/* Horizontal animation variant */
.rada-oc-horizontal.rada-oc-animate .rada-oc-card {
  transform: translateX(-20px);
}

.rada-oc-horizontal.rada-oc-animate.rada-oc-in-view .rada-oc-card {
  animation-name: radaOcFadeRight;
}

@keyframes radaOcFadeRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 900px) {
  .rada-oc {
    padding: 24px 12px;
  }

  .rada-oc-card {
    width: 200px;
    padding: calc(var(--oc-card-padding) * 0.75);
  }

  .rada-oc-name {
    font-size: 14px;
  }

  .rada-oc-role {
    font-size: 12px;
  }

  .rada-oc-desc {
    display: none;
  }

  .rada-oc-root > .rada-oc-card {
    transform: scale(1.05);
  }

  .rada-oc-root > .rada-oc-card:hover {
    transform: scale(1.05) translateY(-3px);
  }
}

@media (max-width: 600px) {
  /* Stack vertical charts into a simple list on very small screens */
  .rada-oc-vertical .rada-oc-children {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: calc(var(--oc-spacing-v) * 0.6);
  }

  .rada-oc-vertical .rada-oc-children > .rada-oc-node::after {
    display: none;
  }

  .rada-oc-vertical .rada-oc-children > .rada-oc-node::before {
    height: calc(var(--oc-spacing-v) * 0.3);
  }

  .rada-oc-card {
    width: 180px;
  }

  /* Horizontal becomes vertical on mobile */
  .rada-oc-horizontal .rada-oc-node {
    flex-direction: column;
  }

  .rada-oc-horizontal .rada-oc-children {
    flex-direction: column;
    padding-left: 0;
    padding-top: var(--oc-spacing-v);
    align-items: center;
  }

  .rada-oc-horizontal .rada-oc-children > .rada-oc-node::before,
  .rada-oc-horizontal .rada-oc-children > .rada-oc-node::after,
  .rada-oc-horizontal .rada-oc-has-children > .rada-oc-children::after {
    display: none;
  }
}

/* ================================================================
   PRINT
   ================================================================ */

@media print {
  .rada-oc {
    overflow: visible;
    padding: 10px;
  }

  .rada-oc-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  .rada-oc-card:hover {
    transform: none !important;
  }
}