/* Shared sizing: list content reflows natively without manual column widths. */
.main { container: workspace / inline-size; }
.card, .portal-card, .login-card { min-width: 0; container: panel / inline-size; }
h1, h2, h3, h4 { line-height: 1.25; overflow-wrap: anywhere; }
button, input, select, textarea { line-height: 1.35; }
:is(.button, .portal-button) { height: auto; min-height: 2.4em; white-space: normal; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(.active-date-input), select, textarea {
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 2.4em;
  font-size: calc(var(--text-body) * var(--list-text-scale, 1));
}
:is(.card-header, .absence-list-header, .portal-header, .portal-header-actions) { flex-wrap: wrap; gap: .7rem; }
:is(.card-header, .absence-list-header) > div { min-width: 0; }
:is(.data-table-wrap, .modify-substitutions) { min-width: 0; max-width: 100%; overflow-x: auto; }
.schedule-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
:is(.data-table th, .data-table td) { height: auto; line-height: 1.35; }
:is(.person-display, .modify-person) { min-width: 0; }
:is(.person-display strong, .modify-person strong, .teacher-profile-copy h1) { white-space: normal; overflow-wrap: anywhere; }
.person-avatar { width: 2.5em; height: 2.5em; min-width: 2.5em; flex: 0 0 2.5em; }
.dashboard-collapse-button { width: 1.5em; height: 1.5em; flex-shrink: 0; }
.absence-context .absence-list-title { font-size: calc(var(--text-title) * 1.15 * var(--list-text-scale, 1)); }
@media (min-width: 821px) {
  .shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .sidebar { width: var(--sidebar-width); }
  .main { max-width: calc(100vw - var(--sidebar-width)); }
}
@container workspace (max-width: 55rem) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding: .75rem 1rem; }
  .page-context { display: none; }
  .active-date-group { width: auto; }
  .dashboard-grid, .absence-layout, .import-layout { grid-template-columns: minmax(0, 1fr); }
}
@container workspace (max-width: 30rem) {
  .topbar { position: relative; grid-template-columns: minmax(0, 1fr); }
  .topbar > *, .scope-switcher { max-width: 100%; justify-self: stretch; }
  .content { padding-inline: .75rem; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); }
}
@container panel (max-width: 38rem) {
  .horaria-admin-access-form, .horaria-gemini-form, .horaria-smtp-form,
  .horaria-miscellaneous-form, .form-grid, .password-panel { grid-template-columns: minmax(0, 1fr); }
  .card-header, .absence-list-header { flex-wrap: wrap; }
  .card-header > *, .absence-list-header > * { max-width: 100%; }
  .data-table th,
  .data-table td { padding-inline: .45rem; }
  .modify-substitution-header { display: none; }
  .modify-substitution-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
  }
  .modify-substitution-row > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-width: 0;
  }
  .modify-group-row-tone { display: none; }
}
@media (max-width: 40rem) {
  .login-page { grid-template-columns: minmax(0, 1fr); }
  .login-brand-panel, .login-form-panel { min-height: auto; padding: 1.25rem; }
  .login-copy { padding-block: 2rem; }
  .portal-header { position: relative; padding: 1rem; }
  .portal-header-actions { max-width: 100%; }
  .portal-content { width: calc(100% - 1.5rem); }
}

