/* ---- Home dashboard (practice admin / tenant admin) ---- */

.home-page {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  align-items: start;
  gap: 20px;
  padding: 24px;
}

@media (max-width: 1300px) {
  .home-page {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .home-validation-column {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .home-page {
    grid-template-columns: 1fr;
  }

  .home-validation-column {
    grid-column: auto;
  }
}

/* ---- Queue list (left column) ---- */

/* Bounded to the viewport (minus the page's own top/bottom padding) so the card never grows taller
   than the screen - .home-queue-list below is the flexible piece that gives up space to fit, so
   "Refresh List" (a flex sibling after it) always stays visible without scrolling the page. */
.home-queue-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.home-queue-owner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bright-chrome-light);
  margin: 0 -23px;
}

.home-queue-owner-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* Matches .dashboard-avatar's initials-fallback treatment (see main.css) so this avatar looks the
   same whether there's a real photo or not, instead of falling back to MUI's pale default colors. */
.home-queue-owner-avatar.MuiAvatar-root {
  background: linear-gradient(360deg,
      var(--color-primary-deep),
      var(--traditional-turquoise),
      var(--color-accent));
  color: #ffffff;
  font-family: 'Inter', 'Segoe UI', 'Trebuchet MS', Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 600;
  width: 60px;
  height: 60px;
}

.home-queue-owner-name.MuiTypography-root {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-user, #0f172a);
}

.home-queue-owner-badge {
  display: inline-flex;
  align-items: center;
  background: var(--aqua-squeeze);
  color: var(--color-primary-deep);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.594rem;
  font-weight: 700;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
}

.home-queue-toolbar {
  display: flex;
  gap: 8px;
}

.home-queue-select.MuiOutlinedInput-root {
  height: 34px;
  font-size: 0.78rem;
  flex: 1;
  min-width: 0;
  background: var(--bright-chrome) !important;
  border-color: #E5E7EB;
}

/* display:flex + width:100% (not inline-flex/auto-width) so this actually fills the select's real
   width instead of just growing to fit its content - an inline-flex box with no bounded width has
   nothing for text-overflow:ellipsis to truncate against, so the browser was hard-clipping it
   mid-glyph at the select's edge instead of showing "…" (the smeared/overlapping text). With a real
   width here, the icon stays fixed-size and .home-queue-select-value-text can shrink and truncate
   correctly. */
.home-queue-select-value {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  min-width: 0;
  overflow: hidden;
}

.home-queue-select-icon {
  max-width: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.home-queue-select-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* min-height/max-height are set inline (QueueListPanel.tsx) to the measured height of the first
   6 items, so the panel always grows to fit exactly 6 rows and a 7th+ item scrolls inside the
   list instead of growing the panel further - no outer scrollbar on .home-queue-panel itself. */
.home-queue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 500px !important;
  overflow-y: auto;
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;

}

.home-queue-empty {
  color: var(--color-muted);
  text-align: center;
  padding: 24px 0;
}

.home-queue-list-item {
  list-style: none;
}

.home-queue-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.home-queue-item-dot--teal {
  background: var(--color-primary);
}

.home-queue-item-dot--orange {
  background: #f79009;
}

.home-queue-item-dot--red {
  background: #f04438;
}

.home-queue-item-dot--gray {
  background: #98a2b3;
}

.home-queue-item-dot--blue {
  background: #006FC0;
}

.home-queue-item-dot--green {
  background: var(--renewable-energy);
}

.home-queue-item-dot--yellow {
  background: #F59E0B;
}

/* Two stacked rows: name+dot on top, category+date below - each row spans the full width with
   its trailing element (dot / date) pushed to the right of the leading text via space-between. */
.home-queue-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  background: var(--color-card-bg);
}

.home-queue-item-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.home-queue-item-name,
.home-queue-item-category {
  flex: 1 1 auto;
  min-width: 0;
}

.home-queue-item-dot,
.home-queue-item-due,
.home-queue-item-indicators {
  flex-shrink: 0;
  white-space: nowrap;
}

