/* Admin Folders Shared Styles */
.badge-container {
    display: flex;
    gap: var(--sp-1);
    align-items: center;
}
.folders-badge {
    background: var(--surface-sunken);
    color: var(--text-muted);
    border: none;
    font-weight: var(--fw-500);
    font-size: var(--fs-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-control);
    line-height: 1;
}
/* Selection toolbar styles migrated to global comp_styles.html */
.th-checkbox {
    width: calc(var(--sp-5) - 8px);
    padding-left: var(--sp-4);
    padding-right: 0;
}
.th-clickable {
    cursor: pointer;
}
.th-name {
    padding-left: var(--sp-4);
}
.th-header-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.th-filter-input {
    width: 100%;
}
/* The filter only needs separation when it sits stacked UNDER a column label
   (library / audit / folder-view). When it stands alone in the <th> (sessions /
   grants) there is no label above, so no top margin — keeps it vertically
   centered against the text-only header cells. */
.th-header-inner + .table-filter {
    margin-top: var(--sp-1);
}
.th-actions {
    text-align: right;
    padding-right: var(--sp-4);
}
/* Dropdowns size to their content (longest option) by default — no width/min-width. */
.td-checkbox {
    padding-left: var(--sp-4);
    padding-right: 0;
}
.td-name {
    padding-left: var(--sp-4);
}
.folder-icon-container {
    width: calc(var(--sp-5) - 8px);
    height: calc(var(--sp-5) - 8px);
    background: var(--accent-surface);
    color: var(--accent);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.folder-icon {
    width: var(--sp-4);
    height: var(--sp-4);
}
.folders-row-layout {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.folder-name-row {
    font-weight: var(--fw-600);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.folder-badges-row {
    font-size: var(--fs-1);
    color: var(--text-muted);
    display: flex;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
}
/* Folder inline-rename input: hidden until rename, then the STANDARD bordered input
   (border / height / font all from the global input rule) filling the name cell. */
.inline-rename-input { display: none; width: 100%; }
.id-code-badge {
    font-size: var(--fs-1);
    color: var(--text-muted);
    background: var(--surface-sunken);
    padding: var(--sp-1) var(--sp-1);
    border-radius: var(--radius-control);
}
.td-actions {
    text-align: right;
    padding-right: var(--sp-4);
}
.actions-container {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
}
.actions-container-inline {
    display: inline-flex;
    gap: var(--sp-2);
    justify-content: flex-end;
}
/* Ghost action buttons and empty states migrated to global comp_styles.html */
.create-shortcut-row {
    cursor: default;
}
.create-shortcut-cell {
    padding: 0;
}
/* Inline create-row: a collapsed "+" trigger that expands into a create/invite bar
   filling the table row. Shared by folders / folder-view / library / admins. The bar is
   a plain flex row of STANDARD controls — a bordered input, an optional toggle, a .btn
   action and a secondary .btn-icon return (.plus-row-return) — no borderless "joined
   bar" fills; each control sits at the standard 32px height, centred in the row. */
.plus-row-state-a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--row-h);   /* match a standard data row */
    cursor: pointer;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), background var(--transition);
}
.plus-row-state-a:hover { background: var(--surface-sunken); }
.create-shortcut-row.expanded .plus-row-state-a { max-height: 0; opacity: 0; pointer-events: none; }

