/* ════════════════════════════════════════════════════════════════
   SMKCS Carta Organisasi Sekolah — Premium 3D Professional CSS
   Prefix: co  |  Fully scoped to #carta-root
   ════════════════════════════════════════════════════════════════

   3D depth achieved with:
   - Multi-layer box-shadow: top inset highlight + bottom depth shadow + spread glow
   - ::after glass sheen overlay on every node
   - Gradient fills on colored surfaces (light-to-dark angle = 145deg)
   - Connector lines use gradient opacity (fade out at both ends)
   - Chart container has 3-layer shadow + top edge accent line
   - Hover lifts nodes with scale + shadow amplification
   ════════════════════════════════════════════════════════════════ */

#carta-root {

  /* ── Brand Colours ──────────────────────────────────────── */
  --co-text:            #0a1628;
  --co-muted:           #6b7a99;
  --co-border:          #d1d9ef;
  --co-border-strong:   #a8badf;

  /* Blue family */
  --co-blue:            #1a3faa;
  --co-blue2:           #2251d4;
  --co-blue-lt:         #edf2ff;

  /* Navy (dark blue node fill) */
  --co-navy:            #0f2057;

  /* Teal */
  --co-teal:            #0c6b96;
  --co-teal-lt:         #e3f4fc;

  /* Amber */
  --co-amber:           #a05c00;
  --co-amber-lt:        #fff8e8;

  /* Red */
  --co-red:             #8b1a1a;
  --co-red-lt:          #fff2f2;

  /* Green */
  --co-green:           #065738;
  --co-green-lt:        #eafaf2;

  /* Gold */
  --co-gold:            #7a4700;
  --co-gold-lt:         #fffaed;

  /* ── Shadows ────────────────────────────────────────────── */
  /* Node 3D shadow: top-highlight inset + bottom-depth + ambient glow */
  --co-sh-node-base:
    0 1px 0 rgba(255, 255, 255, .90) inset,
    0 -1px 0 rgba(0, 0, 0, .07) inset;

  /* Chart container shadow stack */
  --co-sh-container:
    0 0 0 1px rgba(255, 255, 255, .75) inset,
    0 2px 4px  rgba(10, 22, 40, .04),
    0 8px 32px rgba(10, 22, 40, .07),
    0 28px 72px rgba(10, 22, 40, .06);

  /* ── Geometry ───────────────────────────────────────────── */
  --co-radius-container: 22px;
  --co-radius-node:      12px;
  --co-radius-cb:        12px;

  all: initial;
  display: block;
  box-sizing: border-box;
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  background: transparent;
  color: var(--co-text);
  padding: 48px 28px;
}

#carta-root *, #carta-root *::before, #carta-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════
   SECTION DIVIDER
══════════════════════════════════════════════════════════════ */
#carta-root .co-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 88px 0;
}
#carta-root .co-divider::before,
#carta-root .co-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b8c3e0 50%, transparent);
}
#carta-root .co-divider span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--co-muted);
  padding: 0 8px;
  opacity: .5;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   ORG SECTION
══════════════════════════════════════════════════════════════ */
#carta-root .co-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
}


/* ══════════════════════════════════════════════════════════════
   PANEL HEADER
══════════════════════════════════════════════════════════════ */
#carta-root .co-panel-hdr {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 4px;
}
#carta-root .co-hdr-bar {
  width: 4px;
  min-height: 76px;
  border-radius: 99px;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(34, 81, 212, .22);
  background: linear-gradient(to bottom, #2563eb, #d97706);
}
#carta-root .co-eyebrow {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--co-blue2);
  margin-bottom: 7px;
  display: block;
  opacity: .75;
}
#carta-root .co-ptitle {
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--co-text);
  display: block;
}

/* Gradient text on the accented part */
#carta-root .co-ptitle em {
  font-style: normal;
  background: #2563eb;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ══════════════════════════════════════════════════════════════
   CHART SCROLL CONTAINER
══════════════════════════════════════════════════════════════ */
#carta-root .co-chart-scroll {
  overflow-x: auto;
  background: linear-gradient(170deg, #f7f9ff 0%, #ffffff 45%, #f9fbff 100%);
  border: 1px solid rgba(180, 196, 236, .55);
  border-radius: var(--co-radius-container);
  box-shadow: var(--co-sh-container);
  padding: 56px 44px 64px;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Subtle blueprint grid watermark */
#carta-root .co-chart-scroll::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--co-radius-container);
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(26, 63, 170, .013) 0px, rgba(26, 63, 170, .013) 1px,
      transparent 1px, transparent 48px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(26, 63, 170, .013) 0px, rgba(26, 63, 170, .013) 1px,
      transparent 1px, transparent 48px
    );
}

