/* ============================================================
   Scrumbox — components.css
   Page-agnostic, token-driven building blocks.
   Each block documents the markup it expects.
   ============================================================ */

/* ------------------------------------------------------------
   BUTTONS
   <button class="btn btn-primary"><svg class="icon"></svg>Label</button>
   Variants: .btn-primary (espresso/cream), .btn-secondary (1.5px
   caramel outline), .btn-ghost (caramel text, no chrome).
   Sizes: .btn-sm, .btn-lg. Add .btn-block for full width.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stack-sm);
  padding: 10px var(--gutter);
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition),
    transform var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background-color: var(--color-primary-container);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn-secondary:hover {
  background-color: rgba(125, 86, 45, 0.08);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background-color: rgba(125, 86, 45, 0.08);
}

/* Tonal caramel-container button (used for Export-style actions). */
.btn-tonal {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  box-shadow: var(--shadow-sm);
}
.btn-tonal:hover {
  background-color: var(--color-secondary-fixed);
  box-shadow: var(--shadow);
}

/* Neutral surface button. */
.btn-surface {
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-sm);
}
.btn-surface:hover {
  background-color: var(--color-surface-container-highest);
  box-shadow: var(--shadow);
}

/* Dashed "add" affordance: <button class="btn btn-dashed">+ Add Note</button> */
.btn-dashed {
  background-color: var(--color-surface);
  color: var(--color-on-surface-variant);
  border: 1px dashed var(--color-outline-variant);
  font-weight: 500;
}
.btn-dashed:hover {
  background-color: var(--color-surface-container);
  border-color: var(--color-secondary);
  color: var(--color-on-surface);
}

.btn-sm {
  padding: 6px var(--stack-md);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.btn-sm .icon { width: 16px; height: 16px; }

.btn-lg {
  padding: 14px var(--space-5);
  font-size: var(--text-title-md-size);
  line-height: var(--text-title-md-line);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ------------------------------------------------------------
   ICON BUTTON
   <button class="btn-icon" aria-label="Search"><svg class="icon"></svg></button>
   position:relative so a .notif-dot can be nested inside.
   ------------------------------------------------------------ */
.btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--color-on-surface-variant);
  background-color: transparent;
  transition: background-color var(--transition), color var(--transition);
}
.btn-icon:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}
.btn-icon .icon { width: 22px; height: 22px; }

.btn-icon-sm { width: 32px; height: 32px; }
.btn-icon-sm .icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   ICON BADGE
   <span class="icon-badge icon-badge-caramel"><svg class="icon"></svg></span>
   A 40px round tinted holder for a column/section icon.
   Tints: -caramel (default), -error, -latte, -espresso, -success.
   ------------------------------------------------------------ */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
}
.icon-badge .icon { width: 22px; height: 22px; }
.icon-badge-sm { width: 32px; height: 32px; }
.icon-badge-sm .icon { width: 18px; height: 18px; }

.icon-badge-caramel {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
.icon-badge-error {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
}
.icon-badge-latte {
  background-color: var(--color-tertiary-fixed-dim);
  color: var(--color-on-tertiary-fixed-variant);
}
.icon-badge-espresso {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.icon-badge-success {
  background-color: var(--color-success-container);
  color: var(--color-on-success-container);
}

/* ------------------------------------------------------------
   CARD
   <article class="card"> …anything… </article>
   Optional children: .card-header (row), .card-title (title-md),
   .card-subtitle, .card-body, .card-footer.
   .card-lg  → larger radius + roomier padding (dashboard panels).
   .card-flat → no hover lift (static containers).
   .card-accent → 4px caramel left border (task cards).
   ------------------------------------------------------------ */
.card {
  position: relative;
  display: block;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--gutter);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), border-color var(--transition);
}

/* Ambient-shadow-only hover lift (no transform): a transformed element
   always becomes a new stacking context, which would trap any
   absolutely/fixed-positioned overlay a page mounts inside a hovered
   card (menus, tooltips) behind later sibling cards. */
.card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-secondary);
}

.card-flat:hover {
  box-shadow: var(--shadow);
  border-color: transparent;
}

.card-lg {
  border-radius: var(--radius-xl);
  padding: var(--container-padding);
}

.card-accent {
  border-left: 4px solid var(--color-secondary);
}
.card-accent-light { border-left-color: var(--color-secondary-fixed); }
.card-accent-medium { border-left-color: var(--color-secondary); }
.card-accent-dark { border-left-color: var(--color-primary); }
.card-accent-error { border-left-color: var(--color-error); }
.card-accent-latte { border-left-color: var(--color-tertiary-fixed-dim); }

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  margin-bottom: var(--stack-md);
}

