/* =========================================================
   CollaLex — styles-tables.css
   TEMPORARY split file (transitional restructure).
   Extracted verbatim from the old styles.css.
   Will be rejoined into the final stylesheet later.
   ========================================================= */

/* -----------------------------------------------------------
   TABLES (generic) (old Section 9)
   ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: 13.5px; }
th {
    background: var(--color-bg-hover); font-weight: 600; color: var(--color-text-secondary);
    font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.4px;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg-hover); }


/* -----------------------------------------------------------
   LIST ITEM (settings tabs: lexcats / dialects / sources)
   (old Section 15)
   CLEANUP UPDATE: this was one of three separate row patterns.
   .project-item and .user-row (below) now share identical values
   (padding, gap, divider/hover treatment, ellipsis truncation) —
   each keeps its own class name since renaming would require
   updating the view files too, which weren't available for this
   pass. .list-item here is intentionally left separate: it has no
   card wrapper, top-aligns instead of centering, and has an
   expandable inline-edit drawer .project-item/.user-row don't —
   different enough that unifying it risked changing real behavior
   without being able to verify against the view markup.
   ----------------------------------------------------------- */
.list-item {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.list-item-info { flex: 1; }
.list-item-info strong { font-size: 14px; }
.list-item-info .meta { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.inline-edit {
    display: none; background: var(--color-bg-hover); padding: 12px;
    border-radius: 6px; margin-top: 8px; border: 1px solid var(--color-border);
}
.inline-edit.open { display: block; }


/* -----------------------------------------------------------
   PROJECT LIST (projects/index) (old Section 16)
   Values now aligned with .user-row / .project-item — see note above.
   ----------------------------------------------------------- */
.projects-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.project-list { background: var(--color-surface); border-radius: 10px; border: 1px solid var(--color-border); overflow: hidden; }
.project-item {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    border-bottom: 1px solid var(--color-bg-divider); color: inherit; transition: background 0.1s;
}
.project-item:last-child { border-bottom: none; }
.project-item:hover { background: var(--color-bg-hover); }
.project-item-info { flex: 1; min-width: 0; }
.project-item-name { font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-item-meta { font-size: 12px; color: var(--color-text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* -----------------------------------------------------------
   USERS LIST (users/index, project users) (old Section 17)
   Values now aligned with .project-item — see note above.
   PLACEMENT ASSUMPTION: .users-section is treated as the direct
   wrapper around .user-row (giving it the same card-container
   role .project-list plays for .project-item). Not confirmed
   against the actual view markup.
   ----------------------------------------------------------- */
.users-section {
    margin-bottom: 32px; background: var(--color-surface); border-radius: 10px;
    border: 1px solid var(--color-border); overflow: hidden;
}
.users-section h3 { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--color-bg-divider); }
.user-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    border-bottom: 1px solid var(--color-bg-divider); transition: background 0.1s;
}
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: var(--color-bg-hover); }
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: 12px; color: var(--color-text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* -----------------------------------------------------------
   FIELD CONFIGURATION TABLE — table half only (old Section 19)
   The pill/button half of this original section
   (.fc-avail-pill, .fc-activate, .fc-deactivate) was moved to
   styles-elements.css instead — see note there.
   CONFIRMED (settings-index.php lines 352 & 436): .fc-section-title
   labels BOTH "Active Fields" (above this table) AND "Available
   Fields" (above the pill group now in styles-elements.css). It's
   a shared label style, not table-specific — this is fine to leave
   here since both files load together and will be rejoined anyway,
   but worth knowing if this file is ever split further.
   ----------------------------------------------------------- */
.fc-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--color-text-faint); margin: 0 0 10px;
}
.field-config-table { width: 100%; max-width: 900px; border-collapse: collapse; }
.field-config-table th { font-size: 11px; padding: 8px 10px; text-align: left; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.field-config-table td { padding: 7px 10px; vertical-align: middle; border-bottom: 1px solid var(--color-bg-divider); }
.field-config-table tbody tr:hover td { background: var(--color-bg-hover); }
.field-row.dragging { opacity: 0.4; background: var(--color-bg-active); }
.drag-handle { color: var(--color-border-strong); cursor: grab; }