* { box-sizing: border-box; }

    :root {
      --teal: #477d8c;
      --teal-dark: #315d68;
      --teal-light: #e9f3f5;
      --bg: #f3f7f8;
      --border: #d8e3e6;
      --text: #223036;
      --muted: #6c7c82;
      --danger: #a84646;
      --warning: #fff6df;
      --green-light: #edf7ef;
      --blue-light: #eef5fb;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    button,
    select,
    input,
    textarea {
      font: inherit;
    }

    button { cursor: pointer; }

    .app {
      max-width: 1200px;
      min-height: 100vh;
      margin: auto;
      background: white;
    }

    header {
      background: var(--teal);
      color: white;
      padding: 24px;
    }

    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }

    header h1 {
      margin: 0;
      font-size: 34px;
    }

    header p {
      margin: 5px 0 0;
      opacity: .9;
    }

    .demo-badge {
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.4);
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 13px;
    }

    nav {
      display: flex;
      overflow-x: auto;
      border-bottom: 1px solid var(--border);
      background: white;
    }

    nav button {
      border: 0;
      background: white;
      padding: 17px 18px;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
    }

    nav button.active {
      color: var(--teal-dark);
      border-bottom: 3px solid var(--teal);
    }

    main {
      padding: 22px;
    }

    .privacy {
      background: var(--teal-light);
      padding: 14px 16px;
      border-radius: 14px;
      margin-bottom: 22px;
      font-size: 14px;
      line-height: 1.45;
    }

    .screen { display: none; }
    .screen.active { display: block; }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 20px;
    }

    .page-header h2 {
      margin: 0 0 5px;
      font-size: 28px;
    }

    .muted { color: var(--muted); }

    .primary {
      border: 0;
      background: var(--teal);
      color: white;
      border-radius: 12px;
      padding: 12px 16px;
      font-weight: 700;
    }

    .secondary {
      background: white;
      color: var(--teal-dark);
      border: 1px solid var(--border);
      border-radius: 11px;
      padding: 10px 14px;
      font-weight: 700;
    }

    .danger {
      color: var(--danger);
      background: white;
      border: 1px solid #e5caca;
      border-radius: 10px;
      padding: 8px 11px;
    }

    .card {
      border: 1px solid var(--border);
      border-radius: 17px;
      background: white;
      padding: 18px;
      box-shadow: 0 3px 12px rgba(28,60,70,.04);
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .stat strong {
      display: block;
      font-size: 28px;
      color: var(--teal-dark);
    }

    .dashboard-grid {
      display: grid;
      gap: 16px;
    }

    .filter-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .filter-row button {
      border: 1px solid var(--border);
      background: white;
      border-radius: 999px;
      padding: 8px 13px;
    }

    .filter-row button.active {
      background: var(--teal);
      color: white;
      border-color: var(--teal);
    }

    .grade-section { margin-bottom: 28px; }

    .grade-title {
      margin: 0 0 11px;
      font-size: 20px;
    }

    .student-list,
    .group-list,
    .saved-session-list {
      display: grid;
      gap: 10px;
    }

    .student-card,
    .group-card,
    .saved-session-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 15px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 15px;
      cursor: pointer;
    }

    .student-card:hover,
    .group-card:hover,
    .saved-session-card:hover {
      background: #f9fbfb;
    }

    .initials {
      font-size: 21px;
      font-weight: 800;
    }

    .student-meta,
    .group-meta {
      margin-top: 5px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .tag {
      display: inline-block;
      font-size: 12px;
      padding: 5px 8px;
      border-radius: 999px;
      background: var(--teal-light);
      color: var(--teal-dark);
      font-weight: 700;
      margin-right: 4px;
      margin-top: 5px;
    }

    .due-soon { background: var(--warning); }

    .chevron {
      font-size: 22px;
      color: var(--muted);
    }

    .back {
      border: 0;
      background: transparent;
      color: var(--teal-dark);
      padding: 0;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .profile-grid {
      display: grid;
      gap: 15px;
      margin-bottom: 20px;
    }

    .profile-item span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 4px;
    }

    .profile-item strong {
      font-size: 16px;
    }

    .goal-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 15px;
      margin-bottom: 12px;
    }

    .goal-header {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 8px;
    }

    .goal-text {
      line-height: 1.5;
      margin: 8px 0 14px;
    }

    .goal-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .goal-actions button {
      padding: 8px 10px;
      border-radius: 9px;
      border: 1px solid var(--border);
      background: white;
    }

    .archived { opacity: .55; }

    .empty {
      padding: 28px;
      text-align: center;
      color: var(--muted);
      border: 1px dashed var(--border);
      border-radius: 14px;
    }

    .member-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 14px;
    }

    .member-card h3 {
      margin: 0 0 4px;
    }

    .member-goals {
      margin-top: 12px;
    }

    .member-goal {
      background: #f7fafb;
      border-radius: 10px;
      padding: 11px;
      margin-top: 8px;
      line-height: 1.45;
    }

    /* CALENDAR */

    .calendar-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .calendar-day {
      border: 1px solid var(--border);
      border-radius: 15px;
      overflow: hidden;
      min-height: 150px;
    }

    .calendar-day h3 {
      margin: 0;
      padding: 12px 14px;
      background: #f3f7f8;
      border-bottom: 1px solid var(--border);
    }

    .calendar-events {
      padding: 10px;
    }

    .calendar-event {
      background: var(--teal-light);
      border-left: 4px solid var(--teal);
      padding: 11px;
      border-radius: 9px;
      margin-bottom: 9px;
      cursor: pointer;
    }

    .calendar-event.individual {
      background: var(--green-light);
      border-left-color: #65966f;
    }

    .event-time {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .event-title {
      font-weight: 800;
    }

    /* DATA COLLECTION */

    .data-student-card {
      border: 1px solid var(--border);
      border-radius: 16px;
      margin-bottom: 18px;
      overflow: hidden;
    }

    .data-student-header {
      padding: 16px;
      background: #f7fafb;
      border-bottom: 1px solid var(--border);
    }

    .data-student-header h3 {
      margin: 0;
      font-size: 22px;
    }

    .participation-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .participation-btn {
      border: 1px solid var(--border);
      background: white;
      border-radius: 999px;
      padding: 8px 13px;
      font-weight: 700;
    }

    .participation-btn.selected {
      background: var(--teal);
      border-color: var(--teal);
      color: white;
    }

    .participation-note {
      padding: 0 16px 16px;
      background: #f7fafb;
    }

    .goal-data-card {
      margin: 16px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 14px;
    }

    .goal-data-card.disabled {
      opacity: .45;
      pointer-events: none;
    }

    .goal-target-toggle {
      display: flex;
      gap: 8px;
      margin: 12px 0;
    }

    .goal-target-toggle button {
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 8px 11px;
      background: white;
    }

    .goal-target-toggle button.selected {
      background: var(--teal-light);
      color: var(--teal-dark);
      border: 2px solid var(--teal);
      font-weight: 700;
    }

    .data-method-fields {
      margin-top: 12px;
    }

    .trial-grid {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 8px;
      align-items: end;
    }

    .calculated-result {
      min-width: 90px;
      padding: 12px;
      background: var(--blue-light);
      border-radius: 10px;
      text-align: center;
      font-weight: 800;
    }

    .live-buttons {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 9px;
      margin: 12px 0;
    }

    .live-btn {
      border: 1px solid var(--border);
      background: white;
      border-radius: 11px;
      padding: 14px 8px;
      font-weight: 800;
    }

    .live-summary {
      background: var(--blue-light);
      border-radius: 11px;
      padding: 12px;
      line-height: 1.5;
      margin-bottom: 12px;
    }

    .cue-grid {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 8px 0;
    }

    .cue-chip {
      border: 1px solid var(--border);
      border-radius: 999px;
      background: white;
      padding: 7px 11px;
      font-size: 13px;
    }

    .cue-chip.selected {
      background: var(--teal-light);
      border: 2px solid var(--teal);
      color: var(--teal-dark);
      font-weight: 700;
    }

    .section-label {
      display: block;
      font-size: 13px;
      font-weight: 800;
      margin: 15px 0 6px;
    }

    .save-bar {
      position: sticky;
      bottom: 0;
      background: white;
      border-top: 1px solid var(--border);
      padding: 14px 0 0;
      margin-top: 20px;
    }

    .save-bar button {
      width: 100%;
      padding: 15px;
      font-size: 16px;
    }

    /* MODALS */

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(16,32,37,.55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 100;
    }

    .modal-backdrop.show {
      display: flex;
    }

    .modal {
      width: min(620px,100%);
      max-height: 90vh;
      overflow-y: auto;
      background: white;
      border-radius: 18px;
      padding: 22px;
    }

    .modal h3 {
      margin-top: 0;
      font-size: 23px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-group label {
      display: block;
      font-weight: 700;
      margin-bottom: 7px;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid #c9d8dc;
      border-radius: 11px;
      padding: 12px;
      background: white;
      color: var(--text);
    }

    textarea {
      min-height: 95px;
      resize: vertical;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .checkbox-list {
      display: grid;
      gap: 9px;
      max-height: 320px;
      overflow-y: auto;
    }

    .checkbox-row {
      border: 1px solid var(--border);
      border-radius: 11px;
      padding: 12px;
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .checkbox-row input {
      width: auto;
    }

    .type-choice {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .type-choice button {
      padding: 12px;
      border: 1px solid var(--border);
      background: white;
      border-radius: 11px;
    }

    .type-choice button.selected {
      background: var(--teal-light);
      border: 2px solid var(--teal);
      font-weight: 700;
      color: var(--teal-dark);
    }

    @media (min-width:760px) {
      .stats {
        grid-template-columns: repeat(4,1fr);
      }

      .dashboard-grid {
        grid-template-columns: 1fr 1fr;
      }

      .student-list,
      .group-list {
        grid-template-columns: repeat(2,1fr);
      }

      .profile-grid {
        grid-template-columns: repeat(4,1fr);
      }

      .calendar-grid {
        grid-template-columns: repeat(5,1fr);
      }

      .live-buttons {
        grid-template-columns: repeat(4,1fr);
      }
    }
/* ---------- SUB-TARGET BUTTONS ---------- */

.subtarget-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 22px;
}

/* Bulk goal document import */
.goal-bulk-import[hidden] { display: none !important; }
.goal-import-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: #688198; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.goal-import-divider::before, .goal-import-divider::after { content: ""; flex: 1; height: 1px; background: #d7e5f1; }
.goal-import-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.goal-import-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.goal-import-status { margin: 10px 0; }
.goal-import-review { display: grid; gap: 12px; max-height: 48vh; overflow: auto; padding-right: 4px; }
.goal-import-card { display: grid; gap: 10px; padding: 15px; border: 1px solid #cfe0ed; border-radius: 16px; background: linear-gradient(135deg, #f8fcff, #fffafd); }
.goal-import-card-heading { display: flex; align-items: center; justify-content: space-between; color: #174f91; }
.goal-import-card label { display: grid; gap: 5px; color: #365971; font-size: .86rem; font-weight: 750; }
.goal-import-card textarea { min-height: 92px; resize: vertical; }
.goal-import-remove { border: 0; background: transparent; color: #a43d56; font-weight: 750; cursor: pointer; }

.subtarget-btn {
  padding: 9px 16px;
  border: 2px solid #c9dce1;
  border-radius: 10px;
  background: #ffffff;
  color: #26383d;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s ease;
}

.subtarget-btn:hover {
  border-color: #4f8998;
  background: #f3fafb;
}

.subtarget-btn.selected {
  background: #e3f1f4;
  border-color: #4f8998;
  color: #285c68;
  font-weight: 700;
}
/* ---------- SAVED SESSION EXPANDER ---------- */

.saved-session-card {
  border: 1px solid #d8e4e7;
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 16px;
}

.saved-session-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.saved-session-summary::-webkit-details-marker {
  display: none;
}

.saved-session-summary::after {
  content: "\2304";
  font-size: 24px;
  color: #5f7479;
  transition: transform 0.2s ease;
}

.saved-session-card[open] .saved-session-summary::after {
  transform: rotate(180deg);
}

.saved-session-details {
  border-top: 1px solid #e4ecee;
  padding: 20px 22px;
  background: #fbfdfd;
}

.saved-student-results {
  padding: 12px 0;
}

.saved-student-results + .saved-student-results {
  border-top: 1px solid #e4ecee;
}

.saved-result-line {
  margin-top: 5px;
}
/* ---------- PROGRESS TRACKING ---------- */

.progress-goal-card {
  margin-bottom: 20px;
}

.progress-target-card {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #dbe6e8;
  border-radius: 16px;
  background: #ffffff;
}

.progress-target-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.progress-current {
  text-align: right;
}

.progress-graph-card {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  background: #f7fafb;
  border: 1px solid #e2ebed;
}

.progress-chart-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 10px;
}

.progress-chart {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
  overflow: visible;
}

.progress-grid-line {
  stroke: #dce6e8;
  stroke-width: 1;
}

.progress-line {
  fill: none;
  stroke: #4f8996;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.progress-point {
  fill: #ffffff;
  stroke: #4f8996;
  stroke-width: 4;
}

.progress-axis-label,
.progress-date-label {
  fill: #718489;
  font-size: 12px;
}

.progress-value-label {
  fill: #26383d;
  font-size: 13px;
  font-weight: 700;
}

.progress-single-point {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-top: 10px;
  border-radius: 12px;
  background: #ffffff;
}

.progress-single-point span {
  color: #718489;
}

.progress-history {
  margin-top: 18px;
  border-top: 1px solid #e2ebed;
}

.progress-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f3;
}

.progress-history-row:last-child {
  border-bottom: none;
}

@media (max-width: 700px) {

  .progress-target-header {
    flex-direction: column;
  }

  .progress-current {
    text-align: left;
  }

  .progress-history-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Multi-factor authentication */
.cw-security-card {
  margin: 22px 28px 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #dce8f1;
  border-radius: 18px;
  background: linear-gradient(145deg, #f6fbff, #f5fbf8);
}

.cw-security-card h3,
.cw-security-card p {
  margin: 5px 0 0;
}

.cw-security-card p {
  color: #607685;
}

.cw-device-card {
  margin: 18px 28px 0;
  padding: 20px;
  border: 1px solid #dce8f1;
  border-radius: 18px;
  background: #fff;
}

.cw-device-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.cw-device-heading h3,
.cw-device-heading p {
  margin: 5px 0 0;
}

.cw-device-heading p,
.cw-device-list article span {
  color: #607685;
}

.cw-device-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.cw-device-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e0eaf2;
  border-radius: 14px;
  background: #f9fcff;
}

.cw-device-list article strong,
.cw-device-list article span {
  display: block;
}

.cw-device-list article span {
  margin-top: 4px;
  font-size: .86rem;
}

.cw-current-device {
  display: inline-flex !important;
  margin: 0 0 0 7px !important;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e4f7ee;
  color: #237253 !important;
  font-size: .72rem !important;
}

.cw-mfa-enrollment {
  margin: 24px 28px 4px;
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.cw-mfa-enrollment img {
  width: min(240px, 70vw);
  height: auto;
  padding: 10px;
  border: 1px solid #dce8f1;
  border-radius: 16px;
  background: #fff;
}

.cw-mfa-enrollment code {
  display: block;
  max-width: min(520px, 80vw);
  margin-top: 7px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: #edf5fb;
  color: #234a67;
  font-size: .9rem;
}

.cw-mfa-enrollment label {
  width: min(420px, 100%);
  display: grid;
  gap: 8px;
  text-align: left;
}

.cw-mfa-code {
  text-align: center;
  letter-spacing: .32em;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .cw-security-card {
    margin-inline: 18px;
    align-items: stretch;
    flex-direction: column;
  }

  .cw-device-card {
    margin-inline: 18px;
  }

  .cw-device-heading,
  .cw-device-list article {
    align-items: stretch;
    flex-direction: column;
  }
}
/* =====================================================
   SPEECHPLAN — COMMUNICATION WORKSPACE VISUAL REDESIGN
   Phase 1: Pastel foundation + student profile styling
   ===================================================== */

:root {
  /* New brand palette */
  --brand-blue: #1756a9;
  --brand-blue-dark: #123f82;
  --brand-blue-soft: #eaf2ff;

  --pastel-pink: #fff0f5;
  --pastel-pink-strong: #ffdce9;

  --pastel-mint: #ebfaf6;
  --pastel-mint-strong: #d5f4ea;

  --pastel-peach: #fff4e8;
  --pastel-peach-strong: #ffe5c8;

  --pastel-lavender: #f2efff;
  --pastel-lavender-strong: #e3dcff;

  --pastel-sky: #edf7ff;
  --pastel-sky-strong: #d9efff;

  --workspace-bg: #f8faff;
  --workspace-card: #ffffff;

  /* Override the original SpeechPlan teal globally */
  --teal: #3f8fb5;
  --teal-dark: #245d87;
  --teal-light: #edf7fb;

  --bg: #f8faff;
  --border: #dbe5f0;
  --text: #25313d;
  --muted: #6f7f8b;

  --soft-shadow:
    0 8px 28px rgba(43, 72, 110, 0.07);

  --medium-shadow:
    0 12px 34px rgba(43, 72, 110, 0.10);
}


/* ---------- PAGE ---------- */

body {
  background:
    radial-gradient(
      circle at 4% 5%,
      rgba(255, 220, 233, 0.45),
      transparent 23%
    ),
    radial-gradient(
      circle at 95% 6%,
      rgba(217, 239, 255, 0.55),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 95%,
      rgba(213, 244, 234, 0.4),
      transparent 22%
    ),
    var(--workspace-bg);

  color: var(--text);
}


/* Slightly wider desktop workspace */

.app {
  max-width: 1440px;
  background: rgba(255,255,255,0.94);
  box-shadow:
    0 0 0 1px rgba(215, 227, 239, 0.5),
    0 18px 55px rgba(40, 65, 100, 0.08);
}


/* ---------- HEADER ---------- */

header {
  background:
    linear-gradient(
      120deg,
      #3f8fb5 0%,
      #538fa5 100%
    );

  padding: 26px 30px;
}

header h1 {
  font-size: 36px;
  letter-spacing: -1px;
}

header p {
  font-size: 16px;
  opacity: 0.96;
}

.demo-badge {
  border-radius: 14px;
  padding: 10px 16px;
  backdrop-filter: blur(8px);
}


/* ---------- TOP NAVIGATION ---------- */

nav {
  padding: 0 14px;
  gap: 4px;
  background: rgba(255,255,255,0.95);
}

nav button {
  padding: 19px 20px;
  border-radius: 12px 12px 0 0;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

nav button:hover {
  background: var(--pastel-sky);
  color: var(--brand-blue);
}

nav button.active {
  color: var(--brand-blue-dark);
  border-bottom-color: #4ba4c7;
}


/* ---------- MAIN CONTENT ---------- */

main {
  padding: 28px 30px 40px;
}


/* ---------- PRIVACY BANNER ---------- */

.privacy {
  background:
    linear-gradient(
      100deg,
      var(--pastel-sky),
      var(--pastel-mint)
    );

  border: 1px solid #dcecf1;
  border-radius: 18px;
  padding: 16px 20px;
}


/* ---------- HEADINGS ---------- */

.page-header h2 {
  color: #183c66;
  letter-spacing: -0.4px;
}

.grade-title {
  color: #183c66;
}


/* ---------- GENERAL CARDS ---------- */

.card,
.goal-card,
.member-card,
.data-student-card,
.goal-data-card,
.progress-target-card,
.progress-goal-card,
.saved-session-card {
  background: var(--workspace-card);
  border-color: var(--border);
  box-shadow: var(--soft-shadow);
}

.card {
  border-radius: 22px;
}

.goal-card,
.member-card,
.progress-target-card,
.saved-session-card {
  border-radius: 20px;
}


/* ---------- DASHBOARD STATS ---------- */

.stat {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}

.stat:nth-child(1) {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--pastel-pink)
    );
}

.stat:nth-child(2) {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--pastel-mint)
    );
}

.stat:nth-child(3) {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--pastel-peach)
    );
}

.stat:nth-child(4) {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--pastel-lavender)
    );
}

.stat strong {
  color: var(--brand-blue-dark);
}


/* ---------- PRIMARY BUTTONS ---------- */

.primary {
  background:
    linear-gradient(
      135deg,
      #3fa7d8,
      #5389df
    );

  color: white;
  border-radius: 14px;
  box-shadow:
    0 6px 16px rgba(55, 121, 185, 0.18);

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 19px rgba(55, 121, 185, 0.23);
}


/* ---------- SECONDARY BUTTONS ---------- */

.secondary {
  color: var(--brand-blue);
  border-color: #d5e1ed;
  border-radius: 14px;
}

.secondary:hover {
  background: var(--pastel-sky);
}


/* ---------- STUDENT CARDS ---------- */

.student-card {
  border-radius: 19px;
  background: #ffffff;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.student-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: var(--medium-shadow);
}


/* ---------- TAGS ---------- */

.tag {
  background:
    linear-gradient(
      135deg,
      var(--pastel-mint),
      var(--pastel-sky)
    );

  color: #366779;
  border-radius: 999px;
  padding: 6px 10px;
}


/* ---------- FILTER PILLS ---------- */

.filter-row button {
  border-color: #d7e2ee;
  color: #486377;
  font-weight: 650;
  transition: 0.16s ease;
}

.filter-row button:hover {
  background: var(--pastel-sky);
}

.filter-row button.active {
  background:
    linear-gradient(
      135deg,
      #4aa4ca,
      #5b86d3
    );

  border-color: transparent;
  color: #ffffff;
}


/* =====================================
   STUDENT PROFILE TABS
   ===================================== */

.student-file-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 14px;
  padding: 6px;

  width: fit-content;

  background:
    linear-gradient(
      135deg,
      #f4f8fd,
      #faf7ff
    );

  border: 1px solid #dce6f0;
  border-radius: 18px;
}