.home-queue-item-dot {
  margin-top: 5px;
}

/* Overdue red dot, Priority gold star, and the plain status dot share this trailing slot but are
   mutually exclusive - only one ever renders (Overdue wins, then Priority, then the status dot -
   see QueueListPanel), so this wrapper mostly just preserves the same position/margin the dot
   used to occupy alone. */
.home-queue-item-indicators {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.home-queue-item-indicators .home-queue-item-dot {
  margin-top: 0;
}

.home-queue-item-priority {
  width: 13px;
  height: 12px;
  display: block;
}

.home-queue-item-due {
  margin-top: 1px;
}

.home-queue-item--teal {
  --tone-color: var(--color-primary);
  border-color: rgba(0, 122, 129, 0.25);
  background: rgba(0, 122, 129, 0.06);
}

.home-queue-item--orange {
  --tone-color: #f79009;
  border-color: #fde3ad;
  background: #fffaeb;
}

.home-queue-item--red {
  --tone-color: #f04438;
  border-color: #fecdca;
  background: #fef3f2;
}

.home-queue-item--gray {
  --tone-color: #98a2b3;
  border-color: var(--color-border);
  background: #f8fafc;
}

.home-queue-item--blue {
  --tone-color: #2563eb;
  border-color: #bfdbfe;
  background: #EFF5FF;
}

.home-queue-item--blue:hover {
  border-color: #006FC0;
}

.home-queue-item--green {
  --tone-color: #12b76a;
  border-color: #C6EDD9;
  background: var(--infinity);
}

.home-queue-item--green:hover {
  border-color: #12b76a;
}

.home-queue-item--yellow {
  --tone-color: #eab308;
  border-color: #fde68a;
  background: #FFFBEF;
}

.home-queue-item--yellow:hover {
  border-color: #F59E0B;
}

/* Selected card: keeps the tone's tinted background, just adds a colored accent bar on the left
   (matching the tone's dot color) instead of the thick full border used before. */
.home-queue-item--active {
  padding: 12px 12px 12px 25px;
}

.home-queue-item--active::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--tone-color, var(--color-primary));
}

.home-queue-item-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-user, #0f172a);
  word-break: break-word;
}

.home-queue-item-category {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.home-queue-item-due {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.home-queue-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: none;
  color: #5E6B81;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 12px 0 0 0;
  font-family: inherit;
  border-top: 1px solid var(--bright-chrome-light);
  margin: 0 -22px;
  letter-spacing: 0.3px;
}

.home-queue-refresh img {
  width: 15px;
  height: 15px;
  display: block;
}

.home-queue-refresh:hover {
  text-decoration: underline;
}

/* ---- Document review (middle column) ---- */

.home-document-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  border: none !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.home-client-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-summary-section {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);

  border-radius: 10px;
  padding: 20px 20px 20px;
  box-shadow: 0 2px 10px rgba(17, 52, 71, 0.05);
}

/* Positioning lives on this wrapper, not the button itself: the button is wrapped in a Tooltip's
   <span> (needed because a disabled element can't receive a Tooltip's mouse listeners directly),
   and Tooltip anchors to that span's own bounding box. A plain unstyled span around a
   position:absolute child has zero size (absolute positioning takes it out of normal flow
   entirely), so the tooltip would show up wherever the span happens to fall in the document flow
   instead of over the visible button. */
