/* [CU-868jwkfnj] Required Docs & Conditions — drawer, avatars, status pills,
   category folder headers. Visual only; behavior lives in
   fileChecklistConditions.js. */

/* ---- Keyword filter (the DataTables search box is relocated into
        .fileChecklistFormFilter) — full width, aligned with the other
        filter controls ---- */
.fileChecklistFormFilter .dataTables_filter,
.fileChecklistFormFilter .dataTables_filter label,
.fileChecklistFormFilter .dataTables_filter input {
    width: 100%;
    margin: 0;
}

/* ---- Table header row: very slightly darker grey than thead-light
        (back-office Docs tab + borrower upload portal) ---- */
#fileCheckListTableId thead th,
#uploadPortalFileCheckListTableId thead th {
    background-color: #e9edf2 !important;
}

/* ---- Category folder headers: taller, subtle top-to-bottom gradient ---- */
tr.condGroupHeader > td {
    border-top: 2px solid #e4e6ef;
    background: linear-gradient(180deg, #f9fafc 0%, #e9ecf2 100%);
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}
tr.condGroupHeader .condGroupToggle {
    user-select: none;
}
tr.condGroupHeader .condGroupCaret {
    width: 12px;
    text-align: center;
}
/* Pronounced category name in the folder header */
tr.condGroupHeader .condGroupName {
    font-size: 1.1rem;
    font-weight: 700;
    color: #181c32;
}

/* ---- Under-name toggle ---- */
.condUnderName {
    font-size: 0.85rem;
}
.condUnderName .condCaret,
.condCellToggle .condCaret {
    transition: transform 0.15s ease;
}
tr.condExpanded .condCaret {
    transform: rotate(90deg);
}
.condCellToggle {
    white-space: nowrap;
}

/* ---- Drawer ---- */
.condDrawer {
    padding: 0.5rem 0.75rem 0.75rem 2.25rem;
    background: #f9fafc;
    border-left: 3px solid #ffa800;
}
.condDrawerHead {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
/* Each condition is a white rounded card on the drawer's grey background */
.condRow {
    background: #fff;
    border: 1px solid #ebedf3;
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem !important;
    margin-bottom: 0.55rem;
}
.condRow:last-of-type {
    margin-bottom: 0;
}
.condRow .condText.cond-done {
    text-decoration: line-through;
    color: #b5b5c3;
}
.condRow .condStatusWrap select,
.condRow .condOwnerWrap select,
.condAddRow select {
    width: auto;
    min-width: 130px;
    display: inline-block;
}
.condRow .condRemove {
    padding: 0 0.4rem;
}

/* Row hidden because its category folder is collapsed. Class-based (instead
   of jQuery .toggle inline styles) so expanding a folder can never override
   server-side hiding (deActivateDoc inline style / hideForAdditionalLogicN).
   NOT table-id scoped: the class is unique to this feature and the rule must
   apply on BOTH tables (#fileCheckListTableId on the back-office Docs tab AND
   #uploadPortalFileCheckListTableId on the borrower upload portal) — an
   id-scoped version of this rule is exactly why portal collapse did nothing
   while the JS toggled the class correctly. */
tr.condGroupCollapsed {
    display: none !important;
}

/* ---- Owner avatar (initial in a colored circle) ---- */
.condOwnerAvatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    flex: 0 0 auto;
    /* Default — dynamic tenant employee roles without a named class below */
    background: #7e8299;
}
.condOwnerAvatar.avatar-none        { background: #b5b5c3; }
/* External */
.condOwnerAvatar.avatar-borrower    { background: #3699ff; }
.condOwnerAvatar.avatar-broker      { background: #8950fc; }
.condOwnerAvatar.avatar-loanofficer { background: #1bc5bd; }
.condOwnerAvatar.avatar-branch      { background: #6993ff; }
/* Back office */
.condOwnerAvatar.avatar-processor    { background: #ffa800; }
.condOwnerAvatar.avatar-underwriter  { background: #f64e60; }
.condOwnerAvatar.avatar-loanmanager  { background: #2a2a3c; }

/* ---- Read-only status pill (borrower upload portal drawers) ----
   Same palette as the select tints below; solid pills since the portal
   drawer has no editable controls. */
.condStatusPill {
    display: inline-block;
    min-width: 120px;
    text-align: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    flex: 0 0 auto;
}
/* "Open" needs attention — bright red, not grey */
.condStatusPill.cond-status-pending         { background: #f64e60; }
.condStatusPill.cond-status-pending-review  { background: #3699ff; }
.condStatusPill.cond-status-waiver-req      { background: #ffa800; }
.condStatusPill.cond-status-waived          { background: #8950fc; }
.condStatusPill.cond-status-done            { background: #1bc5bd; }

/* ---- Status select tint (matches the five statuses) ----
   pending="Open" · pending-review · waiver-req · waived · done="Cleared"
   "Open" is bright red + bold — it needs attention, not a muted grey. */
select.condStatusSelect.cond-status-pending         { color: #f64e60; font-weight: 600; }
select.condStatusSelect.cond-status-pending-review  { color: #3699ff; }
select.condStatusSelect.cond-status-waiver-req      { color: #ffa800; }
select.condStatusSelect.cond-status-waived          { color: #8950fc; }
select.condStatusSelect.cond-status-done            { color: #1bc5bd; font-weight: 600; }