/* Unified buttons across the app ---------------------------------------- */

/* Pill buttons (links + buttons) */
.btn,
.btn-secondary,
.button-add-new,
.form__button,
.client-view-btn,
.call-view-btn,
.visit-view-btn,
.sub-view-btn,
.task-action-btn,
.task-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;

  border-radius: 9999px !important;
  border: 1px solid var(--c-border, rgba(0,0,0,0.12)) !important;
  background: var(--c-topbar-button-bg, #e2e8f0) !important;
  color: var(--c-topbar-button-text, var(--c-text, #0f172a)) !important;
  text-decoration: none !important;

  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease !important;
}
.form__button { width: auto !important; margin-right: 0 !important; }

.btn:hover,
.btn-secondary:hover,
.button-add-new:hover,
.form__button:hover,
.client-view-btn:hover,
.call-view-btn:hover,
.visit-view-btn:hover,
.sub-view-btn:hover,
.task-action-btn:hover,
.task-btn:hover {
  background: var(--c-topbar-button-hover-bg, #cbd5f5) !important;
  color: var(--c-topbar-button-hover-text, var(--c-text, #0f172a)) !important;
  border-color: var(--c-topbar-button-text, #1e293b) !important;
}

body.ui-effects-enabled .btn,
body.ui-effects-enabled .btn-secondary,
body.ui-effects-enabled .button-add-new,
body.ui-effects-enabled .form__button,
body.ui-effects-enabled .client-view-btn,
body.ui-effects-enabled .call-view-btn,
body.ui-effects-enabled .visit-view-btn,
body.ui-effects-enabled .sub-view-btn,
body.ui-effects-enabled .task-action-btn,
body.ui-effects-enabled .task-btn {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease !important;
}

body.ui-effects-enabled .btn:hover,
body.ui-effects-enabled .btn-secondary:hover,
body.ui-effects-enabled .button-add-new:hover,
body.ui-effects-enabled .form__button:hover,
body.ui-effects-enabled .client-view-btn:hover,
body.ui-effects-enabled .call-view-btn:hover,
body.ui-effects-enabled .visit-view-btn:hover,
body.ui-effects-enabled .sub-view-btn:hover,
body.ui-effects-enabled .task-action-btn:hover,
body.ui-effects-enabled .task-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
}

.btn:focus-visible,
.btn-secondary:focus-visible,
.button-add-new:focus-visible,
.form__button:focus-visible,
.client-view-btn:focus-visible,
.call-view-btn:focus-visible,
.visit-view-btn:focus-visible,
.sub-view-btn:focus-visible,
.task-action-btn:focus-visible,
.task-btn:focus-visible {
  outline: 3px solid var(--c-form-input-focus-shadow, rgba(0, 123, 255, 0.6)) !important;
  outline-offset: 2px !important;
}

.btn:disabled,
.btn-secondary:disabled,
.form__button:disabled,
.task-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn svg,
.btn-secondary svg,
.button-add-new svg,
.form__button svg,
.client-view-btn svg,
.call-view-btn svg,
.visit-view-btn svg,
.sub-view-btn svg,
.task-action-btn svg,
.task-btn svg {
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
}

/* Compact pills */
.btn-small {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
}
.btn-small svg {
  width: 16px !important;
  height: 16px !important;
}

/* Text / ghost button */
.btn-text {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--c-topbar-muted, #475569) !important;
  box-shadow: none !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.btn-text:hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--c-text, #0f172a) !important;
  text-decoration: underline !important;
}

/* Icon-only buttons */
.button-add-new--icon,
.form__button--icon,
.btn-icon,
.icon-btn,
.worklog-delete-btn {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 9999px !important;
  justify-content: center !important;
}

.icon-btn {
  background: var(--c-topbar-button-bg, #e2e8f0) !important;
  border: 1px solid var(--c-border, rgba(0,0,0,0.12)) !important;
  color: var(--c-icon, var(--c-topbar-button-text, #0f172a)) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.icon-btn:hover {
  background: var(--c-topbar-button-hover-bg, #cbd5f5) !important;
  color: var(--c-icon-hover, var(--c-icon, var(--c-topbar-button-hover-text, var(--c-text, #0f172a)))) !important;
  border-color: var(--c-topbar-button-text, #1e293b) !important;
}
body.ui-effects-enabled .icon-btn {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease !important;
}
body.ui-effects-enabled .icon-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
}
.icon-btn:focus-visible {
  outline: 3px solid var(--c-form-input-focus-shadow, rgba(0, 123, 255, 0.6)) !important;
  outline-offset: 2px !important;
}
.icon-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* Special-case: admin delete buttons should follow the same icon-btn system */
.worklog-delete-btn {
  background: var(--c-topbar-button-bg, #e2e8f0) !important;
  border: 1px solid var(--c-border, rgba(0,0,0,0.12)) !important;
  color: var(--c-delete, #ff3232) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}
.worklog-delete-btn:hover,
.worklog-delete-btn:focus-visible {
  background: var(--c-topbar-button-hover-bg, #cbd5f5) !important;
  color: var(--c-delete, #ff3232) !important;
  border-color: var(--c-topbar-button-text, #1e293b) !important;
}

/* Action colors: keep the same background/border, only change icon/text color */
.edit-btn,
.edit-btn.icon-btn { color: var(--c-edit, var(--c-primary, #1a73e8)) !important; }
.edit-btn:hover,
.edit-btn.icon-btn:hover { color: var(--c-edit-hover, var(--c-edit, var(--c-primary, #1a73e8))) !important; }
.delete-btn,
.delete-btn.icon-btn { color: var(--c-delete, #ff3232) !important; }
.delete-btn:hover,
.delete-btn.icon-btn:hover { color: var(--c-delete-hover, var(--c-delete, #ff3232)) !important; }
.sms-btn,
.sms-btn.icon-btn { color: var(--c-sms, #009688) !important; }
.sms-btn:hover,
.sms-btn.icon-btn:hover { color: var(--c-sms-hover, var(--c-sms, #009688)) !important; }
.save-btn,
.save-btn.icon-btn { color: var(--c-save, #16a34a) !important; }
.save-btn:hover,
.save-btn.icon-btn:hover { color: var(--c-save-hover, var(--c-save, #16a34a)) !important; }
.cancel-btn,
.cancel-btn.icon-btn { color: var(--c-cancel, #64748b) !important; }
.cancel-btn:hover,
.cancel-btn.icon-btn:hover { color: var(--c-cancel-hover, var(--c-cancel, #64748b)) !important; }
.submit-btn,
.submit-btn.icon-btn { color: var(--c-submit, var(--c-primary, #1a73e8)) !important; }
.submit-btn:hover,
.submit-btn.icon-btn:hover { color: var(--c-submit-hover, var(--c-submit, var(--c-primary, #1a73e8))) !important; }

.btn-primary,
.client-view-btn--primary,
.call-view-btn--primary,
.visit-view-btn--primary,
.sub-view-btn--primary,
.task-btn--primary {
  background: var(--c-topbar-button-bg, #e2e8f0) !important;
  border-color: var(--c-border, rgba(0,0,0,0.12)) !important;
  color: var(--c-submit, var(--c-primary, #1a73e8)) !important;
}

.form__button__register {
  color: var(--c-save, #16a34a) !important;
}

.btn-danger {
  background: var(--c-topbar-button-bg, #e2e8f0) !important;
  border-color: var(--c-border, rgba(0,0,0,0.12)) !important;
  color: var(--c-delete, #ff3232) !important;
}

.form__button__reset {
  background: var(--c-topbar-button-bg, #e2e8f0) !important;
  border-color: var(--c-border, rgba(0,0,0,0.12)) !important;
  color: var(--c-cancel, #64748b) !important;
}

/* Common page-specific button classes should share the same height even when
   they are styled outside the main .btn system. Width stays content-based. */
.ao-btn,
.training-btn,
.pos-btn,
.posdash-action,
.posdash-ticket-link,
.review-button,
.store-view__btn,
.email-button,
.pwf-button {
  min-height: 44px !important;
}

.ao-btn:hover,
.training-btn:hover,
.pos-btn:hover,
.posdash-action:hover,
.posdash-ticket-link:hover,
.review-button:hover,
.store-view__btn:hover,
.email-button:hover,
.pwf-button:hover {
  border-color: var(--c-topbar-button-text, #1e293b) !important;
}

/* Keep buttons readable on very small screens */
@media (max-width: 640px) {
  .button-add-new:not(.button-add-new--icon),
  .form__button:not(.form__button--icon) {
    width: 100% !important;
  }
}