.home-summary-refresh-wrapper {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

.home-summary-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.home-summary-refresh:hover {
  background: rgba(0, 122, 129, 0.08);
}

.home-summary-refresh:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.home-summary-refresh:disabled:hover {
  background: none;
}

.home-summary-refresh img {
  width: 16px;
  height: 16px;
  display: block;
}

.home-review-badge-group {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.home-review-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.home-review-badge--blue {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

.home-review-badge--green {
  border-color: #a7f3d0;
  background: #ecfdf3;
  color: #12b76a;
  font-size: 11px;
  font-weight: 500;
  min-height: 27px;
}

.home-review-badge--yellow {
  border-color: #fde68a;
  background: #fffbeb;
  color: #F59E0B;
}

.home-review-badge--gray {
  border-color: var(--color-border);
  background: #f8fafc;
  color: #667085;
}

.home-review-badge--red {
  border-color: #fecaca;
  background: #fef2f2;
  color: #d92d20;
}

.home-client-heading {
  display: flex;
  align-items: start;
  gap: 6px;
  margin: 0 260px 0 0;
}

.home-client-tag-icon {
  color: var(--color-primary);
  font-size: 18px;
}

.home-client-name.MuiTypography-root {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-primary-deep, #0f172a);
  word-break: break-word;
}

.home-client-name-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 5px;
}

.home-client-name-edit:hover {
  background: rgba(0, 122, 129, 0.08);
}

.home-client-name-edit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.home-client-name-edit:disabled:hover {
  background: none;
}

.home-client-name-edit img {
  width: 14px;
  height: 14px;
  display: block;
}

.home-client-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 23px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.home-client-contact span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 300;
}

.home-client-contact-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.home-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-quick-reply-chip {
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.home-quick-reply-chip:hover {
  background: rgba(0, 122, 129, 0.08);
}

.home-email-compose {
  border: 1px solid var(--color-border);
  border-radius: 15px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0px 6px 20px 0px #1622330f;
}

.home-email-compose-title.MuiTypography-root {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 12px 14px 0;
}

.home-toolbar-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

.home-email-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.84rem;
}

.home-email-field-label {
  width: 40px;
  flex-shrink: 0;
  color: var(--color-text-user);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.home-email-field-value {
  flex: 1;
  min-width: 0;
  color: var(--color-text-user, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

/* Now rendered as the Autocomplete's own popupIcon (sits inside its popup-indicator button), not a
   free-standing row child - no margin-left/flex-shrink needed since that button positions itself. */
.home-email-row-chevron {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.7;
  display: block;
}

.home-email-ccbcc-toggles {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.home-email-ccbcc-toggle {
  border: none;
  background: none;
  color: var(--color-text-user);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.home-email-ccbcc-toggle:hover {
  color: var(--color-primary);
}

.home-email-ccbcc-toggle:disabled {
  color: #98a2b3;
  cursor: not-allowed;
}

.home-email-ccbcc-toggle:disabled:hover {
  color: #98a2b3;
}

.home-email-field-input .MuiInputBase-input {
  font-size: 0.875rem;
  padding: 0;
}

.home-email-subject-input .MuiInputBase-input {
  font-weight: 400;
  -webkit-text-fill-color: inherit !important;
  color: var(--color-text-user, #0f172a);
}

.home-email-compose .profile-signature-toolbar {
  border-top: none;
  border-radius: 0;
  height: 40px;
  align-items: center;
  display: flex;
  background: #E2E8F0;
  opacity: 1;
  padding: 0 20px;
}

.home-email-compose .profile-signature-toolbar button {
  padding: 0 !important;
  margin: 0 !important;
  width: auto;
  height: auto;
}

.home-email-compose .profile-signature-toolbar button img {
  font-size: 25px !important;
  max-width: 37px !important;
  width: 100%;
  height: auto;
}

.home-email-editor.profile-signature-editor {
  height: 100px;
  border: none;
  border-radius: 0;
  overflow-y: auto;
  margin: 20px;
  padding: 0 15px 0 0 !important;
  background: var(--color-card-bg);
}

/* .profile-signature-editor p's 4px margin (main.css) is sized for a short signature block, not a
   multi-paragraph AI-drafted email - it reads as one solid wall of text otherwise. */
.home-email-editor.profile-signature-editor p {
  margin: 0 0 14px;
}

.home-email-editor.profile-signature-editor p:last-child {
  margin-bottom: 0;
}

/* Matches the 14px body-paragraph gap above, rather than a bespoke larger value, so the gap before
   "Regards," reads as just another paragraph break instead of a visually distinct jump. */
.home-email-signature {
  margin-top: 14px;
}

/* The 14px body-paragraph margin above also applies inside this nested block by default, which
   blows out a compact signature (name/company/address/phone, one per line) into widely-spaced
   lines - restore the original tight signature spacing here specifically. */
.home-email-editor.profile-signature-editor .home-email-signature p {
  margin: 0 0 4px;
}

.home-email-editor.profile-signature-editor .home-email-signature p:last-child {
  margin-bottom: 0;
}

/* main.css sets strong/b to a 14px line-height sized for the Profile page's own signature editor -
   here it squashes the bold name line's vertical spacing well below the 23.63px line-height every
   other line in this editor uses, making it look out of rhythm with the lines around it. */
.home-email-editor.profile-signature-editor strong,
.home-email-editor.profile-signature-editor b {
  line-height: inherit;
}

.home-email-editor-footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 14px 12px;
  background: #ffffff;
  border-radius: 0 0 15px 15px;
}

.home-regenerate-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.home-regenerate-link:hover {
  text-decoration: underline;
}

.home-regenerate-link:disabled {
  color: #98a2b3;
  cursor: not-allowed;
}

.home-regenerate-link:disabled:hover {
  text-decoration: none;
}

.home-regenerate-icon {
  width: 14px;
  height: 14px;
  display: block;
  opacity: 0.5;
}

.home-document-preview {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--color-card-bg);
  padding: 10px 20px 20px 20px;
  border-radius: 15px;
  box-shadow: 0px 6px 20px 0px #1622330f;
}

.home-document-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bright-chrome-light);
  margin: 0 -20px;
  padding: 5px 20px 15px;
}

.home-document-preview-title.MuiTypography-root {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-text-user, #0f172a);
}

.home-document-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-document-pdf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF2F2;
  color: #f04438;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 500;
}

.home-document-pdf-badge img {
  width: 12px;
  height: 12px;
  display: block;
}

.home-document-frame {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.home-document-pdf {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  background: #e2e8f0;
}

.home-document-file-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 18px;
  background: #F3F6FA;
  border-bottom: 1px solid var(--color-border);
}

.home-document-file-bar-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.home-document-file-bar-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-user, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-document-file-bar-page {
  color: var(--color-muted);
  font-size: 0.76rem;
  flex-shrink: 0;
  margin-left: auto;
}

.home-document-page {
  background: #E2E8F0;
  padding: 24px;
  overflow: auto;
}

.home-document-page-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(17, 52, 71, 0.08);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin: 0 auto;
}

/* Centered via margin auto (not flex/grid align-items) so that when the zoomed page is
   wider than the frame, it overflows to the right only and stays fully reachable by
   scrolling - centering via flex/grid align-items clips the left-side overflow because
   scrollLeft can't go negative. Same fix as .home-document-expand-content below. */
.home-document-page .react-pdf__Document {
  width: fit-content;
  margin: 0 auto;
}

.home-document-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.home-document-page-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.home-document-page-agency.MuiTypography-root {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-user, #0f172a);
}

.home-document-page-office.MuiTypography-root {
  font-size: 12px;
  color: var(--color-muted);
}

.home-document-page-title.MuiTypography-root {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.65px;
  text-transform: uppercase;
  color: var(--color-text-user, #0f172a);
  border-top: 1px solid var(--bright-chrome-light);
  width: 100%;
  text-align: center;
  padding: 15px 0 0 0;
}

.home-document-loading-spinner {
  margin: 4px 0;
}

.home-document-page-render-wrapper {
  position: relative;
}

.home-document-page-render-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
}

.home-document-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.home-document-skeleton-line {
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
}

.home-document-refund-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ecfdf3;
  border: 1px solid #a6f4c5;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: #12b76a;
  font-weight: 600;
}