/* Top accent shimmer line */
#carta-root .co-chart-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--co-radius-container) var(--co-radius-container) 0 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 63, 170, .18) 25%,
    rgba(61, 109, 240, .28) 50%,
    rgba(26, 63, 170, .18) 75%,
    transparent 100%
  );
}

#carta-root .co-chart-scroll::-webkit-scrollbar       { height: 4px; }
#carta-root .co-chart-scroll::-webkit-scrollbar-track { background: #eef1fa; border-radius: 4px; }
#carta-root .co-chart-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #7898e8, #4f74d4);
  border-radius: 4px;
}


/* ══════════════════════════════════════════════════════════════
   TREE LAYOUT
══════════════════════════════════════════════════════════════ */
#carta-root .co-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Connector lines — gradient fade for elegance */
#carta-root .co-vline {
  width: 2px;
  margin: 0 auto;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    rgba(100, 130, 210, .55),
    rgba(150, 175, 230, .28)
  );
}


/* ══════════════════════════════════════════════════════════════
   NODE BASE
   3D recipe: gradient fill + top inset highlight + bottom depth shadow + glass sheen
══════════════════════════════════════════════════════════════ */
#carta-root .co-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 18px;
  border-radius: var(--co-radius-node);
  border: 1px solid transparent;
  background: #fff;
  cursor: default;
  position: relative;
  overflow: hidden;
  transition:
    transform .22s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .2s ease;
}

/* Glass sheen — light catches the top-left corner */
#carta-root .co-node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--co-radius-node);
  pointer-events: none;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 255, 255, .08) 55%,
    transparent 100%
  );
}

#carta-root .co-node-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .9px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
#carta-root .co-node-name {
  font-size: 10.5px;
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}


/* ══════════════════════════════════════════════════════════════
   NODE COLOUR VARIANTS
   Shadow anatomy per node:
     Layer 1: top inset white highlight  (the "light source hits the top")
     Layer 2: bottom inset dark edge     (subtle rim below)
     Layer 3: bottom solid offset        (the physical depth / floor shadow)
     Layer 4: diffused glow              (ambient colour bloom)
     Layer 5: sharp drop                 (crisp near-shadow)
══════════════════════════════════════════════════════════════ */

/* ── Red — Pengetua (top authority) ── */
#carta-root .co-n-red {
  background: linear-gradient(145deg, #fff4f4 0%, #fde6e6 100%);
  border-color: rgba(180, 60, 60, .20);
  color: var(--co-red);
  box-shadow:
    0  1px 0   rgba(255, 255, 255, .90) inset,
    0 -1px 0   rgba(150, 30, 30, .08)  inset,
    0  4px 0   rgba(175, 45, 45, .16),
    0  8px 22px rgba(175, 45, 45, .16),
    0  2px 5px  rgba(175, 45, 45, .10);
}
#carta-root .co-n-red .co-node-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
  color: var(--co-red);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
#carta-root .co-n-red .co-node-name {
  color: #a03030;
  opacity: .80;
}

/* ── Blue — Penolong Kanan ── */
#carta-root .co-n-blue {
  background: linear-gradient(145deg, #edf2ff 0%, #e2eaff 100%);
  border-color: rgba(60, 100, 220, .16);
  color: var(--co-blue);
  box-shadow:
    0  1px 0   rgba(255, 255, 255, .92) inset,
    0 -1px 0   rgba(30, 60, 200, .07)  inset,
    0  3px 0   rgba(35, 70, 200, .13),
    0  6px 18px rgba(35, 70, 200, .12),
    0  1px 3px  rgba(35, 70, 200, .08);
}
#carta-root .co-n-blue .co-node-name {
  color: var(--co-blue);
  opacity: .75;
}

