/* =====================================================================
   ̽»¨¾«Ñ¡ Job Descriptions org chart — styles
   Everything is scoped under .svcc-orgchart so nothing leaks into the
   rest of the site, and the widget sizes to its container (not the
   viewport). Host at /_resources/css/org-chart.css
   ===================================================================== */

.svcc-orgchart{
  /* --- ̽»¨¾«Ñ¡ brand palette (swap for official tokens if they change) --- */
  --oc-primary:      #C8102E;   /* ̽»¨¾«Ñ¡ red */
  --oc-primary-700:  #9e0c24;   /* darker red — hover / borders */
  --oc-primary-300:  #f0b6bf;   /* light red tint */
  --oc-primary-100:  #fbe7ea;   /* very light red — button hover fill */
  --oc-accent:       #455560;   /* dark gray — accent / root spine */
  --oc-accent-300:   #8b97a0;   /* mid gray — deeper spines */
  --oc-ink:          #1f2830;
  --oc-muted:        #64717b;
  --oc-surface:      #ffffff;
  --oc-line:         #d2d9de;   /* connector lines (neutral) */
  --oc-bg:           #f5f6f7;
  --oc-shadow:       0 1px 2px rgba(31,40,48,.08), 0 4px 14px rgba(31,40,48,.06);
  --oc-shadow-hi:    0 2px 6px rgba(31,40,48,.14), 0 10px 26px rgba(31,40,48,.12);
  --oc-font:         "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-family:var(--oc-font);
  color:var(--oc-ink);
  display:flex;
  flex-direction:column;
  /* Fills the container's width; height is bounded so it fits within page flow.
     Tune the middle value to taste; clamp keeps it sane on tiny/huge screens. */
  height:clamp(440px, 76vh, 820px);
  border:1px solid var(--oc-line);
  border-radius:12px;
  overflow:hidden;
  background:var(--oc-surface);
}
.svcc-orgchart *{ box-sizing:border-box; }

/* ---- Toolbar ---- */
.svcc-orgchart .oc-toolbar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  background:var(--oc-surface);
  border-bottom:1px solid var(--oc-line);
  flex-wrap:wrap;
}
.svcc-orgchart .oc-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  margin-right:auto;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.svcc-orgchart .oc-title small{
  font-weight:500;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--oc-muted);
}
.svcc-orgchart .oc-search{ position:relative; }
.svcc-orgchart .oc-search input{
  font:inherit;
  font-size:13px;
  padding:8px 12px 8px 32px;
  width:230px;
  max-width:52vw;
  border:1px solid var(--oc-line);
  border-radius:8px;
  background:var(--oc-bg);
  color:var(--oc-ink);
}
.svcc-orgchart .oc-search input:focus{
  outline:2px solid var(--oc-primary);
  outline-offset:1px;
  background:#fff;
}
.svcc-orgchart .oc-search::before{
  content:"";
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:13px; height:13px; border-radius:50%;
  border:2px solid var(--oc-muted);
  box-shadow:6px 6px 0 -5px var(--oc-muted);
  pointer-events:none;
}
.svcc-orgchart .oc-btn{
  font:inherit;
  font-size:13px;
  font-weight:600;
  padding:8px 14px;
  border:1px solid var(--oc-line);
  border-radius:8px;
  background:var(--oc-surface);
  color:var(--oc-ink);
  cursor:pointer;
}
.svcc-orgchart .oc-btn:hover{ background:var(--oc-primary-100); border-color:var(--oc-primary-300); }
.svcc-orgchart .oc-btn:focus-visible{ outline:2px solid var(--oc-primary); outline-offset:1px; }
.svcc-orgchart .oc-btn--primary{ background:var(--oc-primary); border-color:var(--oc-primary); color:#fff; }
.svcc-orgchart .oc-btn--primary:hover{ background:var(--oc-primary-700); }

/* ---- Chart surface ---- */
.svcc-orgchart .chart-container{
  flex:1;
  min-height:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(31,40,48,.06) 1px, transparent 0) 0 0/22px 22px,
    var(--oc-bg);
}

