/* Brand palette (matches assets/css/typography.css and agreement.css):
   --bl-teal-dark:  #125773   banner background, primary action
   --bl-teal-mid:   #4694a6   accents, focus outlines
   --bl-text:       #4e4c4c   body text (the "dark grey" Donna asked for)
   --bl-text-soft:  #66757b   secondary text
   --bl-border:     #cbd5e0   input borders (matches the toggle button)
   --bl-bg:         #ffffff   page background
   --bl-bg-soft:    #f8f9f9   form-fill background
   --bl-success:    #2f7d4f   muted green
   --bl-error:      #a83232   muted red
*/

:root {
  --bl-teal-dark: #125773;
  --bl-teal-mid: #4694a6;
  --bl-text: #4e4c4c;
  --bl-text-soft: #66757b;
  --bl-border: #cbd5e0;
  --bl-bg: #ffffff;
  --bl-bg-soft: #f8f9f9;
  --bl-success: #2f7d4f;
  --bl-error: #a83232;
}

* { box-sizing: border-box; }

/* `display: flex` on .admin-auth__form etc. otherwise beats the [hidden]
   attribute on specificity, so JS-driven hiding silently no-ops. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bl-bg);
  color: var(--bl-text);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- banner ---------- */

.admin-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--bl-teal-dark);
  color: #fff;
}

.admin-banner__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-decoration: none;
}

.admin-banner__logo {
  height: 56px;
  width: auto;
}

.admin-banner__title {
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #fff;
}

.admin-banner__signout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
}

.admin-banner__signout:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- main ---------- */

.admin-main {
  max-width: 600px;
  margin: 48px auto;
  padding: 0 24px;
}

/* The Log tab needs room for the composer + the two-way timeline; the
   Agreements form stays at the narrow default. Toggled by setupTabs. */
.admin-main--wide {
  max-width: 1000px;
}

h1 {
  margin: 0 0 24px 0;
  font-size: 24px;
  color: var(--bl-teal-dark);
  font-weight: 700;
}

/* ---------- auth ---------- */

.admin-auth__loading {
  text-align: center;
  color: var(--bl-text-soft);
  padding: 48px 0;
}

.admin-auth__form,
.admin-auth__new-password {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-auth__form label,
.admin-auth__new-password label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--bl-text-soft);
  font-weight: 700;
}

.admin-auth__hint {
  margin: 0;
  font-size: 14px;
  color: var(--bl-text-soft);
}

.admin-auth__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* ---------- form / inputs ---------- */

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-field label {
  font-size: 14px;
  color: var(--bl-text-soft);
  font-weight: 700;
}

.admin-field--inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.admin-field--inline > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-input {
  font: inherit;
  font-size: 15px;
  color: var(--bl-text);
  background: var(--bl-bg);
  padding: 10px 12px;
  border: 1px solid var(--bl-border);
  border-radius: 4px;
  width: 100%;
}

.admin-input:focus {
  outline: none;
  border-color: var(--bl-teal-mid);
  box-shadow: 0 0 0 2px rgba(70, 148, 166, 0.15);
}

/* ---------- typeahead ---------- */

.admin-typeahead {
  position: relative;
}

.admin-typeahead__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0 0;
  padding: 0;
  list-style: none;
  background: var(--bl-bg);
  border: 1px solid var(--bl-border);
  border-radius: 4px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.admin-typeahead__list li {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 15px;
}

.admin-typeahead__list li:hover,
.admin-typeahead__list li[aria-selected="true"] {
  background: var(--bl-bg-soft);
}

.admin-typeahead__list li .email {
  display: block;
  color: var(--bl-text-soft);
  font-size: 13px;
}

.admin-typeahead__selected {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: var(--bl-teal-mid);
  font-weight: 700;
}

/* ---------- buttons ---------- */

.admin-btn {
  display: inline-block;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--bl-teal-dark);
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  cursor: pointer;
}

.admin-btn:hover:not(:disabled) {
  background: #0e4860;
}

.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-btn--secondary {
  background: var(--bl-bg);
  color: var(--bl-teal-dark);
  border: 1px solid var(--bl-teal-dark);
}