.home-document-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.home-document-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-document-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.home-document-zoom-level {
  min-width: 40px;
  text-align: center;
}

.home-document-expand-dialog .MuiPaper-root {
  border-radius: 12px;
}

.home-document-expand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding: 14px 20px;
}

.home-document-expand-content {
  padding: 24px !important;
  background: #E2E8F0;
  max-height: 70vh;
  overflow: auto;
}

/* Centered via margin auto (not flex/grid justify-content) so that when the
   zoomed page is wider than the dialog, it overflows to the right only and
   stays fully reachable by scrolling — centering via justify-content/
   text-align clips the left-side overflow because scrollLeft can't go
   negative. */
.home-document-expand-content .react-pdf__Document {
  width: fit-content;
  margin: 0 auto;
}

.home-document-expand-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-border);
  padding: 10px 20px;
}

/* ---- Validation / actions / file options (right column) ---- */

.home-validation-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.home-panel-title.MuiTypography-root {
  margin-bottom: 10px;
  font-size: 18px !important;
}

.home-validation-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.home-validation-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--color-text-user, #0f172a);
  height: 40px;
}

.home-validation-item span {
  color: #1A7A4A;
  font-size: 14px;
  font-weight: 500;
}

.home-validation-item--pass {
  background: #EAF9F0;
}

