/* ═══════════════════════════════════════════════════════════════════
   Atlas — Design System (Farmodiética CRM UI Kit)
   Tokens alinhados ao layout Atlas Admin / CRM Farmodiética.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand ramps (CRM UI Kit) */
  --color-primary-50: #dee7ef;
  --color-primary-300: #6688af;
  --color-primary-500: #035f8f;
  --color-primary-900: #2e485d;
  --color-secondary-50: #e0f2fa;
  --color-secondary-300: #92d2ee;
  --color-secondary-500: #29a7de;
  --color-secondary-900: #1a6385;
  --color-tertiary-50: #f6f6f6;
  --color-tertiary-300: #bfbfbf;
  --color-tertiary-500: #efefef;
  --color-tertiary-900: #7c7c7c;
  --color-accent-50: #f5f3ff;
  --color-accent-300: #ddd6fe;
  --color-accent-500: #7c5cfa;
  --color-accent-900: #5b3bbe;

  --color-text-900: #333333;
  --color-text-600: #727272;

  --color-neutral-50: #fafafa;
  --color-neutral-300: #e6e6e6;
  --color-neutral-500: #747474;
  --color-neutral-900: #575757;
  --color-info-50: #e5fdff;
  --color-info-300: #d3e5f5;
  --color-info-500: #0059d1;
  --color-info-900: #133784;
  --color-success-50: #ddffdf;
  --color-success-300: #b9e3bc;
  --color-success-500: #01951e;
  --color-success-900: #256e25;
  --color-warning-50: #fff9e0;
  --color-warning-300: #ffe9b9;
  --color-warning-500: #ff9d00;
  --color-warning-900: #964b00;
  --color-error-50: #ffe6e6;
  --color-error-300: #facaca;
  --color-error-500: #cb0000;
  --color-error-900: #a50100;

  --color-white: #ffffff;
  --color-grey-25: #fafafa;
  --color-grey-50: #f6f6f6;
  --color-grey-100: #efefef;
  --color-grey-200: #e6e6e6;
  --color-grey-400: #bfbfbf;
  --color-grey-600: #7c7c7c;
  --color-grey-800: #575757;
  --color-grey-900: #333333;
  --color-black: #000000;

  /* Acento — aliases usados em toda a app */
  --accent: var(--color-primary-500);
  --accent-hover: var(--color-primary-900);
  --accent-active: var(--color-primary-900);
  --accent-weak: var(--color-primary-50);
  --accent-ring: rgba(41, 167, 222, 0.35);

  --farmo-blue: var(--accent);
  --farmo-blue-dark: var(--accent-hover);
  --farmo-blue-dim: var(--accent-weak);
  --farmo-blue-mid: var(--accent-ring);

  --farmo-green: var(--color-success-500);
  --farmo-green-dim: var(--color-success-50);
  --farmo-red: var(--color-error-500);
  --farmo-red-dim: var(--color-error-50);
  --farmo-amber: var(--color-warning-900);
  --farmo-amber-dim: var(--color-warning-50);
  --farmo-purple: var(--color-accent-500);
  --farmo-purple-dim: var(--color-accent-50);

  --surface: var(--color-white);
  --surface-muted: var(--color-grey-25);
  --surface-elevated: var(--color-white);
  --surface-sunken: var(--color-grey-50);
  --page-bg: #f0f1f1;   /* fundo da página (main-content) — cinza para os cards brancos saltarem */
  --border-color: var(--color-grey-100);
  --border-strong: var(--color-grey-400);
  --border-muted: var(--color-grey-100);
  --field-bg: var(--surface);
  --field-border: var(--border-strong);

  --bs-body-color: var(--color-text-900);
  --bs-secondary-color: var(--color-text-600);
  --ink-muted: var(--color-grey-400);

  /* Sidebar — azul CRM */
  --sidebar-bg: var(--color-primary-500);
  --sidebar-border: rgba(255, 255, 255, 0.14);
  --sidebar-text: rgba(255, 255, 255, 0.92);
  --sidebar-text-hover: #ffffff;
  --sidebar-hover: var(--color-primary-900);
  --sidebar-active-bg: var(--color-primary-900);
  --sidebar-width: 240px;

  /* Tipografia — Raleway (INST Farmodiética) */
  --font-heading: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* Forma — 4 px no kit CRM */
  --radius-card: 4px;
  --radius-btn: 4px;
  --radius-sm: 4px;
  --radius-lg: 4px;

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(46, 72, 93, 0.1);
  --shadow-card: none;
  --shadow-hover: 0 4px 12px rgba(46, 72, 93, 0.16);
  --shadow-elevated: 0 12px 32px rgba(46, 72, 93, 0.24);
  --shadow-dialog: 0 12px 32px rgba(46, 72, 93, 0.24);
  --shadow-focus: 0 0 0 3px rgba(41, 167, 222, 0.35);

  --transition: 0.12s cubic-bezier(0.2, 0, 0.2, 1);

  --control-height-sm: 28px;
  --control-height-md: 36px;
  --control-height-lg: 44px;
  --page-gutter: 24px;
}

