/**
 * I4S Core — Corporate (rebuilt) surface styling.
 *
 * Scoped under .i4s-core-corporate so it cannot leak into the Staff Panel's other modules, and it
 * leans on the panel's existing primitives (.i4s-staff-panel-subpanel / -stat / -button) so the
 * rebuilt surface still looks like the rest of the panel. New markup, not a port: the legacy
 * corporate CSS dresses the 16-domain generic form, which the rebuild drops.
 *
 * Slice 1 (RL-066 Fase D): Company. Slice 2 (RL-067 Fase D): Person + CompanyPerson roles — reuses
 * every class above (form/field/list/item/tag), no entity-specific styling needed. Slice 3 (RL-068
 * Fase D): Document — reuses the same primitives, only a small .is-template tag modifier is new.
 */

/*
 * RL-071: the root deliberately does NOT wear the legacy `i4s-staff-panel-corporate` class — that
 * class is how the legacy JS finds its corporate root, and wearing it double-bound every action
 * (RL-069 verify: one Delete click, two confirm dialogs). The only thing it gave us visually was
 * `gap: 16px`, so we set it here ourselves.
 */
.i4s-core-corporate {
    gap: 16px;
}

.i4s-core-corporate-workspace {
    margin: 16px 0;
}

/* Company filter bar (RL-071 — the server always supported these filters; the control was missing). */
.i4s-core-corporate-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.i4s-core-corporate-filters .i4s-core-corporate-field {
    flex: 0 1 200px;
}

.i4s-core-corporate-filters-actions {
    display: flex;
    gap: 8px;
}

.i4s-core-corporate-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.i4s-core-corporate-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.i4s-core-corporate-field-wide {
    grid-column: 1 / -1;
}

.i4s-core-corporate-field > span {
    font-weight: 600;
    opacity: 0.85;
}

.i4s-core-corporate-field > span em {
    color: #c0392b;
    font-style: normal;
}

.i4s-core-corporate-field input,
.i4s-core-corporate-field select,
.i4s-core-corporate-field textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    font: inherit;
    background: #fff;
}

.i4s-core-corporate-field textarea {
    resize: vertical;
}

.i4s-core-corporate-form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.i4s-core-corporate-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.i4s-core-corporate-empty {
    opacity: 0.7;
    font-style: italic;
    margin: 6px 0;
}

.i4s-core-corporate-item {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.6);
}

.i4s-core-corporate-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.i4s-core-corporate-item-head strong {
    font-size: 15px;
}

.i4s-core-corporate-item-meta {
    margin: 6px 0 10px;
    font-size: 13px;
    opacity: 0.75;
}

.i4s-core-corporate-item-actions {
    display: flex;
    gap: 8px;
}

.i4s-core-corporate-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.07);
}

.i4s-core-corporate-tag.is-own {
    background: rgba(20, 60, 120, 0.12);
    color: #143c78;
}

.i4s-core-corporate-tag.is-status-archived {
    background: rgba(0, 0, 0, 0.12);
    opacity: 0.75;
}

.i4s-core-corporate-tag.is-status-inactive {
    background: rgba(200, 140, 0, 0.16);
    color: #7a5300;
}

.i4s-core-corporate-tag.is-primary {
    background: rgba(20, 130, 60, 0.14);
    color: #106b34;
}

.i4s-core-corporate-tag.is-template {
    background: rgba(120, 60, 160, 0.14);
    color: #5a2d82;
}

.i4s-core-corporate .i4s-staff-panel-feedback.is-error {
    color: #c0392b;
}

/*
 * RL-076: the org chart (RL-075) shipped six classes with no styling at all, so it rendered as bare
 * divs. This block is CSS only — the markup and JS are covered by harnesses (jsdom 45/45, RL-067
 * 105/105) that assume the current hooks.
 *
 * READ THIS BEFORE ADDING A `display` RULE ANYWHERE IN THIS BLOCK.
 * The JS opens and closes the org chart with `panel.hidden = !panel.hidden`
 * (i4s-core-corporate.js:294, and :370 on refresh). `hidden` only works because the UA stylesheet
 * says `[hidden] { display: none }` — that is a plain author-level rule, so ANY `display` we set on
 * .i4s-core-corporate-org beats it and every company's chart would hang open permanently. It is a
 * <div>, so `display: block` is what we want anyway; we simply never say so. The guard below makes
 * that safe for the next person instead of relying on them reading this comment.
 *
 * No harness can catch this: the PHP harnesses are WP-less and jsdom computes no layout, so a
 * broken-open chart is green in all of them. Verified visually.
 */
.i4s-core-corporate [hidden] {
    display: none !important;
}

/* The chart lives inside a company row, so it reads as part of that company, not as a new panel. */
.i4s-core-corporate-org {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 0, 0, 0.14);
}

.i4s-core-corporate-org-members {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.i4s-core-corporate-org-member {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.035);
}

/* By hook, not by tag: the button is the module's own, and the markup is not ours to change here. */
.i4s-core-corporate-org-member [data-org-unlink] {
    margin-left: auto;
}

.i4s-core-corporate-org-area {
    font-size: 12px;
    opacity: 0.7;
}

.i4s-core-corporate-org-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/*
 * The add row is deliberately NOT a <form> (nested forms), so its fields are not wrapped in
 * .i4s-core-corporate-field and never inherited its padding/border — they rendered as raw browser
 * defaults next to styled inputs. Mirror that rule here.
 *
 * Scoped to input[type="text"] on purpose: `input` alone would also hit the Primary checkbox and
 * blow it up into a text-box-sized square.
 */
.i4s-core-corporate-org-add select,
.i4s-core-corporate-org-add input[type="text"] {
    padding: 7px 9px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    font: inherit;
    background: #fff;
}

.i4s-core-corporate-org-add select {
    flex: 0 1 180px;
}

.i4s-core-corporate-org-add input[type="text"] {
    flex: 1 1 160px;
    min-width: 140px;
}

.i4s-core-corporate-org-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}