body { font-family: Georgia, 'Times New Roman', serif; background: #F7F3EE; color: #1A1610; margin: 0; padding: 0; }
.hidden { display: none !important; }

.main-content { padding: 1.5rem 2rem 2rem; }

/* Header banner — matches the hub's reference treatment (hub.py: same
   background/border/logo height), extended with nav + user-info that the
   hub doesn't need since it has no tabs or signed-in user.
   min-height (not a fixed height) + flex-wrap: at a reduced window width
   there isn't room for logo+title+nav+user-info on one line — letting the
   row wrap onto a second line (nav and/or user-info dropping below the
   title) reads cleanly; a *fixed* height forcing that same content to
   overflow instead is what caused the reported overlap. .banner-text keeps
   nowrap+flex-shrink:0 so the title itself never breaks mid-word — only
   the *row* wraps, not the title text. */
.banner {
  background: #14100C;
  border-bottom: 3px solid #B8955A;
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.4rem;
  column-gap: 1.2rem;
  padding: 0.5rem 2rem;
}
.banner-logo { height: 34px; display: block; flex-shrink: 0; }
.banner-text {
  font-family: Georgia, 'Times New Roman', serif;
  color: #D4AF7A;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.16em;
  white-space: nowrap;
  flex-shrink: 0;
}
.user-info { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; color: #C9C2B4; flex-wrap: wrap; }
.user-info button { border: 1px solid #DDD4C4; background: white; border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; font-size: 0.8rem; }
/* Same treatment as Prospection's own "User manual" banner link (dashboard.py) — a plain underlined link, not a button, on the dark banner background. */
.banner-manual-link { color: #E7DCC4; font-size: 0.85rem; text-decoration: underline; }
.banner-manual-link:hover { color: #F7F3EE; }

.login-overlay { position: fixed; inset: 0; background: #F7F3EE; display: flex; align-items: center; justify-content: center; z-index: 100; }
.login-box { background: white; border: 1px solid #DDD4C4; border-radius: 10px; padding: 2.5rem 3rem; text-align: center; }
.login-box h1 { margin-top: 0; }
.login-divider { color: #888; font-size: 0.8rem; margin: 1.2rem 0; }
#local-login-form { display: flex; flex-direction: column; gap: 0.6rem; min-width: 220px; }
#local-login-form input, #local-login-form button { padding: 0.5rem 0.7rem; border: 1px solid #DDD4C4; border-radius: 6px; font-size: 0.9rem; }
#local-login-form button { background: #B8955A; color: white; border-color: #B8955A; cursor: pointer; font-weight: bold; }
.login-error { color: #B33A3A; font-size: 0.85rem; }

/* Conversation view (point 11 session) — one block per real message
   (thread_messages), oldest first, replacing the old single .thread-body
   block that only ever showed the latest message. Same look as .note below
   it (same card/meta pattern) so the two lists read as one visual language. */
.thread-messages { margin: 0.6rem 0 1rem; }
.thread-message { background: #FBF7F0; border-radius: 6px; padding: 0.7rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.thread-message .meta { color: #888; font-size: 0.75rem; margin-bottom: 0.3rem; }
.thread-message-body { white-space: pre-wrap; max-height: 260px; overflow-y: auto; }
h1 { margin: 0; font-size: 1.4rem; }
/* flex-wrap: at a reduced window width the 4 tab buttons no longer fit
   next to the title/user-info on one line — wrapping the nav itself onto
   its own line (rather than letting buttons overflow past the visible
   banner width, illegible/uncklickable) is the fix; white-space: nowrap on
   each button keeps a label like "Pending / Scheduled" from breaking
   mid-word once it does wrap. */
nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tab-btn { background: white; border: 1px solid #DDD4C4; border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.9rem; white-space: nowrap; }
.tab-btn.active { background: #B8955A; color: white; border-color: #B8955A; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.stats-banner { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.stat-card { background: white; border: 1px solid #DDD4C4; border-radius: 8px; padding: 1rem 1.5rem; min-width: 140px; }
.stat-card .n { font-size: 1.6rem; font-weight: bold; }
.stat-card .label { font-size: 0.8rem; color: #555; }
.stat-card.alert .n { color: #B33A3A; }

.filters, .ps-filters, .report-filters, .saved-filters-bar { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.filters select, .filters input, .filters button,
.ps-filters select, .ps-filters input, .ps-filters button,
.report-filters select, .report-filters input, .report-filters button,
.saved-filters-bar select, .saved-filters-bar input, .saved-filters-bar button { padding: 0.4rem 0.6rem; border: 1px solid #DDD4C4; border-radius: 6px; font-size: 0.85rem; }
.saved-filters-bar { margin-top: -0.4rem; }
.saved-filters-bar .login-error { flex-basis: 100%; margin: 0; }
.filter-label { font-size: 0.8rem; color: #555; }
/* A "from...to..." date-range pair (Received/Assigned/Due/Report From-to —
   point 2 session): kept as one atomic unit inside the wrapping filter row
   above, so the two ends of a range always move together — a plain
   flex-wrap row has no notion of "these belong together", which is exactly
   what let the "to" field wrap onto its own line while "Received from" and
   its own date stayed on the line above (the reported bug). The group
   itself still wraps as a whole if the row runs out of room, same as every
   other filter here; overflow-x:auto is a narrow-viewport fallback so even
   a single group too wide for the screen scrolls instead of breaking apart
   internally. */
.date-range-group { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
.done-state-filter { display: flex; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.done-state-filter label { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; white-space: nowrap; }

/* Threads' filter bar, collapsed by default (<details>, no JS needed for
   the open/close itself — see index.html). The badge count is kept live
   by updateFilterBadge() in app.js, hooked into loadThreads() so every
   path that changes a filter (a control's own change event, Clear,
   applying a saved filter, first load) updates it. */
.filters-panel { margin-bottom: 1rem; }
.filters-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  background: white; border: 1px solid #DDD4C4; border-radius: 6px;
  padding: 0.5rem 1rem; font-size: 0.9rem; width: fit-content; user-select: none;
}
.filters-toggle::-webkit-details-marker { display: none; } /* custom marker below instead of the native triangle */
.filters-toggle::before { content: "▸"; color: #888; }
details[open] > .filters-toggle::before { content: "▾"; }
.filter-badge {
  background: #B8955A; color: white; border-radius: 999px;
  padding: 0.05rem 0.5rem; font-size: 0.78rem; font-weight: bold;
}
.filters-panel > .filters { margin-top: 0.8rem; }

/* Admin/Edit tabs: collapsible top-level sections (<details>), same ▸/▾
   marker convention as the Threads Filters panel above — groups the
   growing admin/edit-tab content instead of one long flat scroll, without
   needing extra tabs (a tab holding only one or two small blocks reads as
   an almost-empty page). Independent open/closed state per section (native
   <details>, no JS). */
.admin-section { margin-bottom: 1.5rem; }
.admin-section > summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.4rem; font-weight: bold; margin-bottom: 0.6rem;
}
.admin-section > summary::-webkit-details-marker { display: none; } /* custom marker below instead of the native triangle */
.admin-section > summary::before { content: "▸"; color: #888; font-size: 1rem; }
.admin-section[open] > summary::before { content: "▾"; }
.admin-section > summary > h2 { margin: 0; font-size: inherit; font-weight: inherit; display: inline; }

/* Stats banner counters (Admin tab): the 14 checkboxes grouped into 3
   nested <details> (Default/Statuses/Categories) instead of one flat list —
   a smaller, plainer marker than .admin-section above since this nests
   one level deeper. */
.stats-counter-group { margin-top: 0.4rem; }
.stats-counter-group > summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: bold; color: #555;
}
.stats-counter-group > summary::-webkit-details-marker { display: none; }
.stats-counter-group > summary::before { content: "▸"; color: #888; font-size: 0.8rem; }
.stats-counter-group[open] > summary::before { content: "▾"; }

/* Reporting screen (Admin tab): three sections side by side, each its own
   scrollable card — a period can span months of activity across every
   mailbox, so a section's content can get long without this. */
.report-sections { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: 1rem; }
.report-section-block { flex: 1 1 280px; background: white; border: 1px solid #DDD4C4; border-radius: 8px; padding: 1rem; max-height: 500px; overflow-y: auto; }
.report-section-block h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.report-hint { font-size: 0.78rem; color: #888; margin: 0 0 0.8rem; }
.report-employee-group { margin-bottom: 1rem; }
.report-employee-group h4 { margin: 0 0 0.3rem; font-size: 0.9rem; }
.report-thread-list { list-style: none; padding: 0; margin: 0; }
.report-thread-list li { font-size: 0.82rem; padding: 0.3rem 0; border-bottom: 1px solid #EEE7DA; }

/* Report screen's optional bar chart (report-chart.js) — styling lives here
   rather than in that file so removing the feature (see the comment at the
   top of report-chart.js) can also just delete this one block. */
.report-chart-title { margin: 0 0 0.5rem; font-size: 0.9rem; }
.report-chart-bars { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.report-chart-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.report-chart-label { width: 90px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-chart-track { flex: 1; background: #EEE7DA; border-radius: 4px; height: 14px; overflow: hidden; }
.report-chart-fill { background: #B8955A; height: 100%; border-radius: 4px; }
.report-chart-count { width: 22px; text-align: right; flex-shrink: 0; color: #555; }

.threads-count { font-size: 0.85rem; color: #555; }
/* Points 7/8: count on the left, Refresh + pagination on the right — right
   edge roughly lines up with the table's "Done" column, the rightmost one. */
.threads-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.threads-toolbar-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.threads-pagination { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: #555; }
.threads-pagination button, #threads-refresh-btn { padding: 0.3rem 0.6rem; border: 1px solid #DDD4C4; border-radius: 6px; font-size: 0.82rem; background: white; cursor: pointer; }
.threads-pagination button:disabled { color: #BBB; cursor: default; }
.threads-refresh-status { font-size: 0.78rem; color: #888; }

/* Pending/Scheduled: two side-by-side columns, each its own independent
   table (a thread can appear in both — see routes/threads.js). min-width:0
   lets a table shrink inside its flex column instead of forcing an
   overflow, same reasoning as the fixed layout below. */
.pending-scheduled-columns { display: flex; gap: 1.5rem; align-items: flex-start; }
.ps-column { flex: 1 1 0; min-width: 0; }
.ps-column-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; gap: 0.4rem; }
.ps-column h2 { font-size: 1.1rem; margin: 0; }
.ps-count { color: #888; font-weight: normal; font-size: 0.9rem; }
.ps-export { display: flex; gap: 0.4rem; }
.ps-export select, .ps-export button { padding: 0.3rem 0.5rem; border: 1px solid #DDD4C4; border-radius: 6px; font-size: 0.8rem; }
.ps-table { table-layout: fixed; min-width: 680px; }
.ps-table th, .ps-table td { padding: 0.5rem 0.4rem; vertical-align: middle; }
/* Narrower columns than #threads-table (half the page width, shared with
   its sibling column) — smaller header text keeps "Assigned to"/"Done"
   from wrapping or clipping against the table's own rounded corner. */
.ps-table th { font-size: 0.75rem; }

table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid #EEE7DA; font-size: 0.88rem; }
th { background: #1A1610; color: white; font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #FBF7F0; }

/* Threads table: Received/Priority/Due date headers are clickable to sort
   (app.js) — .sort-indicator shows a neutral ⇅ (both directions, white via
   the inherited th color) until that column becomes the active sort, then
   JS swaps it for an oriented ▲/▼. */
.sortable-th { cursor: pointer; user-select: none; }
.sortable-th:hover { background: #2A241C; }
.sort-indicator { margin-left: 0.3rem; font-size: 0.75rem; }

/* Bulk actions bar (Threads/Pending/Scheduled — app.js wireBulkActions):
   hidden until >=1 row is checked, sits between the filters and the table
   it applies to. Amber-tinted rather than white so it reads as a distinct,
   temporary control surface, not just another row of filters. */
.bulk-actions-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; background: #FBF1DE; border: 1px solid #E8D5A8; border-radius: 6px; padding: 0.5rem 0.8rem; margin-bottom: 0.8rem; }
.bulk-actions-bar select, .bulk-actions-bar button { padding: 0.3rem 0.5rem; border: 1px solid #DDD4C4; border-radius: 6px; font-size: 0.82rem; }
.bulk-count { font-weight: bold; font-size: 0.85rem; }
.bulk-result { font-size: 0.8rem; color: #555; }

/* Threads table: fixed layout + <colgroup> percentages (index.html) are what
   keep 12 columns inside one screen width without horizontal scroll — content
   that could otherwise force a column wider (long subjects/summaries, a
   select's native intrinsic width) is clipped instead, see .ellipsis-cell
   and .cell-select below. Tighter cell padding than the other tables here,
   to claw back room across that many columns. */
/* Reduced-window fallback for #threads-table/.ps-table: rather than let
   table-layout:fixed's percentage colgroup keep shrinking columns past
   legibility (header text overlapping, exactly the reported bug) once the
   viewport gets narrower than these tables were sized for, give the table
   a floor width and let a wrapping container scroll horizontally past that
   floor instead. Doesn't touch why table-layout:fixed + colgroup +
   .ellipsis-cell were chosen in the first place (see the comment below) —
   just adds a scroll boundary around that same layout. */
.table-scroll { overflow-x: auto; }
#threads-table { table-layout: fixed; min-width: 1150px; }
/* Single-word header labels (e.g. "Mailbox", "Category") can't break onto a
   second line the way multi-word ones can — at the min-width floor above,
   a column can still land narrower than one of these words, and with the
   default overflow:visible that text visually spills into the next header
   cell (looks identical to the reported "Category"/"Status" collision) even
   though nothing is actually overlapping the data below. Clipping with the
   same nowrap+ellipsis treatment .ellipsis-cell uses for body cells keeps
   that spillover from ever reading as a collision. */
#threads-table th, .ps-table th { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Default td vertical-align is "baseline" — with plain-text cells (Received)
   and cells holding a <select>/<input> (Category/Status/Priority/Due date)
   mixed on the same row, baseline alignment reads as uneven/jagged. */
#threads-table th, #threads-table td { padding: 0.5rem 0.4rem; vertical-align: middle; }
.ellipsis-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Unread dot (app.js unreadDotHtml — Threads/Pending/Scheduled subject
   cells): blue reads clearly as "notification" against every row-color
   pastel already in use (green/red/gold/orange), so it stays visible
   regardless of which one applies to that row. */
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2E6FB3; margin-right: 0.4rem; vertical-align: middle; }
/* Priority order when more than one would apply — done > overdue > to_review
   > pending > none — is resolved in rowClasses() (app.js), which returns a
   single class; only one of these rules ever matches a given row. */
tbody tr.row-done { background: #E3F1E3; }
tbody tr.row-done:hover { background: #D5E6D5; }
tbody tr.row-overdue { background: #FBE1E1; }
tbody tr.row-overdue:hover { background: #F5CFCF; }
tbody tr.row-to-review { background: #FAF0D2; }
tbody tr.row-to-review:hover { background: #F5E6B4; }
tbody tr.row-pending { background: #FAE4C8; }
tbody tr.row-pending:hover { background: #F5D2A5; }

/* Multi-mailbox grouping (off by default, admin-toggled — app.js's
   clusterMultiMailboxThreads/loadThreads). .thread-group-member reuses the
   existing global .hidden utility, not a new collapse mechanism. */
tbody tr.thread-group-header { cursor: default; background: #F7F3EE; }
tbody tr.thread-group-header:hover { background: #F7F3EE; }
.group-toggle-btn { border: none; background: transparent; cursor: pointer; font-size: 0.75rem; padding: 0 0.3rem 0 0; color: #1A1610; }
.group-badge { display: inline-block; background: #B8955A; color: white; border-radius: 4px; padding: 0.1rem 0.4rem; font-size: 0.75rem; font-weight: bold; margin-right: 0.3rem; }

/* Visible box around an expanded group's own rows (app.js adds
   .thread-group-first/-last to the first/last member so the box reads as
   one rectangle instead of a border repeated on every row). Independent of
   row-status backgrounds (row-done/row-overdue/etc. above) — both apply to
   the same <tr> at once without conflict, since one is a border and the
   other a background-color. table { border-collapse: collapse } (see
   below) is what makes a border set directly on <tr> actually render. */
tbody tr.thread-group-member { border-left: 2px solid #1A1610; border-right: 2px solid #1A1610; }
tbody tr.thread-group-first { border-top: 2px solid #1A1610; }
tbody tr.thread-group-last { border-bottom: 2px solid #1A1610; }

/* Tri-state done checkbox (see app.js): empty = neither to_review nor done;
   checked+indeterminate (grey, .state-suggested) = to_review, an
   auto-detected reply awaiting human confirmation; checked+solid (green,
   .state-done) = done, confirmed by a human click. accent-color themes both
   the checkmark and the indeterminate dash in one property, no bespoke
   checkbox markup needed. */
.done-checkbox { width: 15px; height: 15px; cursor: pointer; }
.done-checkbox.state-suggested { accent-color: #BDBDBD; }
.done-checkbox.state-done { accent-color: #2E7D32; }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: bold; color: white; }
.badge.client { background: #4C8C4A; }
.badge.prospect { background: #B8955A; }
.badge.supplier { background: #5178C9; }
.badge.not_yet_client { background: #888; }
.badge.unclassified { background: #B0A79A; }
.badge.reopened { background: #B33A3A; }
.badge.needs-reassignment { background: #E0A030; padding: 0.15rem 0.4rem; }
.badge.quota-ok { background: #4C8C4A; }
.badge.quota-warn { background: #E0A030; }
.badge.quota-critical { background: #B33A3A; }

.nav-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; color: white; cursor: default; border: none; }
.nav-status.up-to-date { background: #4C8C4A; cursor: default; }
.nav-status.update-available { background: #E0A030; cursor: pointer; }
.nav-status.reload-required { background: #B33A3A; cursor: pointer; }

.relationship-cell .reset-source-btn { border: none; background: none; color: #5178C9; font-size: 0.7rem; cursor: pointer; padding: 0; margin-left: 0.3rem; text-decoration: underline; }

.relationship-cell .contact-name { display: block; }

/* Inline per-thread field editors (Category/Issue type/Status/Priority/Due
   date/Assigned to) — same compact treatment as the pre-existing Contact
   type select this pattern was copied from. width:100%+border-box so each
   one fills its <col>-assigned width exactly, instead of the browser
   sizing it to the selected option's own intrinsic width (that mismatch is
   what forced the table wider than the screen before this pass). */
.cell-select { display: block; width: 100%; box-sizing: border-box; font-size: 0.78rem; padding: 0.1rem 0.3rem; border: 1px solid #DDD4C4; border-radius: 4px; }
.cell-select + .cell-select { margin-top: 0.2rem; } /* Category + nested Issue type select */
/* Due date (point 2 session): a native datetime-local widget's own internal
   layout (day/month/year/hour/minute/AM-PM sub-fields) needs real horizontal
   room, unlike a plain text input — a slightly smaller font here (only here,
   not every .cell-select) buys back a bit more of that room on top of the
   wider column already given in index.html's colgroup, so the AM/PM suffix
   stops getting silently clipped ("... 5:06 P" instead of "5:06 PM"). */
.due-date-input { font-size: 0.72rem; padding: 0.1rem 0.15rem; }

.admin-columns { display: flex; gap: 3rem; }
.admin-columns ul { list-style: none; padding: 0; max-width: 300px; }
.admin-columns li { display: flex; justify-content: space-between; padding: 0.4rem 0.6rem; background: white; border: 1px solid #DDD4C4; border-radius: 6px; margin-bottom: 0.4rem; }

/* Local account editor, nested inside a Users row's expanded detail panel —
   username + new-password + Save wrap onto their own line rather than
   fighting for a single-line fit. */
.local-user-row { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-bottom: 0.6rem; }
.local-user-row input { flex: 1 1 auto; min-width: 110px; padding: 0.2rem 0.4rem; border: 1px solid #DDD4C4; border-radius: 4px; font-size: 0.8rem; }
.local-user-row .login-error { flex-basis: 100%; margin: 0.2rem 0 0; }
.admin-columns li button { border: none; background: transparent; color: #B33A3A; cursor: pointer; font-weight: bold; }

/* Edit tab's "Banned/Spam contacts" list — same look as .admin-columns li
   (white card row) but full-width (not one of the 3-column layout's
   children) and with a select+button pair on the right instead of a single
   delete "x". */
#banned-contacts-list { list-style: none; padding: 0; max-width: 700px; }
#banned-contacts-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.6rem; background: white; border: 1px solid #DDD4C4; border-radius: 6px; margin-bottom: 0.4rem; }
#banned-contacts-list select, #banned-contacts-list button { padding: 0.2rem 0.4rem; border: 1px solid #DDD4C4; border-radius: 4px; font-size: 0.8rem; }

/* Consolidated Users view (Admin tab) — replaces the old Team members /
   Local accounts / Permissions-matrix blocks. #users-table mirrors
   #permissions-table's look; each user row's detail panel holds a small
   *vertical* mailbox/access table instead of the old one-column-per-mailbox
   grid, so it stays readable regardless of how many mailboxes exist. */
.users-toolbar { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.users-toolbar input, .users-toolbar button { padding: 0.4rem 0.6rem; border: 1px solid #DDD4C4; border-radius: 6px; font-size: 0.85rem; }
#users-table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; margin-top: 0.8rem; }
#users-table th, #users-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #EEE7DA; font-size: 0.85rem; }
#users-table select { padding: 0.2rem 0.4rem; border: 1px solid #DDD4C4; border-radius: 4px; font-size: 0.8rem; }
.user-toggle-btn { border: none; background: transparent; cursor: pointer; font-size: 0.75rem; color: #1A1610; }
tr.user-detail-row { background: #F7F3EE; }
tr.user-detail-row td { border-bottom: 2px solid #DDD4C4; }
.user-mailbox-table { width: auto; min-width: 260px; border-collapse: collapse; }
.user-mailbox-table th, .user-mailbox-table td { text-align: left; padding: 0.3rem 0.6rem 0.3rem 0; font-size: 0.82rem; border: none; }
.del-team-member { border: none; background: transparent; color: #B33A3A; cursor: pointer; font-weight: bold; font-size: 1rem; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-content { background: white; border-radius: 8px; padding: 1.5rem 2rem; max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: 0.8rem; right: 1rem; border: none; background: none; font-size: 1.4rem; cursor: pointer; }
.field-row { margin-bottom: 0.8rem; }
.field-row label { display: block; font-size: 0.8rem; color: #555; margin-bottom: 0.2rem; }
.field-row select, .field-row input { width: 100%; padding: 0.4rem; border: 1px solid #DDD4C4; border-radius: 6px; }
.note { background: #FBF7F0; border-radius: 6px; padding: 0.5rem 0.7rem; margin-bottom: 0.4rem; font-size: 0.85rem; }
.note .meta { color: #888; font-size: 0.75rem; }