/* activity-details-panel.css — P6 Schedule Authoring (Phase 2) bottom "Activity Details" dock.
   Namespaced `.authoring-details-*` (grepped repo-wide 2026-07-10 — no collisions).
   Design contract: tests/p6-authoring-mockup-gantt.html + p6-authoring-mockup-shared.css
   (the .pm-details-panel / .pm-tabs / .pm-table shapes), rebuilt on APP theme tokens.

   Theme tokens only: every colour is `var(--token, <light fallback>)` (mirrors authoring.css);
   dark mode flips automatically because --panel-bg/--tb-btn-*/--cell-text/--header-border/--accent
   are redefined under [data-theme-mode="dark"]. House dark mandate honoured: the large panel/tab
   surfaces use darkened navy tokens; the accent (blue) appears only as small hints (active tab
   underline, add button, focus ring). The panel is created lazily and removed on close, so it has
   ZERO footprint (viewers stay pixel-identical) whenever authoring's Details toggle is off. */

/* ── Panel shell (docked below #gantt-container as its following sibling) ── */
.authoring-details-panel {
    flex: 0 0 auto;
    height: 260px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--panel-bg, #f8fafc);
    color: var(--cell-text, #1f2937);
    border-top: 1px solid var(--header-border, #e2e8f0);
    /* Mirror #gantt-container's sidebar offset (see the sibling combinator below) so the
       panel's content aligns under the grid+gantt rather than under the fixed sidebar. */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When the sidebar is pinned open, #gantt-container gains `.sidebar-open` + a margin-left.
   The panel is its immediately-following sibling, so mirror the SAME width chain here — a
   pure-CSS follow with no JS wiring. */
.gantt-container.sidebar-open ~ .authoring-details-panel {
    margin-left: var(--side-width-user, var(--side-width, 256px));
}

/* ── Tab strip (title + tabs + close) ── */
.authoring-details-tabs {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 10px;
    background: var(--tb-btn-bg, #ffffff);
    border-bottom: 1px solid var(--header-border, #e2e8f0);
}
.authoring-details-title {
    align-self: center;
    padding: 0 12px 0 2px;
    max-width: 340px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cell-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.authoring-details-tab {
    padding: 9px 14px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--authoring-muted, #64748b);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.authoring-details-tab:hover { color: var(--cell-text, #1e293b); }
.authoring-details-tab.is-active {
    color: var(--accent, #2563eb);
    border-bottom-color: var(--accent, #2563eb);
    font-weight: 600;
}
/* Visible-but-muted placeholder tabs (General → P3, Status → P5). */
.authoring-details-tab.is-placeholder { color: var(--authoring-muted, #94a3b8); }
.authoring-details-count {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    border-radius: 8px;
    color: var(--authoring-muted, #64748b);
    background: var(--header-border, #e2e8f0);
}
.authoring-details-tab.is-active .authoring-details-count {
    color: var(--authoring-on-accent, #ffffff);
    background: var(--accent, #2563eb);
}
.authoring-details-spacer { flex: 1; }
.authoring-details-close {
    padding: 4px 9px;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--authoring-muted, #64748b);
    background: none;
    border: none;
    border-radius: var(--btn-radius, 4px);
    cursor: pointer;
}
.authoring-details-close:hover {
    color: var(--cell-text, #1e293b);
    background: var(--row-hover-bg, #f1f5f9);
}

/* ── Body + panes ── */
.authoring-details-body {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
}
.authoring-details-pane { display: none; }
.authoring-details-pane.is-active { display: block; }

/* Empty state (no selection / WBS row) + phase placeholders */
.authoring-details-empty,
.authoring-details-placeholder {
    padding: 8px 2px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--authoring-muted, #64748b);
}
.authoring-details-phase-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 4px;
    color: var(--accent, #2563eb);
    background: color-mix(in srgb, var(--accent, #2563eb) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 38%, transparent);
}

/* ── Relationship table (Predecessors / Successors) ── */
.authoring-details-table {
    width: 100%;
    max-width: 900px;
    border-collapse: collapse;
    font-size: 12.5px;
}
.authoring-details-table th {
    padding: 6px 8px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--authoring-muted, #64748b);
    border-bottom: 2px solid var(--header-border, #e2e8f0);
    white-space: nowrap;
}
.authoring-details-table td {
    padding: 5px 8px;
    color: var(--cell-text, #1e293b);
    border-bottom: 1px solid var(--header-border, #eef2f7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.authoring-details-table td.mono {
    font-family: var(--mono-font, ui-monospace, Consolas, 'Courier New', monospace);
}
.authoring-details-table select,
.authoring-details-table input {
    font: inherit;
    font-size: 12px;
    color: var(--cell-text, #1e293b);
    background: var(--tb-btn-bg, #ffffff);
    border: 1px solid var(--tb-btn-border, #d1d5db);
    border-radius: 4px;
    padding: 3px 6px;
    outline: none;
}
.authoring-details-table select:focus,
.authoring-details-table input:focus,
.authoring-details-add-input:focus {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 2px var(--authoring-focus-ring, rgba(37, 99, 235, 0.25));
}
.authoring-details-lag { width: 64px; text-align: right; }
.authoring-details-remove {
    padding: 2px 7px;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    color: var(--authoring-muted, #94a3b8);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.authoring-details-remove:hover {
    color: var(--authoring-danger, #d32f2f);
    background: var(--row-hover-bg, #f1f5f9);
}

/* ── Add-relationship row ── */
.authoring-details-addrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.authoring-details-add-input {
    width: 260px;
    max-width: 60vw;
    padding: 5px 8px;
    font: inherit;
    font-size: 12.5px;
    color: var(--cell-text, #1e293b);
    background: var(--tb-btn-bg, #ffffff);
    border: 1px solid var(--tb-btn-border, #d1d5db);
    border-radius: 4px;
    outline: none;
}
.authoring-details-add-btn {
    padding: 6px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--authoring-on-accent, #ffffff);
    background: var(--btn-pri, var(--accent, #1a73e8));
    border: 1px solid var(--btn-pri, var(--accent, #1a73e8));
    border-radius: 4px;
    cursor: pointer;
}
.authoring-details-add-btn:hover { filter: brightness(0.95); }
.authoring-details-hint {
    font-size: 11px;
    color: var(--authoring-muted, #94a3b8);
}

/* ── Toolbar "Details" button pressed state (panel open) ── */
.toolbar-btn.authoring-details-btn-active {
    background: var(--row-hover-bg, #eef2ff);
    color: var(--accent, #2563eb);
}