.card-header h3 { font-size: calc(var(--text-section) * var(--list-text-scale, 1)); }
.field, .dashboard-multisort-guide { min-width: 0; }
.dashboard-multisort-guide, .dashboard-multisort-clear { overflow-wrap: anywhere; white-space: normal; }
.teacher-counters, .statistics-card-title { flex-wrap: wrap; }
.teacher-counter { min-width: 0; grid-template-columns: auto minmax(0, 1fr); }
.teacher-counter > *, .badge { overflow-wrap: anywhere; white-space: normal; }
.dropzone { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.dropzone input { width: 100%; }
.communication-history-filters { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.communication-history-filters .field { max-width: 100%; }
.time-slot-editor-list { min-width: 0; max-width: 100%; overflow-x: auto; }
.statistics-column, .statistics-columns.dense .statistics-column { grid-template-rows: auto minmax(130px, 1fr) auto; min-width: 2em; }
@container workspace (max-width: 60rem) {
  .statistics-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .absence-coverage-filters { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .absence-professor-filter { grid-column: 1 / -1; }
  .teacher-counters { max-width: 100%; }
}
@container panel (max-width: 50rem) {
  .dashboard-multisort-toolbar { grid-template-columns: minmax(0, 1fr); }
  .dashboard-multisort-criteria { justify-content: flex-start; }
  .dashboard-multisort-clear { justify-self: start; max-width: 100%; }
  .professor-filter-context { flex-wrap: wrap; padding-inline: 12px; }
  .professor-filter-context button { margin-left: auto; }
  .current-substitutions > .card-header.dashboard-period-header,
  .communication-history-header { grid-template-columns: minmax(0, 1fr); }
  .dashboard-period-selector { grid-column: auto; flex-wrap: wrap; max-width: 100%; }
}
@container workspace (max-width: 30rem) {
  .statistics-toolbar, .absence-coverage-filters { grid-template-columns: minmax(0, 1fr); }
  .teacher-counter { width: 100%; }
}
@container workspace (max-width: 30rem) {
  .topbar { grid-template-columns: auto minmax(0, 1fr); }
  .menu-button { grid-column: 1; grid-row: 1; }
  .scope-switcher { min-width: 0; width: 100%; }
  .active-date-group { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: 2; grid-row: 1; width: 100%; }
  .active-date-card { width: 100%; min-width: 0; }
}
.table-person { flex-wrap: wrap; }
.table-person > span:not(.person-avatar) { min-width: 0; flex: 1 1 6em; }
.table-person .person-avatar { width: 2.5em; height: 2.5em; min-width: 2.5em; flex: 0 0 2.5em; }
.substitution-work-heading { flex-wrap: wrap; }
.substitution-work-heading button, .dashboard-absent-group-toggle {
  width: 1.5em; height: 1.5em; flex: 0 0 1.5em;
}
.dashboard-pending-actions { grid-template-columns: minmax(9em, .25fr) minmax(0, 1fr); }
@container workspace (max-width: 40rem) {
  .dashboard-pending-actions { grid-template-columns: minmax(0, 1fr); }
}
html, body { min-width: 0; }
.teacher-welcome { flex-wrap: wrap; }
.teacher-profile-copy { flex-basis: 12em; overflow-wrap: anywhere; }
.change-password-button { max-width: 100%; white-space: normal; }
.portal-date-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 15.667rem); }
.portal-date-panel > *, .portal-date-panel label { min-width: 0; }
.portal-absence-history-title h2, .password-panel h2 { font-size: var(--text-section); }
@media (max-width: 40rem) {
  .portal-date-panel { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .password-panel { margin-left: 0; grid-template-columns: minmax(0, 1fr); }
  .change-password-button { margin-left: 0; }
}
.dashboard-column-heading, .dashboard-multi-sort-header { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.sortable-table-header { display: block; min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.sortable-table-header span { display: inline-grid; width: 1.5em; height: 1.5em; }
.dashboard-sort-lock { height: auto; min-height: 1.5em; }
.day-substitutions-table .dashboard-period-icon-header { flex-wrap: nowrap; }
.day-substitutions-table .dashboard-period-sort-button { display: inline-flex; white-space: nowrap; }
.day-substitutions-table .dashboard-period-sort-button .dashboard-period-sort-state { display: inline-grid; width: 17px; height: 20px; }
.day-substitutions-table .dashboard-period-icon-header .dashboard-sort-lock { height: 20px; min-height: 20px; }
.absence-coverage-table .dashboard-column-heading,
.absence-coverage-table .dashboard-multi-sort-header {
  width: max-content;
  min-width: max-content;
  max-width: none;
  flex-wrap: nowrap;
}
.absence-coverage-table .dashboard-period-sort-button {
  display: inline-flex;
  min-width: max-content;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.absence-coverage-table .dashboard-period-sort-button .dashboard-period-sort-state {
  display: inline-grid;
  width: 17px;
  height: 20px;
}
.absence-coverage-table .absence-coverage-date-band-sort {
  display: inline-flex;
  min-width: max-content;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.absence-coverage-table .absence-coverage-date-band-sort .dashboard-period-sort-state {
  display: inline-grid;
  width: 17px;
  height: 20px;
}
.active-date-reset {
  justify-self: center;
  max-width: 100%;
  white-space: normal;
}

.schedule-cell.non-working-slot, .class-block.non-working-slot, .all-class.non-working-slot { background: #e5e7eb; color: #374151; border-color: #cbd5e1; }
.professor-import-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.data-tool-card.email-import-card {
  grid-template-columns: 44px minmax(0, 1fr);
  cursor: default;
}
#email-import {
  display: none;
}
.professor-import-actions .button {
  white-space: normal;
  max-width: 100%;
}

/* Editar substitucions: graella fluida en escriptori i targetes en mòbil. */
@media (min-width: 561px) {
  .modify-substitution-header,
  .modify-substitution-row {
    grid-template-columns:
      32px
      minmax(0, .72fr)
      minmax(0, .82fr)
      minmax(0, 1.25fr)
      minmax(0, 1.9fr)
      minmax(0, .72fr)
      minmax(0, .82fr)
      38px;
  }
}
.modify-substitution-header > *,
.modify-substitution-row > * { min-width: 0; overflow-wrap: anywhere; }

/* Shared action icons retain the button's colour and scale with its text. */
.action-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 20px;
  pointer-events: none;
}
button.has-action-icon { border-radius: .5rem; transition: background-color .15s, box-shadow .15s; }
button.has-action-icon.action-delete { color: #b42332; }
button.has-action-icon:hover:not(:disabled) { box-shadow: inset 0 0 0 100px rgb(40 105 158 / 8%); }
button.has-action-icon:focus-visible { outline: 2px solid #28699e; outline-offset: 3px; }
button.has-action-icon:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { button.has-action-icon { transition: none; } }

button.has-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
}
button.has-action-icon.action-icon-only {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  flex: 0 0 30px;
  padding: 0;
  gap: 0;
}
button.has-action-icon .action-icon { width: 20px; height: 20px; }
button.has-action-icon.action-icon-only .action-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 16px;
}

/* Supersede the legacy emoji pseudo-elements only after SVG decoration. */
button.has-action-icon::before {
  content: none !important;
  display: none !important;
}
button.has-action-icon.action-icon-only {
  display: inline-flex !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
}
button.has-action-icon svg.action-icon { display: inline-block !important; }

/* Compact disclosure controls share the professor-group button dimensions. */
button[data-toggle-ai-assignment],
button.has-action-icon.action-icon-only[data-toggle-ai-assignment],
button.has-action-icon.action-icon-only[aria-expanded],
button.dashboard-absent-group-toggle,
button.dashboard-absent-group-toggle.has-action-icon.action-icon-only {
  --disclosure-size: calc(var(--text-body) * var(--list-text-scale, 1) * 1.5);
  width: var(--disclosure-size) !important;
  height: var(--disclosure-size) !important;
  min-width: var(--disclosure-size) !important;
  min-height: var(--disclosure-size) !important;
  flex: 0 0 var(--disclosure-size) !important;
  padding: 0;
  border-radius: 7px;
}
button[data-toggle-ai-assignment] svg.action-icon,
button.has-action-icon.action-icon-only[aria-expanded] svg.action-icon,
button.dashboard-absent-group-toggle svg.action-icon {
  width: 70%;
  height: 70%;
  min-width: 0;
  flex: 0 0 70%;
}

/* Preserve navigation contrast when an SVG is added. */
.sidebar .nav-button { color: #fff; }
button.nav-button.has-action-icon { justify-content: flex-start; gap: 12px; }

/* Secondary annotations use the same typography as the professor request note. */
.substitution-work-summary .substitution-work-heading > strong {
  font-size: calc(var(--text-secondary) * var(--list-text-scale, 1)) !important;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
}

.pending-day-group { min-width: 0; }
.pending-day-group + .pending-day-group { margin-top: 18px; }
.pending-day-group > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 15px;
  list-style: none;
  cursor: pointer;
  border-left: 4px solid #3277ad;
  border-radius: 7px;
  background: #e8f3fb;
  color: #205780;
}
.pending-day-group > summary::-webkit-details-marker { display: none; }
.pending-day-count { margin-left: auto; font-size: var(--text-secondary); }
.pending-day-toggle { display: grid; place-items: center; width: 1.5em; height: 1.5em; border: 1px solid #91bddb; border-radius: 6px; }
.pending-day-toggle::after { content: "+"; }
.pending-day-group[open] > summary .pending-day-toggle::after { content: "−"; }
.pending-day-items { display: grid; gap: 5px; padding-top: 5px; }

.dashboard-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
  justify-self: end;
  max-width: 100%;
}
.dashboard-header-actions > .button { flex: 0 0 auto; max-width: 100%; }
.current-substitutions > .dashboard-period-header .dashboard-header-actions { grid-column: 3; grid-row: 1; }
@container panel (max-width: 65rem) {
  .current-substitutions > .card-header.dashboard-period-header { grid-template-columns: minmax(0, 1fr) auto; }
  .current-substitutions > .dashboard-period-header .dashboard-header-actions { grid-column: 2; grid-row: 1; }
  .current-substitutions > .dashboard-period-header .dashboard-period-selector { grid-column: 1 / -1; grid-row: 2; }
}
@container panel (max-width: 38rem) {
  .current-substitutions > .card-header.dashboard-period-header { grid-template-columns: minmax(0, 1fr); }
  .current-substitutions > .dashboard-period-header .dashboard-header-actions { grid-column: 1; grid-row: 2; }
  .current-substitutions > .dashboard-period-header .dashboard-period-selector { grid-row: 3; }
}

.daily-date-professors { display:grid; gap:10px; }
.daily-date-professor { display:flex; align-items:center; gap:14px; padding:10px; flex-wrap:wrap; }
.daily-date-professor > strong { margin-right:auto; }
.daily-date-counts { padding:6px 10px; border-radius:7px; text-align:right; font-size:calc(1em - 2px); }
.daily-date-counts.uncovered { background:#f9d8d8; color:#8f2929; }
.daily-date-counts.unsent { background:#fff0b5; color:#795600; }
.daily-date-counts.complete { background:#d9f8e4; color:#137c3b; }
.daily-date-warning { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:4px; border:1px solid currentColor; border-radius:7px; background:#fff0b5; color:#795600; cursor:pointer; }
.daily-date-counts.uncovered + .daily-date-warning { background:#f9d8d8; color:#8f2929; }
.daily-date-warning svg { pointer-events:none; }
.daily-date-ok { display:grid; place-items:center; width:32px; height:32px; border-radius:7px; background:#d9f8e4; color:#137c3b; font-size:24px; }
button.daily-date-ok { border:1px solid transparent; padding:0; font-family:inherit; line-height:1; cursor:pointer; }
button.daily-date-ok:hover { border-color:#65bb81; background:#c8f1d6; }
button.daily-date-ok:focus-visible { outline:3px solid rgba(46,112,173,.28); outline-offset:2px; }

/* Daily date groups reuse the weekly list surfaces and centre their date. */
.daily-date-professors.dashboard-group-summary-list { gap: 5px; }
.daily-date-professors.dashboard-group-summary-list > .daily-date-professor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 34px;
  padding: 4px 6px;
}
.day-substitutions-table .dashboard-day-date-summary > td:first-child {
  vertical-align: middle;
  text-align: center;
}
.dashboard-day-date-summary .dashboard-date-group-control { justify-content: center; }
.dashboard-day-date-summary .dashboard-date-group-control > strong { flex: 1; text-align: center; font-weight: 400; }

.day-substitutions-table.dates-grouped > thead { display: none; }
.grouped-date-cell { position: relative; }

/* Separate consecutive grouped dates across the entire weekly table. */
.weekly-substitutions .day-substitutions-table > tbody > .dashboard-day-date-summary + .dashboard-day-date-summary > td {
  border-top: 3px solid #dbeaf5;
}

/* Shared dashboard list headers; compact column headings remain daily-only. */
.current-substitutions > .card-header,
.modify-list-header,
.absence-coverage-card > div > .absence-list-header {
  background: #405b7c;
  border-bottom-color: #405b7c;
}
.current-substitutions > .card-header::before { background: #a9d8f5; }
.current-substitutions > .card-header h3,
.modify-list-header h3,
.absence-coverage-card > div > .absence-list-header h3 { color: #fff; }
.current-substitutions > .card-header p,
.modify-list-header p,
.absence-coverage-card > div > .absence-list-header p { color: #e5f2fc; }

.modify-list-header,
.absence-coverage-card > div > .absence-list-header {
  position: relative;
  border-left: 0;
  color: #fff;
}

.modify-list-header::before,
.absence-coverage-card > div > .absence-list-header::before {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: #a9d8f5;
  content: "";
}

.modify-list-header .dashboard-day-view-toggle,
.absence-coverage-card > div > .absence-list-header .dashboard-day-view-toggle {
  border-color: rgba(255, 255, 255, .52);
  background: rgba(255, 255, 255, .18);
}

.modify-list-header .dashboard-day-view-option,
.absence-coverage-card > div > .absence-list-header .dashboard-day-view-option {
  color: #e7f4fd;
  background: transparent;
}

.modify-list-header .dashboard-day-view-option:hover,
.modify-list-header .dashboard-day-view-option:focus-visible,
.absence-coverage-card > div > .absence-list-header .dashboard-day-view-option:hover,
.absence-coverage-card > div > .absence-list-header .dashboard-day-view-option:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.modify-list-header .dashboard-day-view-option.is-active,
.absence-coverage-card > div > .absence-list-header .dashboard-day-view-option.is-active {
  color: #174f78;
  background: #fff;
}

.modify-list-header .badge {
  color: #e7f4fd;
  background: rgba(255, 255, 255, .14);
}
.current-substitutions:not(.weekly-substitutions) .day-substitutions-table > thead > tr > th {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.15;
}
.current-substitutions:not(.weekly-substitutions) .dashboard-multi-sort-header {
  flex-wrap: nowrap;
  gap: 4px;
}
.current-substitutions:not(.weekly-substitutions) .dashboard-multi-sort-header > .sortable-table-header {
  flex: 0 1 auto;
  line-height: 1.15;
}
.current-substitutions:not(.weekly-substitutions) .dashboard-sort-lock { flex-shrink: 0; }

/* Keep all dashboard section titles visually consistent. */
.dashboard-pending-actions-heading > h3,
.current-substitutions > .card-header h3 {
  font-size: calc(var(--text-section) * var(--list-text-scale, 1));
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.25;
}

/* Emphasise dashboard list titles rather than their date/count subtitles. */
.current-substitutions > .card-header h3 { font-weight: 700; }
.current-substitutions > .card-header p { font-weight: 400; }
.current-substitutions > .card-header p::first-letter { text-transform: uppercase; }

/* Light slate date groups in the daily and weekly dashboard lists. */
.current-substitutions .dashboard-day-date-summary > td {
  background: #dce6f0 !important;
  color: #243e5a;
  border-color: #c2d1df;
}
.current-substitutions .dashboard-day-date-summary > td:first-child {
  box-shadow: inset 5px 0 #405b7c;
}
.current-substitutions .dashboard-day-date-summary .daily-date-professor {
  color: #243e5a;
  background: #fff;
}
.current-substitutions .dashboard-day-date-summary .dashboard-absent-group-toggle {
  color: #243e5a;
  border-color: #829cb4;
  background: #edf4fa;
}
.current-substitutions .dashboard-day-date-summary .dashboard-absent-group-toggle:hover {
  background: #fff;
}
.weekly-substitutions .day-substitutions-table > tbody > .dashboard-day-date-summary + .dashboard-day-date-summary > td {
  border-top: 3px solid #fff;
}

/* The grouped period summary follows the fluid daily summary instead of the fixed detailed table. */
@container panel (max-width: 38rem) {
  .dashboard-day-summary-table,
  .dashboard-day-summary-table > tbody {
    display: block;
    width: 100%;
  }
  .dashboard-day-summary-table .dashboard-day-date-summary {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  .dashboard-day-summary-table .dashboard-day-date-summary > td {
    display: block;
    box-sizing: border-box;
    width: auto;
  }
  .dashboard-day-summary-table .dashboard-day-date-summary > td:first-child {
    width: auto;
  }
}

.guard-admin-editor { display: grid; grid-template-columns: minmax(120px, .4fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; padding: 15px; background: #f3f7fb; color: #172333; border-radius: 10px; }
.guard-admin-editor label { display: grid; gap: 6px; }
.guard-admin-editor > div { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) { .guard-admin-editor { grid-template-columns: 1fr; } }

/* Opcions massives: barra contextual fora de la taula i disponible en vista agrupada. */
.bulk-email-plan-toolbar {
  display: grid;
  grid-template-columns: minmax(310px, 1fr) auto;
  align-items: center;
  gap: 10px 20px;
  border: 1px solid #c7dfef;
  border-radius: 12px;
  margin: 10px 12px;
  padding: 12px 14px;
  color: #20476a;
  background: #edf7fd;
}

.bulk-email-selection-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.bulk-email-selection-summary > input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: #2e70ad;
  cursor: pointer;
}

.bulk-email-selection-summary > input:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.bulk-email-selection-summary > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.bulk-email-selection-summary strong {
  color: #103f66;
  font-size: calc(var(--text-body) * var(--list-text-scale, 1));
  line-height: 1.15;
}

.bulk-email-selection-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.bulk-email-selection-meta b,
.bulk-email-selection-meta small {
  font-size: calc(var(--text-secondary) * var(--list-text-scale, 1));
}

.bulk-email-selection-meta b {
  color: #155984;
  white-space: nowrap;
}

.bulk-email-selection-meta i {
  width: 1px;
  height: 16px;
  flex: 0 0 1px;
  background: #9fc7df;
}

.bulk-email-selection-meta small {
  overflow: hidden;
  color: #5d7a91;
  font-style: normal;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-email-plan-controls {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.bulk-email-plan-toolbar .pending-email-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.bulk-email-plan-toolbar .pending-email-choice {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  border: 1px solid #afd1e7;
  border-radius: 10px;
  padding: 7px 11px;
  color: #155984;
  background: #fff;
  font-weight: 780;
  cursor: pointer;
}

.bulk-email-plan-toolbar .pending-email-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bulk-email-plan-toolbar .pending-email-choice:focus-within {
  z-index: 1;
  outline: 3px solid rgba(46, 112, 173, .22);
  outline-offset: 1px;
}

.bulk-email-plan-toolbar .pending-email-choice:hover {
  border-color: #70acd3;
  background: #f8fcff;
}

.bulk-email-plan-toolbar .pending-email-choice.selected {
  border-color: #2e70ad;
  color: #fff;
  background: #2e70ad;
  box-shadow: none;
}

.bulk-email-plan-toolbar .pending-email-choice.is-internal.selected {
  border-color: #7242a5;
  color: #fff;
  background: #8051b5;
  box-shadow: none;
}

.bulk-email-plan-toolbar .pending-email-choice-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.bulk-email-plan-toolbar .pending-email-choice strong {
  font-size: calc(var(--text-secondary) * var(--list-text-scale, 1));
  white-space: nowrap;
}

.bulk-email-plan-date {
  display: grid;
  min-width: 205px;
  gap: 4px;
  font-size: calc(var(--text-secondary) * var(--list-text-scale, 1));
  font-weight: 750;
}

.bulk-email-plan-date input { max-width: 100%; }

.bulk-email-plan-toolbar #apply-bulk-email-plan {
  min-height: 42px;
  border-radius: 10px;
  padding: 7px 15px;
  white-space: nowrap;
}

.modify-bulk-toolbar {
  margin-top: 12px;
  margin-bottom: 12px;
}

.bulk-email-plan-toolbar .bulk-email-plan-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  clip-path: inset(50%);
}
.communication-history-card > .communication-history-header { background:#405b7c; border-bottom-color:#405b7c; }
.communication-history-card > .communication-history-header h3 { color:#fff; }
.communication-history-card > .communication-history-header p { color:#e5f2fc; }

@media (max-width: 1250px) {
  .bulk-email-plan-toolbar { grid-template-columns: 1fr; }
  .bulk-email-plan-controls { justify-content: flex-start; }
  .modify-bulk-unsaved-summary,
  .modify-bulk-unsaved-summary > span { overflow: visible; }
  .modify-bulk-unsaved-summary small { overflow: visible; text-overflow: clip; }
}

@media (max-width: 760px) {
  .bulk-email-plan-toolbar { margin: 8px; padding: 11px; }
  .bulk-email-selection-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
  .bulk-email-selection-meta i { display: none; }
  .bulk-email-selection-meta small { white-space: normal; }
  .bulk-email-plan-controls,
  .bulk-email-plan-toolbar .pending-email-choices { width: 100%; }
  .bulk-email-plan-toolbar .pending-email-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulk-email-plan-toolbar .pending-email-choice { justify-content: center; }
  .bulk-email-plan-date { width: 100%; }
  .bulk-email-plan-toolbar #apply-bulk-email-plan { width: 100%; }
  .modify-bulk-toolbar .modify-bulk-actions { width: 100%; justify-content: stretch; }
  .modify-bulk-toolbar .modify-bulk-actions .button { flex: 1 1 150px; }
  .modify-bulk-toolbar .modify-bulk-delete-action { margin-left: 0; }
  .modify-bulk-toolbar .modify-bulk-delete-action::before { display: none; }
  .modify-bulk-unsaved-summary > span { align-items: flex-start; flex-direction: column; gap: 3px; }
  .modify-bulk-unsaved-summary small { border-left: 0; padding-left: 0; white-space: normal; }
}

.communication-history-status,
.communication-heading > .badge {
  min-height:21px;
  padding:2.5px 4px;
  gap:2.5px;
  font-size:calc(var(--text-secondary) * var(--list-text-scale, 1) * .5);
}
.communication-history-status .live-dot,
.communication-heading > .badge .live-dot { width:3px; height:3px; }