.card-title {
  font-family: var(--font-ui);
  font-size: var(--text-title-md-size);
  line-height: var(--text-title-md-line);
  font-weight: var(--text-title-md-weight);
  color: var(--color-on-surface);
  margin: 0;
}

.card-subtitle {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-on-surface-variant);
}

.card-body {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-on-surface);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  margin-top: var(--stack-md);
}

/* ------------------------------------------------------------
   CHIPS & TAGS
   <span class="tag tag-success">Done</span>
   <span class="chip"><svg class="icon"></svg>Label</span>
   label-caps mono type, 4px radius, low-saturation tints.
   ------------------------------------------------------------ */
.tag,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  line-height: var(--text-label-caps-line);
  font-weight: var(--text-label-caps-weight);
  letter-spacing: var(--text-label-caps-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-variant);
}

.chip {
  border-radius: var(--radius-full);
  padding: 4px 10px;
}
.chip .icon,
.tag .icon { width: 14px; height: 14px; }

.tag-neutral {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-variant);
}
.tag-success {
  background-color: var(--color-success-container);
  color: var(--color-on-success-container);
}
.tag-warn {
  background-color: var(--color-warn-container);
  color: var(--color-on-warn-container);
}
.tag-error {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
}
.tag-roast {
  background-color: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
}
.tag-caramel {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
.tag-espresso {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

/* Live status chip with a pulsing dot:
   <span class="chip chip-status"><span class="chip-dot"></span>Optimal Flow</span> */
.chip-status {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-sm);
}
.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   COUNT BADGE
   <span class="count-badge">5</span>  — pill counter for column headers.
   ------------------------------------------------------------ */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-on-surface-variant);
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  line-height: var(--text-label-caps-line);
  font-weight: var(--text-label-caps-weight);
  letter-spacing: var(--text-label-caps-tracking);
}

/* ------------------------------------------------------------
   AVATAR
   <span class="avatar" data-initials="AM">AM</span>
   Circular initials chip. Sizes: .avatar-sm (24px), .avatar-md (32px),
   default 40px, .avatar-lg (48px).
   Deterministic tint: set class avatar-t0 … avatar-t5 (js picks it),
   or rely on the neutral default.
   ------------------------------------------------------------ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-md { width: 32px; height: 32px; font-size: 11px; }
.avatar-lg { width: 48px; height: 48px; font-size: 14px; }

/* Deterministic palette tints, chosen by initials hash in JS. */
.avatar-t0 { background-color: var(--color-secondary-container); color: var(--color-on-secondary-container); }
.avatar-t1 { background-color: var(--color-tertiary-fixed-dim); color: var(--color-on-tertiary-fixed-variant); }
.avatar-t2 { background-color: var(--color-primary-fixed); color: var(--color-on-primary-fixed); }
.avatar-t3 { background-color: var(--color-secondary-fixed); color: var(--color-on-secondary-fixed-variant); }
.avatar-t4 { background-color: var(--color-tertiary-fixed); color: var(--color-on-tertiary-fixed-variant); }
.avatar-t5 { background-color: var(--color-primary-fixed-dim); color: var(--color-on-primary-fixed-variant); }

/* <div class="avatar-stack"> …avatars… </div> — overlapping with a ring. */
.avatar-stack {
  display: inline-flex;
  align-items: center;
}
.avatar-stack > * + * {
  margin-left: -8px;
}
.avatar-stack .avatar {
  box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-sm);
}

/* ------------------------------------------------------------
   INPUTS
   <input class="input"> / <textarea class="textarea"></textarea>
   Cream background, 1px latte border, caramel + glow on focus.
   Optional wrapper: <label class="field"><span class="field-label">…</span>…</label>
   ------------------------------------------------------------ */
.input,
.textarea,
.select {
  display: block;
  width: 100%;
  padding: 10px var(--stack-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-ui);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  transition: border-color var(--transition), box-shadow var(--transition),
    background-color var(--transition);
}

.textarea {
  min-height: 88px;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.85;
}

.input:hover,
.textarea:hover {
  border-color: var(--color-outline);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--glow-focus);
  background-color: var(--color-surface-container-lowest);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
}

