/* ================================================================
   STD.BUTTONS — Unified Button System (2025 minimal)
   Shared across therapu.html, patient.html, and portal.html

   One token system for ALL buttons platform-wide.
   New buttons MUST use std-btn classes — never invent custom styles.
   ================================================================ */

/* ── Button Tokens ── */
:root {
  /* ── sizing ── */
  --btn-h-xs:       24px;      /* chip / toolbar */
  --btn-h-sm:       30px;      /* compact actions */
  --btn-h:          34px;      /* default */
  --btn-h-lg:       42px;      /* portal / prominent */

  --btn-px-xs:      10px;
  --btn-px-sm:      12px;
  --btn-px:         14px;
  --btn-px-lg:      20px;

  --btn-font-xs:    11.5px;
  --btn-font-sm:    12px;
  --btn-font:       13px;
  --btn-font-lg:    14px;

  --btn-weight:     560;
  --btn-radius:     8px;
  --btn-radius-pill: 999px;
  --btn-radius-lg:  10px;

  /* ── motion ── */
  --btn-transition: background .15s ease, border-color .15s ease,
                    color .15s ease, transform .1s ease,
                    box-shadow .15s ease, opacity .15s ease;
  --btn-press:      scale(0.97);

  /* ── default (neutral) ── */
  --btn-bg:         #e8e7e5;
  --btn-color:      #374151;
  --btn-border:     transparent;
  --btn-hover-bg:   #d9d8d5;

  /* ── primary (sage green — constructive) ── */
  --btn-primary-bg:       #4a7c59;
  --btn-primary-color:    #fff;
  --btn-primary-border:   transparent;
  --btn-primary-hover:    #3d6b4c;
  --btn-primary-shadow:   0 1px 3px rgba(74,124,89,.18);

  /* ── secondary (outline sage) ── */
  --btn-secondary-bg:     transparent;
  --btn-secondary-color:  #4a7c59;
  --btn-secondary-border: rgba(74,124,89,.28);
  --btn-secondary-hover:  rgba(74,124,89,.07);

  /* ── danger (muted red — destructive) ── */
  --btn-danger-bg:        rgba(185,28,28,.06);
  --btn-danger-color:     #991b1b;
  --btn-danger-border:    rgba(185,28,28,.12);
  --btn-danger-hover:     rgba(185,28,28,.11);

  /* ── severe (solid red — irreversible) ── */
  --btn-severe-bg:        #991b1b;
  --btn-severe-color:     #fff;
  --btn-severe-border:    transparent;
  --btn-severe-hover:     #7f1d1d;
  --btn-severe-shadow:    0 1px 3px rgba(153,27,27,.2);

  /* ── warning (earthy clay — no yellow) ── */
  --btn-warning-bg:       rgba(160,100,60,.10);
  --btn-warning-color:    #7c3d1a;
  --btn-warning-border:   rgba(160,100,60,.22);
  --btn-warning-hover:    rgba(160,100,60,.17);

  /* ── ghost (invisible until hover) ── */
  --btn-ghost-bg:         transparent;
  --btn-ghost-color:      #6b7280;
  --btn-ghost-border:     transparent;
  --btn-ghost-hover:      rgba(0,0,0,.05);

  /* ── outline (subtle border, no fill) ── */
  --btn-outline-bg:       transparent;
  --btn-outline-color:    #374151;
  --btn-outline-border:   rgba(0,0,0,.12);
  --btn-outline-hover:    rgba(0,0,0,.04);

  /* ── disabled ── */
  --btn-disabled-bg:      rgba(0,0,0,.04);
  --btn-disabled-color:   #9ca3af;
  --btn-disabled-border:  transparent;
}


/* ================================================================
   BASE BUTTON
   ================================================================ */
.std-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  height: var(--btn-h);
  padding: 0 var(--btn-px);

  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);

  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: var(--btn-transition);
}

.std-btn:hover {
  background: var(--btn-hover-bg);
}

.std-btn:active {
  transform: var(--btn-press);
}

.std-btn:disabled,
.std-btn.is-disabled {
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-color) !important;
  border-color: var(--btn-disabled-border) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

