/* Shared action controls. Layout files position action groups; page files may
   add page-specific placement without redefining this component family. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  background: var(--color-action-subtle);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.btn-sm { min-height: 32px; padding: 5px 10px; font-size: var(--font-size-compact); }
.btn-md { min-height: 36px; padding: 8px 14px; font-size: var(--font-size-supporting); }
.btn-lg { min-height: 44px; padding: 11px 18px; font-size: 0.85rem; }

/* Pill shape marks a view toggle rather than a committing action. */
.btn-pill { border-radius: 999px; }

.btn-icon { padding: 0; gap: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-md { width: 36px; }
.btn-icon.btn-lg { width: 44px; }

.btn:not(:disabled):hover { background: var(--color-line); }
.btn-primary {
  background: var(--color-action);
  border-color: var(--color-action);
  color: #fff;
  font-weight: 700;
}
.btn-primary:not(:disabled):hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}

/* A secondary action placed directly on the page background, where the
   default grey fill would vanish into the matching page grey. White with the
   action colour keeps it visible but quieter than the solid primary. */
.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-action);
  color: var(--color-action);
}
.btn-secondary:not(:disabled):hover {
  background: var(--color-action-subtle);
}

/* Red is reserved for actions that switch something off, remove something,
   or are otherwise awkward to undo. */
.btn-danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 700;
}
.btn-danger:not(:disabled):hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

/* Fade the variant rather than repainting it so its action hierarchy remains
   visible while unavailable. */
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Shared persistence-action states used by the desktop rail, mobile header,
   and mobile drawer. */
.panel-save-btn.dirty,
.mobile-save-btn.dirty,
.mobile-drawer-actions button.dirty {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
  box-shadow: 0 0 0 2px rgba(200,169,110,0.18);
}
.panel-save-btn.dirty:hover,
.mobile-save-btn.dirty:hover,
.mobile-drawer-actions button.dirty:hover {
  background: #d5b879;
  border-color: #d5b879;
  color: var(--navy);
}
.panel-reset-btn.discard-active {
  border-color: #c8d1e2;
  color: var(--color-action);
  font-weight: 700;
}
.panel-reset-btn:not(:disabled):hover {
  background: var(--color-action);
  border-color: var(--color-action);
  color: #fff;
}

/* Account-row and table-toggle button modifiers remain exact visual variants
   of the shared primitive while their placement stays with their pages. */
.remove-account-btn { background: var(--color-surface); }
.remove-account-btn:hover {
  background: var(--color-action);
  border-color: var(--color-action);
  color: #fff;
}
.table-toolbar .toggle-btn:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.mobile-save-btn,
.mobile-discard-btn,
.mobile-drawer-btn { display: none; }

@media (max-width: 1024px) {
  .mobile-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 76px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    padding: 0 10px;
    font-size: var(--font-size-compact);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-save-btn:disabled { opacity: 0.72; cursor: default; }
  .mobile-save-btn.dirty {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--navy);
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(200,169,110,0.24);
  }

  .mobile-drawer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
  }

  .mobile-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: var(--border-thin);
    border-radius: var(--radius-md);
    background: var(--color-action-subtle);
    color: var(--color-text-muted);
    padding: 0;
    flex-shrink: 0;
  }

  .mobile-drawer-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    background: var(--color-action-subtle);
    color: var(--color-text-muted);
    padding: 9px 4px;
    font-size: var(--font-size-compact);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
  }
  .mobile-drawer-actions button.discard-active {
    border-color: #c8d1e2;
    color: var(--color-action);
    font-weight: 800;
  }
  .mobile-drawer-actions button:disabled { opacity: 0.55; cursor: not-allowed; }
  .mobile-drawer-actions [data-save-button] {
    background: var(--color-action);
    border-color: var(--color-action);
    color: #fff;
  }
}

@media (max-width: 767px) {
  .mobile-save-btn,
  .mobile-drawer-btn,
  .btn.mobile-discard-btn {
    height: 44px;
  }
  .mobile-save-btn { order: 1; min-width: 70px; }
  .mobile-drawer-btn { order: 4; width: 44px; }
  .btn.mobile-discard-btn { order: 2; width: 44px; }
  .mobile-save-btn:disabled:not(.dirty) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .btn.mobile-discard-btn {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
  }
  .btn.mobile-discard-btn.discard-active { display: inline-flex; }
  .mobile-discard-btn .btn-label { display: none; }
  .btn.mobile-discard-btn:disabled { opacity: 0.55; }
  .btn.mobile-discard-btn.discard-active {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
  }
  .mobile-drawer-actions [data-save-button],
  .mobile-drawer-actions [data-reload-button] { display: none; }
}