.home-validation-item--fail {
  background: #fef3f2;
}

.home-validation-item--fail span {
  color: #C62828;
}

.home-validation-item--warn {
  background: #fffbeb;
}

.home-validation-item--warn span {
  color: #d78b1e;
}

.home-validation-item--skipped {
  background: #fef3f2;
}

.home-validation-item--skipped span {
  color: #C62828;
}

.home-validation-icon {
  flex-shrink: 0;
  font-size: 18px;
}

.home-validation-item--pass .home-validation-icon {
  color: #12b76a;
}

.home-validation-item--fail .home-validation-icon {
  color: #f04438;
}

.home-validation-item--warn .home-validation-icon {
  color: #eab308;
}

.home-validation-item--skipped .home-validation-icon {
  color: #98a2b3;
}

.home-revalidate-button.MuiButton-root {
  border-radius: 8px;
  text-transform: none;
  font-weight: 500;
  background: #F3F6FA;
  color: #5E6B81;
  border: 1px solid #E5E7EB;
}

.home-revalidate-button.MuiButton-root:hover {
  background: #e5e7eb;
}

.home-revalidate-button img {
  width: 16px;
  height: 16px;
  display: block;
}

.home-actions-panel {
  display: flex;
  flex-direction: column;
}

.home-action-icon-invert {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

/* ---- Actions panel: grouped menu rows (Assignment / Status & Priority) ---- */

.home-actions-subheader.MuiTypography-root {
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-muted);
  margin: 2px 0 6px;
}

.home-actions-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 6px;
}

.home-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 9px 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: var(--color-text-user, #0f172a);
  cursor: pointer;
}

.home-actions-row:hover:not(:disabled) {
  background: #F3F6FA;
}

.home-actions-row:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.home-actions-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFBB00;
  margin: 2px 0 0 0;
}

.home-actions-row-spinner.MuiCircularProgress-root {
  flex-shrink: 0;
}

