/* Calculator Workspace: result-actions bar, My Calculations dialog, history
   cards, and the print-only summary. Loaded only on calculator pages. */

/* Disabled buttons weren't a pattern before the workspace actions (Load
   Example/Reset are never disabled) — this applies globally to any .btn
   but is inert on existing buttons since none of them use [disabled]. */
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.calculator-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.calculator-header__row h1 {
  margin: 0;
}

.workspace-trigger {
  flex-shrink: 0;
}

/* Result-actions bar (Copy / CSV / Print / Save) */
.workspace-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.workspace-actions .btn {
  min-height: var(--tap-target-min);
}

.workspace-status {
  flex-basis: 100%;
  min-height: 1.25em;
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* My Calculations dialog */
.workspace-dialog {
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  width: min(480px, 100vw);
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
}

.workspace-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
}

.workspace-dialog__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  overflow-y: auto;
}

.workspace-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.workspace-dialog__header h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-h3);
}

.workspace-dialog__subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.workspace-dialog__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.workspace-dialog__close:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.workspace-dialog__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.workspace-dialog__controls select {
  min-height: var(--tap-target-min);
  font-size: var(--input-font-size);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  flex: 1 1 160px;
}

.workspace-dialog__controls select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.workspace-dialog__bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.workspace-dialog__bulk-actions .btn {
  min-height: var(--tap-target-min);
  font-size: var(--font-size-sm);
}

.btn-danger-outline {
  background: var(--color-surface);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-danger-outline:hover {
  background: var(--color-danger-bg);
}

.workspace-empty {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-6) 0;
}

/* .workspace-status is shared with the result-actions bar (a flex-wrap
   row), where flex-basis: 100% intentionally forces the status text onto
   its own full-width line below the buttons. Inside this dialog's
   flex-direction: column container, that same flex-basis: 100% instead
   means "100% of the column's height" — it was ballooning the empty
   status paragraph to fill most of the drawer and pushing the history
   list down, which is the saved-record-stuck-at-the-bottom bug. */
[data-workspace-dialog-status] {
  flex-basis: auto;
}

.workspace-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}

.workspace-history-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
}

.workspace-history-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.workspace-history-card__calculator {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.workspace-history-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.workspace-history-card__primary-result {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--color-text);
}

.workspace-history-card__inputs {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.workspace-history-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.workspace-history-card__action {
  min-height: var(--tap-target-min);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-3);
}

.workspace-history-card__delete {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.workspace-history-card__delete:hover {
  background: var(--color-danger-bg);
}

@media (max-width: 639px) {
  .workspace-dialog {
    width: 100vw;
  }
}

@media (min-width: 640px) {
  .workspace-dialog {
    width: min(420px, 92vw);
  }
}

/* Printing (Copy summary / Print action) no longer touches this document
   at all: print.js renders the report into a separate, isolated <iframe>
   with its own Document and prints that directly, so this stylesheet has
   nothing to isolate the main page from. See print.js. */