/* =====================================================================
   Nanoq Intranet – Org chart (1.22.0)
   Built on the arctic tokens (--nq-*) with fallbacks, so the classic design works too.
   Chart: top-down tree with lines inside a scrollable canvas. List: indented tree (always on phones).
   ===================================================================== */

.oc-app, .oc-widget, .oc-profile, .nanoq-sc-orgchart {
  --oc-surface: var(--nq-surface, var(--bs-paper-bg, #fff));
  --oc-ice: var(--nq-ice, rgba(133, 146, 163, 0.09));
  --oc-border: var(--nq-frost, var(--bs-border-color, #e4e6e8));
  --oc-line: color-mix(in srgb, var(--oc-border) 60%, var(--oc-muted));
  --oc-ink: var(--nq-ink, var(--nanoq-heading, #384551));
  --oc-text: var(--nq-text, var(--bs-body-color, #646e78));
  --oc-muted: var(--nq-muted, #8592a3);
  --oc-accent: var(--nq-accent, var(--nanoq-primary, #6658ea));
  --oc-shadow: var(--nq-shadow, 0 1px 3px rgba(15, 46, 69, 0.08));
  --oc-lift: var(--nq-shadow-lift, 0 8px 22px -10px rgba(15, 46, 69, 0.25));
  --oc-r: var(--nq-r-card, 14px);
  --oc-rc: var(--nq-r-ctrl, 10px);
  --oc-display: var(--nq-display, inherit);
}
[data-bs-theme=dark] .oc-app, [data-bs-theme=dark] .oc-widget, [data-bs-theme=dark] .oc-profile {
  --oc-ice: var(--nq-ice, rgba(255, 255, 255, 0.04));
  --oc-line: color-mix(in srgb, var(--oc-border) 50%, var(--oc-muted));
}

/* ---------- Header ---------- */
.oc-app .nq-head { flex-wrap: wrap; }
.oc-app .nq-head > .btn { display: inline-flex; align-items: center; gap: 6px; white-space: normal; }
@media (max-width: 767.98px) {
  .oc-app .nq-head-text { flex-basis: 100%; }
}

/* ---------- Tabs and toolbar ---------- */
.oc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.oc-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  color: var(--oc-text) !important; text-decoration: none;
  font-weight: 600; font-size: 0.9rem;
  border: 1px solid var(--oc-border); background: var(--oc-surface);
}
.oc-tab i { font-size: 1.1rem; color: var(--oc-muted); }
.oc-tab:hover { border-color: var(--oc-accent); }
.oc-tab.is-active { background: var(--oc-accent); border-color: var(--oc-accent); color: #fff !important; }
.oc-tab.is-active i { color: #fff; }

.oc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.oc-search { position: relative; flex: 1 1 260px; min-width: 0; max-width: 460px; }
.oc-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--oc-muted); font-size: 1.1rem; pointer-events: none; }
.oc-search .form-control { padding-left: 38px; padding-right: 90px; border-radius: var(--oc-rc); }
.oc-search-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; color: var(--oc-muted); white-space: nowrap; }
.oc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oc-tools .btn { display: inline-flex; align-items: center; gap: 4px; }
.oc-layout { display: inline-flex; border: 1px solid var(--oc-border); border-radius: var(--oc-rc); overflow: hidden; background: var(--oc-surface); }
.oc-layout .btn { border: 0; border-radius: 0; color: var(--oc-muted); padding: 0.3rem 0.6rem; }
.oc-layout .btn[aria-pressed="true"] { background: var(--oc-accent); color: #fff; }
.oc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--oc-text); margin: 0; cursor: pointer; }
.oc-intro { color: var(--oc-text); font-size: 0.9rem; max-width: 760px; }

/* ---------- Canvas ---------- */
.oc-canvas {
  overflow: auto;
  padding: 22px 10px 26px;
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--oc-muted) 22%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--oc-ice);
  -webkit-overflow-scrolling: touch;
}
.oc-tree, .oc-children, .oc-grid { list-style: none; margin: 0; padding: 0; }

/* ---------- Person and department cards ---------- */
.oc-node {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 220px; max-width: 100%;
  padding: 10px 12px;
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-top: 3px solid var(--oc-c, var(--oc-accent));
  border-radius: var(--oc-rc);
  box-shadow: var(--oc-shadow);
  text-align: left;
  transition: box-shadow 0.15s, opacity 0.15s, transform 0.15s;
  z-index: 1;
}
.oc-node:hover { box-shadow: var(--oc-lift); }
.oc-avatar { flex: 0 0 44px; }
.oc-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.oc-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.oc-name { font-family: var(--oc-display); font-size: 0.9rem; color: var(--oc-ink); line-height: 1.25; overflow-wrap: anywhere; }
.oc-name a { color: inherit !important; text-decoration: none; }
.oc-name a:hover { text-decoration: underline; }
.oc-job { font-size: 0.78rem; color: var(--oc-text); line-height: 1.3; overflow-wrap: anywhere; }
.oc-dept { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--oc-muted); margin-top: 3px; overflow-wrap: anywhere; }
.oc-dept i { width: 8px; height: 8px; border-radius: 50%; background: var(--oc-c, var(--oc-accent)); flex: 0 0 8px; }
.oc-focus {
  position: absolute; top: 4px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  color: var(--oc-muted) !important; opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.oc-node:hover .oc-focus, .oc-focus:focus-visible { opacity: 1; }
.oc-focus:hover { background: var(--oc-ice); color: var(--oc-accent) !important; }
@media (hover: none) { .oc-focus { opacity: 0.8; } }
.oc-node.is-current { border-color: var(--oc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-accent) 25%, transparent), var(--oc-lift); }

/* Departments */
.oc-dept-node { flex-direction: column; align-items: stretch; width: 240px; gap: 8px; }
.oc-dept-node .oc-name { font-size: 0.95rem; }
.oc-leaders { display: flex; flex-direction: column; gap: 4px; }
.oc-leader { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--oc-ink) !important; text-decoration: none; }
.oc-leader img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.oc-leader:hover span { text-decoration: underline; }
.oc-members summary { font-size: 0.78rem; color: var(--oc-accent); cursor: pointer; }
.oc-members ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.oc-members a { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--oc-text) !important; text-decoration: none; }
.oc-members img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* Open/close */
.oc-toggle {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: -10px;
  padding: 1px 8px 1px 5px;
  font-size: 0.72rem; font-weight: 700; line-height: 1.5;
  color: var(--oc-text);
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: 999px;
  box-shadow: var(--oc-shadow);
  cursor: pointer;
}
.oc-toggle i { font-size: 1rem; transition: transform 0.15s; transform: rotate(-90deg); }
.oc-item.is-open > .oc-toggle i { transform: none; }
.oc-toggle:hover { border-color: var(--oc-accent); color: var(--oc-accent); }
.oc-item:not(.is-open) > .oc-children { display: none; }

/* ---------- Chart layout (lines) ---------- */
.oc-tree { display: flex; justify-content: center; align-items: flex-start; gap: 18px; width: max-content; min-width: 100%; margin: 0 auto; }
.oc-item { position: relative; display: flex; flex-direction: column; align-items: center; }
.oc-children { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: 16px; }
.oc-children::before { content: ""; position: absolute; top: 0; left: 50%; height: 16px; border-left: 2px solid var(--oc-line); }
.oc-children > .oc-item { padding: 16px 7px 0; }
.oc-children > .oc-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid var(--oc-line); }
.oc-children > .oc-item:first-child::before { left: 50%; }
.oc-children > .oc-item:last-child::before { right: 50%; }
.oc-children > .oc-item:only-child::before { display: none; }
.oc-children > .oc-item::after { content: ""; position: absolute; top: 0; left: 50%; height: 16px; border-left: 2px solid var(--oc-line); }
.oc-children > .oc-item:first-child::after, .oc-children > .oc-item:last-child::after { height: 16px; }
/* Rounded corners where the lines turn */
.oc-children > .oc-item:first-child:not(:only-child)::before { border-top-left-radius: 8px; border-left: 2px solid var(--oc-line); height: 16px; }
.oc-children > .oc-item:last-child:not(:only-child)::before { border-top-right-radius: 8px; border-right: 2px solid var(--oc-line); height: 16px; }
.oc-children > .oc-item:first-child:not(:only-child)::after, .oc-children > .oc-item:last-child:not(:only-child)::after { display: none; }

/* Search */
.oc-canvas.is-searching .oc-node { opacity: 0.35; }
.oc-canvas.is-searching .oc-node.is-match { opacity: 1; box-shadow: 0 0 0 2px var(--oc-accent), var(--oc-lift); }
.oc-canvas.is-searching .oc-node.is-hit { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--oc-accent), var(--oc-lift); }

/* ---------- List layout (button, and always on phones) ---------- */
.oc-layout-list .oc-canvas { background: var(--oc-surface); padding: 14px; }
.oc-layout-list .oc-tree { display: block; width: auto; min-width: 0; max-width: 760px; }
.oc-layout-list .oc-tree > .oc-item + .oc-item { margin-top: 10px; }
.oc-layout-list .oc-item { display: block; }
.oc-layout-list .oc-node { width: auto; max-width: none; padding-right: 96px; }
.oc-layout-list .oc-dept-node { padding-right: 72px; }
.oc-layout-list .oc-focus { top: 50%; right: 52px; transform: translateY(-50%); }
.oc-layout-list .oc-item > .oc-toggle { position: absolute; top: 14px; right: 8px; margin: 0; }
.oc-layout-list .oc-children { display: block; padding: 8px 0 0 18px; margin-left: 21px; border-left: 2px solid var(--oc-line); }
.oc-layout-list .oc-children::before { display: none; }
.oc-layout-list .oc-children > .oc-item { padding: 0; margin-bottom: 8px; }
.oc-layout-list .oc-children > .oc-item::after { display: none; }
.oc-layout-list .oc-children > .oc-item::before,
.oc-layout-list .oc-children > .oc-item:first-child:not(:only-child)::before,
.oc-layout-list .oc-children > .oc-item:last-child:not(:only-child)::before,
.oc-layout-list .oc-children > .oc-item:only-child::before {
  display: block; left: -18px; right: auto; top: 26px; width: 14px; height: 0; border: 0; border-top: 2px solid var(--oc-line); border-radius: 0;
}
@media (max-width: 767.98px) {
  .oc-layout { display: none; }
  .oc-hide-sm { display: none; }
  .oc-app .oc-canvas, .nanoq-sc-orgchart .oc-canvas { background: var(--oc-surface); padding: 12px; }
  .oc-app .oc-tree, .nanoq-sc-orgchart .oc-tree { display: block; width: auto; min-width: 0; }
  .oc-app .oc-tree > .oc-item + .oc-item { margin-top: 10px; }
  .oc-app .oc-item, .nanoq-sc-orgchart .oc-item { display: block; }
  .oc-app .oc-node, .nanoq-sc-orgchart .oc-node { width: auto; max-width: none; padding-right: 92px; }
  .oc-app .oc-dept-node { padding-right: 70px; }
  .oc-app .oc-focus { top: 50%; right: 50px; transform: translateY(-50%); }
  .oc-app .oc-item > .oc-toggle, .nanoq-sc-orgchart .oc-item > .oc-toggle { position: absolute; top: 14px; right: 8px; left: auto; margin: 0; }
  .oc-app .oc-children, .nanoq-sc-orgchart .oc-children { display: block; padding: 8px 0 0 12px; margin-left: 14px; border-left: 2px solid var(--oc-line); }
  .oc-app .oc-children::before, .nanoq-sc-orgchart .oc-children::before { display: none; }
  .oc-app .oc-children > .oc-item, .nanoq-sc-orgchart .oc-children > .oc-item { padding: 0; margin-bottom: 8px; }
  .oc-app .oc-children > .oc-item::after, .nanoq-sc-orgchart .oc-children > .oc-item::after { display: none; }
  .oc-app .oc-children > .oc-item::before,
  .oc-app .oc-children > .oc-item:first-child:not(:only-child)::before,
  .oc-app .oc-children > .oc-item:last-child:not(:only-child)::before,
  .oc-app .oc-children > .oc-item:only-child::before,
  .nanoq-sc-orgchart .oc-children > .oc-item::before {
    display: block; left: -12px; right: auto; top: 26px; width: 9px; height: 0; border: 0; border-top: 2px solid var(--oc-line); border-radius: 0;
  }
  .oc-col-dept { display: none; }
  .oc-toolbar .oc-search { flex-basis: 100%; max-width: none; }
}

/* ---------- Not placed, empty ---------- */
.oc-alone { margin-top: 18px; background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-r); padding: 12px 16px; }
.oc-alone summary { font-weight: 700; color: var(--oc-ink); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.oc-alone summary .nq-count { margin-left: 2px; }
.oc-alone-hint { color: var(--oc-muted); font-size: 0.85rem; margin: 8px 0 0; }
.oc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.oc-grid .oc-node { width: auto; }
.oc-empty { text-align: center; padding: 40px 16px; background: var(--oc-surface); border: 1px dashed var(--oc-border); border-radius: var(--oc-r); }
.oc-empty > i { font-size: 2.6rem; color: var(--oc-accent); }
.oc-empty h3 { font-family: var(--oc-display); font-size: 1.15rem; margin: 8px 0 6px; color: var(--oc-ink); }
.oc-empty p { color: var(--oc-text); max-width: 520px; margin: 0 auto 14px; }

/* ---------- Edit tables ---------- */
.oc-table-wrap { background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-r); overflow: hidden; }
.oc-table { margin: 0; }
.oc-table th { font-size: 0.75rem; text-transform: none; letter-spacing: 0; color: var(--oc-muted); background: var(--oc-ice); white-space: nowrap; }
.oc-table td { vertical-align: middle; }
.oc-table select { min-width: 0; max-width: 320px; width: 100%; }
.oc-row-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oc-row-person img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 32px; }
.oc-row-person > span { display: flex; flex-direction: column; min-width: 0; }
.oc-row-person strong { color: var(--oc-ink); overflow-wrap: anywhere; }
.oc-row-person small, .oc-auto { color: var(--oc-muted); font-size: 0.75rem; }
.oc-auto, .oc-msg { display: block; margin-top: 3px; }
.oc-msg { font-size: 0.75rem; }
.oc-msg.is-good { color: var(--nq-aurora, #279c84); }
.oc-msg.is-bad { color: #c2415c; }
.oc-table .oc-dept { font-size: 0.82rem; margin: 0; color: var(--oc-text); }
@media (max-width: 575.98px) {
  .oc-table thead { display: none; }
  .oc-table tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--oc-border); }
  .oc-table td { display: block; border: 0; padding: 3px 0; }
  .oc-table select { max-width: none; }
}

/* ---------- Profile page ---------- */
.oc-profile-person { display: inline-flex; align-items: center; gap: 8px; color: var(--oc-ink) !important; text-decoration: none; }
.oc-profile-person img, .oc-profile-faces img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.oc-profile-faces { display: flex; flex-wrap: wrap; }
.oc-profile-faces a { margin-right: -6px; border: 2px solid var(--oc-surface); border-radius: 50%; display: inline-flex; }
.oc-more { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: var(--oc-ice); color: var(--oc-muted); font-size: 0.75rem; font-weight: 700; }
.oc-profile .btn { display: inline-flex; align-items: center; gap: 4px; width: auto; align-self: flex-start; }

/* ---------- Widget ---------- */
.oc-widget .card-body { padding-top: 0.5rem; }
.oc-w-h { font-size: 0.74rem; font-weight: 700; color: var(--oc-muted); margin: 14px 0 8px; text-transform: none; }
.oc-w-person { display: flex; align-items: center; gap: 10px; color: var(--oc-ink) !important; text-decoration: none; }
.oc-w-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.oc-w-person > span { display: flex; flex-direction: column; min-width: 0; }
.oc-w-person small { color: var(--oc-muted); }
.oc-w-faces { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oc-w-faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.oc-w-faces .oc-more { margin-left: 0; height: 36px; min-width: 36px; }

/* ---------- Arctic design ---------- */
body.nanoq-arctic .oc-node { border-radius: 14px; }
body.nanoq-arctic .oc-tab.is-active { box-shadow: var(--oc-shadow); }

/* ---------- Print ---------- */
@media print {
  .layout-menu, .layout-navbar, .oc-toolbar, .oc-tabs, .oc-focus, .oc-toggle, .oc-alone, .content-footer, footer, .nq-head .btn { display: none !important; }
  .layout-page, .content-wrapper, .container-xl { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .oc-canvas { overflow: visible; border: 0; background: none; padding: 0; }
  .oc-node { box-shadow: none; break-inside: avoid; }
  .oc-item:not(.is-open) > .oc-children { display: flex; }
}

/* Widget icon chip in the arctic design (sitemap) */
body.nanoq-arctic #orgchart-widget .Nanoq-widget-header h6::before { content: "\ee73"; }

/* Drag to move a wide chart */
.oc-canvas.can-pan { cursor: grab; }
.oc-canvas.is-panning { cursor: grabbing; user-select: none; }

/* Shortcode on an ordinary page: the theme has no icon font – draw the arrow */
.nanoq-sc-orgchart .oc-toggle i { display: none; }
.nanoq-sc-orgchart .oc-toggle::before { content: ""; width: 6px; height: 6px; margin: 0 4px 2px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.nanoq-sc-orgchart .oc-item.is-open > .oc-toggle::before { transform: rotate(45deg); }
.nanoq-sc-orgchart .oc-canvas { margin-bottom: 1.5em; }