.home-actions-divider {
  height: 1px;
  background: var(--bright-chrome-light, #E5E7EB);
  margin: 8px 0 12px;
}

/* Base sizing for both plain <img> row icons (e.g. star-img.svg, already colored in the SVG
   itself) and the masked <span> icons below (recolored via mask-image since their SVGs are
   hardcoded white/grey and can't otherwise be tinted per-row). */
.home-actions-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.home-actions-icon--reassign {
  background-color: #8B5CF6;
  -webkit-mask-image: url('/assets/images/re-assign-icon.svg');
  mask-image: url('/assets/images/re-assign-icon.svg');
}

.home-actions-icon--reprocess {
  background-color: #D92D20;
  -webkit-mask-image: url('/assets/images/reprocess-icon.svg');
  mask-image: url('/assets/images/reprocess-icon.svg');
}

.home-actions-icon--quick-assign {
  background-color: #16A34A;
  -webkit-mask-image: url('/assets/images/quick-assign-icon.svg');
  mask-image: url('/assets/images/quick-assign-icon.svg');
}

.home-actions-icon--hold {
  background-color: #F59E0B;
  -webkit-mask-image: url('/assets/images/hold-clock.svg');
  mask-image: url('/assets/images/hold-clock.svg');
}

.home-actions-icon--close {
  background-color: #F04438;
  -webkit-mask-image: url('/assets/images/close-red.svg');
  mask-image: url('/assets/images/close-red.svg');
}

.home-actions-icon--save {
  background-color: #12B76A;
  -webkit-mask-image: url('/assets/images/save-draft.svg');
  mask-image: url('/assets/images/save-draft.svg');
}

.home-actions-icon--post {
  background-color: #2563EB;
  -webkit-mask-image: url('/assets/images/send-post.svg');
  mask-image: url('/assets/images/send-post.svg');
}

.home-actions-row:disabled .home-actions-icon {
  background-color: #9CA3AF;
}

/* ---- Communication: Send Email / Send SMS side-by-side ---- */

.home-actions-comm-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.home-comm-email-button.MuiButton-root {
  background: #2563EB;
  color: #fff;
  border-radius: 8px;
  text-transform: none;
  font-weight: 600;
  height: 40px;
}

.home-comm-email-button.MuiButton-root:hover {
  background: #1d4ed8;
}

.home-comm-sms-button.MuiButton-root {
  background: #16A34A;
  color: #fff;
  border-radius: 8px;
  text-transform: none;
  font-weight: 600;
  height: 40px;
}

.home-comm-sms-button.MuiButton-root:hover {
  background: #15803d;
}

/* These custom solid-color button classes otherwise override MUI's own dimmed .Mui-disabled look -
   without this, a disabled Send Email/Send SMS button still reads as fully active. A translucent
   version of the same blue/green read as an odd pastel, so this uses the same neutral grey
   treatment MUI's own default disabled buttons use instead. */
.home-comm-email-button.MuiButton-root.Mui-disabled,
.home-comm-sms-button.MuiButton-root.Mui-disabled {
  background: #e4e7ec;
  color: #98a2b3;
  cursor: not-allowed;
}

/* email.svg/sms_icon.svg are natively grey - .home-action-icon-invert force-inverts them to white
   for the solid buttons above, so disabled reverts that back to their natural grey, visible
   against the light grey disabled background. */
.home-comm-email-button.MuiButton-root.Mui-disabled img,
.home-comm-sms-button.MuiButton-root.Mui-disabled img {
 filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) opacity(0.6);
}

.home-comm-email-button.MuiButton-root.Mui-disabled:hover,
.home-comm-sms-button.MuiButton-root.Mui-disabled:hover {
  background: #E5E7EB;
}

/* Save As Draft (AC-2): light-green pastel treatment, matching the app's own "green" queue tone
   (see .home-queue-item--green) rather than a solid button. */
.home-save-draft-button.MuiButton-root {
  background: #EAF9F0;
  border: 1px solid transparent;
  color: #1A7A4A;
  border-radius: 8px;
  text-transform: none;
  font-weight: 600;
  height: 40px;
  margin-bottom: 10px;
  box-shadow: none;
}

.home-save-draft-button.MuiButton-root:hover {
  background: #EAF9F0;
  border: 1px solid #7dd1a6;
}

.home-save-draft-button.MuiButton-root.Mui-disabled {
  background: #e4e7ec;
  color: #98a2b3;
  border-color: #E5E7EB;
  cursor: not-allowed;
}

.home-save-draft-button.MuiButton-root.Mui-disabled:hover {
  background: #E5E7EB;
}

.home-save-draft-button.MuiButton-root.Mui-disabled .home-actions-icon--save {
   background-color: #A8A9AB;
}

.home-send-post-button.MuiButton-root {
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid transparent;
  border-radius: 8px;
  text-transform: none;
  font-weight: 600;
  height: 40px;
  box-shadow: none;
}

.home-send-post-button.MuiButton-root:hover {
  background: #EFF6FF;
  border: 1px solid #7ca5ff;
}