.student-file-tab {
  appearance: none;

  border: 0;
  border-radius: 13px;

  background: transparent;
  color: #687987;

  padding: 11px 20px;

  font-weight: 700;
  font-size: 15px;

  cursor: pointer;

  transition:
    background 0.17s ease,
    color 0.17s ease,
    box-shadow 0.17s ease,
    transform 0.17s ease;
}

.student-file-tab:hover {
  background: rgba(255,255,255,0.75);
  color: var(--brand-blue);
}

.student-file-tab.active {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      var(--brand-blue-soft)
    );

  color: var(--brand-blue-dark);

  box-shadow:
    0 4px 13px rgba(50, 86, 130, 0.12);
}


/* ---------- PROFILE INFO ---------- */

.profile-item {
  padding: 17px;

  border: 1px solid #e0e8f1;
  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fafcff
    );
}


/* =====================================
   STUDENT PROGRESS
   ===================================== */

.progress-target-card {
  overflow: hidden;
}

.progress-target-header {
  padding-bottom: 5px;
}

.progress-current strong {
  color: var(--brand-blue-dark);
}

.progress-graph-card {
  background:
    linear-gradient(
      145deg,
      #f9fbff,
      #f5f8fc
    );

  border-color: #e1e9f2;
  border-radius: 18px;
}


/* Give the graph the new blue/purple look */

.progress-line {
  stroke: #697ee8;
}

.progress-point {
  stroke: #697ee8;
  fill: #ffffff;
}

.progress-single-point {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      var(--pastel-lavender)
    );
}


/* ---------- SESSION HISTORY ---------- */

.progress-history-row {
  padding: 14px 5px;
}


/* =====================================
   SAVED / STUDENT SESSIONS
   ===================================== */

.saved-session-card {
  overflow: hidden;
}

.saved-session-summary {
  padding: 20px 22px;
}

.saved-session-details {
  background:
    linear-gradient(
      145deg,
      #fbfdff,
      #fafcff
    );
}


/* ---------- INPUTS ---------- */

input,
select,
textarea {
  border-color: #d5e2ee;
  border-radius: 14px;

  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #80aee7;

  box-shadow:
    0 0 0 3px rgba(111, 158, 219, 0.13);
}


/* ---------- MODALS ---------- */

.modal {
  border-radius: 24px;
  box-shadow:
    0 26px 70px rgba(24, 46, 75, 0.22);
}


/* =====================================
   MOBILE
   ===================================== */

@media (max-width: 700px) {

  header {
    padding: 20px;
  }

  header h1 {
    font-size: 31px;
  }

  main {
    padding: 20px 16px 32px;
  }

  .student-file-tabs {
    width: 100%;
  }

  .student-file-tab {
    flex: 1;
    min-width: 82px;
    padding: 10px 9px;
    font-size: 14px;
  }
}
/* =====================================================
   COMMUNICATION WORKSPACE — SIDEBAR
   ===================================================== */

@media (min-width: 701px) {
  .app {
    max-width: 1500px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: 100vh;
  }

  .workspace-sidebar {
    grid-column: 1;
    grid-row: 1;

    min-height: 100vh;

    padding: 28px 18px 22px;

    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfdff 72%,
        #fff7fa 100%
      );

    border-right: 1px solid #dce6f0;

    display: flex;
    flex-direction: column;
  }

  .mobile-header {
    display: none;
  }


  /* BRAND */

  .sidebar-brand {
    text-align: center;
    padding: 8px 8px 26px;
  }

  .brand-emblem {
    width: 158px;
    height: 158px;
    margin: -8px auto 8px;
    display: block;
    object-fit: contain;
  }


  /* LITTLE SUN RAYS */

  .emblem-rays {
    position: absolute;
    top: 17px;
    left: 50%;
    width: 60px;
    height: 28px;
    transform: translateX(-50%);
  }

  .emblem-rays span {
    position: absolute;
    width: 2px;
    height: 13px;
    background: #ff9d91;
    border-radius: 999px;
    transform-origin: center 29px;
  }

  .emblem-rays span:nth-child(1) {
    left: 29px;
  }

  .emblem-rays span:nth-child(2) {
    left: 12px;
    transform: rotate(-35deg);
  }

  .emblem-rays span:nth-child(3) {
    right: 12px;
    transform: rotate(35deg);
  }

  .emblem-rays span:nth-child(4) {
    left: 3px;
    transform: rotate(-58deg);
  }

  .emblem-rays span:nth-child(5) {
    right: 3px;
    transform: rotate(58deg);
  }


  /* STEPPING STONES — NO LEAVES */

  .emblem-stones {
    position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translateX(-50%);

    width: 70px;
    height: 55px;
  }

  .emblem-stones span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    height: 10px;
    border-radius: 50%;
  }

  .emblem-stones span:nth-child(1) {
    width: 50px;
    bottom: 0;
    background: #ffc8bc;
  }

  .emblem-stones span:nth-child(2) {
    width: 40px;
    bottom: 14px;
    background: #ffdba9;
  }

  .emblem-stones span:nth-child(3) {
    width: 30px;
    bottom: 28px;
    background: #aee9dc;
  }

  .emblem-stones span:nth-child(4) {
    width: 20px;
    bottom: 41px;
    background: #a9c7ff;
  }


  .brand-name {
    color: var(--brand-blue-dark);
    font-size: 21px;
    line-height: 0.95;
    font-weight: 700;
  }

  .brand-name span {
    display: block;
    color: #2682d5;
  }

  .brand-tagline {
    margin-top: 12px;

    color: #4770a5;
    font-size: 12px;
    line-height: 1.35;
  }

  .brand-values {
    margin-top: 13px;

    color: #6484ad;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
  }


  /* SIDEBAR NAVIGATION */

  .sidebar-nav {
    display: flex;
    flex-direction: column;

    padding: 0;
    gap: 4px;

    border: 0;
    background: transparent;

    overflow: visible;
  }

  .sidebar-nav button {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 14px;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: #42658e;

    font-weight: 600;

    text-align: left;

    transition:
      background 0.16s ease,
      color 0.16s ease,
      transform 0.16s ease;
  }

  .sidebar-nav button:hover {
    background: var(--pastel-sky);
    transform: translateX(2px);
  }

  .sidebar-nav button.active {
    color: #15549c;

    background:
      linear-gradient(
        90deg,
        #e9f4ff,
        #eef1ff
      );

    border-bottom: 0;
  }

  .nav-icon {
    width: 22px;

    display: inline-flex;
    justify-content: center;

    color: #2783da;

    font-size: 19px;
  }


  .sidebar-footer {
    margin-top: auto;
    padding-top: 25px;
    text-align: center;
  }

  .sidebar-footer .demo-badge {
    display: inline-block;

    color: #52708f;

    background: var(--pastel-lavender);

    border: 1px solid #e0ddf4;
  }


  /* MAIN WORKSPACE */

  main {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;

    padding:
      32px 32px 45px;

    background:
      radial-gradient(
        circle at 95% 2%,
        rgba(255, 230, 236, 0.4),
        transparent 19%
      ),
      radial-gradient(
        circle at 80% 100%,
        rgba(222, 244, 238, 0.32),
        transparent 18%
      ),
      #ffffff;
  }

}


/* =====================================================
   SMALL SCREEN
   ===================================================== */

@media (max-width: 700px) {

  .workspace-sidebar {
    display: none;
  }

  .mobile-header {
    display: flex;
  }

}
/* =====================================================
   COMMUNICATION WORKSPACE — HOME DASHBOARD
   ===================================================== */

.workspace-welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;

  padding: 28px 30px;
  margin-bottom: 24px;

  border: 1px solid #e4eaf4;
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 78% 35%,
      rgba(255, 225, 208, 0.75),
      transparent 22%
    ),
    radial-gradient(
      circle at 88% 62%,
      rgba(217, 230, 255, 0.9),
      transparent 24%
    ),
    radial-gradient(
      circle at 72% 75%,
      rgba(213, 244, 234, 0.85),
      transparent 22%
    ),
    linear-gradient(
      135deg,
      #fffafc,
      #ffffff
    );

  box-shadow: var(--soft-shadow);
}

.workspace-welcome h2 {
  margin: 4px 0 8px;

  color: var(--brand-blue-dark);

  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -1.5px;
}

.workspace-welcome p {
  margin: 0;
  max-width: 650px;

  color: #627587;
  font-size: 16px;
  line-height: 1.5;
}

.welcome-kicker {
  color: #2d67b0;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
}

.welcome-values {
  display: grid;
  gap: 7px;

  min-width: 125px;

  color: #1f5ca7;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
}


/* ---------- LARGE SHORTCUT CARDS ---------- */

.workspace-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;

  margin-bottom: 20px;
}

.workspace-shortcut {
  min-height: 150px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 20px 18px;

  border: 1px solid #e2e8f2;
  border-radius: 22px;

  color: var(--brand-blue-dark);

  text-align: center;

  box-shadow: var(--soft-shadow);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.workspace-shortcut:hover {
  transform: translateY(-3px);
  box-shadow: var(--medium-shadow);
}

.workspace-shortcut strong {
  display: block;

  margin-top: 10px;

  font-size: 18px;
}

.workspace-shortcut > span {
  margin-top: 5px;

  color: #56728f;

  font-size: 13px;
  line-height: 1.35;
}

.shortcut-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,0.65);

  font-size: 25px;
}

.shortcut-pink {
  background:
    linear-gradient(
      145deg,
      #fffafd,
      #ffeaf2
    );
}

.shortcut-mint {
  background:
    linear-gradient(
      145deg,
      #fbfffd,
      #e5f8f2
    );
}

.shortcut-peach {
  background:
    linear-gradient(
      145deg,
      #fffdf9,
      #fff0df
    );
}

.shortcut-lavender {
  background:
    linear-gradient(
      145deg,
      #fdfcff,
      #eee9ff
    );
}


/* ---------- SMALL STAT CARDS ---------- */

.workspace-stats {
  margin-bottom: 20px;
}

.workspace-stats .stat {
  padding: 18px 20px;
}

.dashboard-stat-link {
  width: 100%;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.dashboard-stat-link:hover,
.dashboard-stat-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--medium-shadow);
  outline: none;
}

.dashboard-iep-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid #e2e9eb;
  background: transparent;
  color: #334653;
  text-align: left;
  cursor: pointer;
}

.dashboard-iep-item:hover,
.dashboard-iep-item:focus-visible {
  color: var(--brand-blue-dark);
  background: #f7fbff;
  outline: none;
}


/* ---------- MAIN HOME GRID ---------- */

.workspace-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.workspace-panel {
  min-height: 210px;
  padding: 22px;
}

.workspace-panel h3 {
  margin: 0;
}

.workspace-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  margin-bottom: 18px;
}

.text-action {
  border: 0;
  background: transparent;

  color: #3183cf;

  padding: 4px;

  font-size: 13px;
  font-weight: 700;
}

.text-action:hover {
  color: var(--brand-blue-dark);
}


/* ---------- QUICK ACTIONS ---------- */

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.quick-actions-grid button {
  min-height: 82px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  border: 1px solid #e2e8f1;
  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8fbff
    );

  color: #285b92;

  font-weight: 700;

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.quick-actions-grid button:nth-child(1) {
  background: var(--pastel-sky);
}

.quick-actions-grid button:nth-child(2) {
  background: var(--pastel-pink);
}

.quick-actions-grid button:nth-child(3) {
  background: var(--pastel-mint);
}

.quick-actions-grid button:nth-child(4) {
  background: var(--pastel-lavender);
}

.quick-actions-grid button:hover {
  transform: translateY(-2px);
  box-shadow: var(--soft-shadow);
}

.quick-actions-grid button span {
  font-size: 23px;
}


/* ---------- ENCOURAGEMENT CARD ---------- */

.workspace-message {
  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(217, 239, 255, 0.85),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(255, 224, 237, 0.75),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #ffffff,
      #fffafd
    );
}

.message-script {
  max-width: 460px;

  color: #2664aa;

  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;

  transform: rotate(-1deg);
}

.workspace-message p {
  margin: 14px 0 0;
  max-width: 500px;

  color: #667b8b;
  line-height: 1.55;
}


/* ---------- HOME SCHEDULE + IEP POLISH ---------- */

#todaySchedule,
#upcomingIEPs {
  color: #334653;
}

#todaySchedule .empty {
  background:
    linear-gradient(
      145deg,
      #fbfdff,
      #ffffff
    );
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {

  .workspace-shortcuts {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 760px) {

  .workspace-welcome {
    flex-direction: column;
    align-items: flex-start;

    padding: 22px;
  }

  .welcome-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    min-width: 0;
  }

  .workspace-shortcuts {
    grid-template-columns: 1fr 1fr;
  }

  .workspace-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .message-script {
    font-size: 23px;
  }

}

@media (max-width: 480px) {

  .workspace-shortcuts {
    grid-template-columns: 1fr;
  }

}
/* =====================================================
   COMMUNICATION WORKSPACE — POLISHED ICONS
   ===================================================== */

.shortcut-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: 0 5px 16px rgba(49,78,118,.06);
}

.ui-icon {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  color: #3388d5;
}

/* Dashboard icon colors */

.icon-pink {
  background: #ffe6f0;
}

.icon-pink .ui-icon {
  color: #ef6da3;
}

.icon-mint {
  background: #ddf6ef;
}

.icon-mint .ui-icon {
  color: #25b9aa;
}

.icon-peach {
  background: #ffecd7;
}

.icon-peach .ui-icon {
  color: #f39a48;
}

.icon-lavender {
  background: #eae5ff;
}

.icon-lavender .ui-icon {
  color: #8069e8;
}


/* ---------- SIDEBAR ICON POLISH ---------- */

.sidebar-nav .nav-icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  flex: 0 0 28px;

  border-radius: 9px;

  font-size: 17px;
  color: #2783da;

  transition:
    background .16s ease,
    color .16s ease;
}

.sidebar-nav button.active .nav-icon {
  background: rgba(255,255,255,.7);
  color: #176bc1;
}

.sidebar-nav button:hover .nav-icon {
  background: rgba(255,255,255,.65);
}

/* Individual sidebar colors */

.sidebar-nav button:nth-child(2) .nav-icon {
  color: #ed72a5;
}

.sidebar-nav button:nth-child(3) .nav-icon {
  color: #24b9aa;
}

.sidebar-nav button:nth-child(4) .nav-icon {
  color: #826ce8;
}

.sidebar-nav button:nth-child(5) .nav-icon {
  color: #ee9949;
}

.sidebar-nav button:nth-child(6) .nav-icon {
  color: #418fdf;
}

.sidebar-nav button:nth-child(7) .nav-icon {
  color: #8069e8;
}
/* ---------- REAL LINE ICONS ---------- */

.line-icon {
  width: 28px;
  height: 28px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-pink .line-icon {
  color: #ef6da3;
}
/* ---------- SVG DASHBOARD ICON COLORS ---------- */

.icon-mint .line-icon {
  color: #25b9aa;
}

.icon-peach .line-icon {
  color: #f39a48;
}

.icon-lavender .line-icon {
  color: #8069e8;
}
/* ---------- SIDEBAR SVG ICONS ---------- */

.sidebar-line-icon {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Home */
.sidebar-nav button:nth-child(1) .nav-icon {
  color: #3188dc;
}

/* Clients */
.sidebar-nav button:nth-child(2) .nav-icon {
  color: #ef6da3;
}

/* Calendar */
.sidebar-nav button:nth-child(3) .nav-icon {
  color: #25b9aa;
}

/* Groups */
.sidebar-nav button:nth-child(4) .nav-icon {
  color: #8069e8;
}

/* Session Planner */
.sidebar-nav button:nth-child(5) .nav-icon {
  color: #f39a48;
}

/* Data Collection */
.sidebar-nav button:nth-child(6) .nav-icon {
  color: #4b9cde;
}

/* Progress */
.sidebar-nav button:nth-child(7) .nav-icon {
  color: #8069e8;
}
/* =====================================================
   QUICK ACTIONS + MESSAGE CARD POLISH
   ===================================================== */

.quick-actions-panel {
  background: #ffffff;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quick-actions-grid button {
  min-height: 90px;
  border: 1px solid #e2e8f1;
  border-radius: 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: #285b92;
  font-weight: 700;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.quick-actions-grid button:nth-child(1) {
  background: #edf7ff;
}

.quick-actions-grid button:nth-child(2) {
  background: #fff0f5;
}

.quick-actions-grid button:nth-child(3) {
  background: #ebfaf6;
}

.quick-actions-grid button:nth-child(4) {
  background: #f2efff;
}

.quick-actions-grid button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(43, 72, 110, 0.10);
}

.quick-actions-grid button span {
  font-size: 24px;
}


/* Encouragement card */

.workspace-message {
  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(217, 239, 255, 0.9),
      transparent 27%
    ),
    radial-gradient(
      circle at 88% 80%,
      rgba(255, 224, 237, 0.8),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #ffffff,
      #fffafd
    );
}

.message-script {
  color: #2664aa;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.workspace-message p {
  margin-top: 14px;
  color: #667b8b;
  line-height: 1.55;
}
/* =====================================================
   COMMUNICATION WORKSPACE — CLIENTS PAGE
   ===================================================== */

.clients-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
}

.clients-kicker {
  margin-bottom: 6px;
  color: #2f6fb9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}

.clients-header h2 {
  margin: 0 0 6px;
  color: var(--brand-blue-dark);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -1px;
}

.clients-add-button {
  min-width: 130px;
}


/* ---------- SEARCH ---------- */

.clients-search-wrap {
  position: relative;
  margin-bottom: 18px;
}

.clients-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);

  fill: none;
  stroke: #6c8eb4;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

.clients-search {
  width: 100%;
  height: 50px;

  padding: 0 18px 0 46px;

  border: 1px solid #d9e4ef;
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbff
    );

  color: var(--text);
  font-size: 15px;

  box-shadow:
    0 5px 16px rgba(47, 77, 114, 0.05);
}

.clients-search::placeholder {
  color: #8a99a8;
}

.clients-search:focus {
  outline: none;
  border-color: #8db8e8;
  box-shadow:
    0 0 0 3px rgba(93, 151, 219, 0.12),
    0 6px 18px rgba(47, 77, 114, 0.06);
}


/* ---------- GRADE FILTERS ---------- */

#gradeFilters {
  margin: 6px 0 20px;
}

#gradeFilters button {
  padding: 9px 16px;

  border: 1px solid #d9e4ef;
  border-radius: 999px;

  background: #ffffff;
  color: #557089;

  font-weight: 700;

  box-shadow:
    0 3px 10px rgba(47, 77, 114, 0.04);
}

#gradeFilters button:hover {
  background: var(--pastel-sky);
  color: var(--brand-blue);
}

#gradeFilters button.active {
  background:
    linear-gradient(
      135deg,
      #4aa6cf,
      #6385d9
    );

  color: #ffffff;
  border-color: transparent;
}


/* ---------- CLIENT LIST ---------- */

#caseloadList {
  display: grid;
  gap: 14px;
}


/* Existing student cards, upgraded visually */

#caseloadList .student-card {
  position: relative;

  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;

  min-height: 92px;

  padding: 17px 18px;

  border: 1px solid #dce6f0;
  border-radius: 20px;

  background: #ffffff;

  box-shadow:
    0 7px 22px rgba(43, 72, 110, 0.06);

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

#caseloadList .student-card:hover {
  transform: translateY(-2px);

  border-color: #cbdceb;

  box-shadow:
    0 10px 28px rgba(43, 72, 110, 0.10);
}


/* Pastel accent by position */

#caseloadList .student-card:nth-child(4n + 1) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff4f8
    );
}

#caseloadList .student-card:nth-child(4n + 2) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f0fbf7
    );
}

#caseloadList .student-card:nth-child(4n + 3) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff7eb
    );
}

#caseloadList .student-card:nth-child(4n + 4) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f4f1ff
    );
}


/* If the student card already includes strong initials/text */

#caseloadList .student-card strong {
  color: var(--brand-blue-dark);
}


/* Grade section headings */

#caseloadList h3 {
  margin: 22px 0 8px;

  color: var(--brand-blue-dark);

  font-size: 19px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

  .clients-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .clients-add-button {
    width: 100%;
  }

  #caseloadList .student-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
/* ---------- CLIENT THERAPY AREA TAGS ---------- */

.student-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 5px 0 8px;
}

.area-tag {
  display: inline-flex;
  align-items: center;

  padding: 6px 11px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

/* Language = mint */
.area-language {
  background: #ddf6ef;
  color: #168f84;
}

/* Articulation = pink */
.area-articulation {
  background: #ffe4ef;
  color: #d85d91;
}

/* AAC = lavender */
.area-aac {
  background: #ebe6ff;
  color: #715dd1;
}

/* Fluency = peach */
.area-fluency {
  background: #ffead7;
  color: #d98138;
}

/* Pragmatics = blue */
.area-pragmatics {
  background: #e4f2ff;
  color: #377bb7;
}

/* Anything we haven't assigned yet */
.area-other {
  background: #eef3f7;
  color: #607589;
}
/* =====================================================
   CLIENT CARD LAYOUT FIX
   ===================================================== */

/* Undo the 3-column layout that is squeezing the text */
#caseloadList .student-card {
  display: block;
  position: relative;

  min-height: 0;
  padding: 20px 58px 20px 22px;
}

/* Initials */
#caseloadList .student-card .initials {
  margin-bottom: 8px;

  color: #24333f;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

/* Therapy bubbles stay side-by-side */
#caseloadList .student-tags {
  margin: 0 0 12px;
}

/* Keep service information on natural lines */
#caseloadList .student-meta {
  display: block;

  color: #687c8b;
  font-size: 14px;
  line-height: 1.65;

  white-space: normal;
}

/* Keep "30 min per week" together */
#caseloadList .student-meta br {
  display: block;
}

