/* Zapier-inspired overrides layered on top of Horilla styles */

/* Base surface + typography */
body{
  background: var(--z-cream) !important;
  color: var(--z-charcoal);
}

/* Tailwind utility aliases frequently used in templates */
.bg-secondary-50{ background-color: var(--z-cream) !important; }
.bg-secondary-100{ background-color: var(--z-cream-alt) !important; }
.bg-secondary-200{ background-color: var(--z-light-sand) !important; }
.text-secondary-900{ color: var(--z-black) !important; }
.text-color-600{ color: var(--z-warm-gray) !important; }

/* “White” surfaces become cream, borders become sand */
.bg-white{ background-color: var(--z-cream) !important; }
.border, .border-gray-200, .border-secondary-200{ border-color: var(--z-sand) !important; }

/* Links */
a{ color: var(--z-black); }
a:hover{ text-decoration: none; }

/* Bootstrap-compat primary buttons (compat_bootstrap_oh.css) */
:where(.btn-primary),
button.oh-btn--primary,
a.oh-btn--primary,
input[type="submit"].oh-btn--primary{
  background: var(--z-orange) !important;
  border-color: var(--z-orange) !important;
  color: var(--z-cream) !important;
  border-radius: 8px;
  box-shadow: none !important;
}

:where(.btn-outline-primary),
:where(.btn-link){
  background: transparent !important;
  border-color: var(--z-sand) !important;
  color: var(--z-black) !important;
  border-radius: 8px;
}

:where(.btn-outline-primary):hover,
button.oh-btn--primary:hover,
a.oh-btn--primary:hover{
  background: var(--z-sand) !important;
  border-color: var(--z-sand) !important;
  color: var(--z-black) !important;
}

/* Card elevation -> border-forward */
.card,
.module-card,
.oh-card,
.oh-panel,
.oh-card--elevated,
.oh-metric-strip__item,
.oh-field-tile,
[class*="[box-shadow:"],
.shadow,
.shadow-sm,
.shadow-md{
  box-shadow: none !important;
}

.card,
.module-card,
.oh-card,
.oh-panel{
  background: var(--z-cream) !important;
  border: 1px solid var(--z-sand) !important;
}

/* Radius + shadow normalization (cards/modals/popovers/overlays) */
.card,
.module-card,
.oh-card,
.oh-panel,
.oh-card--elevated,
.oh-metric-strip__item,
.oh-field-tile,
.oh-form__fieldset,
.oh-filter-tabs__controls,
.oh-table-responsive,
.modal,
.modal-content,
.dropdown-content,
.swal2-popup,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.toast,
.note-editor{
  border-radius: 8px !important;
}

.dropdown-content,
.swal2-popup,
.select2-dropdown,
.modal,
.oh-card,
.oh-panel,
.oh-card--elevated,
.oh-metric-strip__item,
.oh-field-tile{
  box-shadow: none !important;
}

/* Tight buttons; Zapier keeps radii small for primary actions */
:where(.btn, .oh-btn, button.oh-btn--primary, button.oh-btn--secondary, button.oh-btn--danger, button.oh-btn--warning, button.oh-btn--info, a.oh-btn, input[type="submit"].oh-btn){
  border-radius: 4px !important;
}

/* Normalize Tailwind radii classes across the app */
:where(.rounded-sm){ border-radius: 6px !important; }
:where(.rounded-md){ border-radius: 8px !important; }
:where(.rounded-lg){ border-radius: 8px !important; }
:where(.rounded-xl){ border-radius: 8px !important; }
:where(.rounded-2xl){ border-radius: 10px !important; }

/* Inputs */
input, textarea, select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  background-color: var(--z-cream) !important;
  border-color: var(--z-sand) !important;
  color: var(--z-black) !important;
}

input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: var(--z-orange) !important;
}

/* Tabs: inset underline style (best-effort for common tab buttons) */
.tab-active,
[aria-selected="true"].tab,
.oh-tabs__item--active{
  box-shadow: var(--z-tab-active) !important;
}

.tab:hover,
.oh-tabs__item:hover{
  box-shadow: var(--z-tab-hover) !important;
}