.home-send-post-button.MuiButton-root.Mui-disabled {
background: #e4e7ec;
  color: #98a2b3;
  border-color: #E5E7EB;
  cursor: not-allowed;
}

.home-send-post-button.MuiButton-root.Mui-disabled:hover {
  background: #E5E7EB;
}

.home-send-post-button.MuiButton-root.Mui-disabled .home-actions-icon--post {
 background-color: #98a2b3;
}

/* Once a job is closed, Close/Re-validate disable themselves (see ValidationActionsPanel's
   isClosed) - same neutral grey treatment as the disabled buttons above. */
.home-revalidate-button.MuiButton-root.Mui-disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
}

.home-revalidate-button.MuiButton-root.Mui-disabled:hover {
  background: #E5E7EB;
}

/* Reprocess Failed Job: only ever enabled for a job in the Orphaned Queue (see
   ValidationActionsPanel's canReprocess) - the red/failed tone signals which jobs it applies to,
   same #D92D20 as the Failed status badge (home-review-badge--red). */
.home-reprocess-button.MuiButton-root {
  background: #D92D20;
  color: #ffffff;
  border-radius: 8px;
  text-transform: none;
  font-weight: 400;
  height: 40px;
}

.home-reprocess-button.MuiButton-root:hover {
  background: #B42318;
}

/* validation_check_regenerate_icon.svg is hardcoded dark grey (stroke="#5E6B81") for its other use
   on the light Re-validate button - inverted to white here for legibility on this solid background. */
.home-reprocess-button img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

.home-reprocess-button.MuiButton-root.Mui-disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
}

.home-reprocess-button.MuiButton-root.Mui-disabled img {
  filter: brightness(0.55);
}

.home-reprocess-button.MuiButton-root.Mui-disabled:hover {
  background: #E5E7EB;
}

.home-attach-original-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748B;
  cursor: pointer;
  margin: 15px 0;
}

.home-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F3F6FA;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  color: var(--color-muted);
}

.home-file-chip img {
  display: block;
  flex-shrink: 0;
  background: #FEF2F2;
  padding: 5px;
  width: 33px;
  height: 33px;
  border-radius: 10px;
}

.pdf-closed {
  max-width: 12px;
  padding: 0 !important;
  background: none !important;
}

.home-file-chip-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.home-file-chip-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-user, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.home-file-chip-name {
  text-decoration: none;
  display: block;
}

a.home-file-chip-name:hover {
  text-decoration: underline;
}

.home-file-chip-size {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.home-attach-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 16px;
  color: var(--color-muted);
  font-size: 0.84rem;
  cursor: pointer;
  background: #F3F6FA;
}

.home-attach-dropzone:hover {
  border-color: var(--color-primary);
  background: rgba(0, 122, 129, 0.05);
}

/* Uploading has no backend counterpart yet (see ValidationActionsPanel) - dims the dropzone and
   overrides the hover highlight above so it doesn't look clickable. */
.home-attach-dropzone.home-attach-dropzone--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.home-attach-dropzone.home-attach-dropzone--disabled:hover {
  border-color: var(--color-border);
  background: none;
}

.home-attach-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;

  margin-bottom: 4px;
}

.home-attach-plus img {
  width: 15px;
  height: 15px;
  display: block;
}

.home-attach-dropzone-title {
  font-weight: 500;
  color: #007A81;
  font-size: 14px;
}

.home-attach-dropzone-subtitle {
  font-size: 12px;
  color: #64748B;
}

.home-empty-state {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--color-muted);
}

/* ---- Floating help bubble ---- */

.home-help-bubble {
  position: fixed;
  right: 32px;
  bottom: 28px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: #98a2b3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(17, 52, 71, 0.12);
  z-index: 20;
}

.home-help-bubble .MuiSvgIcon-root {
  font-size: 18px;
  color: #98a2b3;
}

.home-help-bubble:hover {
  background: var(--color-card-bg);
  box-shadow: 0 6px 18px rgba(17, 52, 71, 0.16);
}


.home-validation-panel {
  padding: 10px 20px 20px 20px !important;
}