.admin-btn--secondary:hover:not(:disabled) {
  background: var(--bl-bg-soft);
}

/* ---------- status ---------- */

.admin-status {
  margin: 8px 0 0 0;
  font-size: 14px;
  min-height: 1.5em;
}

.admin-status[data-status="success"] {
  color: var(--bl-success);
}

.admin-status[data-status="error"] {
  color: var(--bl-error);
}

.admin-status[data-status="pending"] {
  color: var(--bl-text-soft);
}

/* ---------- discount disabled (Pro Bono mutex) ---------- */

.admin-input:disabled {
  background: var(--bl-bg-soft);
  color: var(--bl-text-soft);
  cursor: not-allowed;
}

/* ---------- discount: unit selector + amount ---------- */

.admin-discount {
  display: flex;
  gap: 8px;
}

.admin-discount__unit {
  flex: 0 0 auto;
  width: 64px;
  text-align: center;
}

.admin-discount__amount {
  flex: 1 1 auto;
}

/* ---------- preview modal ---------- */

.admin-modal {
  width: min(960px, 95vw);
  height: min(90vh, 1000px);
  max-width: 95vw;
  max-height: 95vh;
  padding: 0;
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  background: var(--bl-bg);
  color: var(--bl-text);
}

.admin-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.admin-modal[open] {
  display: flex;
  flex-direction: column;
}

.admin-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bl-border);
  flex: 0 0 auto;
}

.admin-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--bl-teal-dark);
}

.admin-modal__close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--bl-text-soft);
  cursor: pointer;
  padding: 0 8px;
}

.admin-modal__close:hover {
  color: var(--bl-text);
}

.admin-modal__iframe {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background: var(--bl-bg-soft);
}

.admin-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--bl-border);
  flex: 0 0 auto;
}

.admin-modal__footer .admin-status {
  margin: 0;
  flex: 1 1 auto;
}

.admin-modal__actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

/* ---------- tabs (Agreements | Log) ---------- */

.admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bl-border);
  margin-bottom: 28px;
}

.admin-tab {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--bl-text-soft);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 18px;
  margin-bottom: -1px;
  cursor: pointer;
}

.admin-tab:hover { color: var(--bl-teal-dark); }

.admin-tab.is-active {
  color: var(--bl-teal-dark);
  border-bottom-color: var(--bl-teal-dark);
}

/* ---------- shared: hint + checkbox ---------- */

.admin-hint {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: var(--bl-text-soft);
}

.admin-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bl-text-soft);
  cursor: pointer;
}

/* ---------- log composer ---------- */

.admin-log-composer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--bl-border);
}

/* Heading row: "New message" with the private toggle inline on the right. */
.admin-log-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-log-heading {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--bl-teal-dark);
}

/* Private guard, inline (no box). Default checked = private; the label text
   turns red the moment it's unchecked (client-visible) as a quiet warning. */
.admin-log-private { font-size: 13px; }
.admin-log-private em {
  font-style: normal;
  font-weight: 400;
  color: var(--bl-text-soft);
}
.admin-log-private:has(input:not(:checked)) { color: var(--bl-error); }
.admin-log-private:has(input:not(:checked)) em { color: var(--bl-error); }

/* Client picker: input sized to its content, the "Selected:" line beside it. */
.admin-log-pick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-log-typeahead { flex: 0 1 420px; }
.admin-log-selected { margin: 0; }

.admin-log-editor { background: #fff; }
/* The mount element BECOMES .ql-container; the editable area is .ql-editor
   inside it. Size the editor there (a descendant .ql-container doesn't exist). */
.admin-log-editor .ql-editor { min-height: 320px; font-size: 15px; }
.admin-log-editor.is-dragover { outline: 2px dashed var(--bl-teal-mid); outline-offset: 2px; }

.admin-log-attach-hint {
  font-size: 13px;
  color: var(--bl-text-soft);
  font-style: italic;
}

.admin-log-attachments {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-log-attachments li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 4px;
  padding: 4px 8px;
}

.admin-log-attachments button {
  border: none;
  background: transparent;
  color: var(--bl-error);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.admin-log-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-log-spacer { flex: 1 1 auto; }

/* Quill size picker uses inline-style px values (so formatting survives the
   server sanitizer); snow.css only labels its named sizes, so without these
   every item reads "Normal". Label each px value — same as the client. */
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px'; }
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px'; }
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px'; }
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px'; }
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px'; }
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before { content: '22px'; }
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px'; }
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.admin-log-composer .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; }

/* Custom link dialog (Text + Link), same as the client portal. */
.logs-linkdialog {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: 360px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.logs-linkdialog label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bl-text-soft);
}
.logs-linkdialog input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--bl-border);
  border-radius: 4px;
}
.logs-linkdialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.logs-linkdialog__actions .admin-btn { padding: 8px 16px; }

