/**
 * AHMED — Global Action & Button Design System
 * Reference: Calendar page (.btn / .btn--secondary)
 *
 * SCOPE: command buttons only (ag-btn-*, Quasar primary/outline/round).
 * Does NOT restyle: segmented controls, tabs, status pills, chips, filters containers.
 * Visual only — no callback/route/workflow changes.
 */

/*
 * Quasar/NiceGUI injects inline --q-primary on body AND a late .q-btn.bg-primary rule.
 * Beat both with higher specificity + background-color longhand.
 */
html body {
  --q-primary: var(--action-primary-bg, var(--brand-dark-teal, #21403D));
}

/* ========== PRIMARY (Calendar New Meeting) ========== */
html body .ag-btn-primary,
html body .q-btn.ag-btn-primary,
html body button.q-btn.ag-btn-primary,
html body .ag-page-header-action.ag-btn-primary,
html body .ag-login-submit.ag-btn-primary,
html body button.q-btn.bg-primary.ag-btn-primary,
html body .q-btn.bg-primary:not(.ag-mail-btn--google):not(.ag-mail-btn--gmail):not(.ag-provider-btn):not(.ag-btn-brand):not(.ag-seg--on) {
  background: var(--action-primary-bg, var(--brand-dark-teal, #21403D)) !important;
  background-color: var(--action-primary-bg, var(--brand-dark-teal, #21403D)) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, box-shadow 140ms ease, filter 140ms ease, transform 100ms ease !important;
}

html body .ag-btn-primary:hover,
html body .q-btn.ag-btn-primary:hover,
html body button.q-btn.bg-primary:not(.ag-mail-btn--google):not(.ag-provider-btn):not(.ag-btn-brand):hover {
  background: var(--action-primary-hover, #1A3532) !important;
  background-color: var(--action-primary-hover, #1A3532) !important;
  color: #fff !important;
  filter: brightness(1.02);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  transform: none !important;
}

html body .ag-btn-primary:active,
html body .q-btn.ag-btn-primary:active {
  background: var(--action-primary-active, #142927) !important;
  background-color: var(--action-primary-active, #142927) !important;
  transform: scale(0.98) !important;
  box-shadow: none !important;
  filter: none;
}

html body .ag-btn-primary::before,
html body .q-btn.ag-btn-primary::before {
  display: none !important;
}

/* ========== SECONDARY (Calendar Print / Filter / Today) ========== */
html body .ag-btn-secondary,
html body .q-btn.ag-btn-secondary,
html body button.q-btn.ag-btn-secondary {
  background: var(--surface-primary, #fff) !important;
  background-color: var(--surface-primary, #fff) !important;
  color: var(--text-primary, #0F172A) !important;
  border: 1px solid var(--border-default, #E2E5EA) !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  box-shadow: var(--shadow-standard, 0 1px 2px rgba(15, 23, 42, 0.05)) !important;
}

html body .ag-btn-secondary:hover,
html body .q-btn.ag-btn-secondary:hover {
  background: var(--surface-secondary, #F1F3F5) !important;
  background-color: var(--surface-secondary, #F1F3F5) !important;
  color: var(--text-primary) !important;
  filter: none !important;
}

/* Outline command buttons → secondary (exclude seg/tabs/pills/chips) */
.ag-content .q-btn--outline:not(.text-negative):not(.bg-negative):not(.ag-btn-danger):not(.ag-btn-brand):not(.ag-btn-primary):not(.ag-seg--on):not(.ag-tasks-pill):not(.ag-actions-chip):not(.ag-notif-type-chip):not(.ag-mom-mode-btn) {
  background: var(--surface-primary, #fff) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  min-height: 40px !important;
  box-shadow: var(--shadow-standard, 0 1px 2px rgba(15, 23, 42, 0.05)) !important;
}

.ag-content .q-btn--outline:not(.text-negative):not(.bg-negative):not(.ag-btn-danger):not(.ag-seg--on):not(.ag-tasks-pill):not(.ag-actions-chip):hover {
  background: var(--surface-secondary, #F1F3F5) !important;
}

/* ========== TERTIARY / GHOST ========== */
.ag-btn-tertiary,
.ag-btn-ghost,
.q-btn.ag-btn-tertiary,
.q-btn.ag-btn-ghost {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: var(--radius-sm, 6px) !important;
  min-height: 40px !important;
}

.ag-btn-tertiary:hover,
.ag-btn-ghost:hover,
.q-btn.ag-btn-tertiary:hover,
.q-btn.ag-btn-ghost:hover {
  background: var(--surface-secondary, #F1F5F9) !important;
  color: var(--text-primary) !important;
}

/* ========== ICON (Calendar arrow style: white + border square) ========== */
.ag-btn-icon,
.q-btn.ag-btn-icon {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: var(--radius-sm, 6px) !important;
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-standard) !important;
}

.ag-btn-icon:hover,
.q-btn.ag-btn-icon:hover {
  background: var(--surface-secondary) !important;
}

/* Round utility icons in content — same look, exclude chips/seg */
.ag-content .q-btn--round.q-btn--flat:not(.ag-mail-btn--google):not(.ag-provider-btn):not(.ag-seg--on):not(.ag-actions-chip):not(.ag-notif-type-chip),
.ag-content .q-btn--round.q-btn--dense:not(.ag-mail-btn--google):not(.ag-provider-btn):not(.ag-seg--on):not(.ag-actions-chip) {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: var(--radius-sm, 6px) !important;
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-standard) !important;
}

.ag-content .q-btn--round.text-negative {
  color: var(--status-critical-text) !important;
  border-color: color-mix(in srgb, var(--status-critical-text) 35%, var(--border-default)) !important;
}

/* ========== BRAND / DANGER / SUCCESS ========== */
.ag-btn-brand,
.q-btn.ag-btn-brand {
  background: var(--brand-orange) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm, 6px) !important;
  min-height: 40px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.ag-btn-danger,
.q-btn.ag-btn-danger {
  background: var(--surface-primary) !important;
  color: var(--status-critical-text) !important;
  border: 1px solid color-mix(in srgb, var(--status-critical-text) 40%, var(--border-default)) !important;
  border-radius: var(--radius-sm, 6px) !important;
  min-height: 40px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.ag-btn-danger:hover,
.q-btn.ag-btn-danger:hover {
  background: color-mix(in srgb, var(--status-critical-bg) 55%, var(--surface-primary)) !important;
}

.ag-btn-danger-filled,
.q-btn.ag-btn-danger-filled,
.ag-dialog-footer .q-btn.bg-negative {
  background: var(--status-critical-text) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.ag-btn-success,
.q-btn.ag-btn-success {
  background: var(--status-success-text) !important;
  color: #fff !important;
  border-radius: var(--radius-sm, 6px) !important;
  min-height: 40px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* ========== Sizes ========== */
.ag-btn--sm,
.q-btn.ag-btn--sm {
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 0.82rem !important;
}

.ag-btn--lg,
.ag-login-submit.ag-btn-primary {
  min-height: 44px !important;
  padding: 0 20px !important;
}

/* ========== Focus / disabled ========== */
.ag-btn-primary:focus-visible,
.ag-btn-secondary:focus-visible,
.ag-btn-tertiary:focus-visible,
.ag-btn-icon:focus-visible,
.q-btn.ag-btn-primary:focus-visible,
.q-btn.ag-btn-secondary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(33, 64, 61, 0.28)) !important;
}

.ag-btn-primary[disabled],
.ag-btn-primary.disabled,
.q-btn.ag-btn-primary[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}

/* ========== Mail primary aligns to Calendar primary ========== */
.ag-mail-btn--primary {
  background: var(--action-primary-bg, var(--brand-dark-teal)) !important;
  border-color: var(--action-primary-bg, var(--brand-dark-teal)) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.ag-mail-btn--primary:hover {
  filter: brightness(1.02);
  background: var(--action-primary-hover, #1A3532) !important;
}

/* ========== PROTECTED: restore segmented / tabs / status (must win) ========== */
.ag-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.25rem;
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--ag-radius, 8px) !important;
  width: fit-content;
  max-width: 100%;
}

.ag-tasks-seg {
  background: var(--surface-secondary, var(--surface-primary)) !important;
  border: 1px solid var(--border-subtle, var(--border-default)) !important;
  border-radius: 8px !important;
  padding: 2px !important;
}

.ag-seg .q-btn,
.ag-tasks-seg .q-btn,
.ag-tasks-scope-seg .q-btn {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  min-height: 32px !important;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 6px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.ag-seg .q-btn.ag-seg--on,
.ag-seg .q-btn[aria-pressed="true"],
.ag-tasks-seg .q-btn.ag-seg--on,
.ag-tasks-seg .q-btn[aria-pressed="true"],
.ag-tasks-scope-seg .q-btn.ag-seg--on,
.ag-tasks-scope-seg .q-btn[aria-pressed="true"] {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-standard) !important;
}

.ag-seg .q-btn:hover,
.ag-tasks-seg .q-btn:hover {
  background: color-mix(in srgb, var(--surface-primary) 70%, transparent) !important;
  color: var(--text-primary) !important;
}

.ag-seg .q-btn.ag-seg--on:hover,
.ag-tasks-seg .q-btn.ag-seg--on:hover {
  background: var(--surface-primary) !important;
}

/* Status pills */
.ag-tasks-pill,
.ag-content .ag-tasks-pill.q-btn {
  min-height: 30px !important;
  height: auto !important;
  width: auto !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.75rem !important;
  background: var(--surface-primary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: none !important;
}

.ag-tasks-pill.is-on,
.ag-content .ag-tasks-pill.q-btn.is-on {
  background: color-mix(in srgb, var(--brand-dark-teal) 10%, var(--surface-primary)) !important;
  border-color: color-mix(in srgb, var(--brand-dark-teal) 35%, var(--border-default)) !important;
  color: var(--brand-dark-teal) !important;
}

/* Filter triggers — secondary look, keep selection shading */
.ag-cc-filter-btn,
.ag-actions-filter-trigger,
.ag-dash-filter-btn {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-standard) !important;
  text-transform: none !important;
  min-height: 40px !important;
}

.ag-cc-filter-btn.is-active,
.ag-actions-filter-trigger--active {
  background: color-mix(in srgb, var(--brand-dark-teal) 7%, var(--surface-primary)) !important;
  border-color: color-mix(in srgb, var(--brand-dark-teal) 28%, var(--border-default)) !important;
  box-shadow: inset 3px 0 0 var(--brand-dark-teal) !important;
}

/* Request mailbox tabs — active shading on unelevated */
.ag-req-tabs {
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--ag-radius, 8px) !important;
  padding: 0.25rem !important;
}

.ag-req-tabs .q-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  min-height: 32px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.ag-req-tabs .q-btn.q-btn--unelevated {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-standard) !important;
  border: 1px solid var(--border-default) !important;
}

/* MoM Review/Edit mode toggle */
.ag-mom-mode-toggle {
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border-default) !important;
}

.ag-mom-mode-btn {
  font-weight: 600 !important;
  text-transform: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.ag-mom-mode-btn--active {
  background: var(--action-primary-bg, var(--brand-dark-teal)) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Chips must keep their own tones */
.ag-actions-chip,
.ag-notif-type-chip {
  box-shadow: none !important;
}

/* Dashboard / control-center segment underline tabs */
.ag-cc-seg-btn {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
  color: var(--text-secondary) !important;
}

.ag-cc-seg-btn.is-active {
  color: var(--text-primary) !important;
  border-bottom-color: var(--text-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ag-btn-primary,
  .ag-btn-secondary,
  .q-btn.ag-btn-primary {
    transition: none !important;
  }
  .ag-btn-primary:active {
    transform: none !important;
  }
}