.home-actions-panel {
  padding: 10px 20px 20px 20px !important;
}

.home-actions-panel h2 {
  border-bottom: 1px solid var(--bright-chrome-light);
  margin: 0 -20px;
  padding: 0 20px 10px 20px;
}

.home-file-options-panel {
  padding: 10px 20px 20px 20px !important;
}

.home-file-options-panel h2 {
  border-bottom: 1px solid var(--bright-chrome-light);
  margin: 0 -20px;
  padding: 0 20px 10px 20px;
}


.home-attach-original-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 7px 0 0;
  border: 1.5px solid var(--color-border, #d0d5dd);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.home-attach-original-checkbox:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Native appearance is off, so accent-color no longer paints a check mark - this ::after
   (a rotated two-sided border) draws one instead, without pulling in an <svg>/image icon. */
.home-attach-original-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.home-attach-original-checkbox:disabled {
  cursor: default;
  opacity: 0.6;
}


/*scrollbar....*/

.home-queue-list::-webkit-scrollbar {
  width: 3px;
  border-radius: 10px;
  /* Chrome/Edge/Safari */
}

.home-queue-list::-webkit-scrollbar-track {
  background: transparent;
}

.home-queue-list::-webkit-scrollbar-thumb {
  background-color: #e9ecf1;
  border-radius: 10px;
}

.home-queue-list::-webkit-scrollbar-thumb:hover {
  background-color: #e9ecf1;
}



.home-email-editor.profile-signature-editor::-webkit-scrollbar {
  width: 3px;
  /* Chrome/Edge/Safari */
}

.home-email-editor.profile-signature-editor::-webkit-scrollbar-track {
  background: transparent;
}

.home-email-editor.profile-signature-editor::-webkit-scrollbar-thumb {
  background-color: #e9ecf1;
  border-radius: 3px;
}

.home-email-editor.profile-signature-editor::-webkit-scrollbar-thumb:hover {
  background-color: #e9ecf1;
}


/*scrollbar....*/
.MuiPopover-paper .MuiListSubheader-sticky {
  color: #007a80;
  font-size: 15px;
  font-weight: 600;
  line-height: 40px;
}

.MuiPopover-paper .MuiListSubheader-sticky .MuiMenuItem-gutters {
  font-size: 12px;
}

.mfa-setup-link {
  color: 'text.disabled';
  pointerEvents: 'none';
  cursor: 'not-allowed';
  opacity: 0.6;
  cursor: no-drop !important;
}

/* Re-Assign queue picker dialog (AC-4) - same shell pattern as .change-password-dialog. */
.reassign-queue-dialog .MuiPaper-root {
  border-radius: 16px;
}

.reassign-queue-dialog-title.MuiDialogTitle-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', 'Segoe UI', 'Trebuchet MS', Helvetica, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-user);
  padding: 15px 20px;
  border-bottom: 1px solid #DBE0E5;
}

.reassign-queue-dialog-close.MuiIconButton-root {
  color: var(--color-muted);
  padding: 0;
}

.reassign-queue-dialog-content {
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 15px;
}

.reassign-queue-dialog-status.MuiTypography-root {
  color: var(--color-muted);
  padding: 24px 0;
  text-align: center;
}

.reassign-queue-list-item.MuiListItem-root {
  padding-left: 0;
  padding-right: 0;
}

.reassign-queue-dialog-actions.MuiDialogActions-root {
  padding: 15px;
  border-top: 1px solid #DBE0E5;
  gap: 12px;
}

.reassign-queue-autocomplete {
  width: 100%;
}

.reassign-queue-autocomplete .MuiAutocomplete-inputRoot {
  height: 40px;
  border-radius: 10px;
}

@media (max-width: 1366px) {
  .home-client-heading {
    margin: 0 !important;
  }
 
  .home-summary-section {
    position: inherit !important;
  }
 
  .home-review-badge-group {
    position: inherit !important;
    margin: 8px 0;
  }
}

.home-queue-toolbar fieldset {
  border-color: var(--color-border) !important;
}