/* ---------- log history: archive bar + bubbles (mirrors the client portal) */

.admin-log-history { margin-top: 32px; }

.logs-archive__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 8px;
}

.logs-archive__heading {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--bl-teal-mid);
  flex: 1 1 100%;
}

.logs-archive__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.logs-archive__label { font-size: 14px; color: var(--bl-text-soft); }

.logs-archive__date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.logs-archive__filter input[type="date"] {
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--bl-border);
  border-radius: 4px;
  color: var(--bl-text);
}

/* inline text link (Today, Reply, Edit) */
.logs-link {
  background: transparent;
  border: 0;
  padding: 0 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--bl-teal-mid);
  cursor: pointer;
}
.logs-link:hover { text-decoration: underline; }
.logs-link--danger { color: #b3261e; }

/* archive buttons reuse admin-btn; size them to the filter row */
.logs-archive__filter .admin-btn { padding: 8px 16px; }

/* flat / by-subject segmented toggle */
.logs-archive__view {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--bl-border);
  border-radius: 6px;
  overflow: hidden;
}
.logs-toggle {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border: 0;
  background: #fff;
  color: var(--bl-text-soft);
  cursor: pointer;
}
.logs-toggle.is-active {
  background: var(--bl-teal-dark);
  color: #fff;
}

.logs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.logs-empty {
  color: var(--bl-text-soft);
  font-size: 15px;
  text-align: center;
  padding: 24px 0;
}

/* bubbles: coach left/teal, client right/green — identical to the client view */
.bubble {
  display: flex;
  gap: 12px;
  max-width: 78%;
}
.bubble--coach  { align-self: flex-start; }
.bubble--client { align-self: flex-end; flex-direction: row-reverse; }

.bubble__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.bubble--coach  .bubble__avatar { background: var(--bl-teal-mid); }
.bubble--client .bubble__avatar { background: var(--bl-success); }

.bubble__box {
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--bl-bg);
  min-width: 0;
}
.bubble--coach .bubble__box { border-color: var(--bl-teal-mid); }

/* private note: warm tint + badge, overriding the box border */
.bubble--private .bubble__box {
  background: #fff7ed;
  border-color: #f0c98a;
}
.bubble__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9a6b00;
  background: #ffe8c2;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
}

.bubble__meta {
  font-size: 13px;
  color: var(--bl-text-soft);
  margin-bottom: 6px;
}
.bubble__author { font-weight: 700; color: var(--bl-teal-dark); }
.bubble__edited { font-style: italic; }

.bubble__subject {
  font-weight: 700;
  color: var(--bl-text);
  margin: 2px 0 6px;
}

.bubble__body { font-size: 15px; word-wrap: break-word; }
.bubble__body p:first-child { margin-top: 0; }
.bubble__body p:last-child  { margin-bottom: 0; }

.bubble__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.bubble__attachment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--bl-teal-mid);
  text-decoration: none;
}
.bubble__attachment:hover { text-decoration: underline; }

.bubble__actions { display: flex; gap: 12px; margin-top: 8px; }

/* by-subject grouping */
.logs-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--bl-border);
  border-radius: 8px;
}
.logs-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.logs-group__subject { font-weight: 700; color: var(--bl-teal-dark); }
.logs-group__count { font-size: 13px; color: var(--bl-text-soft); }

@media print {
  .admin-banner,
  .admin-tabs,
  .admin-log-composer,
  .logs-archive__bar { display: none !important; }
  .admin-main,
  .admin-main--wide { max-width: none; margin: 0; padding: 0; }
  .bubble { max-width: 100%; }
}