/* Put the arrow on the far right */
#caseloadList .student-card .arrow {
  position: absolute;
  right: 22px;
  top: 50%;

  transform: translateY(-50%);

  color: #7c91a0;
  font-size: 24px;
}

/* Slightly more compact cards */
#caseloadList .student-card {
  border-radius: 20px;
}

/* Keep two-column desktop layout */
@media (min-width: 800px) {
  #caseloadList .student-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =====================================================
   COMMUNICATION WORKSPACE — CLIENT PROFILE HEADER
   ===================================================== */

.profile-back {
  margin-bottom: 20px;

  border: 0;
  background: transparent;

  color: #2e6fae;
  font-weight: 700;
  font-size: 14px;

  padding: 0;

  cursor: pointer;
}

.profile-back:hover {
  color: var(--brand-blue-dark);
}


.client-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;

  margin-bottom: 20px;
}


.client-profile-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}


.client-profile-avatar {
  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #ffe6f0,
      #eef7ff
    );

  color: var(--brand-blue-dark);

  font-size: 26px;
  font-weight: 800;

  box-shadow:
    0 8px 22px rgba(43, 72, 110, 0.08);
}


.client-profile-kicker {
  margin-bottom: 5px;

  color: #5d7ea2;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
}


.client-profile-header h2 {
  margin: 0 0 7px;

  color: var(--brand-blue-dark);

  font-size: 38px;
  line-height: 1;
  letter-spacing: -1px;
}


.client-edit-button {
  min-width: 120px;
}


/* Keep therapy bubbles neat inside the profile header */

.client-profile-header .student-tags {
  margin: 0;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

  .client-profile-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-edit-button {
    width: 100%;
  }

}
/* =====================================================
   COMMUNICATION WORKSPACE — CLIENT PROFILE TABS
   ===================================================== */

.student-file-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  width: fit-content;

  margin: 22px 0 18px;
  padding: 6px;

  border: 1px solid #dce6f0;
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #f7faff,
      #fbf8ff
    );

  box-shadow:
    0 5px 16px rgba(43, 72, 110, 0.05);
}


.student-file-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 11px 16px;

  border: 0;
  border-radius: 12px;

  background: transparent;

  color: #65798b;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}


.student-file-tab:hover {
  background: rgba(255,255,255,.8);
  color: var(--brand-blue);
}


.student-file-tab.active {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #edf4ff
    );

  color: var(--brand-blue-dark);

  box-shadow:
    0 4px 13px rgba(43, 72, 110, 0.10);
}


.student-file-tab:active {
  transform: translateY(1px);
}


.student-tab-icon {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Give each tab its own subtle accent */

.student-file-tab:nth-child(1) .student-tab-icon {
  color: #4b9cde;
}

.student-file-tab:nth-child(2) .student-tab-icon {
  color: #ef6da3;
}

.student-file-tab:nth-child(3) .student-tab-icon {
  color: #8069e8;
}

.student-file-tab:nth-child(4) .student-tab-icon {
  color: #25b9aa;
}


/* Mobile */

@media (max-width: 700px) {

  .student-file-tabs {
    width: 100%;
  }

  .student-file-tab {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }

}
/* =====================================================
   CLIENT PROFILE — OVERVIEW POLISH
   ===================================================== */

#studentTabOverview .profile-grid {
  gap: 16px;
}

#studentTabOverview .profile-item {
  min-height: 92px;
  padding: 20px;

  border: 1px solid #dce6f0;
  border-radius: 18px;

  box-shadow: 0 5px 16px rgba(43, 72, 110, 0.04);
}

/* Grade */
#studentTabOverview .profile-item:nth-child(1) {
  background: linear-gradient(135deg, #f7fbff, #fff3f8);
}

/* Service Minutes */
#studentTabOverview .profile-item:nth-child(2) {
  background: linear-gradient(135deg, #ffffff, #eaf9f5);
}

/* Therapy Area */
#studentTabOverview .profile-item:nth-child(3) {
  background: linear-gradient(135deg, #ffffff, #fff1f6);
}

/* IEP Due */
#studentTabOverview .profile-item:nth-child(4) {
  background: linear-gradient(135deg, #fffaf3, #f4f1ff);
}

#studentTabOverview .profile-item span {
  display: block;
  margin-bottom: 6px;

  color: #738697;
  font-size: 13px;
  font-weight: 600;
}

#studentTabOverview .profile-item strong {
  color: #24333f;
  font-size: 17px;
  font-weight: 800;
}
/* =====================================================
   CLIENT PROFILE — GOALS POLISH
   ===================================================== */

/* Header row */
#studentTabGoals .page-header {
  align-items: center;
  margin-bottom: 18px;
}

#studentTabGoals .page-header h2 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: 30px;
  letter-spacing: -0.6px;
}

/* Add Goal button */
#studentTabGoals .primary {
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 8px 18px rgba(62, 122, 200, 0.18);
}

/* Goal card */
#studentTabGoals .goal-card {
  position: relative;
  padding: 22px;

  border: 1px solid #dce6f0;
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff7fa
    );

  box-shadow: 0 8px 24px rgba(43, 72, 110, 0.06);
}

/* Goal header */
#studentTabGoals .goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;

  margin-bottom: 14px;
}

#studentTabGoals .goal-header strong {
  color: var(--brand-blue-dark);
  font-size: 17px;
}

/* Active / Archived badge */
#studentTabGoals .goal-header .tag {
  padding: 7px 12px;
  border-radius: 999px;

  background: #e5f7f4;
  color: #248b83;

  font-size: 12px;
  font-weight: 800;
}

#studentTabGoals .goal-card.archived .goal-header .tag {
  background: #f0edf8;
  color: #7b6a9f;
}

/* Goal text */
#studentTabGoals .goal-card > p,
#studentTabGoals .goal-text {
  color: #334653;
  font-size: 16px;
  line-height: 1.6;
}

/* Goal action buttons */
#studentTabGoals .goal-card button {
  margin-top: 12px;
  margin-right: 8px;

  border: 1px solid #d8e3ee;
  border-radius: 12px;

  background: #ffffff;

  color: #375f89;
  font-weight: 700;

  padding: 9px 13px;
}

#studentTabGoals .goal-card button:hover {
  background: #f4f8fc;
}

/* Edit */
#studentTabGoals .goal-card button:nth-of-type(1) {
  color: #397bb7;
}

/* Replace Goal */
#studentTabGoals .goal-card button:nth-of-type(2) {
  color: #8069e8;
}

/* Archive */
#studentTabGoals .goal-card button:nth-of-type(3) {
  color: #d98138;
}

/* Archived section */
#studentTabGoals h3 {
  color: var(--brand-blue-dark);
  margin-top: 28px;
}
/* =====================================================
   CLIENT PROFILE — PROGRESS POLISH
   ===================================================== */

/* Main progress section spacing */
#studentTabProgress {
  padding-top: 4px;
}

/* Goal-level progress cards */
#studentTabProgress .progress-goal-card {
  padding: 22px;
  margin-bottom: 18px;

  border: 1px solid #dce6f0;
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbff
    );

  box-shadow:
    0 8px 24px rgba(43, 72, 110, 0.06);
}

/* Goal title */
#studentTabProgress .progress-goal-card h3 {
  margin: 0 0 8px;

  color: var(--brand-blue-dark);

  font-size: 22px;
  letter-spacing: -0.4px;
}

/* Goal description */
#studentTabProgress .student-meta {
  color: #667b8b;
  line-height: 1.55;
}

/* Individual target / progress records */
#studentTabProgress .progress-record {
  margin-top: 14px;
  padding: 18px;

  border: 1px solid #e1e9f2;
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfaff
    );
}

/* Target header row */
#studentTabProgress .progress-record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;

  margin-bottom: 14px;
}

/* Target name */
#studentTabProgress .progress-record-header strong {
  color: #24333f;
  font-size: 16px;
}

/* Latest result */
#studentTabProgress .progress-record-header .progress-score,
#studentTabProgress .progress-score {
  color: var(--brand-blue-dark);
  font-size: 18px;
  font-weight: 800;
}

/* Progress over time box */
#studentTabProgress .progress-history {
  margin-top: 14px;
  padding: 16px;

  border: 1px solid #dfe8f1;
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #fff9fc
    );
}

/* Each dated result */
#studentTabProgress .progress-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  padding: 11px 0;

  border-bottom: 1px solid #e5ebf2;
}

#studentTabProgress .progress-history-row:last-child {
  border-bottom: 0;
}

/* Date */
#studentTabProgress .progress-date {
  color: #718596;
  font-size: 13px;
}

/* Percentage/value */
#studentTabProgress .progress-value {
  color: var(--brand-blue-dark);
  font-weight: 800;
}

/* Empty state */
#studentTabProgress .empty {
  padding: 28px;

  border: 1px dashed #d4e0eb;
  border-radius: 18px;

  background: #fbfdff;

  color: #718596;
  text-align: center;
}

/* Slight pastel accents across repeated cards */
#studentTabProgress .progress-goal-card:nth-child(4n + 1) {
  background: linear-gradient(135deg, #ffffff, #fff5f9);
}

#studentTabProgress .progress-goal-card:nth-child(4n + 2) {
  background: linear-gradient(135deg, #ffffff, #eefaf6);
}

#studentTabProgress .progress-goal-card:nth-child(4n + 3) {
  background: linear-gradient(135deg, #ffffff, #fff7ec);
}

#studentTabProgress .progress-goal-card:nth-child(4n + 4) {
  background: linear-gradient(135deg, #ffffff, #f4f1ff);
}
/* =====================================================
   CLIENT PROFILE — SESSIONS POLISH
   ===================================================== */

#studentTabSessions {
  padding-top: 4px;
}

/* Main sessions card */
#studentTabSessions .card {
  padding: 22px;

  border: 1px solid #dce6f0;
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfdff
    );

  box-shadow:
    0 8px 24px rgba(43, 72, 110, 0.06);
}

/* Sessions heading */
#studentTabSessions h3 {
  margin: 0 0 18px;

  color: var(--brand-blue-dark);

  font-size: 24px;
  letter-spacing: -0.4px;
}


/* Saved sessions container */
#studentFileSessions {
  display: grid;
  gap: 14px;
}


/* Individual session entry */
#studentFileSessions > div {
  position: relative;

  padding: 18px 20px;

  border: 1px solid #dfe8f1;
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbff
    );

  box-shadow:
    0 5px 16px rgba(43, 72, 110, 0.04);
}


/* Alternating pastel session cards */

#studentFileSessions > div:nth-child(4n + 1) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff5f9
    );
}

#studentFileSessions > div:nth-child(4n + 2) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #eefaf6
    );
}

#studentFileSessions > div:nth-child(4n + 3) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff7ec
    );
}

#studentFileSessions > div:nth-child(4n + 4) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f4f1ff
    );
}


/* Session date */
#studentFileSessions strong,
#studentFileSessions h4 {
  color: var(--brand-blue-dark);

  font-size: 17px;
  font-weight: 800;
}


/* Session activity / title */
#studentFileSessions .muted {
  color: #718596;
}


/* Session body text */
#studentFileSessions p,
#studentFileSessions .student-meta {
  color: #405565;
  line-height: 1.6;
}


/* Data result lines */
#studentFileSessions .session-result,
#studentFileSessions .session-data {
  margin-top: 6px;

  color: #334653;

  font-weight: 600;
}


/* Empty state */
#studentFileSessions:empty::before {
  content: "No saved sessions yet.";

  display: block;

  padding: 28px;

  border: 1px dashed #d4e0eb;
  border-radius: 18px;

  background: #fbfdff;

  color: #718596;

  text-align: center;
}


/* Mobile */

@media (max-width: 700px) {

  #studentTabSessions .card {
    padding: 16px;
  }

  #studentFileSessions > div {
    padding: 16px;
  }

}
/* =====================================================
   COMMUNICATION WORKSPACE — WEEKLY CALENDAR
   ===================================================== */

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;

  margin-bottom: 22px;
}

.calendar-kicker {
  margin-bottom: 6px;

  color: #2f6fb9;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}

.calendar-header h2 {
  margin: 0 0 6px;

  color: var(--brand-blue-dark);

  font-size: 38px;
  line-height: 1;
  letter-spacing: -1px;
}

.calendar-add-button {
  min-width: 140px;
}


/* ---------- WEEK GRID ---------- */

#calendarGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}


/* Individual weekday columns */

#calendarGrid > div {
  min-height: 300px;

  overflow: hidden;

  border: 1px solid #dce6f0;
  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(43, 72, 110, 0.05);
}


/* Weekday header */

#calendarGrid > div > h3 {
  margin: 0;
  padding: 16px 18px;

  color: var(--brand-blue-dark);

  font-size: 17px;
  font-weight: 800;

  border-bottom: 1px solid #e1e9f1;
}


/* Pastel day headers */

#calendarGrid > div:nth-child(1) > h3 {
  background: #fff0f5;
}

#calendarGrid > div:nth-child(2) > h3 {
  background: #eaf9f5;
}

#calendarGrid > div:nth-child(3) > h3 {
  background: #fff5e9;
}

#calendarGrid > div:nth-child(4) > h3 {
  background: #f1edff;
}

#calendarGrid > div:nth-child(5) > h3 {
  background: #edf7ff;
}


/* Empty "No sessions" text */

#calendarGrid .muted,
#calendarGrid .empty {
  padding: 18px;

  color: #8494a2;

  font-size: 14px;
}


/* Existing appointment/session cards */

#calendarGrid button,
#calendarGrid .appointment,
#calendarGrid .calendar-session {
  width: calc(100% - 20px);

  margin: 10px;

  padding: 13px 14px;

  border: 1px solid #dce6f0;
  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f7fbff
    );

  color: #334653;

  text-align: left;

  box-shadow:
    0 4px 12px rgba(43, 72, 110, 0.05);

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

#calendarGrid button:hover,
#calendarGrid .appointment:hover,
#calendarGrid .calendar-session:hover {
  transform: translateY(-2px);

  box-shadow:
    0 7px 18px rgba(43, 72, 110, 0.10);
}


/* Appointment title / initials */

#calendarGrid strong {
  color: var(--brand-blue-dark);
}


/* MOBILE */

@media (max-width: 1100px) {

  #calendarGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 700px) {

  .calendar-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-add-button {
    width: 100%;
  }

  #calendarGrid {
    grid-template-columns: 1fr;
  }

}
/* =====================================================
   COMMUNICATION WORKSPACE — GROUP CARDS
   ===================================================== */

.group-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.group-card-polished {
  min-width: 0;
  min-height: 188px;
  padding: 17px;
  border: 1px solid #dce6f0;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  box-shadow: 0 7px 20px rgba(43,72,110,.055);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.group-card-polished:hover,
.group-card-polished:focus-visible {
  transform: translateY(-2px);
  border-color: #b9d4ec;
  box-shadow: 0 10px 26px rgba(43,72,110,.10);
  outline: none;
}

.group-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.group-card-heading {
  min-width: 0;
}

.group-card-kicker {
  margin-bottom: 4px;
  color: #6f87a2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.group-card-title {
  color: var(--brand-blue-dark);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.group-card-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  color: #718596;
  font-size: 12px;
  font-weight: 700;
}

.group-card-arrow {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf5ff;
  color: #4289ca;
  font-size: 20px;
}

.group-card-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 13px;
}

.group-card-areas .student-tags {
  margin: 0;
}

.group-card-areas .tag,
.group-card-areas .student-tag {
  font-size: 10px;
  padding: 4px 8px;
}

.group-card-open-label {
  margin-top: auto;
  padding-top: 14px;
  color: #2f74bd;
  font-size: 11px;
  font-weight: 800;
}

.group-card-polished:nth-child(4n + 1) {
  background: linear-gradient(135deg, #ffffff, #fff5f9);
}

.group-card-polished:nth-child(4n + 2) {
  background: linear-gradient(135deg, #ffffff, #eefaf6);
}

.group-card-polished:nth-child(4n + 3) {
  background: linear-gradient(135deg, #ffffff, #fff7ec);
}

.group-card-polished:nth-child(4n + 4) {
  background: linear-gradient(135deg, #ffffff, #f4f1ff);
}

.group-client-section-label {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 8px 0 4px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #eef5fc;
  color: var(--brand-blue-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.group-client-section-label:first-child {
  margin-top: 0;
}

.group-client-choice {
  margin-bottom: 5px;
}

@media (max-width: 1200px) {
  .group-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .group-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .group-list {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   COMMUNICATION WORKSPACE — SESSION PLANNER
   ===================================================== */

.planner-header {
  margin-bottom: 22px;
}

.planner-kicker {
  margin-bottom: 6px;
  color: #2f6fb9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}

.planner-header h2 {
  margin: 0 0 6px;
  color: var(--brand-blue-dark);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -1px;
}

.planner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 20px;
  align-items: start;
}

.planner-builder,
.planner-preview {
  padding: 24px;
  border: 1px solid #dce6f0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(43, 72, 110, .06);
}

.planner-builder {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfdff
    );
}

.planner-preview {
  position: sticky;
  top: 24px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(239, 220, 255, .45),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(218, 246, 240, .50),
      transparent 28%
    ),
    #ffffff;
}

.planner-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.planner-step-spaced {
  margin-top: 28px;
}

.planner-step-number {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: #edf5ff;
  color: #347bc0;

  font-size: 14px;
  font-weight: 800;
}

.planner-step h3,
.planner-preview h3 {
  margin: 0 0 4px;
  color: var(--brand-blue-dark);
  font-size: 20px;
}

.planner-choice-row {
  display: flex;
  gap: 8px;
  margin: 18px 0;
}

.planner-choice {
  flex: 1;

  padding: 11px 16px;

  border: 1px solid #dce6f0;
  border-radius: 14px;

  background: #ffffff;
  color: #63798c;

  font-weight: 700;
  cursor: pointer;
}

.planner-choice.active {
  background: linear-gradient(135deg, #eaf5ff, #f2efff);
  color: var(--brand-blue-dark);
  border-color: #cbddef;
}

.planner-label {
  display: block;
  margin: 15px 0 7px;

  color: #425b70;
  font-size: 13px;
  font-weight: 800;
}

.planner-builder select,
.planner-builder input {
  width: 100%;
  min-height: 48px;

  padding: 0 14px;

  border: 1px solid #d9e4ef;
  border-radius: 14px;

  background: #ffffff;
  color: #314555;

  font-size: 14px;
}

.planner-builder select:focus,
.planner-builder input:focus {
  outline: none;
  border-color: #8db8e8;
  box-shadow: 0 0 0 3px rgba(93, 151, 219, .11);
}

.planner-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.planner-goals {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

.planner-goals.empty {
  padding: 20px;

  border: 1px dashed #d5e1ec;
  border-radius: 16px;

  background: #fbfdff;
  color: #7b8e9d;

  text-align: center;
}

.planner-goal-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  padding: 14px;

  border: 1px solid #e1e9f2;
  border-radius: 16px;

  background: linear-gradient(135deg, #ffffff, #fafcff);

  cursor: pointer;
}

.planner-goal-option input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin-top: 2px;
}

.planner-goal-content {
  min-width: 0;
}

.planner-goal-content strong {
  display: block;
  margin-bottom: 4px;

  color: var(--brand-blue-dark);
  font-size: 14px;
}

.planner-goal-content span {
  color: #617789;
  font-size: 13px;
  line-height: 1.45;
}

.planner-generate-button {
  width: 100%;
  margin-top: 22px;
  min-height: 50px;

  border-radius: 16px;

  font-size: 15px;
  font-weight: 800;
}

.planner-preview-header {
  margin-bottom: 18px;
}

.planner-empty-state {
  text-align: center;
  min-height: 360px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px;

  border: 1px dashed #d7e3ee;
  border-radius: 20px;

  background: rgba(255,255,255,.72);

  color: #718596;
  text-align: center;
}

.planner-empty-icon {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  margin-bottom: 14px;

  border-radius: 18px;

  background: #f1edff;
  color: #8069e8;

  font-size: 26px;
}

.planner-empty-state strong {
  color: var(--brand-blue-dark);
  font-size: 17px;
}

.planner-empty-state p {
  max-width: 330px;
  margin: 8px 0 0;
  line-height: 1.5;
}


/* Generated plan */

.generated-plan {
  display: grid;
  gap: 14px;
}

.generated-plan-summary {
  padding: 16px;

  border-radius: 18px;

  background: linear-gradient(135deg, #edf7ff, #f6f1ff);
}

.generated-plan-summary h4 {
  margin: 0 0 6px;
  color: var(--brand-blue-dark);
  font-size: 18px;
}

.generated-plan-summary p {
  margin: 0;
  color: #607589;
}

.session-plan-viewer-body {
  max-width: 760px;
  margin: 0 auto;
}

.generated-plan-section {
  padding: 16px;

  border: 1px solid #e1e9f2;
  border-radius: 18px;

  background: rgba(255,255,255,.85);
}

.generated-plan-section h4 {
  margin: 0 0 10px;

  color: var(--brand-blue-dark);
  font-size: 15px;
}

.generated-plan-section ul {
  margin: 0;
  padding-left: 20px;

  color: #425765;
  line-height: 1.65;
}

.generated-plan-goal {
  padding: 10px 12px;
  margin-top: 8px;

  border-radius: 12px;

  background: #fff5f9;

  color: #425765;

  font-size: 13px;
  line-height: 1.5;
}


/* Responsive */

@media (max-width: 1000px) {
  .planner-layout {
    grid-template-columns: 1fr;
  }

  .planner-preview {
    position: static;
  }
}

@media (max-width: 700px) {
  .planner-fields {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   COMMUNICATION WORKSPACE — DATA COLLECTION HOME
   ===================================================== */

.data-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;

  margin-bottom: 22px;
}

.data-kicker {
  margin-bottom: 6px;

  color: #2f6fb9;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}

.data-header h2 {
  margin: 0 0 6px;

  color: var(--brand-blue-dark);

  font-size: 38px;
  line-height: 1;
  letter-spacing: -1px;
}

.data-start-button {
  min-width: 145px;
}

.data-history-card {
  padding: 22px;

  border: 1px solid #dce6f0;
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfdff
    );

  box-shadow:
    0 8px 24px rgba(43, 72, 110, .06);
}

.data-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  margin-bottom: 18px;
}

.data-history-header h3 {
  margin: 0;

  color: var(--brand-blue-dark);

  font-size: 22px;
}

.data-history-note {
  padding: 7px 11px;

  border-radius: 999px;

  background: #edf7ff;
  color: #4d7fa9;

  font-size: 11px;
  font-weight: 700;
}


/* Saved session cards */

#savedDataSessions {
  display: grid;
  gap: 14px;
}

#savedDataSessions > div {
  border: 1px solid #dfe8f1;
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbff
    );

  box-shadow:
    0 5px 16px rgba(43, 72, 110, .04);
}

/* Alternate session colors */

#savedDataSessions > div:nth-child(4n + 1) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff5f9
    );
}

#savedDataSessions > div:nth-child(4n + 2) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #eefaf6
    );
}

#savedDataSessions > div:nth-child(4n + 3) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff7ec
    );
}