/* ── Blue Dark — primary/highlighted Penolong Kanan ── */
#carta-root .co-n-blue-dk {
  background: linear-gradient(145deg, #1a3faa 0%, #1432a0 100%);
  border-color: rgba(255, 255, 255, .20);
  color: #fff;
  box-shadow:
    0  1px 0   rgba(255, 255, 255, .28) inset,
    0 -2px 0   rgba(0, 0, 0, .22)       inset,
    0  4px 0   rgba(10, 28, 130, .40),
    0  9px 26px rgba(12, 30, 130, .38),
    0  2px 6px  rgba(12, 30, 130, .22);
}
#carta-root .co-n-blue-dk .co-node-title {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}
#carta-root .co-n-blue-dk .co-node-name {
  color: rgba(200, 218, 255, .92);
}

/* ── Teal — Setiausaha level ── */
#carta-root .co-n-teal {
  background: linear-gradient(145deg, #e3f4fc 0%, #d5edf8 100%);
  border-color: rgba(12, 107, 150, .17);
  color: var(--co-teal);
  box-shadow:
    0  1px 0   rgba(255, 255, 255, .92) inset,
    0 -1px 0   rgba(8, 85, 120, .07)   inset,
    0  3px 0   rgba(8, 90, 140, .13),
    0  6px 16px rgba(8, 90, 140, .11),
    0  1px 3px  rgba(8, 90, 140, .07);
}
#carta-root .co-n-teal .co-node-name {
  color: var(--co-teal);
  opacity: .75;
}

/* ── Teal Dark — highlighted Setiausaha ── */
#carta-root .co-n-teal-dk {
  background: linear-gradient(145deg, #0c6b96 0%, #085880 100%);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow:
    0  1px 0   rgba(255, 255, 255, .24) inset,
    0 -2px 0   rgba(0, 0, 0, .18)       inset,
    0  4px 0   rgba(5, 58, 100, .33),
    0  8px 22px rgba(5, 58, 100, .30),
    0  2px 5px  rgba(5, 58, 100, .18);
}
#carta-root .co-n-teal-dk .co-node-title {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .20);
}
#carta-root .co-n-teal-dk .co-node-name {
  color: rgba(190, 232, 252, .92);
}

/* ── Amber — Penyelaras / unit level ── */
#carta-root .co-n-amber {
  background: linear-gradient(145deg, #fff8e8 0%, #fef2d4 100%);
  border-color: rgba(180, 100, 0, .16);
  color: var(--co-amber);
  box-shadow:
    0  1px 0   rgba(255, 255, 255, .92) inset,
    0 -1px 0   rgba(155, 80, 0, .07)   inset,
    0  3px 0   rgba(165, 85, 0, .13),
    0  5px 15px rgba(165, 85, 0, .10),
    0  1px 3px  rgba(165, 85, 0, .07);
}
#carta-root .co-n-amber .co-node-name {
  color: var(--co-amber);
  opacity: .75;
}

/* ── Amber Bold — Ketua Panitia label ── */
#carta-root .co-n-amber-b {
  background: linear-gradient(145deg, #b45309 0%, #9a4305 100%);
  border-color: rgba(255, 255, 255, .20);
  color: #fff;
  box-shadow:
    0  1px 0   rgba(255, 255, 255, .24) inset,
    0 -2px 0   rgba(0, 0, 0, .20)       inset,
    0  4px 0   rgba(115, 48, 0, .32),
    0  8px 22px rgba(115, 48, 0, .28),
    0  2px 5px  rgba(115, 48, 0, .18);
}
#carta-root .co-n-amber-b .co-node-title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

/* ── Green — Guru Penasihat level ── */
#carta-root .co-n-green {
  background: linear-gradient(145deg, #eafaf2 0%, #dbf5e6 100%);
  border-color: rgba(6, 87, 56, .15);
  color: var(--co-green);
  box-shadow:
    0  1px 0   rgba(255, 255, 255, .92) inset,
    0 -1px 0   rgba(4, 75, 46, .07)    inset,
    0  3px 0   rgba(4, 78, 46, .12),
    0  5px 15px rgba(4, 78, 46, .10),
    0  1px 3px  rgba(4, 78, 46, .07);
}
#carta-root .co-n-green .co-node-name {
  color: var(--co-green);
  opacity: .75;
}


/* ══════════════════════════════════════════════════════════════
   CARD BOX (info listing panel)
   Same 3D treatment: gradient bg + inset highlight + depth shadow + glass sheen
══════════════════════════════════════════════════════════════ */
#carta-root .co-cb {
  border: 1px solid transparent;
  border-radius: var(--co-radius-cb);
  padding: 15px 17px;
  background: #fff;
  cursor: default;
  position: relative;
  overflow: hidden;
  transition:
    transform .22s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .2s ease;
}

