/* 
 * Shared FlowRunner Styles
 * Used by: taskpane, admin, signup pages
 */

/* Primary (Fluent blue) */
.flowrunner-primary-btn {
  min-width: 160px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  background-color: #0078d4 !important;
  border-radius: 6px;
  border: none;
  color: #fff !important;
  box-shadow:
    0 1.6px 3.6px rgba(0, 0, 0, 0.13),
    0 0.3px 0.9px rgba(0, 0, 0, 0.11);
  transition: background-color 0.15s ease;
  cursor: pointer;
  padding: 0 20px;
  /* Font family inherited from .ms-Fabric */
}

.flowrunner-primary-btn:hover,
.flowrunner-primary-btn:focus {
  background-color: #106ebe !important;
  color: #fff !important;
}

.flowrunner-primary-btn:active {
  background-color: #005a9e !important;
}

/* Disabled (override primary to neutral grey) */
.flowrunner-primary-btn:disabled,
.flowrunner-primary-btn.is-disabled,
.ms-Button.ms-Button--primary.flowrunner-primary-btn:disabled,
.ms-Button.ms-Button--primary.flowrunner-primary-btn.is-disabled {
  background: #f3f2f1 !important;
  color: #a19f9d !important;
  border: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.flowrunner-primary-btn:disabled:hover,
.flowrunner-primary-btn.is-disabled:hover,
.flowrunner-primary-btn:disabled:focus,
.flowrunner-primary-btn.is-disabled:focus {
  background: #f3f2f1 !important;
  color: #a19f9d !important;
}

/* Secondary (neutral / subtle) */
.flowrunner-secondary-btn {
  min-height: 40px;
  background: #ffffff;
  color: #0078d4;
  border: 1px solid #c8c6c4;
  border-radius: 6px;
  padding: 0 16px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.flowrunner-secondary-btn:hover,
.flowrunner-secondary-btn:focus {
  background: #f3f2f1;
  border-color: #a19f9d;
  color: #005fa3;
}

/* Danger */
.flowrunner-danger-btn {
  min-width: 140px;
  min-height: 40px;
  font-size: 0.95rem;
  background-color: #d13438 !important;
  border-radius: 6px;
  border: none;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background 0.2s;
}
.flowrunner-danger-btn:hover,
.flowrunner-danger-btn:focus {
  background-color: #a4262c !important;
}
.flowrunner-danger-btn:disabled,
.flowrunner-danger-btn.is-disabled {
  background: #e1e1e1 !important;
  color: #888 !important;
}

/* Danger Secondary (outlined red) */
.flowrunner-danger-secondary-btn {
  min-height: 40px;
  background: #ffffff;
  color: #d13438;
  border: 1px solid #d13438;
  border-radius: 6px;
  padding: 0 16px;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.flowrunner-danger-secondary-btn:hover,
.flowrunner-danger-secondary-btn:focus {
  background: #fef6f6;
  border-color: #a4262c;
  color: #a4262c;
}
.flowrunner-danger-secondary-btn:disabled,
.flowrunner-danger-secondary-btn.is-disabled {
  background: #ffffff;
  border-color: #c8c6c4;
  color: #a19f9d;
  cursor: not-allowed;
}

/* Utility */
.hidden {
  display: none !important;
}

/* Sections layout for People and Flows */
.flowrunner-section-stack {
  display: -ms-flexbox; /* IE 10 */
  -ms-flex-direction: column; /* IE 10 */
  display: flex;
  flex-direction: column;
}
.flowrunner-section-stack > * {
  margin-top: 8px;
}
.flowrunner-section-stack > *:first-child {
  margin-top: 0;
}
.flowrunner-section-title {
  margin: 4px 0 2px 0;
}
.flowrunner-section-title--flows {
  margin: 12px 0 2px 0;
}
.flowrunner-run-btn {
  margin-top: 12px;
}

/* Header actions */
.fr-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.fr-header-actions > * {
  margin-left: 8px;
}
.fr-help-btn {
  min-width: 36px;
  min-height: 36px;
  border-radius: 18px;
  border: 1px solid #c8c6c4;
  background: #fff;
}

/* Onboarding styles */
.onboarding {
  border-color: #e6f0ff;
  background: #f5f9ff;
}
.onb-steps {
  margin: 0;
  padding-left: 20px;
}
.onb-label {
  display: flex;
  cursor: pointer;
}
.onb-label > * + * {
  margin-left: 8px;
}
#onboarding .onb-step.done .step-text {
  text-decoration: line-through;
  color: #605e5c;
}
#onboarding .onb-step-content {
  display: block;
  margin: 8px 0 16px;
}
#onboarding.collapsed .onb-step-content {
  display: none;
}
.onb-img {
  max-width: 100%;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
}
.onb-gap-8 {
  height: 8px;
}
.onb-actions {
  margin-top: 12px;
  display: flex;
}
.onb-actions > * + * {
  margin-left: 12px;
}

/* Modal Input Styles */
.modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #8a8886;
  border-radius: 2px;
  margin-top: 8px;
  font-family:
    "Segoe UI",
    -apple-system,
    BlinkMacSystemFont,
    "Roboto",
    "Helvetica Neue",
    sans-serif;
}

.modal-input:focus {
  outline: none;
  border-color: #0078d4;
  box-shadow: 0 0 0 1px #0078d4;
}

.modal-input-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  margin-top: 12px;
  margin-bottom: 4px;
}

.modal-input-error {
  font-size: 12px;
  color: #a80000;
  margin-top: 4px;
}

/* Logo styling for signup/admin/deleted pages */
.signup-logo img {
  height: 56px; /* Same as h-14 in Tailwind (3.5rem = 56px) */
  width: auto;
  object-fit: contain;
  object-position: left;
}