#savedDataSessions > div:nth-child(4n + 4) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f4f1ff
    );
}


/* Saved badge */

#savedDataSessions .tag,
#savedDataSessions .status {
  padding: 6px 11px;

  border-radius: 999px;

  background: #e5f7f4;
  color: #248b83;

  font-size: 11px;
  font-weight: 800;
}


/* Main session title */

#savedDataSessions strong {
  color: var(--brand-blue-dark);
}


/* Supporting info */

#savedDataSessions .muted {
  color: #718596;
}


/* Responsive */

@media (max-width: 700px) {

  .data-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .data-start-button {
    width: 100%;
  }

  .data-history-header {
    align-items: flex-start;
    flex-direction: column;
  }

}
/* =====================================================
   LIVE DATA COLLECTION
   ===================================================== */

.data-session-back {
  margin-bottom: 20px;
}

.live-data-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;

  margin-bottom: 18px;
}

.live-data-header h2 {
  margin: 0 0 7px;

  color: var(--brand-blue-dark);

  font-size: 34px;
  letter-spacing: -0.8px;
}

.live-data-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  color: #718596;
  font-size: 14px;
}

.live-session-badge {
  padding: 9px 14px;

  border-radius: 999px;

  background: #e5f7f4;
  color: #238b81;

  font-size: 12px;
  font-weight: 800;
}

.live-data-tip {
  margin-bottom: 18px;
  padding: 14px 16px;

  border: 1px solid #dce8f2;
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #edf7ff,
      #f1fbf8
    );

  color: #536b7d;
  font-size: 13px;
}

.live-data-tip strong {
  color: var(--brand-blue-dark);
}

.live-data-students {
  display: grid;
  gap: 18px;
}


/* SOAP documentation preview */

.soap-coming-card {
  display: flex;
  align-items: center;
  gap: 16px;

  margin-top: 22px;
  padding: 20px;

  border: 1px solid #dfe7f1;
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #f7fbff,
      #fff4f8
    );
}

.soap-coming-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  background: #f1edff;
  color: #7561d7;

  font-size: 22px;
}

.soap-coming-card h3 {
  margin: 2px 0 5px;

  color: var(--brand-blue-dark);

  font-size: 19px;
}

.soap-coming-card p {
  margin: 0;

  color: #687d8e;
  line-height: 1.5;
}


/* Save area */

.data-session-save-bar {
  display: flex;
  justify-content: flex-end;

  margin-top: 22px;
  padding-top: 18px;

  border-top: 1px solid #e2eaf2;
}

.data-save-button {
  min-width: 190px;
  min-height: 48px;

  border-radius: 15px;

  font-weight: 800;
}


@media (max-width: 700px) {

  .live-data-header {
    flex-direction: column;
  }

  .data-session-save-bar {
    display: block;
  }

  .data-save-button {
    width: 100%;
  }

}
/* =====================================================
   EDITABLE SOAP NOTES
   ===================================================== */

.soap-notes-container {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.soap-section-header {
  padding-top: 18px;
  border-top: 1px solid #e3ebf2;
}

.soap-section-header h3 {
  margin: 2px 0 4px;
  color: var(--brand-blue-dark);
  font-size: 22px;
}

.soap-student-card {
  padding: 22px;

  border: 1px solid #dfe7f1;
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff7fa
    );

  box-shadow:
    0 7px 20px rgba(43,72,110,.05);
}

.soap-student-header {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 18px;
}

.soap-student-avatar {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #ffe6f0,
      #eef5ff
    );

  color: var(--brand-blue-dark);
  font-weight: 800;
}

.soap-student-header strong {
  color: var(--brand-blue-dark);
  font-size: 17px;
}

.soap-label {
  display: block;

  margin: 15px 0 6px;

  color: var(--brand-blue-dark);

  font-size: 13px;
  font-weight: 800;
}

.soap-textarea {
  width: 100%;
  min-height: 90px;

  padding: 13px 14px;

  border: 1px solid #dce5ee;
  border-radius: 14px;

  background: #ffffff;

  color: #334653;

  font: inherit;
  line-height: 1.55;

  resize: vertical;
}

.soap-objective {
  min-height: 120px;
}

.soap-textarea:focus {
  outline: none;

  border-color: #91b9e4;

  box-shadow:
    0 0 0 3px rgba(87,145,208,.10);
}

.soap-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 18px;
}

.participation-quality {
  margin-top: 14px;
}

.participation-quality select {
  width: 100%;
}

@media (max-width: 700px) {

  .soap-actions {
    flex-direction: column;
  }

  .soap-actions button {
    width: 100%;
  }

}
/* =====================================================
   COMMUNICATION WORKSPACE — MATERIALS LIBRARY
   ===================================================== */

.materials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.materials-kicker {
  margin-bottom: 6px;
  color: #2f6fb9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}

.materials-header h2 {
  margin: 0 0 6px;
  color: var(--brand-blue-dark);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -1px;
}

.materials-add-button {
  min-width: 145px;
}


/* TOOLBAR */

.materials-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) repeat(4, minmax(150px, .7fr));
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.materials-search-wrap {
  position: relative;
  width: 100%;
}

.materials-search-icon {
  position: absolute;
  top: 50%;
  left: 15px;

  width: 19px;
  height: 19px;

  transform: translateY(-50%);

  fill: none;
  stroke: #6f8ba5;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

#materialSearch,
#materialPopulationFilter,
#materialAreaFilter,
#materialTypeFilter,
#materialAgeFilter,
#materialSort,
#savedMaterialSearch,
#savedMaterialPopulationFilter,
#savedMaterialAreaFilter,
#savedMaterialTypeFilter,
#savedMaterialSort {
  width: 100%;
  height: 48px;

  border: 1px solid #d8e4ef;
  border-radius: 15px;

  background: #ffffff;
  color: #354b5c;

  font: inherit;
}

#materialSearch {
  padding: 0 16px 0 46px;
}

#savedMaterialSearch {
  padding: 0 16px 0 46px;
}

#materialPopulationFilter,
#materialAreaFilter,
#materialTypeFilter,
#materialAgeFilter,
#materialSort {
  padding: 0 14px;
}

#savedMaterialPopulationFilter,
#savedMaterialAreaFilter,
#savedMaterialTypeFilter,
#savedMaterialSort {
  padding: 0 14px;
}

#materialSearch:focus,
#materialPopulationFilter:focus,
#materialAreaFilter:focus,
#materialTypeFilter:focus,
#materialAgeFilter:focus,
#materialSort:focus,
#savedMaterialSearch:focus,
#savedMaterialPopulationFilter:focus,
#savedMaterialAreaFilter:focus,
#savedMaterialTypeFilter:focus,
#savedMaterialSort:focus {
  outline: none;
  border-color: #91b9e4;
  box-shadow: 0 0 0 3px rgba(87,145,208,.10);
}


/* FILTER PILLS */

.materials-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.material-filter,
.saved-material-filter {
  padding: 9px 15px;

  border: 1px solid #d8e4ef;
  border-radius: 999px;

  background: #ffffff;
  color: #587086;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.material-filter:hover,
.saved-material-filter:hover {
  background: #f7fbff;
}

.material-filter.active,
.saved-material-filter.active {
  border-color: #79afe3;

  background: linear-gradient(
    135deg,
    #56a9da,
    #668ce7
  );

  color: #ffffff;
}

.material-clear-filter {
  margin-left: auto;
}

.material-discovery-section {
  margin: 0 0 24px;
  padding: 22px;
  border: 1px solid #dce7f0;
  border-radius: 23px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 24px rgba(43,72,110,.045);
}

.material-recent-section {
  background: linear-gradient(135deg, rgba(239,249,255,.95), rgba(255,244,249,.9));
}

.material-upcoming-section {
  background: linear-gradient(135deg, rgba(237,250,246,.98), rgba(242,247,255,.96));
}

.material-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.material-section-heading h3 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: 22px;
}

.material-section-note {
  padding: 7px 11px;
  border-radius: 999px;
  background: #e7f7f1;
  color: #277f73;
  font-size: 12px;
  font-weight: 800;
}

.material-text-button {
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #2f72b9;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.material-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.material-shelf-card {
  min-width: 0;
  display: flex;
  align-items: stretch;
  border: 1px solid #d9e6ef;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.material-shelf-open {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 0;
  background: transparent;
  color: #294a61;
  text-align: left;
  cursor: pointer;
}

.material-shelf-open > span:last-child {
  min-width: 0;
}

.material-shelf-open strong,
.material-shelf-open small {
  display: block;
}

.material-shelf-open strong {
  overflow: hidden;
  color: var(--brand-blue-dark);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-shelf-open small {
  margin-top: 4px;
  color: #718596;
  font-size: 11px;
  line-height: 1.35;
}

.material-shelf-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg,#e9f5ff,#f9eefa);
  color: #347fc1;
  font-weight: 900;
}

.material-shelf-session {
  align-self: center;
  margin-right: 9px;
  padding: 8px 9px;
  border: 1px solid #d7e4ee;
  border-radius: 10px;
  background: #f8fbfe;
  color: #2d70b6;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.material-shelf-empty {
  grid-column: 1 / -1;
  padding: 20px;
  border: 1px dashed #d4e2ed;
  border-radius: 15px;
  color: #718596;
  text-align: center;
}

.material-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.material-category-card {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 17px;
  border: 1px solid #d9e6ef;
  border-radius: 18px;
  background: #f4faff;
  color: #294a61;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.material-category-card:hover,
.material-category-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 9px 18px rgba(43,72,110,.09);
  outline: none;
}

.material-category-2 { background: #faf4ff; }
.material-category-3 { background: #effaf7; }
.material-category-4 { background: #fff7ef; }

.material-category-mark {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  border-radius: 10px;
  background: rgba(255,255,255,.8);
  color: #397fc2;
  font-size: 14px;
  font-weight: 900;
}

.material-category-card strong {
  color: var(--brand-blue-dark);
  font-size: 14px;
  line-height: 1.25;
}

.material-category-card small {
  color: #718596;
  font-size: 11px;
}

.saved-material-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.saved-materials-toolbar {
  grid-template-columns: minmax(260px, 1.7fr) repeat(4, minmax(145px, .7fr));
}

.saved-material-card {
  min-width: 0;
}

.saved-material-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 14px;
}

.saved-material-results-heading h3 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: 22px;
}

.saved-material-results-heading span {
  color: #718596;
  font-size: 13px;
  font-weight: 700;
}

.material-collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.material-collection-card {
  position: relative;
  min-width: 0;
  border: 1px solid #d9e6ef;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #f6f1ff);
  overflow: hidden;
}

.material-collection-card > button:first-child {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 17px 42px;
  border: 0;
  background: transparent;
  color: #294a61;
  text-align: left;
  cursor: pointer;
}

.material-collection-card strong,
.material-collection-card small {
  display: block;
}

.material-collection-card strong {
  color: var(--brand-blue-dark);
  font-size: 14px;
}

.material-collection-card small {
  margin-top: 4px;
  color: #718596;
  font-size: 11px;
}

.material-collection-icon {
  width: 42px;
  height: 34px;
  flex: 0 0 42px;
  border-radius: 7px 10px 10px 10px;
  background: #b9a8ee;
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.22);
}

.material-collection-icon::before {
  content: "";
  display: block;
  width: 20px;
  height: 7px;
  margin-top: -5px;
  border-radius: 6px 6px 0 0;
  background: #b9a8ee;
}

.material-collection-delete {
  position: absolute;
  right: 13px;
  bottom: 11px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #ad6470;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.material-collection-dialog {
  width: min(650px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(31,60,92,.24);
}

.material-collection-dialog-body {
  display: grid;
  gap: 15px;
  padding: 22px;
}

.material-collection-picker {
  display: grid;
  gap: 9px;
}

.material-collection-picker button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border: 1px solid #d9e6ef;
  border-radius: 14px;
  background: #f8fbfe;
  color: #2c5572;
  text-align: left;
  cursor: pointer;
}

.material-collection-picker strong,
.material-collection-picker small {
  display: block;
}

.material-collection-picker small {
  margin-top: 3px;
  color: #718596;
}

.material-collection-name {
  display: grid;
  gap: 7px;
  color: #35566e;
  font-size: 13px;
  font-weight: 800;
}

.material-collection-name input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d8e4ef;
  border-radius: 14px;
  color: #354b5c;
  font: inherit;
}

.materials-saved-link {
  min-width: 175px;
}


/* MATERIAL GRID */

.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}


/* EMPTY LIBRARY */

.materials-empty {
  grid-column: 1 / -1;

  min-height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 40px;

  border: 1px dashed #d6e3ef;
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(224,245,255,.65),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(255,231,241,.55),
      transparent 32%
    ),
    #ffffff;

  text-align: center;
}

.materials-empty-icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  margin-bottom: 15px;

  border-radius: 18px;

  background: #edf5ff;
  color: #4e93d4;

  font-size: 28px;
}

.materials-empty h3 {
  margin: 0 0 7px;

  color: var(--brand-blue-dark);
  font-size: 21px;
}

.materials-empty p {
  margin: 0 0 18px;
  color: #718596;
}


/* MATERIAL CARDS — used once we add materials */

.material-card {
  position: relative;

  min-height: 190px;
  padding: 20px;

  border: 1px solid #dce6f0;
  border-radius: 21px;

  background: #ffffff;

  box-shadow:
    0 7px 20px rgba(43,72,110,.05);
}