/* Glass sheen on card boxes */
#carta-root .co-cb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  border-radius: var(--co-radius-cb) var(--co-radius-cb) 0 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .50),
    transparent
  );
  z-index: 1;
}


#carta-root .co-cb-title {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  margin-bottom: 11px;
  text-align: center;
  line-height: 1.4;
  display: block;
  padding-bottom: 10px;
  border-bottom: 1.5px solid;
  border-color: inherit;
  position: relative;
  z-index: 2;
}
#carta-root .co-cb-row {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.72;
  color: var(--co-text);
  display: block;
  padding: 1px 0;
  position: relative;
  z-index: 2;
}
#carta-root .co-cb-row b {
  font-weight: 700;
}
#carta-root .co-cb-divider {
  height: 1px;
  background: var(--co-border);
  margin: 5px 0;
  display: block;
  opacity: .55;
  position: relative;
  z-index: 2;
}

/* ── Card Box colour variants ── */
#carta-root .co-cb-blue {
  border-color: rgba(60, 100, 220, .18);
  background: linear-gradient(155deg, #edf2ff 0%, #e6eeff 100%);
  box-shadow:
    0 1px 0  rgba(255, 255, 255, .92) inset,
    0 3px 0  rgba(35, 70, 200, .11),
    0 7px 22px rgba(35, 70, 200, .11);
}
#carta-root .co-cb-blue .co-cb-title { color: var(--co-blue); }

#carta-root .co-cb-teal {
  border-color: rgba(12, 107, 150, .17);
  background: linear-gradient(155deg, #e3f4fc 0%, #d8eff9 100%);
  box-shadow:
    0 1px 0  rgba(255, 255, 255, .92) inset,
    0 3px 0  rgba(8, 90, 140, .11),
    0 7px 20px rgba(8, 90, 140, .10);
}
#carta-root .co-cb-teal .co-cb-title { color: var(--co-teal); }

#carta-root .co-cb-amber {
  border-color: rgba(180, 100, 0, .15);
  background: linear-gradient(155deg, #fff8e8 0%, #fef3d6 100%);
  box-shadow:
    0 1px 0  rgba(255, 255, 255, .92) inset,
    0 3px 0  rgba(165, 85, 0, .10),
    0 7px 20px rgba(165, 85, 0, .09);
}
#carta-root .co-cb-amber .co-cb-title { color: var(--co-amber); }

#carta-root .co-cb-green {
  border-color: rgba(6, 87, 56, .15);
  background: linear-gradient(155deg, #eafaf2 0%, #ddf6ea 100%);
  box-shadow:
    0 1px 0  rgba(255, 255, 255, .92) inset,
    0 3px 0  rgba(4, 78, 46, .10),
    0 7px 20px rgba(4, 78, 46, .09);
}
#carta-root .co-cb-green .co-cb-title { color: var(--co-green); }


/* ══════════════════════════════════════════════════════════════
   GRID & COLUMN HELPERS
══════════════════════════════════════════════════════════════ */
#carta-root .co-grid-row {
  display: grid;
  position: relative;
}
#carta-root .co-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #carta-root {
    padding: 24px 12px;
  }
  #carta-root .co-divider {
    margin: 52px 0;
    gap: 12px;
  }
  #carta-root .co-divider span {
    font-size: 9px;
    letter-spacing: 2.5px;
  }
  #carta-root .co-panel-hdr {
    gap: 14px;
    align-items: flex-start;
  }
  #carta-root .co-hdr-bar {
    width: 5px;
    min-height: 60px;
    margin-top: 2px;
  }
  #carta-root .co-eyebrow {
    font-size: 9.5px;
    letter-spacing: 2px;
  }
  #carta-root .co-ptitle {
    font-size: clamp(20px, 5.5vw, 32px);
  }
  #carta-root .co-chart-scroll {
    padding: 30px 18px 38px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  #carta-root .co-divider {
    margin: 34px 0;
  }
  #carta-root .co-ptitle {
    font-size: clamp(18px, 7vw, 26px);
  }
  #carta-root .co-eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  #carta-root .co-hdr-bar {
    min-height: 50px;
  }
  #carta-root .co-chart-scroll {
    padding: 18px 12px 28px;
    border-radius: 14px;
  }
}