/* =====================================================================
   Organisation chart (SVG)
   The chart itself is drawn into #ocSvg by orgChartController; the rules
   below cover the page frame, the unassigned-user panel and the styling
   of the generated SVG nodes.

   Every colour goes through an --oc-* token so the whole chart follows
   the app theme; the dark values are declared right after the light set.
   ===================================================================== */

:root,
html[data-theme="light"],
body[data-theme="light"] {
    --oc-canvas-bg:     #f5f8fc;
    --oc-panel-bg:      var(--c-surface, #ffffff);
    --oc-panel-bd:      var(--c-border, #dfe6ee);

    --oc-group-bg:      #4e6d95;
    --oc-group-bd:      #709bc3;
    --oc-group-fg:      #ffffff;
    --oc-group-icon:    #cfe0f0;
    --oc-group-icon-hv: #ffffff;

    --oc-card-bg:       #e5f1ff;
    --oc-card-bd:       #c5ccd3;
    --oc-card-fg:       #333333;
    --oc-role-fg:       #297f9b;

    --oc-link:          #8da6d3;
    --oc-star:          #f38900;
    --oc-star-off:      #bfbfbf;
    --oc-remove:        #8b96a0;
    --oc-remove-hv:     #b90000;
    --oc-drop:          #2fa36b;
    --oc-drop-tint:     rgba(47, 163, 107, .35);
    --oc-shadow:        rgba(0, 0, 0, .25);
    --oc-shadow-soft:   rgba(0, 0, 0, .20);
}

html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark {
    --oc-canvas-bg:     #1c273c;
    --oc-panel-bg:      var(--c-surface, #293449);
    --oc-panel-bd:      var(--c-border, #334055);

    --oc-group-bg:      #33507a;
    --oc-group-bd:      #4d7bb0;
    --oc-group-fg:      #e6edf7;
    --oc-group-icon:    #9fb8d6;
    --oc-group-icon-hv: #ffffff;

    --oc-card-bg:       #24334d;
    --oc-card-bd:       #3d4f6b;
    --oc-card-fg:       #dde3ee;
    --oc-role-fg:       #6fc2d8;

    --oc-link:          #5b7cad;
    --oc-star:          #f0a53a;
    --oc-star-off:      #6a758a;
    --oc-remove:        #8a95a8;
    --oc-remove-hv:     #e04545;
    --oc-drop:          #3ebfb8;
    --oc-drop-tint:     rgba(62, 191, 184, .30);
    --oc-shadow:        rgba(0, 0, 0, .55);
    --oc-shadow-soft:   rgba(0, 0, 0, .45);
}

.oc-page {
    padding: 10px 12px 0 12px;
}

.oc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    min-height: 40px;
}

.oc-toolbar .btn {
    padding: 0 10px;
    height: 34px;
    font-size: 16px;
    margin-right: 6px;
}

.oc-toolbar .oc-action {
    border-style: solid;
    width: 40px;
    height: 34px;
    font-size: 18px;
    margin-left: 10px;
    margin-right: 0;
}

.oc-toolbar .btn-warning.oc-action { border-color: var(--btn-warning-bd, #c46d6d); }
.oc-toolbar .btn-success.oc-action { border-color: var(--btn-success-bd, #44866b); }

.oc-layout {
    display: flex;
    gap: 12px;
    height: calc(100vh - 170px);
    min-height: 420px;
}

/* ---------- unassigned users -------------------------------------- */
.oc-pool {
    width: 210px;
    flex: 0 0 210px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--oc-panel-bd);
    border-radius: 8px;
    background: var(--oc-panel-bg);
    padding: 8px;
    overflow: hidden;
}

.oc-pool.oc-drop-hover {
    border-color: var(--oc-drop);
    box-shadow: inset 0 0 0 2px var(--oc-drop-tint);
}

.oc-pool-head {
    font-weight: bold;
    color: var(--c-text, #4e6d95);
    margin-bottom: 6px;
}

.oc-pool-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--oc-group-bg);
    color: var(--oc-group-fg);
    font-size: 11px;
    text-align: center;
}

/* the global input[type=text] rule in frigian.css is !important, so the
   panel search box has to override it the same way */
.oc-pool-search {
    width: 100%;
    height: 30px !important;
    margin-bottom: 8px;
    border: 1px solid var(--input-border, #dfe6ee) !important;
    border-radius: 5px !important;
    background-color: var(--input-bg, #ffffff) !important;
    color: var(--c-text-2, #333) !important;
    padding: 3px 6px !important;
}

.oc-pool-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.oc-pool-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid var(--oc-card-bd);
    border-radius: 8px;
    background: var(--oc-card-bg);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.oc-pool-card.oc-drag-source { opacity: .4; }

.oc-pool-text { overflow: hidden; }

.oc-pool-name {
    font-size: 12px;
    color: var(--oc-card-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-pool-role {
    font-size: 11px;
    color: var(--oc-role-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.userImage {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    flex: 0 0 34px;
    object-fit: cover;
}

/* ---------- canvas ------------------------------------------------- */
.oc-canvas {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--oc-panel-bd);
    border-radius: 8px;
    background: var(--oc-canvas-bg);
    cursor: grab;
}

.oc-canvas.oc-panning { cursor: grabbing; }

#ocSvg {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- generated svg nodes ------------------------------------ */
.oc-link {
    stroke: var(--oc-link);
    stroke-width: 2;
    fill: none;
}

.oc-group-box {
    fill: var(--oc-group-bg);
    stroke: var(--oc-group-bd);
    stroke-width: 2;
    filter: drop-shadow(3px 3px 4px var(--oc-shadow));
}

.oc-group-title {
    fill: var(--oc-group-fg);
    cursor: pointer;
}

.oc-group-title.oc-static { cursor: default; }

.oc-group-icon text { fill: var(--oc-group-icon); }
.oc-group-icon { cursor: pointer; }
.oc-group-icon:hover text { fill: var(--oc-group-icon-hv); }

.oc-group.oc-drop-hover .oc-group-box {
    stroke: var(--oc-drop);
    stroke-width: 4;
}

.oc-card-box {
    fill: var(--oc-card-bg);
    stroke: var(--oc-card-bd);
    stroke-width: 2;
    filter: drop-shadow(3px 3px 4px var(--oc-shadow-soft));
}

.oc-card {
    cursor: grab;
}

.oc-card.oc-drag-source { opacity: .4; }

.oc-card-name { fill: var(--oc-card-fg); }

.oc-card-role {
    fill: var(--oc-role-fg);
    cursor: pointer;
}

.oc-star text { fill: var(--oc-star-off); }
.oc-star.is-leader text { fill: var(--oc-star); }
.oc-star { cursor: pointer; }

.oc-remove text { fill: var(--oc-remove); }
.oc-remove { cursor: pointer; }
.oc-remove:hover text { fill: var(--oc-remove-hv); }

/* ---------- drag ghost --------------------------------------------- */
body.oc-dragging { cursor: grabbing; }

.oc-ghost {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 210px;
    padding: 5px 8px;
    border: 1px solid var(--oc-group-bd);
    border-radius: 8px;
    background: var(--oc-panel-bg);
    color: var(--oc-card-fg);
    box-shadow: 0 6px 16px var(--oc-shadow);
    font-size: 12px;
    opacity: .95;
}

.oc-ghost img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    object-fit: cover;
}

.oc-ghost span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- inline editors ----------------------------------------- */
.editGroup {
    transition: box-shadow .25s;
    padding: 0;
    position: fixed;
    width: 235px;
    height: 32px;
    z-index: 1500;
    display: inline-flex;
    border-radius: 5px;
    background: var(--oc-panel-bg);
    border: 1px solid var(--oc-panel-bd);
    box-shadow: 0 4px 14px var(--oc-shadow);
}

.editGroup input[type=text] {
    height: 30px !important;
    border: 0 !important;
    background-color: transparent !important;
    color: var(--c-text, #333) !important;
}

/* Printing is always on white paper, so the chart drops back to the
   light palette whatever the screen theme is. */
@media print {
    .oc-page .oc-pool,
    .oc-page .oc-toolbar { display: none !important; }
    .oc-page .oc-layout { height: auto; }

    .oc-canvas {
        border: 0;
        background: #ffffff;
        --oc-group-bg: #4e6d95;
        --oc-group-bd: #709bc3;
        --oc-group-fg: #ffffff;
        --oc-card-bg: #e5f1ff;
        --oc-card-bd: #c5ccd3;
        --oc-card-fg: #333333;
        --oc-role-fg: #297f9b;
        --oc-link: #8da6d3;
        --oc-star-off: #bfbfbf;
        --oc-remove: #8b96a0;
    }
}