.material-cover {
  width: 100%;
  min-height: 156px;
  display: grid;
  place-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid #d9e6f1;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff8fb, #f2faff);
  color: #245da5;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.material-cover:hover,
.material-cover:focus-visible {
  transform: translateY(-2px);
  border-color: #8dbce5;
  box-shadow: 0 10px 22px rgba(52, 104, 157, .12);
  outline: none;
}

.material-cover-emblem {
  width: 104px;
  height: 104px;
  display: block;
}

.material-cover-label {
  display: grid;
  gap: 4px;
  max-width: 100%;
  text-align: center;
}

.material-cover-label strong {
  color: var(--brand-blue-dark);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.material-cover-label small {
  color: #687d8e;
  font-size: 11px;
  font-weight: 700;
}

.material-file-status {
  display: block;
  margin-top: 7px;
  color: #6f8395;
}

.material-pdf-viewer-wrap {
  position: relative;
  overflow: hidden;
  min-height: 68vh;
  margin-bottom: 22px;
  border: 1px solid #d6e3ee;
  border-radius: 18px;
  background: #eef4f8;
}

.material-pdf-loading {
  position: absolute;
  inset: 0 0 42px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #687d8e;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}

.material-pdf-viewer-wrap.is-loaded .material-pdf-loading {
  display: none;
}

.material-pdf-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 12px;
  border-bottom: 1px solid #d6e3ee;
  background: rgba(247, 251, 254, 0.96);
}

.material-pdf-toolbar:not([hidden]) {
  display: flex;
}

.material-pdf-toolbar button {
  min-width: 110px;
  padding: 8px 14px;
  cursor: pointer;
}

.material-pdf-page-status {
  min-width: 100px;
  color: #536f86;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.material-pdf-canvas-wrap {
  min-height: 58vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  overflow: auto;
  background: #e9f0f5;
}

.material-pdf-canvas {
  display: block;
  max-width: 100%;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(24, 55, 84, 0.18);
}

.material-pdf-viewer {
  position: relative;
  display: block;
  width: 100%;
  height: 68vh;
  border: 0;
  background: #ffffff;
}

.material-pdf-fallback {
  position: relative;
  z-index: 3;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  background: #f7fbfe;
  color: #687d8e;
  font-size: 12px;
  text-align: center;
}

.material-pdf-fallback button,
.material-pdf-fallback a {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #245da5;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- RELIABLE MATERIAL OVERVIEW ---------- */

.material-overview-preview {
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid #d6e3ee;
  border-radius: 22px;
  background: linear-gradient(135deg, #f7fbff, #fff9fc 52%, #f2fbf8);
}

.material-overview-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px;
  border-bottom: 1px solid #deebf3;
}

.material-overview-icon {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #deefff, #eee7ff);
  color: #2f79c6;
  font-size: 34px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(86, 145, 204, 0.16);
}

.material-overview-label {
  color: #3b79b8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}

.material-overview-hero h3,
.material-overview-section h3,
.material-overview-details h3,
.material-overview-targets h3 {
  margin: 5px 0 8px;
  color: var(--brand-blue-dark);
}

.material-overview-hero p,
.material-overview-clinical p {
  margin: 0;
  color: #61788b;
  line-height: 1.55;
}

.material-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 18px;
  padding: 22px 26px 10px;
}

.material-overview-section,
.material-overview-details,
.material-overview-targets,
.material-overview-clinical {
  padding: 20px;
  border: 1px solid #dce8f1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.material-overview-section ul {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding-left: 22px;
  color: #526d82;
  line-height: 1.45;
}

.material-overview-details dl,
.material-overview-details dl div {
  margin: 0;
}

.material-overview-details dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #e6eef4;
}

.material-overview-details dl div:last-child {
  border-bottom: 0;
}

.material-overview-details dt {
  color: #708698;
  font-weight: 700;
}

.material-overview-details dd {
  margin: 0;
  color: #274d72;
  font-weight: 900;
  text-align: right;
}

.material-overview-targets,
.material-overview-clinical {
  margin: 10px 26px 0;
}

.material-overview-targets > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.material-overview-targets span {
  padding: 7px 11px;
  border-radius: 999px;
  background: #e8f6f2;
  color: #267f70;
  font-size: 12px;
  font-weight: 800;
}

.material-overview-clinical strong {
  display: block;
  margin-bottom: 6px;
  color: #705c2e;
}

.material-overview-clinical {
  background: #fffaf0;
  border-color: #f1dfb6;
}

.material-overview-open-note {
  margin-top: 18px;
  padding: 14px 24px;
  background: #edf6ff;
  color: #4a6f8e;
  text-align: center;
}

@media (max-width: 760px) {
  .material-overview-grid {
    grid-template-columns: 1fr;
  }

  .material-overview-hero {
    align-items: flex-start;
  }
}

.material-card:nth-child(4n + 1) {
  background: linear-gradient(135deg, #ffffff, #fff3f8);
}

.material-card:nth-child(4n + 2) {
  background: linear-gradient(135deg, #ffffff, #effaf7);
}

.material-card:nth-child(4n + 3) {
  background: linear-gradient(135deg, #ffffff, #fff7ed);
}

.material-card:nth-child(4n + 4) {
  background: linear-gradient(135deg, #ffffff, #f5f1ff);
}

.material-card h3 {
  margin: 8px 0 6px;

  color: var(--brand-blue-dark);
  font-size: 18px;
}

.material-card p {
  color: #687d8e;
  line-height: 1.5;
}

.material-area-tag {
  display: inline-flex;

  padding: 6px 10px;

  border-radius: 999px;

  background: #e8f7f4;
  color: #268b82;

  font-size: 11px;
  font-weight: 800;
}

.material-source-tag {
  display: inline-flex;
  margin-left: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3efff;
  color: #6b58bb;
  font-size: 11px;
  font-weight: 800;
}

.material-last-used {
  margin-top: 12px;
  color: #718596;
  font-size: 12px;
  font-weight: 700;
}

.material-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.material-plan-button {
  color: #245da5;
}

#materialPlanPickerOverlay {
  z-index: 100200;
}

.material-plan-picker {
  width: min(720px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  overflow: auto;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(31, 60, 92, .24);
}

.material-plan-picker-body {
  padding: 24px;
}

.material-new-plan {
  width: 100%;
  margin-bottom: 24px;
}

.material-plan-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding: 10px; border-radius: 14px; background: #eef7ff; color: #214f86; text-align: center; }
.material-plan-week-nav strong { font-size: 1rem; }
.material-plan-week-nav button { min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 1.25rem; }
.material-plan-option:disabled { opacity: .55; cursor: wait; }
@media (max-width: 600px) { .material-plan-option { align-items: flex-start; flex-direction: column; } }

.material-plan-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.material-plan-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  border: 1px solid #d8e5ef;
  border-radius: 15px;
  background: #ffffff;
  color: #245da5;
  text-align: left;
  cursor: pointer;
}

.material-plan-option:hover,
.material-plan-option:focus-visible {
  border-color: #84b6e2;
  background: #f6fbff;
  outline: none;
}

.material-plan-option strong,
.material-plan-option small {
  display: block;
}

.material-plan-option small {
  margin-top: 4px;
  color: #718596;
}

.material-favorite {
  position: absolute;
  top: 15px;
  right: 15px;

  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid #dde7f0;
  border-radius: 50%;

  background: rgba(255,255,255,.85);
  color: #ee7ca6;

  cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 1050px) {
  .materials-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .materials-search-wrap {
    grid-column: 1 / -1;
  }

  .materials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .material-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .materials-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .materials-add-button {
    width: 100%;
  }

  .materials-toolbar {
    grid-template-columns: 1fr;
  }

  .materials-search-wrap {
    grid-column: auto;
  }

  .materials-grid {
    grid-template-columns: 1fr;
  }

  .material-category-grid,
  .material-shelf,
  .material-collection-grid,
  .saved-material-dashboard {
    grid-template-columns: 1fr;
  }

  .material-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .materials-saved-link {
    width: 100%;
  }
}
/* =====================================================
   SESSION PLANNER — SUGGESTED MATERIALS
   ===================================================== */

.planner-material-suggestions {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.planner-material-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  padding: 16px 18px;

  border: 1px solid #dce7f1;
  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5fbff 55%,
      #fff6fa 100%
    );
}

.planner-material-card strong {
  display: block;
  margin: 7px 0 4px;

  color: var(--brand-blue-dark);
  font-size: 15px;
}

.planner-material-targets {
  margin-top: 8px;

  color: #61798c;
  font-size: 13px;
  line-height: 1.45;
}

.planner-material-targets strong {
  display: inline;
  margin: 0;

  color: #4d6578;
  font-size: inherit;
}

.planner-material-heart {
  color: #ef7fa7;
  font-size: 20px;
  line-height: 1;
}
/* =====================================================
   SESSION PLANNER — SELECTED MATERIALS
   ===================================================== */

.planner-material-add {
  flex-shrink: 0;

  padding: 8px 12px;

  border: 1px solid #bdd3e7;
  border-radius: 12px;

  background: #ffffff;
  color: #4279a8;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;
}

.planner-material-add:hover {
  background: #f0f8ff;
}

.planner-material-add.selected {
  border-color: #8bcfc5;

  background: #e7f8f4;
  color: #24877e;
}

.planner-selected-materials {
  display: grid;
  gap: 10px;

  margin-top: 12px;
}

.planner-selected-material {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 13px 15px;

  border: 1px solid #dce6ef;
  border-radius: 14px;

  background: #ffffff;
}

.planner-selected-material strong {
  display: block;

  margin-bottom: 3px;

  color: var(--brand-blue-dark);
}
/* ================================
   MONTH AT A GLANCE CALENDAR
================================ */

.monthly-calendar-section {
  margin-top: 34px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(55, 84, 130, 0.08);
}

.monthly-calendar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.monthly-calendar-header h3 {
  margin: 6px 0 6px;
  font-size: 24px;
  color: #173f7a;
}

.monthly-calendar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.monthly-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.monthly-weekday-row > div {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #64809d;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 4px;
}

.monthly-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.monthly-calendar-day {
  min-height: 115px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
  overflow: hidden;
}

.monthly-calendar-day:hover {
  transform: translateY(-1px);
  border-color: #a8c9e9;
  box-shadow: 0 7px 18px rgba(62, 106, 151, 0.1);
}

.monthly-calendar-empty {
  background: #f8fafc;
  cursor: default;
  opacity: 0.55;
}

.monthly-calendar-empty:hover {
  transform: none;
  box-shadow: none;
}

.monthly-calendar-day.today {
  background: #eef9f7;
  border: 2px solid #55c8b6;
}

.monthly-day-number {
  font-size: 14px;
  font-weight: 800;
  color: #173f7a;
  margin-bottom: 7px;
}

.monthly-day-events {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.monthly-event-chip {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 6px 7px;
  text-align: left;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  color: #24466d;
  background: #edf6fd;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthly-event-chip:hover {
  filter: brightness(0.97);
}

.monthly-event-meeting {
  background: #eaf4fd;
}

.monthly-event-iep {
  background: #fff0f4;
}

.monthly-event-appointment {
  background: #f1edff;
}

.monthly-event-makeup {
  background: #fff3df;
}

.monthly-event-evaluation {
  background: #e7f8f3;
}

.monthly-event-observation {
  background: #eef3ff;
}

.monthly-event-other {
  background: #f3f4f6;
}


/* ================================
   MAKEUP NEEDED
================================ */

.makeup-section {
  margin-top: 28px;
  margin-bottom: 30px;
  padding: 24px;
  background: #fffaf1;
  border: 1px solid #f3dfbd;
  border-radius: 22px;
}

.makeup-section-header {
  margin-bottom: 16px;
}

.makeup-needed-list {
  display: grid;
  gap: 12px;
}

.makeup-needed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
}


/* ================================
   SMALL SCREENS
================================ */

@media (max-width: 900px) {

  .monthly-calendar-header {
    flex-direction: column;
  }

  .monthly-calendar-grid,
  .monthly-weekday-row {
    min-width: 720px;
  }

  .monthly-calendar-section {
    overflow-x: auto;
  }
}
/* ================================
   CALENDAR SESSION POPUP
================================ */

.calendar-session-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 43, 68, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

.calendar-session-menu {
  width: min(560px, 100%);
  background: #ffffff;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(34, 59, 91, 0.22);
  border: 1px solid #dce7f3;
  max-height: 85vh;
  overflow-y: auto;
}

.calendar-session-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.calendar-session-menu-header h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

.calendar-session-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #dce5ef;
  background: #ffffff;
  font-size: 22px;
  cursor: pointer;
}

.calendar-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.calendar-session-actions button {
  flex: 1 1 180px;
}
/* Weekly session popup */
.calendar-session-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(20, 35, 55, 0.30);
  z-index: 99999 !important;
  padding: 24px;
}

.calendar-session-menu {
  width: min(560px, calc(100vw - 40px));
  max-height: 85vh;
  overflow-y: auto;
  background: white;
  border-radius: 24px;
  padding: 24px;
  border: 1px solid #dce6f2;
  box-shadow: 0 24px 70px rgba(30, 55, 90, 0.25);
}

.calendar-session-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.calendar-session-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.calendar-session-actions button {
  width: 100%;
}

@media (max-width: 600px) {
  .calendar-session-actions {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   COMMUNICATION WORKSPACE — V1 FINAL DESKTOP POLISH
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL POLISH
   --------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  min-width: 0;
}

button {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

button:active {
  transform: translateY(1px);
}

.primary,
.secondary {
  min-height: 42px;
}

.primary {
  padding: 11px 17px;
}

.secondary {
  padding: 10px 15px;
}

.primary:focus-visible,
.secondary:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(72, 145, 221, 0.22);
  outline-offset: 2px;
}

.card {
  border-color: #dce6f0;
}


/* ---------------------------------------------------------
   FIX SIDEBAR ICON COLORS
   Current order:
   1 Home
   2 Clients
   3 Calendar
   4 Groups
   5 Session Planner
   6 Materials
   7 Data Collection
   8 Progress
   --------------------------------------------------------- */

.sidebar-nav button:nth-child(1) .nav-icon {
  color: #3188dc;
}

.sidebar-nav button:nth-child(2) .nav-icon {
  color: #ef6da3;
}

.sidebar-nav button:nth-child(3) .nav-icon {
  color: #25b9aa;
}

.sidebar-nav button:nth-child(4) .nav-icon {
  color: #8069e8;
}

.sidebar-nav button:nth-child(5) .nav-icon {
  color: #f39a48;
}

.sidebar-nav button:nth-child(6) .nav-icon {
  color: #4b9cde;
}

.sidebar-nav button:nth-child(7) .nav-icon {
  color: #8069e8;
}

.sidebar-nav button:nth-child(8) .nav-icon {
  color: #36a9a0;
}


/* ---------------------------------------------------------
   HOME — TODAY'S SCHEDULE
   --------------------------------------------------------- */

#todaySchedule {
  display: grid;
  gap: 0;
}

.dashboard-schedule-item {
  position: relative;

  padding:
    14px 14px 14px 18px !important;

  margin-bottom: 8px;

  border: 1px solid #e1e9f2;
  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbff
    );

  box-shadow:
    0 4px 12px rgba(43, 72, 110, 0.04);

  cursor: pointer;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.dashboard-schedule-item:hover {
  transform: translateY(-1px);

  border-color: #cbddeb;

  box-shadow:
    0 7px 18px rgba(43, 72, 110, 0.08);
}

.dashboard-schedule-item::before {
  content: "";

  position: absolute;

  left: 0;
  top: 12px;
  bottom: 12px;

  width: 4px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #55b7da,
      #718be4
    );
}

.dashboard-schedule-item strong {
  color: var(--brand-blue-dark);
  font-size: 14px;
}

.dashboard-schedule-item .muted {
  color: #718596;
}


/* ---------------------------------------------------------
   DASHBOARD — NEEDS ATTENTION
   --------------------------------------------------------- */

.dashboard-attention-card {
  min-height: 210px;

  padding: 22px;

  border: 1px solid #eadfca;

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(255, 229, 200, 0.55),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 95%,
      rgba(241, 237, 255, 0.70),
      transparent 28%
    ),
    #ffffff;

  box-shadow:
    0 8px 24px rgba(43, 72, 110, 0.06);
}

.dashboard-attention-card h3 {
  margin: 5px 0 0;

  color: var(--brand-blue-dark);

  font-size: 21px;
}

.dashboard-attention-card > div:last-child {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.dashboard-attention-card .secondary {
  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px;

  white-space: normal;

  border-radius: 16px;

  text-align: center;
  line-height: 1.35;
}

.dashboard-attention-card .secondary:nth-child(1) {
  background: #fff6e9;
  border-color: #f1dfc2;
  color: #ad6c28;
}

.dashboard-attention-card .secondary:nth-child(2) {
  background: #fff1f5;
  border-color: #f1d8e2;
  color: #b85d7e;
}

.dashboard-attention-card .secondary:nth-child(3) {
  background: #f1edff;
  border-color: #e1daf8;
  color: #6d5bc1;
}

.dashboard-attention-card .secondary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(43, 72, 110, 0.08);
}


/* ---------------------------------------------------------
   PLAN / SESSION STATUS LABELS
   --------------------------------------------------------- */

.calendar-plan-ready {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-top: 7px;

  padding: 5px 9px;

  border-radius: 999px;

  background: #e3f7f1;

  color: #20877b;

  font-size: 11px;
  font-weight: 800;
}


/* ---------------------------------------------------------
   CLIENT — UPCOMING SESSIONS
   --------------------------------------------------------- */

#studentUpcomingSessions {
  display: grid;
  gap: 12px;
}

#studentUpcomingSessions > .card {
  margin-top: 0 !important;

  padding: 17px 18px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f7fbff
    );

  box-shadow:
    0 5px 16px rgba(43, 72, 110, 0.04);
}

#studentUpcomingSessions
  > .card:nth-child(4n + 1) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff5f9
    );
}

#studentUpcomingSessions
  > .card:nth-child(4n + 2) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #eefaf6
    );
}

#studentUpcomingSessions
  > .card:nth-child(4n + 3) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff7ec
    );
}

#studentUpcomingSessions
  > .card:nth-child(4n + 4) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f4f1ff
    );
}

#studentUpcomingSessions .page-header {
  align-items: center;
  margin-bottom: 0;
}

#studentUpcomingSessions strong {
  color: var(--brand-blue-dark);
  font-size: 16px;
}

#studentUpcomingSessions .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* ---------------------------------------------------------
   GROUP FILE
   --------------------------------------------------------- */

#groupFile .page-header {
  align-items: center;
}

#groupFile .page-header h2 {
  margin: 0 0 6px;

  color: var(--brand-blue-dark);

  font-size: 36px;
  letter-spacing: -0.8px;
}

.group-file-tab-content {
  padding-top: 4px;
}

.group-members-full {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 15px;
}

.group-members-full .member-card {
  margin: 0;

  padding: 20px;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f9fbff
    );

  box-shadow:
    0 7px 20px rgba(43, 72, 110, 0.05);
}

.group-members-full
  .member-card:nth-child(4n + 1) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff5f9
    );
}

.group-members-full
  .member-card:nth-child(4n + 2) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #eefaf6
    );
}

.group-members-full
  .member-card:nth-child(4n + 3) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff7ec
    );
}

.group-members-full
  .member-card:nth-child(4n + 4) {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f4f1ff
    );
}

.group-members-full .member-card h3 {
  color: var(--brand-blue-dark);
  font-size: 19px;
}

.group-members-full .member-goal {
  border: 1px solid #e4ebf2;

  background:
    rgba(255, 255, 255, 0.72);
}


/* ---------------------------------------------------------
   GROUP — UPCOMING SESSIONS
   --------------------------------------------------------- */

#groupTabSessions > .card {
  padding: 22px;

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfdff
    );
}

#groupUpcomingSessions {
  display: grid;
  gap: 12px;

  margin-top: 16px;
}

#groupUpcomingSessions > .card {
  margin-top: 0 !important;

  padding: 17px 18px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f4f9ff
    );

  box-shadow:
    0 5px 16px rgba(43, 72, 110, 0.04);
}

#groupUpcomingSessions .page-header {
  margin-bottom: 0;
  align-items: center;
}

#groupUpcomingSessions strong {
  color: var(--brand-blue-dark);
}


/* ---------------------------------------------------------
   GROUP SESSION HISTORY
   --------------------------------------------------------- */

#groupSessionHistory {
  display: grid;
  gap: 12px;
}

#groupSessionHistory .saved-session-card {
  margin-top: 0 !important;

  padding: 16px 18px;

  border: 1px solid #e0e8f1;
  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbff
    );
}


/* ---------------------------------------------------------
   WEEKLY CALENDAR — FINAL POLISH
   --------------------------------------------------------- */

.calendar-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin:
    0 0 18px;
}

.calendar-week-label {
  min-width: 210px;

  color: #536f8c;

  font-size: 14px;
  font-weight: 800;

  text-align: center;
}

#weekendToggleButton {
  margin-bottom: 14px;
}

#calendarGrid .calendar-event {
  position: relative;

  width: auto;

  margin: 10px;

  padding: 13px 14px;

  border: 1px solid #d9e5ef;
  border-left: 4px solid #45a3d2;
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #f5fbff,
      #edf7ff
    );

  box-shadow:
    0 4px 12px rgba(43, 72, 110, 0.05);
}

#calendarGrid .calendar-event.individual {
  border-left-color: #4dbba9;

  background:
    linear-gradient(
      135deg,
      #f5fffc,
      #eaf9f5
    );
}

#calendarGrid .calendar-event:hover {
  transform: translateY(-1px);

  box-shadow:
    0 7px 17px rgba(43, 72, 110, 0.09);
}

#calendarGrid .event-time {
  margin-bottom: 5px;

  color: #687f93;

  font-size: 12px;
}

#calendarGrid .event-title {
  color: #24384d;
  font-size: 15px;
}


/* ---------------------------------------------------------
   MONTH CALENDAR — FINAL POLISH
   --------------------------------------------------------- */

.monthly-calendar-section {
  background:
    radial-gradient(
      circle at 96% 5%,
      rgba(241, 237, 255, 0.40),
      transparent 24%
    ),
    #ffffff;
}

.monthly-calendar-day {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.monthly-calendar-day:hover {
  background: #fbfdff;
}

.monthly-calendar-day.today {
  border: 2px solid #5abdab;

  background:
    linear-gradient(
      135deg,
      #f0fbf8,
      #edf8ff
    );
}

.monthly-event-chip {
  border: 1px solid rgba(90, 116, 148, 0.08);
}


/* ---------------------------------------------------------
   MAKEUP NEEDED
   --------------------------------------------------------- */

.makeup-section {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 96% 10%,
      rgba(255, 224, 190, 0.45),
      transparent 30%
    ),
    #fffaf2;

  box-shadow:
    0 8px 22px rgba(106, 81, 42, 0.05);
}

.makeup-section h3 {
  margin: 5px 0 6px;

  color: #68502d;

  font-size: 23px;
}

.makeup-needed-card {
  border: 1px solid #ebdfc9;
  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 4px 12px rgba(84, 66, 38, 0.04);
}

.makeup-needed-card strong {
  color: #614b2c;
}


/* ---------------------------------------------------------
   SESSION PLANNER — FINAL POLISH
   --------------------------------------------------------- */

.saved-plans-section {
  margin-top: 30px;
  padding-top: 24px;

  border-top: 1px solid #e2eaf2;
}

.saved-plans-heading h3 {
  margin: 5px 0 5px;

  color: var(--brand-blue-dark);
}

#savedSessionPlans {
  display: grid;
  gap: 13px;

  margin-top: 16px;
}

#savedSessionPlans .saved-plan-card,
#savedSessionPlans > div {
  border-radius: 18px;
}

.generated-plan-section {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.generated-plan-section:hover {
  box-shadow:
    0 6px 16px rgba(43, 72, 110, 0.06);
}


/* ---------------------------------------------------------
   DATA COLLECTION — LIVE BUTTONS
   --------------------------------------------------------- */

.live-btn {
  min-height: 52px;

  border-radius: 14px;

  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}

.live-btn:hover {
  transform: translateY(-1px);

  box-shadow:
    0 5px 14px rgba(43, 72, 110, 0.08);
}

.live-btn:active {
  transform: translateY(1px);
}

.live-buttons .live-btn:nth-child(1) {
  background: #e7f8f3;
  color: #24897f;
  border-color: #bee8df;
}

.live-buttons .live-btn:nth-child(2) {
  background: #fff0f4;
  color: #ba5d7d;
  border-color: #f1d2de;
}

.live-buttons .live-btn:nth-child(3) {
  background: #f2efff;
  color: #6d5bc3;
  border-color: #ded7f5;
}

.live-buttons .live-btn:nth-child(4) {
  background: #fff5e9;
  color: #b87534;
  border-color: #f1dfc8;
}

.data-student-card {
  border-radius: 22px;

  box-shadow:
    0 7px 22px rgba(43, 72, 110, 0.05);
}

.data-student-header {
  background:
    linear-gradient(
      135deg,
      #f7fbff,
      #f2faf8
    );
}

.goal-data-card {
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfdff
    );
}


/* ---------------------------------------------------------
   PROGRESS PAGE — TOP AREA
   --------------------------------------------------------- */

#progress .page-title {
  margin-bottom: 20px;
}

#progress .page-title h2 {
  margin: 0 0 6px;

  color: var(--brand-blue-dark);

  font-size: 38px;
  letter-spacing: -1px;
}

#progress .page-title p {
  margin: 0;
  color: #718596;
}

#progress > .card {
  padding: 20px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbff
    );
}


/* ---------------------------------------------------------
   MATERIALS — CARD HOVER
   --------------------------------------------------------- */

.material-card {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.material-card:hover {
  transform: translateY(-2px);

  border-color: #ceddec;

  box-shadow:
    0 10px 26px rgba(43, 72, 110, 0.09);
}


/* ---------------------------------------------------------
   MODALS — FINAL COMMERCIAL POLISH
   --------------------------------------------------------- */

.modal-backdrop {
  backdrop-filter: blur(3px);
}

.modal {
  border: 1px solid rgba(218, 228, 238, 0.9);

  box-shadow:
    0 28px 80px rgba(29, 49, 77, 0.24);
}

.modal h3 {
  margin-bottom: 20px;

  color: var(--brand-blue-dark);

  letter-spacing: -0.3px;
}

.modal-actions {
  padding-top: 4px;
}

.modal-actions .primary,
.modal-actions .secondary {
  min-width: 105px;
}

.danger-btn,
.secondary.danger-btn {
  color: #b55151;
  border-color: #ebcccc;
}

.danger-btn:hover,
.secondary.danger-btn:hover {
  background: #fff2f2;
}


/* ---------------------------------------------------------
   CALENDAR SESSION POPUP
   --------------------------------------------------------- */

.calendar-session-overlay {
  backdrop-filter: blur(3px);
}

.calendar-session-menu {
  background:
    radial-gradient(
      circle at 95% 3%,
      rgba(237, 247, 255, 0.75),
      transparent 25%
    ),
    #ffffff;
}

.calendar-session-menu-header h3 {
  color: var(--brand-blue-dark);
}

.calendar-session-close {
  color: #5e7690;

  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.calendar-session-close:hover {
  background: #f1f6fb;
}


/* ---------------------------------------------------------
   EMPTY STATES
   --------------------------------------------------------- */

.empty {
  background:
    linear-gradient(
      135deg,
      #fbfdff,
      #ffffff
    );

  border-color: #d5e1ec;
}

.empty::first-line {
  font-weight: 600;
}


/* ---------------------------------------------------------
   SCROLLBARS
   --------------------------------------------------------- */

.modal::-webkit-scrollbar,
.calendar-session-menu::-webkit-scrollbar {
  width: 8px;
}

.modal::-webkit-scrollbar-thumb,
.calendar-session-menu::-webkit-scrollbar-thumb {
  background: #cad8e5;
  border-radius: 999px;
}


/* ---------------------------------------------------------
   DESKTOP WIDTH / SPACING
   --------------------------------------------------------- */

@media (min-width: 1200px) {

  .app {
    max-width: 1560px;
  }

  main {
    padding:
      32px 38px 48px;
  }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1000px) {

  .dashboard-attention-card
    > div:last-child {
    grid-template-columns: 1fr;
  }

  .group-members-full {
    grid-template-columns: 1fr;
  }

}


/* ---------------------------------------------------------
   SMALL SCREENS
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .calendar-week-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .calendar-week-label {
    width: 100%;
    min-width: 0;

    order: -1;

    text-align: left;
  }

  .dashboard-attention-card
    > div:last-child {
    grid-template-columns: 1fr;
  }

  #studentUpcomingSessions
    .page-header,
  #groupUpcomingSessions
    .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #studentUpcomingSessions
    .actions {
    width: 100%;
  }

  #studentUpcomingSessions
    .actions button,
  #groupUpcomingSessions button {
    width: 100%;
  }

  .makeup-needed-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .makeup-needed-card button {
    width: 100%;
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .modal-actions button {
    width: 100%;
  }

}
/* =========================================================
   FINAL SMALL FIXES
   ========================================================= */

/* Fix Add to Favorites checkbox */
.material-favorite-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 14px;

  color: #34495a;
  font-weight: 600;

  cursor: pointer;
}

.material-favorite-choice input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;

  margin: 0;

  accent-color: #ef7fa7;

  cursor: pointer;
}
@media (min-width: 701px) and (max-width: 1000px) {

  .app {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .workspace-sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-emblem {
    width: 118px;
    height: 118px;
  }

  .brand-name {
    font-size: 18px;
  }

  .brand-tagline {
    font-size: 11px;
  }

  .sidebar-nav button {
    padding: 10px 11px;
    font-size: 14px;
  }

  main {
    padding: 24px 22px 36px;
  }
}
/* =========================================================
   AI MATERIALS GENERATOR
   ========================================================= */

.ai-material-open-button {
  margin-right: 10px;
}

.ai-material-overlay {
  position: fixed;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 22px;

  background:
    rgba(25, 43, 68, 0.36);

  backdrop-filter: blur(4px);

  z-index: 100000;
}

.ai-material-overlay.show {
  display: flex;
}

.ai-material-window {
  width:
    min(1380px, 100%);

  max-height:
    calc(100vh - 44px);

  overflow-y: auto;

  padding: 26px;

  border:
    1px solid #dbe6f1;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 95% 3%,
      rgba(230, 238, 255, 0.72),
      transparent 23%
    ),
    radial-gradient(
      circle at 3% 95%,
      rgba(223, 248, 242, 0.55),
      transparent 22%
    ),
    #ffffff;

  box-shadow:
    0 30px 90px
    rgba(25, 48, 78, 0.28);
}