/* ---- Node card (returned by nodeContent) ---- */
.svcc-orgchart .oc-card{
  position:relative;
  height:100%;
  display:flex;
  font-family:var(--oc-font);
  background:var(--oc-surface);
  border:1px solid var(--oc-line);
  border-radius:10px;
  box-shadow:var(--oc-shadow);
  overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;
}
.svcc-orgchart .oc-card:hover{ box-shadow:var(--oc-shadow-hi); transform:translateY(-1px); }
.svcc-orgchart .oc-spine{ width:6px; flex:0 0 6px; background:var(--oc-accent-300); }
.svcc-orgchart .oc-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.svcc-orgchart .oc-name{
  font-size:14px;
  font-weight:650;
  line-height:1.25;
  color:var(--oc-ink);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.svcc-orgchart .oc-meta{ margin-top:auto; display:flex; align-items:center; gap:10px; }
.svcc-orgchart .oc-jd{
  font-size:12px; font-weight:600; text-decoration:none;
  color:var(--oc-primary); display:inline-flex; align-items:center; gap:4px;
}
.svcc-orgchart .oc-jd:hover{ text-decoration:underline; }
.svcc-orgchart .oc-nojd{ font-size:11.5px; color:var(--oc-muted); font-style:italic; }

/* Depth-encoded treatment: seniority reads at a glance */
.svcc-orgchart .oc-card.depth-0{ background:var(--oc-primary); border-color:var(--oc-primary-700); }
.svcc-orgchart .oc-card.depth-0 .oc-spine{ background:var(--oc-accent); }
.svcc-orgchart .oc-card.depth-0 .oc-name{ color:#fff; font-size:15px; }
.svcc-orgchart .oc-card.depth-0 .oc-jd{ color:#fff; }
.svcc-orgchart .oc-card.depth-0 .oc-nojd{ color:rgba(255,255,255,.75); }
.svcc-orgchart .oc-card.depth-1 .oc-spine{ background:var(--oc-primary); }
.svcc-orgchart .oc-card.depth-2 .oc-spine{ background:var(--oc-accent-300); }

/* Search match: dark-gray ring + soft halo so hits stay visible.
   To make matches pop in red instead, swap --oc-accent for --oc-primary here. */
.svcc-orgchart .oc-card.is-match{
  outline:3px solid var(--oc-accent); outline-offset:2px;
  box-shadow:0 0 0 7px rgba(69,85,96,.16), var(--oc-shadow-hi);
}

/* Library's expand/collapse button */
.svcc-orgchart .oc-toggle{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--oc-font); font-size:12px; font-weight:700;
  padding:3px 9px; border-radius:20px;
  background:var(--oc-primary); color:#fff; border:2px solid #fff;
  box-shadow:var(--oc-shadow); cursor:pointer;
}
.svcc-orgchart .oc-toggle .oc-toggle__sign{ font-size:13px; line-height:1; }

/* Status / error / validation banner */
.svcc-orgchart .oc-error{
  max-width:560px; margin:48px auto; padding:22px 24px;
  background:var(--oc-surface); border:1px solid var(--oc-line);
  border-left:4px solid var(--oc-accent); border-radius:10px;
  box-shadow:var(--oc-shadow);
  display:flex; flex-direction:column; gap:8px;
  font-size:13.5px; line-height:1.5; color:var(--oc-muted);
}
.svcc-orgchart .oc-error strong{ color:var(--oc-ink); font-size:15px; }
.svcc-orgchart .oc-error ul{ margin:4px 0 0; padding-left:18px; }
.svcc-orgchart .oc-error li{ margin:2px 0; }

@media (prefers-reduced-motion: reduce){
  .svcc-orgchart .oc-card{ transition:none; }
}