[data-bs-theme="dark"] {
  /* Interativo — secondary torna-se protagonista no dark */
  --accent: #29a7de;
  --accent-hover: #6688af;
  --accent-active: #6688af;
  --accent-weak: rgba(41, 167, 222, 0.16);
  --accent-ring: rgba(41, 167, 222, 0.35);

  --farmo-green: #22c55e;
  --farmo-green-dim: rgba(34, 197, 94, 0.18);
  --farmo-red: #f1706f;
  --farmo-red-dim: rgba(241, 112, 111, 0.18);
  --farmo-amber: #fbbf24;
  --farmo-amber-dim: rgba(251, 191, 36, 0.18);
  --farmo-purple: #9085e9;
  --farmo-purple-dim: rgba(144, 133, 233, 0.18);

  --surface: #16202a;
  --surface-muted: #10181f;
  --surface-elevated: #16202a;
  --surface-sunken: #0f1720;
  --page-bg: #10181f;
  --border-color: #24313d;
  --border-strong: #1f2f3f;
  --border-muted: #24313d;
  --field-bg: #0f1720;
  --field-border: #1f2f3f;

  --bs-body-color: #e6e8eb;
  --bs-secondary-color: #969ca6;
  --ink-muted: #6b7280;

  /* Marca — superfície de navegação; ativo = primary-900 */
  --sidebar-bg: #035f8f;
  --sidebar-border: rgba(255, 255, 255, 0.14);
  --sidebar-hover: #2e485d;
  --sidebar-active-bg: #2e485d;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-dialog: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(41, 167, 222, 0.35);
}

:root {
  --bs-primary: #035f8f;
  --bs-primary-rgb: 3, 95, 143;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);
  --bs-body-bg: var(--page-bg);
  --bs-border-color: var(--border-color);
}

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-active);
  --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-focus-shadow-rgb: 3, 95, 143;
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #12202b;
  --bs-btn-hover-color: #12202b;
  --bs-btn-active-color: #12202b;
  --bs-btn-disabled-color: #12202b;
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent-active);
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #12202b;
  --bs-btn-active-color: #12202b;
}

.text-primary {
  color: var(--accent) !important;
}

.bg-primary {
  background-color: var(--accent) !important;
}

.link-primary {
  color: var(--accent) !important;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-heading);
  letter-spacing: 0;
  color: var(--color-primary-900);
  font-weight: 600;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: var(--bs-body-color);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.text-muted,
.text-secondary {
  color: var(--bs-secondary-color) !important;
}

.app-wrapper {
  display: flex;
  min-height: 100vh;
  background: var(--page-bg);
}

.req {
  color: var(--bs-body-color);
  font-weight: 700;
  margin-left: 1px;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--farmo-red);
  background-image: none;
  padding-right: 0.75rem;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--farmo-red);
  box-shadow: 0 0 0 0.2rem rgba(203, 0, 0, 0.2);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled,
textarea.form-control[readonly] {
  background-color: var(--surface-sunken);
  color: var(--bs-secondary-color);
  border-color: var(--border-color);
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
  cursor: not-allowed;
}

.form-control[readonly] {
  cursor: default;
}

.alert-dismissible .btn-close {
  top: 50%;
  transform: translateY(-50%);
  padding: 0 12px;
}