/* Heathershaw's Integrative Pharmacy — shared brand tokens
   Source of truth: practitioner live-stock portal look. */

:root {
  --brand-green:      #2d615d;
  --brand-green-dark: #1e4643;
  --brand-green-tint: #cfe8e5;
  --brand-gold:       #9f8869;
  --charcoal:         #1a2226;
  --mist:             #fafcfe;
  --sand:             #eef4f3;
  --muted:            #6b7780;
  --border:           rgba(45, 97, 93, 0.16);
  --white:            #ffffff;
  --amber:            #b7791f;
  --red:              #b4483f;
  --shadow-soft:      0 1px 3px rgba(26, 34, 38, 0.06), 0 4px 16px -8px rgba(26, 34, 38, 0.12);

  /* Analytics / chart aliases (map onto brand) */
  --bg:        var(--mist);
  --surface:   var(--white);
  --text:      var(--charcoal);
  --accent:    var(--brand-green);
  --green:     var(--brand-green);
  --orange:    var(--amber);
  --purple:    #6b8f8b;
  --teal:      #4a8a84;
  --row-hover: rgba(45, 97, 93, 0.04);
}

/* Shared buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}
.btn svg { width: 15px; height: 15px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--brand-green); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-green-dark); }
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--white);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--charcoal);
  border-color: rgba(45, 97, 93, .35);
}
.btn-block { width: 100%; text-align: center; justify-content: center; }

/* Sync status dot */
.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
  flex-shrink: 0;
}
.sync-dot.syncing { background: var(--amber); animation: brand-pulse .9s ease-in-out infinite; }
.sync-dot.error { background: var(--red); }
@keyframes brand-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Remember-me row, shared by the three login pages. Lives here rather than in
   each page's <style> block; the compound selector also beats those pages'
   bare `input {}` rule, which would otherwise stretch the box full-width. */
.remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -4px 0 20px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  /* The login pages style every `label` as an uppercase field heading, which
     makes this read as a section title rather than a choice. */
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--brand-green);
  cursor: pointer;
}

/* Form focus ring helper */
.brand-focus:focus,
input.brand-focus:focus,
textarea.brand-focus:focus,
select.brand-focus:focus {
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px rgba(45, 97, 93, .12);
  outline: none;
}