/**
 * vo-buttons.css — Canonical Button System for REWORQ Virtual Office
 *
 * This file is the SINGLE SOURCE OF TRUTH for all .vo-button styles.
 * It is enqueued LAST (after vo-design-system, saas-dashboard, settings,
 * frontend) so it wins the cascade over every older scattered definition.
 *
 * DO NOT add button variants to saas-dashboard.css / settings.css / etc.
 * Consolidate here instead.
 *
 * Class names are intentionally UNCHANGED from the existing convention
 * (.vo-button, .vo-button-primary, .vo-button-secondary …) so no template
 * or script needs to be touched when this file is added.
 */

/* ==========================================================================
   BASE BUTTON
   ========================================================================== */

.vo-button,
button.vo-button,
a.vo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vo-space-2, 8px);

  /* Sizing — matches existing dominant convention */
  padding: var(--vo-space-3, 12px) var(--vo-space-4, 16px);
  min-height: 44px;   /* WCAG AA touch target */
  min-width: 44px;

  /* Typography */
  font-family: var(--vo-font-sans, system-ui, sans-serif);
  font-size: 0.9375rem;   /* ~15px — matches the sm-sized look used most */
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  /* Shape */
  border: 1px solid transparent;
  border-radius: var(--vo-radius, 8px);

  /* Behaviour */
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease,
              color 0.15s ease;

  /* Default neutral appearance (bare .vo-button with no variant) */
  background: var(--vo-bg-muted, #f3f4f6);
  color: var(--vo-text, #1f2937);
}

/* Focus ring — keyboard navigation */
.vo-button:focus-visible,
button.vo-button:focus-visible,
a.vo-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* Subtle press feedback */
.vo-button:active:not(:disabled),
button.vo-button:active:not(:disabled) {
  transform: scale(0.98);
}

/* Disabled state */
.vo-button:disabled,
button.vo-button:disabled,
.vo-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

/* Prefers-reduced-motion: strip transform-based animations */
@media (prefers-reduced-motion: reduce) {
  .vo-button,
  button.vo-button,
  a.vo-button {
    transition: background 0.1s ease, border-color 0.1s ease,
                box-shadow 0.1s ease, color 0.1s ease;
  }

  .vo-button:hover,
  button.vo-button:hover {
    transform: none !important;
  }
}

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

/* --- Primary (brand blue — existing dominant colour) --- */
.vo-button.vo-button-primary,
button.vo-button.vo-button-primary {
  background: var(--primary-600, #2563eb);
  color: #ffffff;
  border-color: var(--primary-600, #2563eb);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.vo-button.vo-button-primary:hover,
button.vo-button.vo-button-primary:hover {
  background: var(--primary-700, #1d4ed8);
  border-color: var(--primary-700, #1d4ed8);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));
  transform: translateY(-1px);
  color: #ffffff;
}

/* --- Secondary (neutral, outlined) --- */
.vo-button.vo-button-secondary,
button.vo-button.vo-button-secondary {
  background: #ffffff;
  color: var(--gray-700, #374151);
  border-color: var(--gray-200, #e5e7eb);
}

.vo-button.vo-button-secondary:hover,
button.vo-button.vo-button-secondary:hover {
  background: var(--gray-50, #f9fafb);
  border-color: var(--gray-300, #d1d5db);
  color: var(--gray-700, #374151);
}

/* --- Danger --- */
.vo-button.vo-button-danger,
button.vo-button.vo-button-danger {
  background: var(--vo-red, #ef4444);
  color: #ffffff;
  border-color: var(--vo-red, #ef4444);
}

.vo-button.vo-button-danger:hover,
button.vo-button.vo-button-danger:hover {
  background: var(--vo-red-hover, #dc2626);
  border-color: var(--vo-red-hover, #dc2626);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));
}

/* --- Success --- */
.vo-button.vo-button-success,
button.vo-button.vo-button-success {
  background: var(--vo-green, #10b981);
  color: #ffffff;
  border-color: var(--vo-green, #10b981);
}

.vo-button.vo-button-success:hover,
button.vo-button.vo-button-success:hover {
  background: var(--vo-green-hover, #059669);
  border-color: var(--vo-green-hover, #059669);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));
}

/* --- Ghost (transparent, subtle) --- */
.vo-button.vo-button-ghost,
button.vo-button.vo-button-ghost {
  background: transparent;
  color: var(--gray-600, #4b5563);
  border-color: transparent;
}

.vo-button.vo-button-ghost:hover,
button.vo-button.vo-button-ghost:hover {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-900, #111827);
}

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

/* Small — compact UI, tables, inline actions */
.vo-button.vo-button-sm,
button.vo-button.vo-button-sm {
  padding: var(--vo-space-2, 8px) var(--vo-space-3, 12px);
  font-size: 0.875rem;
  min-height: 36px;
}

/* Legacy alias used in task/project cards */
.vo-button.vo-button-small,
button.vo-button.vo-button-small {
  padding: var(--vo-space-2, 8px) var(--vo-space-3, 12px);
  font-size: 0.875rem;
  min-height: 36px;
}

/* Large — hero / primary CTA */
.vo-button.vo-button-lg,
button.vo-button.vo-button-lg {
  padding: var(--vo-space-4, 16px) var(--vo-space-6, 24px);
  font-size: 1.125rem;
  min-height: 52px;
}

/* Full-width utility */
.vo-button.vo-button-full,
button.vo-button.vo-button-full {
  width: 100%;
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.vo-button.loading,
button.vo-button.loading {
  position: relative;
  pointer-events: none;
  color: transparent; /* hide label while spinner shows */
}

.vo-button.loading::after,
button.vo-button.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: vo-btn-spin 0.8s linear infinite;
}

/* Restore text colour for the spinner to pick up */
.vo-button.loading {
  color: transparent !important; /* must override variant text colours */
}

.vo-button.loading::after {
  color: #ffffff; /* white spinner; overridden for secondary below */
}

.vo-button.vo-button-secondary.loading::after {
  border-top-color: var(--gray-700, #374151);
}

.vo-button.vo-button-ghost.loading::after {
  border-top-color: var(--gray-600, #4b5563);
}

@keyframes vo-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vo-button.loading::after { animation: none; }
}

/* ==========================================================================
   MOBILE TOUCH TARGET ENFORCEMENT
   Touch targets must be at least 40 × 40 px on small screens.
   ========================================================================== */

@media (max-width: 640px) {
  .vo-button,
  button.vo-button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Small buttons grow to meet target on mobile */
  .vo-button.vo-button-sm,
  button.vo-button.vo-button-sm,
  .vo-button.vo-button-small,
  button.vo-button.vo-button-small {
    min-height: 40px;
    min-width: 40px;
  }
}

/* ==========================================================================
   NAKED-BUTTON GUARD — SCOPED TO DASHBOARD ONLY
   Prevents theme/Elementor accent colours bleeding into unstyled buttons
   inside the VO dashboard shell. Does NOT touch WP admin chrome.

   Wrapper verified from templates/saas-dashboard.php line 1085:
     <div class="saas-dashboard-container vo-dashboard-container …">
   We scope to BOTH class names for resilience.
   ========================================================================== */

/* --- Bare <button> / <input[type=submit]> without any VO class --- */
.saas-dashboard-container button:not([class*="vo-"]):not([class*="btn"]):not(.button):not(.wp-block-button__link),
.vo-dashboard-container   button:not([class*="vo-"]):not([class*="btn"]):not(.button):not(.wp-block-button__link),
.saas-dashboard-container button[type="submit"]:not([class*="vo-"]):not([class*="btn"]):not(.button),
.vo-dashboard-container   button[type="submit"]:not([class*="vo-"]):not([class*="btn"]):not(.button),
.saas-dashboard-container input[type="submit"]:not([class*="vo-"]):not([class*="btn"]):not(.button),
.vo-dashboard-container   input[type="submit"]:not([class*="vo-"]):not([class*="btn"]):not(.button) {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: var(--vo-radius, 8px);
  padding: 0.5rem 1rem;
  font-family: var(--vo-font-sans, system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.saas-dashboard-container button:not([class*="vo-"]):not([class*="btn"]):not(.button):not(.wp-block-button__link):hover,
.vo-dashboard-container   button:not([class*="vo-"]):not([class*="btn"]):not(.button):not(.wp-block-button__link):hover,
.saas-dashboard-container button[type="submit"]:not([class*="vo-"]):not([class*="btn"]):not(.button):hover,
.vo-dashboard-container   button[type="submit"]:not([class*="vo-"]):not([class*="btn"]):not(.button):hover,
.saas-dashboard-container input[type="submit"]:not([class*="vo-"]):not([class*="btn"]):not(.button):hover,
.vo-dashboard-container   input[type="submit"]:not([class*="vo-"]):not([class*="btn"]):not(.button):hover {
  background: var(--gray-200, #e5e7eb);
  border-color: var(--gray-400, #9ca3af);
}

/* --- WordPress .button / .button-primary used inside the dashboard ---
     Map them to the vo look. Using !important here because WP admin
     stylesheets load separately and carry their own specificity; without it
     the purple/pink theme leak wins on pages that load both stylesheets. --- */
.saas-dashboard-container .button,
.vo-dashboard-container   .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100, #f3f4f6) !important; /* override WP admin colour */
  color: var(--gray-700, #374151) !important;
  border: 1px solid var(--gray-300, #d1d5db) !important;
  border-radius: var(--vo-radius, 8px) !important;
  box-shadow: none !important;
  font-family: var(--vo-font-sans, system-ui, sans-serif) !important;
  text-shadow: none !important;
}

.saas-dashboard-container .button:hover,
.vo-dashboard-container   .button:hover {
  background: var(--gray-200, #e5e7eb) !important;
  border-color: var(--gray-400, #9ca3af) !important;
  color: var(--gray-700, #374151) !important;
}

.saas-dashboard-container .button-primary,
.vo-dashboard-container   .button-primary {
  background: var(--primary-600, #2563eb) !important; /* override WP brand */
  color: #ffffff !important;
  border-color: var(--primary-600, #2563eb) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.saas-dashboard-container .button-primary:hover,
.vo-dashboard-container   .button-primary:hover {
  background: var(--primary-700, #1d4ed8) !important;
  border-color: var(--primary-700, #1d4ed8) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   .vo-btn FAMILY — ALIAS OF .vo-button
   --------------------------------------------------------------------------
   A second button family (.vo-btn / .vo-btn-primary / .vo-btn-secondary /
   .vo-btn-ghost / .vo-btn-primary-modern) grew up alongside .vo-button and was
   never represented here. It was defined four separate times instead
   (vo-design.css, vo-email-modern.css, admin.css and twice inside
   saas-dashboard.css) with conflicting padding, font-size and border values,
   and the fragments MERGED at runtime rather than one winning cleanly.

   Worst symptom: saas-dashboard.css overrode .vo-btn-primary and
   .vo-btn-secondary but never .vo-btn-ghost, so a "Prekliči" styled as ghost
   stayed at 14px/8px while the buttons beside it were upsized to 16px/12px —
   visibly smaller and misaligned in the same footer.

   These aliases give the whole family one identity. Variant classes are also
   matched WITHOUT the .vo-btn base, because several templates use
   `class="vo-btn-secondary"` on its own.

   Excluded on purpose (they are icon/size modifiers, not full buttons):
   .vo-btn-icon, .vo-btn-mini, .vo-btn-sm, .vo-btn-outline, .vo-btn--icon
   ========================================================================== */

.vo-btn,
button.vo-btn,
a.vo-btn,
.vo-btn-primary,
.vo-btn-secondary,
.vo-btn-ghost,
.vo-btn-danger,
.vo-btn-success,
.vo-btn-primary-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vo-space-2, 8px);

  padding: var(--vo-space-3, 12px) var(--vo-space-4, 16px);
  min-height: 44px;
  min-width: 44px;

  font-family: var(--vo-font-sans, system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--vo-radius, 8px);

  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease,
              color 0.15s ease;

  background: var(--vo-bg-muted, #f3f4f6);
  color: var(--vo-text, #1f2937);
}

.vo-btn:focus-visible,
.vo-btn-primary:focus-visible,
.vo-btn-secondary:focus-visible,
.vo-btn-ghost:focus-visible,
.vo-btn-primary-modern:focus-visible {
  outline: 2px solid var(--vo-blue, #3b82f6);
  outline-offset: 2px;
}

.vo-btn:disabled,
.vo-btn-primary:disabled,
.vo-btn-secondary:disabled,
.vo-btn-ghost:disabled,
.vo-btn-primary-modern:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- Variants ---- */

.vo-btn-primary,
.vo-btn.vo-btn-primary,
.vo-btn-primary-modern,
.vo-btn.vo-btn-primary-modern {
  background: var(--primary-600, #2563eb);
  border-color: var(--primary-600, #2563eb);
  color: #ffffff;
}

.vo-btn-primary:hover,
.vo-btn.vo-btn-primary:hover,
.vo-btn-primary-modern:hover,
.vo-btn.vo-btn-primary-modern:hover {
  background: var(--primary-700, #1d4ed8);
  border-color: var(--primary-700, #1d4ed8);
  color: #ffffff;
}

/* Secondary and ghost resolve to the same neutral button so a cancel action
   never renders lighter or smaller than its neighbour. */
.vo-btn-secondary,
.vo-btn.vo-btn-secondary,
.vo-btn-ghost,
.vo-btn.vo-btn-ghost {
  background: #ffffff;
  border-color: var(--gray-200, #e5e7eb);
  color: var(--gray-700, #374151);
}

.vo-btn-secondary:hover,
.vo-btn.vo-btn-secondary:hover,
.vo-btn-ghost:hover,
.vo-btn.vo-btn-ghost:hover {
  background: var(--gray-100, #f3f4f6);
  border-color: var(--gray-400, #9ca3af);
  color: var(--gray-900, #1f2937);
}

.vo-btn-danger,
.vo-btn.vo-btn-danger {
  background: var(--vo-red, #ef4444);
  border-color: var(--vo-red, #ef4444);
  color: #ffffff;
}

.vo-btn-danger:hover,
.vo-btn.vo-btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.vo-btn-success,
.vo-btn.vo-btn-success {
  background: var(--vo-green, #10b981);
  border-color: var(--vo-green, #10b981);
  color: #ffffff;
}

/* Referenced by templates/feedback-admin.php but previously defined nowhere,
   so the button fell back to the neutral base with no variant colour. */
.vo-btn-warning,
.vo-btn.vo-btn-warning {
  background: var(--vo-amber, #f59e0b);
  border-color: var(--vo-amber, #f59e0b);
  color: #ffffff;
}

.vo-btn-warning:hover,
.vo-btn.vo-btn-warning:hover {
  background: #d97706;
  border-color: #d97706;
  color: #ffffff;
}