.std-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(74,124,89,.3);
}

/* icon inside button */
.std-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.std-btn .btn-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }


/* ================================================================
   SIZE MODIFIERS
   ================================================================ */

/* XS — chip / toolbar (pill shape) */
.std-btn-xs,
.std-btn.xs {
  height: var(--btn-h-xs);
  padding: 0 var(--btn-px-xs);
  font-size: var(--btn-font-xs);
  border-radius: var(--btn-radius-pill);
}

/* SM — compact actions */
.std-btn-sm,
.std-btn.sm {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  font-size: var(--btn-font-sm);
}

/* LG — portal / prominent */
.std-btn-lg,
.std-btn.lg {
  height: var(--btn-h-lg);
  padding: 0 var(--btn-px-lg);
  font-size: var(--btn-font-lg);
  border-radius: var(--btn-radius-lg);
}

/* Full-width (portal auth style) */
.std-btn-block,
.std-btn.block {
  display: flex;
  width: 100%;
}


/* ================================================================
   COLOR VARIANTS
   ================================================================ */

/* Primary — sage green, solid */
.std-btn-primary,
.std-btn.primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}
.std-btn-primary:hover,
.std-btn.primary:hover {
  background: var(--btn-primary-hover);
}

/* Secondary — outline sage */
.std-btn-secondary,
.std-btn.secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
}
.std-btn-secondary:hover,
.std-btn.secondary:hover {
  background: var(--btn-secondary-hover);
  border-color: rgba(74,124,89,.4);
}

/* Danger — muted red */
.std-btn-danger,
.std-btn.danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border-color: var(--btn-danger-border);
}
.std-btn-danger:hover,
.std-btn.danger:hover {
  background: var(--btn-danger-hover);
}

/* Severe — solid dark red, irreversible */
.std-btn-severe,
.std-btn.severe {
  background: var(--btn-severe-bg);
  color: var(--btn-severe-color);
  border-color: var(--btn-severe-border);
  box-shadow: var(--btn-severe-shadow);
}
.std-btn-severe:hover,
.std-btn.severe:hover {
  background: var(--btn-severe-hover);
}

/* Warning — amber */
.std-btn-warning,
.std-btn.warning {
  background: var(--btn-warning-bg);
  color: var(--btn-warning-color);
  border-color: var(--btn-warning-border);
}
.std-btn-warning:hover,
.std-btn.warning:hover {
  background: var(--btn-warning-hover);
}

/* Ghost — invisible until hover */
.std-btn-ghost,
.std-btn.ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-color);
  border-color: var(--btn-ghost-border);
}
.std-btn-ghost:hover,
.std-btn.ghost:hover {
  background: var(--btn-ghost-hover);
}

/* Outline — subtle border, no fill */
.std-btn-outline,
.std-btn.outline {
  background: var(--btn-outline-bg);
  color: var(--btn-outline-color);
  border-color: var(--btn-outline-border);
}
.std-btn-outline:hover,
.std-btn.outline:hover {
  background: var(--btn-outline-hover);
}


/* ================================================================
   SPECIAL STATES
   ================================================================ */

/* Active / toggled on */
.std-btn.is-on,
.std-btn.is-active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
}
.std-btn.is-on:hover,
.std-btn.is-active:hover {
  background: var(--btn-primary-hover);
}

/* Loading spinner */
.std-btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.std-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: std-btn-spin .5s linear infinite;
}
@keyframes std-btn-spin {
  to { transform: rotate(360deg); }
}


/* ================================================================
   LINK BUTTON — text-only, underline on hover
   ================================================================ */
.std-btn-link {
  background: none;
  border: none;
  color: var(--btn-secondary-color);
  cursor: pointer;
  font-size: var(--btn-font);
  font-weight: 500;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
  transition: var(--btn-transition);
}
.std-btn-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}


/* ================================================================
   LEGACY BRIDGE — existing classes → 2025 modern
   All old btn-chip / btn classes inherit the new token system.
   ================================================================ */