.field-label {
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  line-height: var(--text-label-caps-line);
  letter-spacing: var(--text-label-caps-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

/* ------------------------------------------------------------
   COLUMN (board column shell)
   <section class="column">
     <header class="column-header">
       <div class="row"><span class="column-dot"></span><h2 class="column-title">To Do</h2></div>
       <span class="count-badge">5</span>
     </header>
     <div class="column-body"> …cards… </div>
     <footer class="column-footer"> …add button… </footer>
   </section>
   ------------------------------------------------------------ */
.column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  padding: var(--gutter);
  background-color: var(--color-surface-container);
  flex-shrink: 0;
}

.column-title {
  font-family: var(--font-ui);
  font-size: var(--text-title-md-size);
  line-height: var(--text-title-md-line);
  font-weight: var(--text-title-md-weight);
  color: var(--color-on-surface);
  margin: 0;
}

/* Small status dot in a column header. */
.column-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--color-outline-variant);
  flex-shrink: 0;
}
.column-dot-active { background-color: var(--color-secondary); }
.column-dot-review { background-color: var(--color-tertiary-fixed-dim); }
.column-dot-done { background-color: var(--color-outline); }

.column-body {
  display: flex;
  flex-direction: column;
  gap: var(--stack-md);
  padding: var(--gutter);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.column-footer {
  padding: 0 var(--gutter) var(--gutter);
  flex-shrink: 0;
}

/* Drop-target feedback while dragging a card over a column body.
   The page sheet owns the visual treatment (see pages/kanban.css). */

/* ------------------------------------------------------------
   PROGRESS
   <div class="progress" role="progressbar" aria-valuenow="60">
     <div class="progress-fill" style="width:60%"></div>
   </div>
   ------------------------------------------------------------ */
.progress {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-container);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
  transition: width var(--transition-slow);
}

.progress-sm { height: 6px; }
.progress-lg { height: 12px; }
.progress-fill-latte { background-color: var(--color-tertiary-fixed-dim); }
.progress-fill-espresso { background-color: var(--color-primary); }

/* ------------------------------------------------------------
   TOOLBAR (floating pill)
   <div class="toolbar"> buttons… <span class="toolbar-divider"></span> … </div>
   Position it with a page-level rule (e.g. absolute bottom-centre).
   ------------------------------------------------------------ */
.toolbar {
  display: inline-flex;
  align-items: center;
  gap: var(--stack-sm);
  padding: var(--stack-sm);
  border-radius: var(--radius-full);
  background-color: rgba(234, 232, 228, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-outline-variant);
}

.toolbar-column {
  flex-direction: column;
  border-radius: var(--radius-lg);
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background-color: var(--color-outline-variant);
  margin: 0 var(--stack-sm);
  flex-shrink: 0;
}
.toolbar-column .toolbar-divider {
  width: 24px;
  height: 1px;
  margin: var(--stack-sm) 0;
}

.toolbar .btn-icon:hover {
  background-color: var(--color-surface);
}

.toolbar .btn-icon[aria-pressed="true"] {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

/* ------------------------------------------------------------
   TOOLTIP
   <span class="has-tooltip"> trigger <span class="tooltip">Select (V)</span> </span>
   Shows on hover/focus-within of the wrapper. Purely CSS.
   ------------------------------------------------------------ */
.has-tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  line-height: var(--text-label-caps-line);
  letter-spacing: var(--text-label-caps-tracking);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity var(--transition), transform var(--transition);
}

.has-tooltip:hover .tooltip,
.has-tooltip:focus-within .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------
   EMPTY STATE
   <div class="empty-state">
     <svg class="icon"></svg>
     <p class="empty-state-title">Nothing brewing</p>
     <p class="empty-state-text">Drag cards here for review</p>
   </div>
   ------------------------------------------------------------ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-sm);
  padding: var(--space-5) var(--gutter);
  border-radius: var(--radius);
  border: 1px dashed var(--color-outline-variant);
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  text-align: center;
}

.empty-state .icon {
  width: 28px;
  height: 28px;
  opacity: 0.6;
}

.empty-state-title {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

.empty-state-text {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

/* ------------------------------------------------------------
   ICON sizing default — every icon() SVG carries class="icon".
   ------------------------------------------------------------ */
.icon {
  width: 24px;
  height: 24px;
  fill: none;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-32 { width: 32px; height: 32px; }
.icon-48 { width: 48px; height: 48px; }

/* ------------------------------------------------------------
   DIVIDER
   <hr class="divider"> — hairline in latte.
   ------------------------------------------------------------ */
.divider {
  border: 0;
  border-top: 1px solid var(--color-outline-variant);
  width: 100%;
}

/* ------------------------------------------------------------
   TOAST — visible counterpart to a page's sr-only aria-live
   region, for the one thing that has no other UI to show it: a
   mutation that failed (network drop, API error). See toast.js.
   ------------------------------------------------------------ */
.toast-region {
  position: fixed;
  z-index: 80;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(360px, calc(100vw - 3rem));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  animation: toast-in 0.15s ease-out;
}

.toast-error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}

.toast-info {
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 1px solid var(--color-outline-variant);
}

.toast-text {
  flex: 1;
}

.toast-dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
}
.toast-dismiss:hover {
  opacity: 1;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}