/* ---------- HEADER ---------- */

.ai-material-window-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 24px;

  margin-bottom: 16px;
}

.ai-material-window-header h2 {
  margin: 4px 0 5px;

  color:
    var(--brand-blue-dark);

  font-size: 34px;

  letter-spacing: -0.8px;
}

.ai-material-window-header p {
  margin: 0;

  color: #697f90;
}

.cw-review-panel {
  position: sticky;
  bottom: 0;
  z-index: 5;
  width: 100%;
  padding: 20px;
  border: 1px solid #cbdced;
  border-radius: 20px;
  background: #f7fbff;
}

.cw-review-panel label {
  display: block;
  color: #163f76;
  font-weight: 800;
  margin-bottom: 4px;
}

.cw-review-panel textarea {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #bfd2e6;
  border-radius: 14px;
  background: #fff;
  resize: vertical;
}

.cw-review-actions {
  position: relative;
  z-index: 6;
  pointer-events: auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cw-review-actions button {
  pointer-events: auto;
  cursor: pointer;
}

.ai-material-close {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid #dce6f0;

  border-radius: 14px;

  background: #ffffff;

  color: #667f97;

  font-size: 25px;
}

.ai-material-close:hover {
  background: #f4f8fc;
}


/* ---------- NOTICE ---------- */

.ai-draft-notice {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;

  padding: 13px 16px;

  border:
    1px solid #d9e7f3;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #edf7ff,
      #f3f1ff
    );

  color: #536c83;

  font-size: 13px;
}

.ai-draft-notice strong {
  color:
    var(--brand-blue-dark);
}


/* ---------- TWO COLUMNS ---------- */

.ai-generator-layout {
  display: grid;

  grid-template-columns:
    minmax(360px, 0.85fr)
    minmax(480px, 1.15fr);

  gap: 20px;

  align-items: start;
}


/* ---------- LEFT ---------- */

.ai-generator-controls,
.ai-generator-result {
  padding: 22px;

  border:
    1px solid #dce6f0;

  border-radius: 24px;

  background:
    rgba(
      255,
      255,
      255,
      0.93
    );

  box-shadow:
    0 8px 24px
    rgba(
      43,
      72,
      110,
      0.06
    );
}

.ai-generator-mode {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 0;

  margin-bottom: 20px;

  padding: 4px;

  border-radius: 16px;

  background: #eef4fa;
}

.ai-generator-mode button {
  min-height: 44px;

  border: 0;

  border-radius: 13px;

  background: transparent;

  color: #546e85;

  font-weight: 800;
}

.ai-generator-mode button.active {
  background:
    linear-gradient(
      135deg,
      #46a9dc,
      #6486e8
    );

  color: #ffffff;

  box-shadow:
    0 6px 15px
    rgba(
      73,
      127,
      197,
      0.18
    );
}


.ai-generator-label {
  display: block;

  margin:
    15px 0 7px;

  color: #334a60;

  font-size: 13px;

  font-weight: 800;
}


.ai-choice-grid {
  display: grid;

  gap: 8px;
}

.ai-choice-three {
  grid-template-columns:
    repeat(3, 1fr);
}

.ai-choice {
  min-height: 46px;

  border:
    1px solid #dbe5ef;

  border-radius: 14px;

  background: #ffffff;

  color: #526c84;

  font-weight: 700;
}

.ai-choice:hover {
  background: #f5f9fd;
}

.ai-choice.selected {
  border-color: #4b95e5;

  background:
    linear-gradient(
      135deg,
      #edf6ff,
      #f2f4ff
    );

  color:
    var(--brand-blue-dark);

  box-shadow:
    0 0 0 2px
    rgba(
      77,
      145,
      220,
      0.09
    );
}


.ai-generator-fields {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 12px;
}


.ai-generator-controls input,
.ai-generator-controls select,
.ai-generator-controls textarea {
  width: 100%;

  border:
    1px solid #d8e4ef;

  border-radius: 14px;

  background: #ffffff;
}


.ai-generate-main-button {
  width: 100%;

  min-height: 52px;

  margin-top: 22px;

  border-radius: 16px;

  font-size: 15px;

  font-weight: 800;
}


/* ---------- RIGHT / EMPTY ---------- */

#aiGeneratorEmpty {
  min-height: 580px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 40px;

  text-align: center;
}

.ai-generator-empty-icon {
  width: 68px;
  height: 68px;

  display: grid;
  place-items: center;

  margin-bottom: 14px;

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #edf7ff,
      #f2efff
    );

  font-size: 30px;
}

#aiGeneratorEmpty h3 {
  margin: 0 0 7px;

  color:
    var(--brand-blue-dark);

  font-size: 22px;
}

#aiGeneratorEmpty p {
  max-width: 390px;

  margin: 0;

  color: #718596;

  line-height: 1.55;
}


/* ---------- RESULT ---------- */

.ai-result-heading h2 {
  margin: 11px 0 6px;

  color:
    var(--brand-blue-dark);

  font-size: 29px;

  letter-spacing: -0.7px;
}

.ai-generated-badge {
  display: inline-flex;

  padding: 6px 10px;

  border-radius: 999px;

  background: #e5f8f2;

  color: #20877b;

  font-size: 11px;

  font-weight: 800;
}

.ai-result-meta {
  color: #597591;

  font-size: 13px;

  font-weight: 650;
}

.ai-result-description {
  margin: 14px 0 18px;

  color: #526a7e;

  line-height: 1.55;
}


/* ---------- MATERIAL CONTENT ---------- */

.ai-generated-content {
  padding: 20px;

  border:
    1px solid #dee7f1;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #fbfaff
    );
}

.ai-generated-content h3,
.ai-goal-ideas h3 {
  margin: 0 0 13px;

  color:
    var(--brand-blue-dark);

  font-size: 17px;
}

.ai-generated-content ol,
.ai-goal-ideas ul {
  margin: 0;

  padding-left: 24px;
}

.ai-generated-content li,
.ai-goal-ideas li {
  margin-bottom: 9px;

  color: #334c60;

  line-height: 1.5;
}


/* ---------- ACTIVITY DETAILS ---------- */

.ai-activity-info {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin-bottom: 16px;
}

.ai-activity-info div {
  padding: 13px;

  border:
    1px solid #e0e8f1;

  border-radius: 15px;

  background: #f9fbfe;
}

.ai-activity-info span {
  display: block;

  margin-bottom: 4px;

  color: #7a8e9e;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.7px;

  text-transform: uppercase;
}

.ai-activity-info strong {
  color: #334c60;

  font-size: 13px;
}


/* ---------- GOAL IDEAS ---------- */

.ai-goal-ideas {
  margin-top: 14px;

  padding: 18px;

  border:
    1px solid #e4ddf5;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #faf8ff,
      #f4f1ff
    );
}


/* ---------- TIP ---------- */

.ai-slp-tip {
  margin-top: 14px;

  padding: 16px 18px;

  border:
    1px solid #f0dfbb;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #fff9ee,
      #fff5df
    );
}

.ai-slp-tip strong {
  color: #9b692d;
}

.ai-slp-tip p {
  margin: 6px 0 0;

  color: #6d604e;

  line-height: 1.5;
}


/* ---------- RESULT BUTTONS ---------- */

.ai-result-adjustments,
.ai-result-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 16px;
}

.ai-result-actions {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  padding-top: 16px;

  border-top:
    1px solid #e3ebf2;
}

.ai-result-actions button {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  flex:
    1 1 150px;
}


/* ---------- ADD TO SESSION ---------- */

.ai-add-session-panel {
  margin-top: 20px;

  padding: 18px;

  border:
    1px solid #d9e6f1;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #f4f1ff
    );
}

.ai-add-session-panel h3 {
  margin:
    5px 0 13px;

  color:
    var(--brand-blue-dark);
}

.ai-session-add-actions {
  display: flex;

  justify-content:
    flex-end;

  gap: 9px;

  margin-top: 13px;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1050px) {

  .ai-generator-layout {
    grid-template-columns: 1fr;
  }

  #aiGeneratorEmpty {
    min-height: 300px;
  }

}


@media (max-width: 700px) {

  .ai-material-overlay {
    padding: 0;
  }

  .ai-material-window {
    max-height: 100vh;

    min-height: 100vh;

    border-radius: 0;

    padding: 18px;
  }

  .ai-material-window-header h2 {
    font-size: 27px;
  }

  .ai-choice-three {
    grid-template-columns: 1fr;
  }

  .ai-generator-fields {
    grid-template-columns: 1fr;
  }

  .ai-activity-info {
    grid-template-columns: 1fr;
  }

  .ai-draft-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-result-actions,
  .ai-result-adjustments {
    flex-direction: column;
  }

  .ai-result-actions button,
  .ai-result-adjustments button {
    width: 100%;
  }

  .ai-session-add-actions {
    flex-direction: column-reverse;
  }

  .ai-session-add-actions button {
    width: 100%;
  }

}
/* =========================================================
   COMMUNICATION WORKSPACE — AUTH
   ========================================================= */

.cw-auth-screen {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 28px;

  overflow-y: auto;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(255, 220, 233, 0.75),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 8%,
      rgba(217, 239, 255, 0.85),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 90%,
      rgba(213, 244, 234, 0.75),
      transparent 27%
    ),
    #f8faff;

  z-index: 999999;
}

.cw-auth-card {
  width: min(
    480px,
    100%
  );

  padding: 34px;

  border: 1px solid #dce6f0;
  border-radius: 30px;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  box-shadow:
    0 28px 80px
    rgba(
      34,
      60,
      94,
      0.16
    );
}

.cw-auth-card .cw-auth-back {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 36px;
  margin: 0 0 14px;
  padding: 7px 12px;
  border: 1px solid #d1e2f4;
  border-radius: 999px;
  background: #f3f8ff;
  color: #275d96;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.cw-auth-card .cw-auth-back:hover,
.cw-auth-card .cw-auth-back:focus-visible {
  background: #e4f0fc;
  border-color: #96bde0;
  outline-offset: 2px;
}

.cw-auth-brand {
  text-align: center;
  margin-bottom: 25px;
}

.cw-auth-brand h1 {
  margin: 5px 0;

  color:
    var(--brand-blue-dark);

  font-size: 38px;

  letter-spacing: -1px;
}

.cw-auth-brand p {
  margin: 0;

  color: #718596;
}

.cw-auth-tabs {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 4px;

  padding: 4px;

  margin-bottom: 22px;

  border-radius: 16px;

  background: #eef4fa;
}

.cw-auth-tabs button {
  min-height: 44px;

  border: 0;
  border-radius: 13px;

  background: transparent;

  color: #60768a;

  font-weight: 800;
}

.cw-auth-tabs button.active {
  background: #ffffff;

  color:
    var(--brand-blue-dark);

  box-shadow:
    0 4px 12px
    rgba(
      43,
      72,
      110,
      0.08
    );
}

.cw-auth-form label {
  display: block;

  margin: 14px 0 7px;

  color: #344d62;

  font-size: 13px;

  font-weight: 800;
}

.cw-auth-form input {
  min-height: 48px;
}

.cw-auth-submit {
  width: 100%;

  min-height: 50px;

  margin-top: 22px;
}

.cw-auth-link {
  width: 100%;

  margin-top: 12px;

  border: 0;

  background: transparent;

  color: #4382bd;

  font-size: 13px;

  font-weight: 700;
}

.cw-auth-message {
  margin-bottom: 16px;

  padding: 13px 15px;

  border-radius: 14px;

  font-size: 13px;

  line-height: 1.45;
}

.cw-auth-message.error {
  border: 1px solid #f0ced6;

  background: #fff2f5;

  color: #a14c67;
}

.cw-auth-message.success {
  border: 1px solid #cce9e0;

  background: #eefaf6;

  color: #277c72;
}

.cw-auth-demo-note {
  display: grid;

  gap: 3px;

  margin-top: 24px;

  padding: 14px 15px;

  border: 1px solid #e5def4;
  border-radius: 15px;

  background: #f8f5ff;

  color: #6c6480;

  font-size: 12px;

  line-height: 1.45;
}

.cw-auth-demo-note strong {
  color: #6557a1;
}

.cw-logout-button {
  width: 100%;

  margin-top: 12px;

  padding: 10px 12px;

  border: 1px solid #dce6f0;
  border-radius: 12px;

  background: #ffffff;

  color: #61778d;

  font-weight: 700;
}

.cw-logout-button:hover {
  background: #f5f8fc;

  color:
    var(--brand-blue-dark);
}
 /* =========================================================
   MODAL BACKDROP CLICK FIX
   ========================================================= */

/* Hidden modals must not block anything */
.modal-backdrop {
  pointer-events: none !important;
  visibility: hidden;
}

/* Only the currently open modal can receive clicks */
.modal-backdrop.show {
  pointer-events: auto !important;
  visibility: visible;
}

/* Keep open modal above the page */
.modal-backdrop.show {
  z-index: 500000 !important;
}

/* Modal itself remains clickable */
.modal-backdrop.show .modal {
  position: relative;
  z-index: 500001 !important;
  pointer-events: auto !important;
}

/* Form controls and buttons remain clickable */
.modal-backdrop.show button,
.modal-backdrop.show input,
.modal-backdrop.show select,
.modal-backdrop.show textarea {
  pointer-events: auto !important;
}
/* =========================================
   SECURE WORKSPACE LOADING
   ========================================= */

#cwWorkspaceLoading {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;

  background:
    rgba(248, 251, 255, 0.98);

  backdrop-filter:
    blur(8px);
}


.cw-workspace-loading-card {
  min-width: 280px;

  padding: 34px 40px;

  border:
    1px solid #dce8f5;

  border-radius:
    24px;

  background: white;

  box-shadow:
    0 20px 60px
    rgba(30, 73, 120, 0.14);

  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  font-size: 18px;
}


.cw-workspace-loading-card strong {
  color: #12478e;

  font-size: 20px;
}


.cw-workspace-loading-card span {
  color: #6f8195;

  font-size: 14px;
}


.cw-workspace-spinner {
  width: 34px;
  height: 34px;

  margin-bottom: 8px;

  border:
    4px solid #e5eef8;

  border-top-color:
    #3c97e8;

  border-radius: 50%;

  animation:
    cwWorkspaceSpin
    0.8s linear infinite;
}


@keyframes cwWorkspaceSpin {

  to {
    transform:
      rotate(360deg);
  }

}
/* =========================================================
   TEAM SCREEN
   ========================================================= */

.team-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.team-page-header h2 {
  margin: 4px 0 6px;
}

.team-workspace-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  margin-bottom: 26px;
  border: 1px solid #dce8ef;
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      #eef8fb,
      #f8f5ff
    );
}

.team-workspace-card h3 {
  margin: 5px 0 0;
  color: #194d72;
  font-size: 22px;
}

.team-workspace-label {
  color: #648398;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.team-member-count {
  padding: 8px 13px;
  border-radius: 999px;
  background: white;
  color: #41677e;
  font-size: 13px;
  font-weight: 700;
}

.team-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.team-section-heading h3 {
  margin: 0 0 4px;
}

.team-member-card {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid #dce6eb;
  border-radius: 18px;
  background: white;
  box-shadow:
    0 8px 24px rgba(42, 73, 92, 0.06);
}