/* ── .btn-chip base ── */
.btn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  height: var(--btn-h-xs);
  padding: 0 var(--btn-px-xs);

  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius-pill);

  font-size: var(--btn-font-xs);
  font-weight: var(--btn-weight);
  font-family: inherit;
  line-height: var(--btn-h-xs);
  white-space: nowrap;
  box-sizing: border-box;

  cursor: pointer;
  transition: var(--btn-transition);
}
.btn-chip:hover { background: var(--btn-hover-bg); }
.btn-chip:active { transform: var(--btn-press); }
.btn-chip.is-active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: transparent;
}
.btn-chip.is-active:hover { background: var(--btn-primary-hover); }

.btn-chip:disabled {
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-color) !important;
  border-color: var(--btn-disabled-border) !important;
  cursor: not-allowed;
  transform: none !important;
}

/* ── .btn-chip variants ── */
.btn-chip-ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-color);
  border: 1px solid var(--btn-outline-border);
}
.btn-chip-ghost:hover {
  background: var(--btn-ghost-hover);
}

.btn-chip-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border: 1px solid var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}
.btn-chip-primary:hover { background: var(--btn-primary-hover); }

.btn-chip-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border: 1px solid var(--btn-danger-border);
}
.btn-chip-danger:hover { background: var(--btn-danger-hover); }
.btn-chip-danger:active { background: rgba(185,28,28,.16); }

.btn-chip-severe {
  background: var(--btn-severe-bg);
  color: var(--btn-severe-color);
  border: 1px solid var(--btn-severe-border);
  box-shadow: var(--btn-severe-shadow);
}
.btn-chip-severe:hover { background: var(--btn-severe-hover); }

.btn-chip-warning {
  background: var(--btn-warning-bg);
  color: var(--btn-warning-color);
  border: 1px solid var(--btn-warning-border);
}
.btn-chip-warning:hover { background: var(--btn-warning-hover); }

.btn-chip-warn {
  background: var(--btn-warning-bg);
  color: var(--btn-warning-color);
  border: 1px solid var(--btn-warning-border);
}
.btn-chip-warn:hover { background: var(--btn-warning-hover); }

/* Active toggle state for chip — scoped per-view (e.g. tasks uses blue, see styles.tasks.css) */
.btn-chip.is-on {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: transparent;
}


/* ── .btn base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  height: var(--btn-h);
  padding: 0 var(--btn-px);

  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);

  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;

  cursor: pointer;
  transition: var(--btn-transition);
}
.btn:hover { background: var(--btn-hover-bg); }
.btn:active { transform: var(--btn-press); }

.btn:disabled {
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-color) !important;
  border-color: var(--btn-disabled-border) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
  opacity: 1;
}

/* ── .btn color variants ── */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-hover); }
.btn-primary:active:not(:disabled) { transform: var(--btn-press); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
  border-color: rgba(74,124,89,.4);
}

.btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border-color: var(--btn-danger-border);
}
.btn-danger:hover:not(:disabled) { background: var(--btn-danger-hover); }
.btn-danger:active:not(:disabled) { background: rgba(185,28,28,.16); }

.btn-severe {
  background: var(--btn-severe-bg);
  color: var(--btn-severe-color);
  border-color: var(--btn-severe-border);
  box-shadow: var(--btn-severe-shadow);
}
.btn-severe:hover:not(:disabled) { background: var(--btn-severe-hover); }

/* Small utility buttons */
.btn-small,
.btn-sm {
  height: var(--btn-h-xs);
  padding: 0 var(--btn-px-xs);
  font-size: var(--btn-font-xs);
  border-radius: var(--btn-radius-pill);
  background: #4b5563;
  color: #f9fafb;
  border: none;
  cursor: pointer;
}

/* Link button */
.btn-link {
  background: none;
  border: none;
  color: var(--btn-secondary-color);
  cursor: pointer;
  font-size: var(--btn-font);
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
  transition: var(--btn-transition);
}
.btn-link:hover { opacity: 0.8; }


/* ================================================================
   PORTAL OVERRIDES — full-width buttons in portal/patient context
   portal.join.css makes .btn full-width block — we keep that
   layout behavior but let the colors come from tokens.
   ================================================================ */