.plus-row-state-b {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    height: var(--row-h);   /* match a standard data row (keep in sync with .plus-row-state-a) */
    padding: 0 var(--sp-3);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.create-shortcut-row.expanded .plus-row-state-b { max-height: 100px; opacity: 1; }
.plus-row-state-b form { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }

/* The one flexing text field (folder name / email). The input is a STANDARD bordered
   control (global input rule); this is just its flex wrapper + any adjacent toggle. */
.plus-row-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.plus-row-field > input { flex: 1; min-width: 0; }
/* Download + NDA toggles travel together as one permissions group (matches the
   table header order: permissions/NDA before expiry). */
.perm-group { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
/* Invite toggle (folder create): standard secondary icon button; armed = sunken fill. */
#folder-invite-btn.active { background: var(--surface-sunken); }

/* Invite reveal — a second row beneath the create bar (emails + expiry), shown when
   Invite is armed (.create-shortcut-row.inviting). STANDARD bordered controls in a flex
   row, same as every other bar. */
.folder-invite-row {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    height: var(--row-h);
    padding: 0 var(--sp-3);
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.create-shortcut-row.expanded.inviting .folder-invite-row { display: flex; }
.folder-invite-row > input[type="text"] { flex: 1; min-width: 0; }

/* Return/undo: standard secondary icon button (bordered 32px square). */
.plus-row-return {
    flex: 0 0 auto;
    width: var(--field-h);
    height: var(--field-h);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
}
.plus-row-return:hover { background: var(--surface-sunken); }
.folders-back-btn {
    padding: calc(var(--sp-2) / 2);
    margin-left: -var(--sp-2);
}
.row-icon-container {
    width: calc(var(--sp-5) - 8px);
    height: calc(var(--sp-5) - 8px);
    background: var(--surface-sunken);
    color: var(--text-muted);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
}
.td-file-info {
    font-weight: var(--fw-600);
    color: var(--text);
    flex: 1;
}
.file-name-container {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0; /* let the name shrink + truncate instead of overrunning the column */
}
.file-name-text {
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-name-text a {
    color: inherit;
    text-decoration: none;
    outline: none;
}
.td-file-size {
    color: var(--text-muted);
    font-size: var(--fs-2);
}

/* Guest Portal Spacing & Detail classes */
.portal-footer {
    margin-top: var(--sp-5);
    text-align: center;
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
}
.portal-footer-text {
    font-size: var(--fs-1);
    color: var(--text-muted);
    font-weight: var(--fw-600);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}
.file-click-hint {
    font-size: var(--fs-1);
    color: var(--text-muted);
}

/* Grants page — archived-grants disclosure + inline reactivate row */
.archived-summary { cursor: pointer; list-style: none; user-select: none; }
.archived-summary::-webkit-details-marker { display: none; }
.archived-summary::marker { content: ""; }
.archived-section[open] .archived-summary { border-bottom: 1px solid var(--border); }
/* Collapsed: the summary is the card's only content — its card-header border-bottom would
   double up with the card's own bottom border. Drop it when closed. */
.archived-section:not([open]) .archived-summary { border-bottom: none; }
.archived-caret { transition: transform 0.2s ease; }
.archived-section[open] .archived-caret { transform: rotate(180deg); }
.reactivate-cell { background: var(--surface-raised); padding: 0; }
.reactivate-expiry-date {
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
}

/* Folder accordion: a folder row expands into the inline contents row. */
.folder-caret { display: inline-flex; align-items: center; color: var(--text-muted); transition: transform 0.15s ease; flex-shrink: 0; }
.folder-row.expanded .folder-caret { transform: rotate(90deg); }
.folder-row.expanded > td { background: var(--surface); }
.folder-detail-row > .folder-detail-cell { padding: 0; background: var(--surface); border-bottom: 1px solid var(--border); }
/* The fragment renders its own search-bar + card; give it breathing room and let
   it sit visually "inside" the folder rather than as a full page section. */
#folder-detail-content { padding: var(--sp-3) var(--sp-4); }
#folder-detail-content .top-bar { display: none; }

/* Zip archive indicator: a decorative caret in the name cell. The whole row toggles
   the archive list (data-row-mode="zip" → a detailRows panel), so this is a non-
   interactive <span>; it rotates when the row is expanded. */
.file-name-container .zip-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: var(--sp-5); height: var(--sp-5); padding: 0; flex: 0 0 auto; color: var(--text-muted); transition: transform 0.15s ease; }
.zip-row.zip-open .zip-toggle { transform: rotate(90deg); }

/* In-row rename: the pencil sits next to the filename and is the exclusive trigger.
   Entering rename hides the name container and reveals the editor bar, which fills the
   whole row (JS expands the name cell's colspan over the now-hidden Type/Size/actions
   columns). The input grows; Apply to Library + save + back sit right-bound. Generic
   across the folder file list and library. Save-only (no autosave). */
/* In-name-cell icon button: compact (--sp-5), same metrics as .zip-toggle, so it
   doesn't balloon the row the way a full --field-h .btn-icon would. */
/* Same compact, hover-revealed rename pencil for library file rows AND top-level folder
   rows (the .folder-name-row scope, like .file-name-container, out-specifies .btn-icon so
   the button stays --sp-5 instead of ballooning to --field-h). */
.file-name-container .rename-pencil,
.folder-name-row .rename-pencil { min-width: 0; width: var(--sp-5); height: var(--sp-5); padding: 0; flex: 0 0 auto; opacity: 0; transition: opacity 0.2s; }
/* Hover-revealed like the expand's .alias-edit-btn: the pencil is not a permanent fixture
   on the row — it fades in on row hover and stays reachable via keyboard focus, then fades
   back out on focus/hover loss. */
tr.interactive-row:hover .file-name-container .rename-pencil,
tr.interactive-row:hover .folder-name-row .rename-pencil,
.file-name-container .rename-pencil:focus-visible,
.folder-name-row .rename-pencil:focus-visible { opacity: 1; }
.rename-edit-bar { display: none; align-items: center; gap: var(--sp-2); width: 100%; }
tr.renaming .file-name-container { display: none; }
tr.renaming .rename-edit-bar { display: flex; }
/* In rename mode the editor controls (input + buttons) carry their own height, so the
   cell's vertical padding would stack on top and balloon the row past a standard data
   row. Zero it — the controls define the height, exactly like the actions column. */
tr.renaming td.td-name { padding-top: 0; padding-bottom: 0; }
.rename-edit-bar .rename-input { flex: 1 1 auto; min-width: 0; height: var(--field-h); font-size: var(--fs-2); }

/* Replace / new-version in-row panel — same row-takeover pattern as rename. */
.replace-bar { display: none; align-items: center; gap: var(--sp-2); width: 100%; }
tr.replacing .file-name-container { display: none; }
tr.replacing .replace-bar { display: flex; }
tr.replacing td.td-name { padding-top: 0; padding-bottom: 0; }
.rename-apply-label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-1); color: var(--text-muted); white-space: nowrap; cursor: pointer; }
/* Archive contents — real sibling table rows under the archive row (revealed by the
   zip row's toggle), indented one step past the file name and muted, so they read as
   "inside" the zip while staying aligned with the file columns. */
.zip-inner-row td.zip-inner-name { padding-left: calc(var(--sp-5) + var(--sp-4)); color: var(--text-muted); }
/* Inner-file alias rename reuses the shared name-cell machinery: the name + pencil sit
   in a .file-name-container (standard 24px height → standard row height), and the
   pencil (.rename-pencil, auto-sized to --sp-5) reveals on row hover. Clicking it adds
   `renaming` to the row, which the shared tr.renaming rules use to swap in .rename-edit-bar
   — identical to the file/folder rename, no custom row height or button size. */
.zip-inner-row:hover .file-name-container .rename-pencil,
.zip-inner-row .file-name-container .rename-pencil:focus-visible { opacity: 1; }
/* Library detail: the archive's inner files as a headerless secondary table below the
   folder-references (alias) list. A small muted subhead separates the two; the list
   itself is full-width standard rows (base td), indented like a nested row. */
.zip-inner-list-wrap { margin-top: var(--sp-3); }
.detail-subhead { font-size: var(--fs-1); font-weight: var(--fw-600); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--sp-1); }
.zip-inner-list { width: 100%; border-collapse: collapse; }
.zip-inner-list td.zip-inner-name { color: var(--text-muted); }