/* OnlyFanOuts - Button Styles

   @author Sander Tamaela
   @created 2026-02-14
   @modified 2026-09-25 */

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s;
  box-sizing: border-box;
  line-height: 1.2;
}

.btn-primary { background: var(--blue-500); color: white; }
.btn-primary:hover { background: var(--blue-600); text-decoration: none; }

.btn-secondary { background: #6c757d; color: white; }
.btn-secondary:hover { background: #545b62; text-decoration: none; }

.btn-success { background: var(--green-500); color: white; }
.btn-success:hover { background: var(--green-600); text-decoration: none; }

.btn-danger { background: var(--red-500); color: white; }
.btn-danger:hover { background: var(--red-600); text-decoration: none; }

.btn-info { background: var(--cyan-500); color: white; }
.btn-info:hover { background: var(--cyan-600); text-decoration: none; }

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 16px; }

/* Load button (alias for btn-info, used in shares/dashboard) */
.load-btn {
  background: var(--cyan-500);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.load-btn:hover { background: var(--cyan-600); }

/* Action buttons row */
.action-buttons { display: flex; gap: 15px; margin-top: 20px; }

/* "Sync to Google Sheets" link on the dataset pages (ofo_sheets_sync_link).
   Outline style so it reads as a secondary action next to the page's own
   controls, at the same height as the mode-btn toggles. */
.ofo-sheets-link { display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
                   border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151;
                   font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ofo-sheets-link:hover { background: #f3f4f6; border-color: #9ca3af; text-decoration: none; }
.ofo-sheets-link-row { display: flex; justify-content: flex-end; margin: 0 0 12px 0; }