.join-flow .btn,
.join-flow .btn-primary,
.join-flow .btn-secondary,
.join-flow .btn-danger,
[data-portal-join] .btn {
  display: flex;
  width: 100%;
  height: var(--btn-h-lg);
  border-radius: var(--btn-radius-lg);
  font-size: var(--btn-font-lg);
}

/* Gate card buttons */
.gate-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--btn-h);
  padding: 0 var(--btn-px-lg);

  border-radius: var(--btn-radius);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
}
.gate-card.patient .gate-card-btn {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}
.gate-card.patient .gate-card-btn:hover { background: var(--btn-primary-hover); }
.gate-card.therapist .gate-card-btn { background: #3a6bbf; color: #fff; }
.gate-card.therapist .gate-card-btn:hover { background: #2a55a0; }


/* ================================================================
   PORTAL SUPPORT BUTTONS — token override
   ================================================================ */
.portal-support-actions button {
  height: var(--btn-h-xs);
  padding: 0 var(--btn-px-sm);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-xs);
  font-weight: var(--btn-weight);
  cursor: pointer;
  border: none;
  transition: var(--btn-transition);
}
.portal-support-actions button:hover { opacity: 0.85; }

.portal-support-input-wrap button {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-px);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  cursor: pointer;
  transition: var(--btn-transition);
}
.portal-support-input-wrap button:hover { background: var(--btn-primary-hover); }


/* ================================================================
   C3 ACTION CHIPS — small icon buttons in C3 header
   ================================================================ */
.c3-action-chip {
  width: 28px;
  height: var(--btn-h-xs);
  padding: 0;
  border: 1px solid var(--btn-outline-border);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-color);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--btn-transition);
}
.c3-action-chip:hover {
  background: var(--btn-ghost-hover);
  color: var(--btn-color);
  border-color: rgba(0,0,0,.16);
}
.c3-action-chip.is-on,
.c3-action-chip.active {
  background: rgba(245,158,11,.1);
  color: #b45309;
  border-color: rgba(245,158,11,.28);
}


/* ================================================================
   TOOLBAR CHIPS — ensure btn-chips in toolbars stay uniform
   ================================================================ */
.patients-toolbar .btn-chip,
.patients-bulk-bar .btn-chip,
.sup-bulk-actions .btn-chip,
.c4su-chips .btn-chip,
#c4-sessions .c4su-chips .btn-chip {
  height: var(--btn-h-xs);
  padding: 0 var(--btn-px-xs);
  font-size: var(--btn-font-xs);
  line-height: var(--btn-h-xs);
  min-height: var(--btn-h-xs);
}


/* ================================================================
   ADD BUTTON (green circle +)
   ================================================================ */
.btn-add-list {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--btn-primary-bg);
  color: #fff;
  cursor: pointer;
  transition: var(--btn-transition);
  padding: 0;
}
.btn-add-list:hover { background: var(--btn-primary-hover); }
.btn-add-list:active { transform: var(--btn-press); }


/* ================================================================
   GHOST UTILITY (patient actions, etc.)
   ================================================================ */
.btn-ghost {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--btn-ghost-color);
  transition: var(--btn-transition);
}
.btn-ghost:hover { color: var(--btn-color); }


/* ================================================================
   DIALOG ACTIONS — td-actions layout + button sizing
   ================================================================ */
.td-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}
.td-actions-stack {
  flex-direction: column;
  align-items: stretch;
}
.td-actions-stack > button { width: 100%; }


/* ================================================================
   NUCLEAR SWEEP — kill old hardcoded button styles platform-wide
   Catches any remaining button/btn elements with old inline-feel
   borders, shadows, or backgrounds that shouldn't be there.
   Excludes: inputs, selects, specialized widgets.
   ================================================================ */

/* Force all btn-chip variants through tokens */
[class*="btn-chip"]:not(:disabled) {
  transition: var(--btn-transition) !important;
}

/* Remove translateY hover from portal buttons — use scale instead */
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
}
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled) {
  transform: var(--btn-press);
}

/* Buttons next to buttons — consistent spacing */
.btn + .btn { margin-top: 0; }