.team-member-main {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.team-member-avatar {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: #e8f4f7;
  color: #2e6f83;
  font-size: 20px;
  font-weight: 800;
}

.team-member-identity {
  min-width: 0;
  flex: 1;
}

.team-member-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.team-member-name-row h3 {
  margin: 0;
  font-size: 18px;
}

.team-member-role {
  margin-top: 4px;
  color: #527080;
  font-size: 14px;
  font-weight: 600;
}

.team-member-email {
  overflow: hidden;
  margin-top: 3px;
  color: #7b8d96;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-you-badge,
.team-owner-badge,
.team-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.team-you-badge {
  background: #eef1ff;
  color: #6467a8;
}

.team-owner-badge {
  background: #fff1dc;
  color: #9b681f;
}

.team-status-badge.active {
  background: #eaf7ee;
  color: #34764a;
}

.team-status-badge.inactive {
  background: #f1f2f3;
  color: #777f84;
}

.team-permissions {
  padding: 16px 20px 20px;
  border-top: 1px solid #edf1f3;
  background: #fbfcfd;
}

.team-permissions-title {
  margin-bottom: 10px;
  color: #526b78;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.team-permission-chip {
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf7f2;
  color: #397159;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 700px) {
  .team-page-header,
  .team-workspace-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-member-main {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .team-status-badge {
    margin-left: 63px;
  }
}
/* =========================================================
   TEAM INVITATION MODAL
   ========================================================= */

.team-invite-modal {
  width: min(620px, calc(100vw - 30px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.team-invite-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.team-invite-heading h3 {
  margin: 4px 0 6px;
  font-size: 23px;
}

.team-modal-close {
  padding: 2px 8px;
  border: 0;
  background: transparent;
  color: #70828c;
  font-size: 30px;
  line-height: 1;
}

.team-invite-permissions {
  padding: 17px;
  margin-top: 18px;
  border: 1px solid #dfe9ed;
  border-radius: 16px;
  background: #f8fbfc;
}

.team-permission-heading {
  color: #294f62;
  font-size: 15px;
  font-weight: 800;
}

.team-invite-permissions p {
  margin: 4px 0 14px;
}

.team-permission-checkboxes {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.team-permission-checkboxes label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #e1e9ed;
  border-radius: 11px;
  background: white;
  color: #3f5966;
  font-size: 13px;
  font-weight: 600;
}

.team-permission-checkboxes input {
  width: 17px;
  height: 17px;
  accent-color: #477d8c;
}

.team-invite-message {
  padding: 11px 13px;
  margin-bottom: 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
}

.team-invite-message.error {
  border: 1px solid #efd0d0;
  background: #fff1f1;
  color: #a43d3d;
}

.team-invite-message.success {
  border: 1px solid #cde7d5;
  background: #eef9f1;
  color: #34754b;
}

@media (max-width: 600px) {
  .team-permission-checkboxes {
    grid-template-columns: 1fr;
  }
}
/* ---------- INVITED ACCOUNT SETUP ---------- */

.cw-invitation-setup-card {
  width: min(520px, calc(100vw - 30px));
}

.cw-invitation-setup-card
.cw-auth-form {
  margin-top: 22px;
}

/* ---------- TRIAL / SUBSCRIPTION ACCESS ---------- */

.cw-subscription-screen {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(233, 243, 245, 0.98),
      rgba(246, 241, 248, 0.98)
    );
}

.cw-subscription-card {
  width: min(520px, 100%);
  padding: 38px;
  border: 1px solid #d8e3e6;
  border-radius: 24px;
  background: white;
  box-shadow:
    0 24px 70px rgba(34, 48, 54, 0.18);
  text-align: center;
}

.cw-subscription-card h1 {
  margin: 12px 0 10px;
  color: #294f62;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.12;
}

.cw-subscription-card p {
  margin: 0 auto 20px;
  max-width: 430px;
  color: #60747d;
  font-size: 16px;
  line-height: 1.55;
}

.cw-subscription-card .primary {
  width: 100%;
  margin-top: 20px;
}

.cw-subscription-notice {
  padding: 14px;
  border: 1px solid #d7e8ec;
  border-radius: 13px;
  background: #f1f8f9;
  color: #47707b;
  font-size: 13px;
  line-height: 1.45;
}

.cw-trial-status-badge {
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid #cfe3e7;
  border-radius: 10px;
  background: #edf7f8;
  color: #315d68;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* ---------- SCHOOL / ADULT WORKSPACE ---------- */

.cw-practice-mode-control {
  margin-bottom: 12px;
  padding: 11px;
  border: 1px solid #d8e5e8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.cw-practice-mode-control label {
  display: block;
  margin-bottom: 6px;
  color: #3f5966;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cw-practice-mode-control select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #cfdee2;
  border-radius: 9px;
  background: white;
  color: #294f62;
  font-weight: 700;
}

#adultProfileFields {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #dfe9ed;
}

#adultProfileFields textarea {
  min-height: 88px;
  resize: vertical;
}

.adult-clinical-profile {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #dfe9ed;
}

.adult-clinical-profile h3 {
  margin: 0 0 14px;
  color: #294f62;
}

.profile-item-wide {
  grid-column: 1 / -1;
}

body[data-practice-mode="adult"]
.clients-kicker::after {
  content: " \2022  ADULT COMMUNICATION";
}
/* ---------- SUBSCRIPTION PLAN CHOOSER ---------- */

.cw-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(680px, 100%);
  margin: 22px auto;
}

.cw-plan-card {
  padding: 20px;
  border: 1px solid #d7e2ef;
  border-radius: 20px;
  background: #fff;
  text-align: left;
}

.cw-plan-card h2,
.cw-plan-card p {
  margin: 0 0 12px;
}

.cw-plan-card button {
  width: 100%;
  margin-top: 10px;
}

.cw-checkout-message {
  min-height: 24px;
  color: #a32f45;
  font-weight: 700;
}

.cw-manage-billing-button {
  width: 100%;
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid #bfd4e8;
  border-radius: 14px;
  background: #f4f9fd;
  color: #174c88;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.cw-manage-billing-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

@media (max-width: 700px) {
  .cw-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   2026 ACCESSIBLE VISUAL AND WORKFLOW ENHANCEMENTS
   ========================================================= */

:root {
  --cw-font: "Avenir Next", Avenir, "Nunito Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cw-ink: #20323d;
  --cw-blue: #245fae;
  --cw-soft-blue: #eef6ff;
  --cw-shadow: 0 18px 45px rgba(44, 76, 111, .13);
}

html, body, button, input, select, textarea {
  font-family: var(--cw-font);
}

body {
  color: var(--cw-ink);
  letter-spacing: -.008em;
}

button, input, select, textarea {
  font-size: 1rem;
}

.sidebar-brand {
  cursor: pointer;
  border-radius: 24px;
  transition: background .2s ease, transform .2s ease;
}

.sidebar-brand:hover,
.sidebar-brand:focus-visible {
  background: rgba(236, 246, 255, .72);
  outline: 3px solid rgba(67, 145, 222, .22);
}

.cw-topbar {
  min-height: 68px;
  margin: 18px 28px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 20;
}

.cw-global-search {
  width: min(540px, 54vw);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid #d8e7f2;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #617889;
  box-shadow: 0 8px 22px rgba(65, 93, 120, .08);
  text-align: left;
}

.cw-global-search:hover { border-color: #91bce5; }
.cw-top-actions { display: flex; align-items: center; gap: 10px; }

.cw-icon-button,
.cw-account-button {
  min-height: 44px;
  border: 1px solid #d8e7f2;
  background: #fff;
  color: #24465f;
  border-radius: 999px;
  position: relative;
}

.cw-icon-button { width: 46px; padding: 0; }
.cw-account-button { display: flex; align-items: center; gap: 9px; padding: 5px 15px 5px 6px; font-weight: 750; }
.cw-account-button > span:first-child { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #15467e; background: linear-gradient(135deg,#dff8f2,#eae6ff); }

.cw-badge { position: absolute; right: -4px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 999px; background: #d84f67; color: white; font-size: 11px; font-weight: 800; }
.cw-welcome-greeting { color: #2d71bd; font-weight: 800; font-size: .95rem; letter-spacing: .04em; margin-bottom: 5px; }

.cw-popover {
  position: fixed;
  right: 34px;
  top: 78px;
  width: min(390px, calc(100vw - 32px));
  max-height: 70vh;
  overflow: auto;
  z-index: 10020;
  border: 1px solid #d8e5ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--cw-shadow);
}

.cw-popover-heading { padding: 18px; display: flex; justify-content: space-between; border-bottom: 1px solid #e7eef4; }
.cw-popover-heading button, .cw-modal-heading > button { border: 0; background: transparent; font-size: 1.7rem; color: #657985; }
.cw-popover-heading .cw-mark-read { font-size: .76rem; color: #2f70ad; font-weight: 800; }
.cw-notification-item { width: 100%; border: 0; border-bottom: 1px solid #edf2f6; background: white; text-align: left; padding: 17px 18px; color: #2d4454; }
.cw-notification-item:hover { background: #f3f9ff; }
.cw-empty-compact { padding: 24px; color: #6c7e89; text-align: center; }

.cw-enhancement-modal { z-index: 10010; padding: 24px; }
.cw-enhancement-modal .cw-large-modal { width: min(920px, 96vw); max-height: 91vh; overflow: auto; padding: 0; border-radius: 26px; box-shadow: var(--cw-shadow); }
.cw-modal-heading { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 26px 28px 20px; background: rgba(255,255,255,.97); border-bottom: 1px solid #e7eef4; }
.cw-modal-heading h2 { margin: 3px 0 0; }
.cw-modal-heading p { margin-bottom: 0; }
.cw-enhancement-modal .modal > label,
.cw-enhancement-modal .modal > .cw-detail-grid,
.cw-enhancement-modal .modal > .cw-help-results,
.cw-enhancement-modal .modal > .cw-goal-bank,
.cw-enhancement-modal .modal > .cw-screener-grid,
.cw-enhancement-modal .modal > .cw-account-card,
.cw-enhancement-modal .modal > .cw-game-setup,
.cw-enhancement-modal .modal > #cwGameBoard,
.cw-enhancement-modal .modal > .cw-print-plan,
.cw-enhancement-modal .modal > .empty { margin-left: 28px; margin-right: 28px; }
.cw-modal-actions { padding: 22px 28px 28px; }

.cw-account-card { display: flex; align-items: center; gap: 16px; padding: 22px; margin-top: 24px; border-radius: 18px; background: linear-gradient(135deg,#eef8ff,#fbf0f6); }
.cw-account-card h3, .cw-account-card p { margin: 0; }
.cw-account-avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: white; color: #1b5b9c; font-size: 1.4rem; font-weight: 900; }
.cw-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.cw-detail-grid label, .cw-detail-grid > div { display: flex; flex-direction: column; gap: 7px; padding: 16px; border: 1px solid #dfe9f1; border-radius: 15px; }
.cw-detail-grid span { color: #6a7d89; font-size: .86rem; }

.cw-help-search { margin-top: 26px !important; position: relative; display: flex !important; align-items: center; gap: 10px; }
.cw-help-search input { width: 100%; }
.cw-help-results { padding: 16px 0 28px; }
.cw-help-results button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px; background: #fff; border: 1px solid #e0eaf2; border-radius: 14px; margin-bottom: 10px; text-align: left; color: #29485f; }

.cw-client-goals-create { border-top: 1px solid #dfe9f0; margin-top: 22px; padding-top: 20px; }
.cw-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cw-file-button { display: inline-flex; align-items: center; cursor: pointer; }
.cw-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.student-file-tabs { overflow-x: auto; scrollbar-width: thin; }
.student-file-tab { white-space: nowrap; }
.cw-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.cw-two-column .card > label { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; font-weight: 700; }
.cw-note-list, .cw-file-list { display: grid; gap: 10px; margin-top: 22px; }
.cw-note-list article, .cw-file-list article, .cw-document-row { border: 1px solid #dfe9f1; border-radius: 15px; padding: 15px; background: #fff; }
.cw-note-list article p { white-space: pre-wrap; }
.cw-note-list article button { border: 0; background: transparent; color: #a8444b; padding: 0; }
.cw-upload-zone { min-height: 110px; display: grid !important; place-items: center; padding: 18px; border: 2px dashed #b9d2e7; border-radius: 16px; background: #f5faff; text-align: center; cursor: pointer; }
.cw-upload-zone input { margin-top: 12px; }
.cw-file-list article { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.cw-file-list small { display: block; color: #71838d; }
.cw-file-list button { border: 0; background: #eef6fc; color: #28649e; border-radius: 9px; padding: 7px 10px; }

.cw-document-search { width: min(280px,100%); }
.cw-document-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; }
.cw-document-row p { margin: 5px 0 0; color: #647986; }
.cw-status { display: inline-flex; margin-left: 9px; border-radius: 999px; padding: 4px 9px; background: #edf3f7; color: #4e6878; text-transform: capitalize; font-size: .75rem; font-weight: 800; }
.cw-status.approved { background: #e4f7ee; color: #217253; }
.cw-status.submitted { background: #eaf1ff; color: #275ca8; }
.cw-status.changes_requested { background: #fff1e0; color: #975a19; }

.cw-resource-hub { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 22px 0 26px; }
.cw-resource-hub button { min-height: 145px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 19px; border: 1px solid #dbe7f0; border-radius: 20px; background: linear-gradient(145deg,#fff,#f4faff); color: #24475f; text-align: left; }
.cw-resource-hub button:nth-child(2) { background: linear-gradient(145deg,#fff,#f8f1ff); }
.cw-resource-hub button:nth-child(3) { background: linear-gradient(145deg,#fff,#effaf6); }
.cw-resource-hub button:nth-child(4) { background: linear-gradient(145deg,#fff,#fff5ed); }
.cw-resource-hub button > span { font-size: 1.5rem; color: #347fc1; }
.cw-resource-hub small { color: #6a7e8a; line-height: 1.4; }

.cw-goal-bank { padding: 22px 0 28px; display: grid; gap: 14px; }
.cw-goal-bank article { border: 1px solid #dfe8f0; border-radius: 16px; padding: 16px; }
.cw-goal-bank article > span { color: #3371ad; font-weight: 800; }
.cw-goal-bank textarea { width: 100%; min-height: 105px; margin: 10px 0; }
.cw-screener-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 22px 0; }
.cw-screener-grid label { border: 1px solid #dfe8f0; border-radius: 16px; padding: 14px; }
.cw-screener-grid label > span { display: block; font-weight: 800; margin-bottom: 8px; }
.cw-screener-grid select, .cw-screener-grid textarea { width: 100%; margin-top: 8px; }

.cw-game-setup { padding: 24px 0; display: grid; gap: 14px; }
.cw-game-setup label { display: grid; gap: 7px; }
.cw-game-card { margin: 10px 28px 30px; min-height: 310px; display: grid; place-items: center; align-content: center; gap: 15px; padding: 32px; border-radius: 28px; background: linear-gradient(145deg,#eff9ff,#fff2e8,#f4efff); text-align: center; }
.cw-game-card small { letter-spacing: .2em; color: #3877b3; font-weight: 900; }
.cw-game-card strong { font-size: clamp(2rem,6vw,4.2rem); color: #154781; }
.cw-print-plan { display: flex !important; align-items: center; gap: 14px; padding: 15px; margin-top: 12px; border: 1px solid #dce7ef; border-radius: 14px; }
.cw-print-plan span { display: block; color: #6a7e89; }

/* Consistent school grade colors replace random client-card colors. */
.client-card[data-grade="Preschool"], .student-card[data-grade="Preschool"] { border-left: 7px solid #f39ab5; }
.client-card[data-grade="Kindergarten"], .student-card[data-grade="Kindergarten"] { border-left: 7px solid #f5b66d; }
.client-card[data-grade="1st Grade"], .student-card[data-grade="1st Grade"] { border-left: 7px solid #e4cf62; }
.client-card[data-grade="2nd Grade"], .student-card[data-grade="2nd Grade"] { border-left: 7px solid #74cba5; }
.client-card[data-grade="3rd Grade"], .student-card[data-grade="3rd Grade"] { border-left: 7px solid #6ec8d9; }
.client-card[data-grade="4th Grade"], .student-card[data-grade="4th Grade"] { border-left: 7px solid #78aee6; }
.client-card[data-grade="5th Grade"], .student-card[data-grade="5th Grade"] { border-left: 7px solid #a496e4; }
.client-card[data-grade="Middle School"], .student-card[data-grade="Middle School"] { border-left: 7px solid #c78bd4; }
.client-card[data-grade="High School"], .student-card[data-grade="High School"] { border-left: 7px solid #df879a; }

.cw-toast { position: fixed; left: 50%; bottom: 28px; z-index: 20000; transform: translate(-50%,20px); padding: 13px 20px; border-radius: 999px; background: #173f65; color: white; box-shadow: var(--cw-shadow); opacity: 0; pointer-events: none; transition: .2s ease; }
.cw-toast.show { opacity: 1; transform: translate(-50%,0); }

.cw-personal-goal-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end; margin: 16px 0; }
.cw-personal-goal-entry textarea { min-height: 84px; }
.cw-personal-goals ul { display: grid; gap: 10px; padding-left: 0; list-style: none; }
.cw-personal-goals li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #dbe6f2; border-radius: 14px; background: #fff; }

/* 2026 navigation and visual-polish upgrade */
.cw-nav-section { display: grid; gap: 4px; }
.sidebar-nav .cw-nav-heading { padding: 12px 8px 5px; margin-top: 3px; border-radius: 8px; color: #7890a7; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; justify-content: space-between; }
.sidebar-nav .cw-nav-heading:hover { background: transparent; transform: none; color: #3c648e; }
.cw-nav-heading span:last-child { font-size: 16px; transition: transform .2s ease; }
.cw-nav-section.collapsed .cw-nav-heading span:last-child { transform: rotate(-90deg); }
.cw-nav-items { display: grid; gap: 3px; }
.cw-nav-section.collapsed .cw-nav-items { display: none; }
.cw-nav-items > button { padding-left: 18px; }

.cw-topbar { position: sticky; top: 0; z-index: 900; backdrop-filter: blur(14px); background: rgba(255,255,255,.9); }
.cw-mode-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #edf5ff; color: #2668a9; font-size: 12px; font-weight: 850; white-space: nowrap; }
.cw-adult-mode .cw-mode-badge { background: #e6f7f1; color: #23765e; }
.cw-breadcrumbs { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; padding: 0 4px; border: 0; background: transparent; overflow: visible; font-size: 13px; color: #71879a; }
.cw-breadcrumbs button { padding: 4px; border: 0; background: transparent; color: #3975ae; font-weight: 750; }
.cw-breadcrumbs button:hover { text-decoration: underline; }
.cw-breadcrumbs strong { color: #334b60; }

.cw-today-hub { margin: 20px 0 28px; padding: 24px; border: 1px solid #dce8f1; border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(43,75,107,.08); }
.cw-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.cw-section-heading span { color: #3477b8; font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.cw-section-heading h2 { margin: 4px 0 0; color: #233f58; font-size: 24px; }
.cw-today-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.cw-today-actions button { display: grid; gap: 7px; min-height: 112px; padding: 17px; border: 1px solid #dce8f2; border-radius: 18px; background: linear-gradient(145deg,#fff,#f8fbff); color: #29475f; text-align: left; }
.cw-today-actions button:hover { transform: translateY(-2px); border-color: #9cc9ed; box-shadow: 0 10px 22px rgba(49,100,145,.1); }
.cw-today-actions strong { font-size: 17px; color: #174f88; }
.cw-today-actions span { color: #6f8395; line-height: 1.4; }

.cw-client-quick-actions { position: sticky; top: 78px; z-index: 110; display: flex; justify-content: flex-end; gap: 10px; margin: -4px 0 16px; padding: 10px 12px; border: 1px solid #e0e9f1; border-radius: 16px; background: rgba(255,255,255,.93); backdrop-filter: blur(12px); box-shadow: 0 8px 20px rgba(38,66,92,.06); }
.schedule-weekday-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 8px; }
.schedule-weekday-options label { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #d7e4ef; border-radius: 12px; background: #f9fcff; font-weight: 700; }
.schedule-weekday-options input { width: 18px; height: 18px; margin: 0; }
.cw-action-status { min-height: 20px; color: #567486; font-size: 13px; }
button:disabled { cursor: wait; opacity: .65; }

.cw-school-mode .screen .page-header { border-left: 4px solid #8ebcf0; padding-left: 14px; }
.cw-adult-mode .screen .page-header { border-left: 4px solid #77cbb0; padding-left: 14px; }
label { color: #314b61; font-weight: 700; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 3px solid rgba(59,142,219,.32); outline-offset: 2px; }
.danger-btn, button.danger-btn { color: #a94444; border-color: #eabcbc; background: #fffafa; }

.cw-session-focus .workspace-sidebar, .cw-session-focus .mobile-header, .cw-session-focus .cw-topbar, .cw-session-focus .cw-breadcrumbs, .cw-session-focus .privacy { display: none !important; }
.cw-session-focus .app { grid-template-columns: minmax(0,1fr); max-width: 1280px; }
.cw-session-focus main { grid-column: 1; padding-top: 24px; }
.cw-exit-focus { margin-bottom: 14px; }

@media (max-width: 900px) {
  .cw-resource-hub { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cw-two-column, .cw-detail-grid, .cw-screener-grid { grid-template-columns: 1fr; }
  .cw-topbar { margin-inline: 16px; }
  .cw-personal-goal-entry { grid-template-columns: 1fr; }
  .cw-today-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cw-mode-badge { display: none; }
  .cw-client-quick-actions { position: static; flex-wrap: wrap; justify-content: stretch; }
  .cw-client-quick-actions button { flex: 1; }
}

@media (max-width: 560px) {
  .cw-today-actions { grid-template-columns: 1fr; }
  .cw-section-heading { align-items: flex-start; flex-direction: column; }
}

@media print {
  .cw-topbar, .workspace-sidebar, .modal-actions, .cw-modal-heading button { display: none !important; }
}

/* Mobile navigation drawer: keep every workspace section reachable on phones. */
.cw-mobile-menu-button,
.cw-mobile-menu-close,
.cw-mobile-nav-backdrop {
  display: none;
}

@media (max-width: 700px) {
  body.cw-mobile-nav-open {
    overflow: hidden;
  }

  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 12000;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
  }

  .mobile-header > div:first-child {
    min-width: 0;
    flex: 1;
  }

  .mobile-header h1 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .mobile-header .demo-badge {
    display: none;
  }

  .cw-mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 14px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
  }

  .workspace-sidebar {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 15000;
    width: min(86vw, 330px);
    height: 100dvh;
    padding: 58px 18px 24px;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
    box-shadow: 18px 0 48px rgba(23, 55, 84, .24);
    transform: translateX(-105%);
    transition: transform .24s ease;
  }

  body.cw-mobile-nav-open .workspace-sidebar {
    transform: translateX(0);
  }

  .workspace-sidebar .sidebar-brand {
    display: none;
  }

  .workspace-sidebar .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: visible;
  }

  .workspace-sidebar .sidebar-nav > button,
  .workspace-sidebar .cw-nav-items > button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #315d89;
    text-align: left;
  }

  .workspace-sidebar .sidebar-nav button.active {
    color: #15549c;
    background: linear-gradient(90deg, #e9f4ff, #eef1ff);
  }

  .workspace-sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
    text-align: center;
  }

  .cw-mobile-menu-close {
    display: grid;
    position: absolute;
    top: 12px;
    right: 14px;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #edf6ff;
    color: #245f98;
    font-size: 1.8rem;
  }

  .cw-mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 14000;
    border: 0;
    background: rgba(18, 35, 52, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
  }

  body.cw-mobile-nav-open .cw-mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .cw-topbar {
    margin: 12px 16px 4px;
    flex-wrap: wrap;
  }

  .cw-global-search {
    width: 100%;
    order: 2;
  }

  .cw-top-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ---------- CLIENT + CALENDAR SUMMARY CARDS ---------- */

.clients-summary-stats {
  max-width: 620px;
  margin: 0 0 20px;
}

.clients-summary-stats .stat {
  min-height: 88px;
  padding: 16px 20px;
}

.calendar-service-attention {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 18px 0 22px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #f5fbff, #fff8fc);
  border-color: #cfdfef;
}

.calendar-service-attention strong {
  display: block;
  margin-top: 5px;
  color: var(--brand-blue-dark);
  font-size: 17px;
}

@media (max-width: 600px) {
  .clients-summary-stats {
    grid-template-columns: 1fr;
  }

  .calendar-service-attention {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ---------- COMPACT HOME WORKSPACE LAYOUT ---------- */

.home-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(500px, 1.18fr);
  align-items: stretch;
  gap: 18px;
  margin-top: 20px;
}

.home-dashboard-left,
.home-dashboard-right {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  min-width: 0;
}

#home .cw-today-hub {
  margin: 0;
  padding: 20px;
}

#home .cw-section-heading {
  margin-bottom: 14px;
}

#home .cw-section-heading h2 {
  margin: 0;
  font-size: 25px;
}

#home .cw-section-heading .secondary {
  padding: 9px 12px;
  font-size: 13px;
}

#home .cw-today-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#home .cw-today-actions button {
  min-height: 94px;
  padding: 14px;
  border-radius: 16px;
}

#home .cw-today-actions strong {
  font-size: 15px;
}

#home .cw-today-actions span {
  font-size: 13px;
}

#home .workspace-shortcuts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

#home .workspace-shortcut {
  min-height: 132px;
}

.home-upcoming-panel,
#home .workspace-message {
  min-height: 218px;
}

#home .workspace-message {
  width: 100%;
}

@media (max-width: 1050px) {
  .home-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .home-dashboard-left,
  .home-dashboard-right {
    grid-template-rows: auto;
  }

  #home .workspace-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #home .cw-today-actions,
  #home .workspace-shortcuts {
    grid-template-columns: 1fr;
  }

  #home .cw-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ---------- EMBLEM-COLOR HOME PANELS ---------- */

#home .cw-today-hub {
  background:
    linear-gradient(
      145deg,
      #eef8ff,
      #e7f2ff
    );
  border-color: #bddcf2;
  box-shadow: 0 14px 34px rgba(63, 126, 180, 0.10);
}

#home .home-upcoming-panel {
  background:
    linear-gradient(
      145deg,
      #fff7fc,
      #f4efff
    );
  border-color: #dfd2f2;
  box-shadow: 0 14px 34px rgba(126, 93, 167, 0.09);
}

#home .home-upcoming-panel .dashboard-iep-item {
  background: transparent;
}

#home .home-upcoming-panel .dashboard-iep-item:hover,
#home .home-upcoming-panel .dashboard-iep-item:focus-visible {
  background: rgba(255, 255, 255, 0.48);
}


/* ---------- SHARED PROFILE PICTURES ---------- */

.team-member-avatar,
.cw-account-avatar,
.cw-account-button > span:first-child {
  overflow: hidden;
}

.team-member-avatar img,
.cw-account-avatar img,
.cw-account-button > span:first-child img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.team-member-avatar.has-profile-picture,
.cw-account-avatar.has-profile-picture,
.cw-account-button > span:first-child.has-profile-picture {
  padding: 0;
  background: #e8f4f7;
}

.cw-account-profile-card {
  align-items: flex-start;
}

.cw-account-profile-card .cw-account-avatar {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  font-size: 1.65rem;
}

.cw-account-profile-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.cw-photo-picker {
  display: inline-flex;
  margin-top: 5px;
  cursor: pointer;
}

.cw-profile-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.cw-photo-help {
  color: #6a7d89;
  font-size: 12px;
}

@media (max-width: 560px) {
  .cw-account-profile-card {
    flex-direction: column;
  }
}


/* ---------- EDITABLE CLINICAL PROGRESS REPORT ---------- */

.progress-report-builder-window,
.progress-report-preview-window {
  width: min(1120px, 96vw);
  max-height: 94vh;
}

.progress-report-builder-body {
  display: grid;
  gap: 18px;
  padding: 24px 28px 30px;
  overflow: auto;
}

.progress-report-form-section,
.progress-report-output-section {
  border: 1px solid #dce8f3;
  border-radius: 20px;
  background: #fff;
  padding: 22px;
}

.progress-report-form-section:nth-child(4n + 1) {
  background: linear-gradient(145deg, #fff, #f4faff);
}

.progress-report-form-section:nth-child(4n + 2) {
  background: linear-gradient(145deg, #fff, #fff5fa);
}

.progress-report-form-section:nth-child(4n + 3) {
  background: linear-gradient(145deg, #fff, #f2fbf7);
}

.progress-report-form-section:nth-child(4n + 4) {
  background: linear-gradient(145deg, #fff, #f6f2ff);
}

.progress-report-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 18px;
}

.progress-report-section-heading > span {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #e6f2ff;
  color: #1f62a8;
  font-weight: 900;
}

.progress-report-section-heading h3,
.progress-report-section-heading p {
  margin: 0;
}

.progress-report-section-heading p {
  margin-top: 4px;
  color: #6c8090;
}

.progress-report-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.progress-report-form-section > label,
.progress-report-form-grid label,
.progress-report-goal-editor label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #29475f;
  font-weight: 750;
}

.progress-report-form-section > label + label {
  margin-top: 14px;
}

.progress-report-form-section textarea {
  min-height: 100px;
  resize: vertical;
}

.progress-report-goal-editors {
  display: grid;
  gap: 14px;
}

.progress-report-goal-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, .8fr) minmax(190px, .8fr);
  gap: 14px;
  padding: 17px;
  border: 1px solid #dfe8f1;
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
}

.progress-report-goal-editor p {
  margin: 6px 0 0;
  color: #647887;
  line-height: 1.5;
}

.progress-report-goal-note {
  grid-column: 1 / -1;
}

.progress-report-builder-actions,
.progress-report-preview-actions {
  position: sticky;
  bottom: 0;
  justify-content: flex-end;
  padding: 16px 0 0;
  background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
}

.progress-report-preview-actions {
  padding: 18px 28px 28px;
}

.progress-report-document {
  display: grid;
  gap: 18px;
  padding: 28px;
  overflow: auto;
  background: #f7fafc;
}

.progress-report-document-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 4px 2px 8px;
}

.progress-report-document-title h1 {
  margin: 5px 0 0;
  color: #173f7a;
  font-size: 28px;
}

.progress-report-document-title > div:last-child {
  display: flex;
  flex-direction: column;
  text-align: right;
  color: #647887;
}

.progress-report-output-section h2 {
  margin: 0 0 16px;
  color: #173f7a;
  font-size: 20px;
}

.progress-report-admin-grid,
.progress-report-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.progress-report-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.progress-report-admin-grid > div,
.progress-report-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: 12px;
  background: #f7fafc;
}

.progress-report-goals {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.progress-report-goal {
  margin: 0;
  box-shadow: none;
}

.progress-report-goal-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.progress-report-goal-heading h3 {
  margin: 5px 0 0;
  font-size: 17px;
}

.progress-report-status {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e9f7f2;
  color: #227b69;
  font-size: 12px;
  font-weight: 850;
}

.progress-report-baseline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0f7ff, #faf5ff);
}

.progress-report-baseline span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-report-baseline b {
  color: #477db4;
  font-size: 22px;
}

.progress-report-interpretation {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e4ecf3;
}

.progress-report-signature-line {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  margin-top: 42px;
  padding-top: 8px;
  border-top: 1px solid #8ba0b2;
}

@media (max-width: 800px) {
  .progress-report-form-grid,
  .progress-report-admin-grid,
  .progress-report-detail-grid,
  .progress-report-goal-editor {
    grid-template-columns: 1fr;
  }

  .progress-report-document-title,
  .progress-report-goal-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .progress-report-document-title > div:last-child {
    text-align: left;
  }
}


/* ---------- COMPACT THREE-COLUMN CLIENT CARDS ---------- */

#caseloadList .student-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

#caseloadList .student-card {
  display: block;
  width: 100%;
  height: 270px;
  min-height: 270px;
  padding: 17px 46px 17px 18px;
  overflow: hidden;
}

#caseloadList .student-card .initials {
  margin-bottom: 7px;
  font-size: 21px;
}

#caseloadList .student-tags {
  max-height: 58px;
  margin-bottom: 10px;
  overflow: hidden;
}

#caseloadList .area-tag {
  padding: 5px 9px;
  font-size: 11px;
}

#caseloadList .student-meta {
  font-size: 13px;
  line-height: 1.5;
}

#caseloadList .student-card .chevron,
#caseloadList .student-card .arrow {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 1120px) {
  #caseloadList .student-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #caseloadList .student-list {
    grid-template-columns: 1fr;
  }

  #caseloadList .student-card {
    height: auto;
    min-height: 240px;
  }
}


/* ---------- ADD CLIENT: MULTIPLE GOALS + DROP ZONE ---------- */

.cw-client-goals-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.cw-client-goals-heading h4,
.cw-client-goals-heading p {
  margin: 0;
}

.cw-client-goals-heading p {
  margin-top: 5px;
}

.cw-client-goal-drafts {
  display: grid;
  gap: 14px;
}

.cw-new-goal-entry {
  padding: 18px;
  border: 1px solid #dce8f2;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f8fbff);
}

.cw-new-goal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  color: #234c73;
}

.cw-remove-goal-draft {
  border: 0;
  background: transparent;
  color: #b24f63;
  font-weight: 750;
}

.cw-goal-drop-zone {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 150px;
  margin-top: 16px;
  padding: 22px;
  border: 2px dashed #aecce6;
  border-radius: 18px;
  background: #f4faff;
  color: #315d82;
  text-align: center;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.cw-goal-drop-zone.dragging {
  transform: translateY(-2px);
  border-color: #4c94ce;
  background: #e9f5ff;
}

.cw-goal-drop-zone > span {
  color: #6d8293;
}

.cw-goal-import-status {
  margin-top: 10px;
  font-weight: 700;
}

@media (max-width: 700px) {
  .cw-client-goals-heading {
    flex-direction: column;
  }
}


/* ---------- UNIFORM RESPONSIVE CLIENT GRID ---------- */

#caseloadList .grade-section {
  width: 100%;
  margin-bottom: 26px;
}

#caseloadList .student-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

#caseloadList .student-card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 245px;
  padding: 17px 14px 16px 17px;
  overflow: hidden;
}

#caseloadList .student-card > div:first-child {
  min-width: 0;
}

#caseloadList .student-card .initials {
  margin-bottom: 7px;
  font-size: 20px;
}

#caseloadList .student-tags {
  min-height: 25px;
  max-height: 54px;
  margin-bottom: 9px;
  overflow: hidden;
}

#caseloadList .student-meta {
  font-size: 13px;
  line-height: 1.5;
}

#caseloadList .student-card .chevron {
  position: static;
  align-self: center;
  transform: none;
  color: #718596;
  font-size: 22px;
  text-align: center;
}

@media (max-width: 1380px) {
  #caseloadList .student-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #caseloadList .student-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #caseloadList .student-list {
    grid-template-columns: 1fr;
  }

  #caseloadList .student-card {
    min-height: 225px;
  }
}


/* ---------- PROGRESS + CALENDAR WORKSPACE REFINEMENT ---------- */

.progress-page-heading {
  align-items: center;
  margin-bottom: 18px;
}

.progress-page-heading h2 {
  margin: 3px 0 0;
  color: var(--brand-blue-dark);
}

.progress-goal-list {
  display: grid;
  gap: 18px;
}

.progress-goal-bubble {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffff, #f7fbff);
}

.progress-goal-summary h3 {
  margin: 10px 0;
  color: #24384d;
  font-size: 17px;
  line-height: 1.5;
}

.progress-subgoal-bubbles,
.progress-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.progress-subgoal-bubbles span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef5fb;
  color: #41637f;
  font-size: 12px;
  font-weight: 750;
}

.progress-combined-chart {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #dce8f2;
  border-radius: 18px;
  background: #fff;
}

.progress-chart-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.progress-chart-heading span {
  color: #6e8293;
  font-size: 12px;
}

.progress-chart-legend {
  margin: 12px 0 5px;
}

.progress-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #526b7e;
  font-size: 12px;
  font-weight: 700;
}

.progress-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.progress-click-point {
  cursor: pointer;
}

.progress-click-point:hover circle,
.progress-click-point:focus circle {
  stroke-width: 6;
}

.progress-goal-empty {
  margin-top: 16px;
}

/* Weekly controls */
.calendar-header {
  align-items: center;
}

.calendar-add-button {
  margin-left: auto;
}

.calendar-week-nav {
  display: grid;
  grid-template-columns: 38px minmax(200px, auto) 38px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 8px 0 5px;
}

.calendar-week-arrow {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d7e4ef;
  border-radius: 50%;
  background: #fff;
  color: #2f6fb9;
  font-size: 22px;
  cursor: pointer;
}

.calendar-current-week {
  display: grid;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--brand-blue-dark);
  cursor: pointer;
}

.calendar-current-week strong {
  font-size: 22px;
}

.calendar-week-label {
  min-width: 0;
  color: #61788d;
  font-size: 13px;
  font-weight: 700;
}

.calendar-grid-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}

.calendar-weekend-toggle {
  padding: 5px 9px;
  border: 0;
  border-radius: 9px;
  background: #eef5fb;
  color: #49708f;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

#calendarGrid {
  gap: 10px;
}

#calendarGrid > .calendar-day {
  min-height: 220px;
  border-radius: 17px;
}

#calendarGrid > .calendar-day > h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  font-size: 14px;
}

#calendarGrid > .calendar-day > h3 span {
  color: #73879a;
  font-size: 11px;
  font-weight: 700;
}

#calendarGrid .calendar-events {
  padding: 7px;
}

#calendarGrid .calendar-event.calendar-session-chip,
#calendarGrid .calendar-event.calendar-dated-event {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin: 0 0 7px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  box-shadow: none;
}

#calendarGrid .event-title {
  color: #24466d;
  font-size: 13px;
  line-height: 1.25;
}

.calendar-mini-status,
#calendarGrid .calendar-plan-ready {
  margin: 0;
  color: #55718b;
  font-size: 10px;
  font-weight: 750;
}

#calendarGrid .calendar-color-blue {
  background: #e6f2ff;
  border-color: #bcd8f2;
}

#calendarGrid .calendar-color-lavender {
  background: #f0ebff;
  border-color: #d8ccf6;
}

#calendarGrid .calendar-color-pink {
  background: #ffeaf2;
  border-color: #f3cadb;
}

#calendarGrid .calendar-color-peach {
  background: #fff0e2;
  border-color: #f1d3b7;
}

#calendarGrid .calendar-color-yellow {
  background: #fff7d9;
  border-color: #eadc9c;
}

#calendarGrid .calendar-color-mint {
  background: #e5f7f1;
  border-color: #bfe2d7;
}

#calendarGrid .calendar-color-sky {
  background: #e8f6fb;
  border-color: #c3e1ec;
}

#calendarGrid .calendar-color-gray {
  background: #f1f4f6;
  border-color: #d9e0e5;
}

.makeup-section {
  margin-top: 24px;
  margin-bottom: 24px;
}

.monthly-calendar-section {
  margin-top: 0;
}

@media (max-width: 900px) {
  .progress-chart-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 700px) {
  .calendar-week-nav {
    grid-template-columns: 34px minmax(160px, auto) 34px;
  }

  .calendar-current-week strong {
    font-size: 19px;
  }
}


/* Babble Harbor illustrated button on the home dashboard */
.babble-harbor-home-card {
  display: block;
  width: min(100%, 720px);
  margin: 0 0 24px;
  border-radius: 22px;
  overflow: hidden;
  clip-path: inset(2px round 22px);
  text-decoration: none;
  line-height: 0;
  transition: transform 160ms ease, filter 160ms ease;
}
.babble-harbor-home-card:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 7px 12px rgba(42, 91, 119, .16));
}
.babble-harbor-home-card:focus-visible {
  outline: 3px solid #36a5b7;
  outline-offset: 4px;
}
.babble-harbor-home-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1946 / 472;
}
@media (prefers-reduced-motion: reduce) {
  .babble-harbor-home-card { transition: none; }
}

/* Team controls and the non-sticky Quick Help header */
.team-section-heading h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.team-member-count { display: inline-flex; align-items: center; letter-spacing: normal; }
.team-remove-button { color: #9b4e57; border-color: #e9cdd2; background: #fff8f9; }
.team-remove-button:hover { background: #ffedf0; border-color: #dbaeb7; }
.cw-topbar { position: relative; top: auto; }
.cw-profile-crop { margin: 16px 28px 0; padding: 18px; border: 1px solid #dfe9f1; border-radius: 18px; background: #f8fbff; }
.cw-profile-crop[hidden] { display: none; }
.cw-profile-crop h3 { margin: 0 0 4px; font-size: 1rem; }
.cw-profile-crop p { margin: 0 0 12px; color: #617889; }
.cw-profile-crop canvas { display: block; width: 240px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 14px; border-radius: 50%; border: 3px solid #b9d6eb; background: white; cursor: grab; touch-action: none; }
.cw-profile-crop canvas:active { cursor: grabbing; }
.cw-profile-crop label { display: flex; align-items: center; gap: 12px; }
.cw-profile-crop input[type=range] { flex: 1; }

#documentationApprovalSection[hidden] { display: none !important; }
#documentationApprovalSection .saved-session-card { margin: 12px 0; }

#studentGradeWrap[hidden], #studentSchoolAgeWrap[hidden], #studentAdultAgeWrap[hidden], #studentGradeOther[hidden] { display: none !important; }
#studentAdultAgeWrap label + input { margin-bottom: 12px; }

/* Calendar service-minute review */
.calendar-minute-review[hidden], #scheduleOtherIntervalField[hidden] { display: none !important; }
.calendar-minute-review { margin: 0 0 18px; padding: 20px 24px; }
.calendar-minute-review h3 { margin: 0 0 14px; }
.calendar-minute-review section + section { margin-top: 20px; }
.calendar-minute-review h4 { margin: 0 0 8px; }
.calendar-minute-client { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--border); }
.calendar-minute-client > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.calendar-minute-client span { color: var(--muted); font-size: .9rem; }
.calendar-minute-client button { flex-shrink: 0; }
@media (max-width: 560px) { .calendar-minute-client { align-items: flex-start; flex-direction: column; } }

/* Show a selected material above the open session plan. */
#savedMaterialViewerOverlay.show { z-index: 100010; }
.data-session-save-bar { display: flex; flex-wrap: wrap; gap: 12px; }

#sessionPlanPrintSheet { display: none; }
@media print {
  body > *:not(#sessionPlanPrintSheet) { display: none !important; }
  #sessionPlanPrintSheet { display: block !important; color: #22313f; font: 12pt/1.45 Arial, sans-serif; }
  #sessionPlanPrintSheet .ai-material-window { width: 100%; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none; }
  #sessionPlanPrintSheet .ai-material-window-header { position: static; padding: 0 0 12px; }
  #sessionPlanPrintSheet .ai-material-window > div[style] { padding: 0 !important; overflow: visible !important; }
  #sessionPlanPrintSheet .generated-plan-section { break-inside: avoid; margin: 12px 0; padding: 12px; border: 1px solid #dce8f3; }
  #sessionPlanPrintSheet .plan-print-attachments { break-before: page; }
  #sessionPlanPrintSheet .plan-print-material { break-before: page; }
  #sessionPlanPrintSheet .plan-print-text { white-space: pre-wrap; }
  #sessionPlanPrintSheet .plan-print-pdf-page { display: block; width: 100%; height: auto; break-before: page; break-after: page; }
}

/* Initials avatar colors */
.cw-avatar-colors { display: flex; flex-wrap: wrap; gap: 9px; margin: 9px 0 0; padding: 0; border: 0; }
.cw-avatar-colors legend { margin-bottom: 8px; font-size: .9rem; font-weight: 700; }
.cw-avatar-colors label { position: relative; display: inline-flex; cursor: pointer; }
.cw-avatar-colors input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cw-avatar-colors label > span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 1px #b6c8d3; }
.cw-avatar-colors input:checked + span { box-shadow: 0 0 0 3px #1d4d77; }
.cw-avatar-colors input:focus-visible + span { outline: 3px solid #1d4d77; outline-offset: 4px; }

/* Separate times for each selected recurring session day. */
.schedule-day-time { padding: 12px 0; border-bottom: 1px solid var(--border); }
.schedule-time-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.schedule-time-pair label { display: grid; gap: 5px; }
#scheduleDayTimes[hidden], #scheduleOneTimeStartField[hidden], #scheduleOneTimeEndField[hidden] { display: none; }
.calendar-session-time { display: block; font-size: .8em; opacity: .8; }

/* Pastel profile initials and an accessible notification close control. */
.cw-notifications .cw-popover-heading { align-items: center; }
.cw-notifications .cw-popover-heading > div { display: flex; align-items: center; gap: 12px; }
.cw-notifications .cw-notification-close { cursor: pointer; min-width: 36px; min-height: 36px; display: grid; place-items: center; }
.cw-account-button > span:first-child { background-image: none; }

/* Keep the notification dismiss target unobstructed and easy to click. */
.cw-notifications .cw-notification-close { position: relative; z-index: 2; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font-size: 30px; line-height: 1; pointer-events: auto; }
/* Material viewer and session picker */
.material-viewer-top-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.material-plan-picker > .ai-material-window-header { padding:24px 24px 0; }
.material-plan-picker > .ai-material-window-header > div { min-width:0; }
.material-plan-picker > .ai-material-window-header h2 { overflow-wrap:anywhere; }
.material-plan-picker > .ai-material-window-header .ai-material-close { flex:0 0 auto; }

/* Keep the Babble Harbor home button compact, including while its image loads. */
.babble-harbor-home-card{position:relative;width:min(100%,560px);aspect-ratio:1440/349;min-height:110px;overflow:hidden;clip-path:none;background:linear-gradient(100deg,#e5f8fb,#fff3ea);border:1px solid #c6e3e9;line-height:normal}
.babble-harbor-home-card .babble-harbor-home-art{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.babble-harbor-home-card .babble-harbor-home-art[hidden]{display:none}
.babble-harbor-home-card .babble-harbor-home-fallback:not([hidden]){display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#166171}
.babble-harbor-home-card .babble-harbor-home-fallback strong{font:800 25px Georgia,serif}
.babble-harbor-home-card .babble-harbor-home-fallback small{font:700 13px sans-serif}

.material-plan-show-all {
  margin: 8px 0 16px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #245da5;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 900px) {
  #saved-materials .material-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  #saved-materials .material-shelf { grid-template-columns: 1fr; }
}

/* Saved Materials empty state browse action. */
#saved-materials .materials-browse-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 12px 20px;
  border: 1px solid var(--brand-blue-dark, #315d68);
  border-radius: 12px;
  background: var(--brand-blue-dark, #315d68);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(39, 85, 110, .15);
}
#saved-materials .materials-browse-button:hover,
#saved-materials .materials-browse-button:focus-visible {
  background: var(--brand-blue, #477d8c);
  color: #fff;
}

/* Edit saved plans and materials in their viewers. */
.saved-inline-editor { display:grid; gap:16px; }
.saved-inline-editor h3, .saved-inline-editor h4 { margin:0; color:var(--brand-blue-dark); }
.saved-editor-field { display:grid; gap:7px; font-weight:700; color:var(--brand-blue-dark); }
.saved-editor-field input, .saved-editor-field textarea { width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid #d8e4ef; border-radius:12px; font:inherit; color:#263c51; background:#fff; }
.saved-editor-field textarea { min-height:92px; resize:vertical; font-weight:400; }
.saved-inline-editor .actions { justify-content:flex-end; flex-wrap:wrap; }

/* Session print selection */
#cwDailyPrintModal .cw-print-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; }
#cwDailyPrintModal .cw-print-close { border:0; background:transparent; color:#657985; font-size:1.7rem; cursor:pointer; }
#cwDailyPrintModal .cw-print-plan-check,
#cwDailyPrintModal .cw-print-material-check { width:24px; height:24px; min-width:24px; margin:0; flex:none; accent-color:#2873ac; cursor:pointer; }
@media (max-width:650px) { #cwDailyPrintModal .cw-modal-heading { flex-wrap:wrap; } #cwDailyPrintModal .cw-print-header-actions { width:100%; justify-content:space-between; } }

.saved-material-editor { display:grid; gap:12px; }
.saved-material-editor > h4 { margin:0 0 4px; }