/* ============================================================
   Fono — Design System
   Carregado DEPOIS do bootstrap.min.css. Sobrescreve via
   CSS custom properties, sem duplicar regras existentes.
   ============================================================ */

:root {
  /* ------ Palette: ink (neutros) ------ */
  --ink-900: #101119;
  --ink-800: #1a1d27;
  --ink-700: #2e323f;
  --ink-600: #4a4f5e;
  --ink-500: #6d7285;
  --ink-400: #9196a8;
  --ink-300: #c3c6d1;
  --ink-200: #dde0e8;
  --ink-100: #ecedf1;
  --ink-50:  #f5f5f3;

  /* ------ Palette: cream (surface) ------ */
  --cream-50:  #faf7f0;
  --cream-100: #f5f1e6;
  --cream-200: #ede7d4;

  /* ------ Palette: amber (único acento) ------ */
  --amber-300: #e8c873;
  --amber-500: #b5832a;
  --amber-600: #956b1f;
  --amber-50:  #fbf4de;

  /* ------ Status (muted, não saturados) ------ */
  --st-success-bg: #e3ebda;
  --st-success-fg: #3d5a24;
  --st-info-bg:    #dce6ef;
  --st-info-fg:    #253e5a;
  --st-warn-bg:    #f5e6c6;
  --st-warn-fg:    #735012;
  --st-danger-bg:  #f1d7d7;
  --st-danger-fg:  #7f2626;
  --st-neutral-bg: #e7e7e1;
  --st-neutral-fg: #4a4f5e;

  /* ------ Tokens extras ------ */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shadow-card: 0 1px 0 rgba(16, 17, 25, 0.04), 0 6px 14px -10px rgba(16, 17, 25, 0.18);
  --shadow-pop:  0 2px 4px -2px rgba(16, 17, 25, 0.08), 0 10px 28px -12px rgba(16, 17, 25, 0.2);

  --navbar-h: 56px;

  /* ------ Bootstrap overrides ------ */
  --bs-primary: var(--ink-900);
  --bs-primary-rgb: 16, 17, 25;
  --bs-primary-text-emphasis: var(--ink-900);
  --bs-primary-bg-subtle: var(--cream-100);
  --bs-primary-border-subtle: var(--ink-200);

  --bs-body-bg: var(--cream-50);
  --bs-body-color: var(--ink-800);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-font-weight: 400;

  --bs-heading-color: var(--ink-900);

  --bs-border-color: var(--ink-200);
  --bs-border-color-translucent: rgba(16, 17, 25, 0.08);
  --bs-border-radius: 0.625rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.875rem;

  --bs-link-color: var(--ink-900);
  --bs-link-color-rgb: 16, 17, 25;
  --bs-link-hover-color: var(--amber-600);
  --bs-link-hover-color-rgb: 149, 107, 31;
  --bs-link-decoration: none;

  --bs-secondary-color: var(--ink-500);
  --bs-tertiary-bg: var(--ink-50);
}

/* ============================================================
   Base
   ============================================================ */

html { background: var(--cream-50); }

body {
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3,
.display-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink-900);
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}

a { transition: color .15s ease; }
a:hover { text-decoration: none; }

/* Focus ring: âmbar, sem o azul genérico */
*:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--ink-500);
  box-shadow: 0 0 0 3px var(--amber-50);
}

::selection {
  background: var(--amber-300);
  color: var(--ink-900);
}

/* ============================================================
   Utility classes
   ============================================================ */

.font-display { font-family: var(--font-display) !important; }
.font-mono    { font-family: var(--font-mono) !important; }
.tnum         { font-variant-numeric: tabular-nums; }

.micro-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.ink-900 { color: var(--ink-900) !important; }
.ink-700 { color: var(--ink-700) !important; }
.ink-500 { color: var(--ink-500) !important; }
.ink-400 { color: var(--ink-400) !important; }
.accent  { color: var(--amber-600) !important; }

.surface {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--bs-border-radius-lg);
}

.hairline      { border: 1px solid var(--ink-200) !important; }
.hairline-top  { border-top: 1px solid var(--ink-200) !important; }
.hairline-bot  { border-bottom: 1px solid var(--ink-200) !important; }

/* ============================================================
   Navbar (app top bar, não Bootstrap-dark)
   ============================================================ */

.app-navbar {
  background: var(--cream-50);
  border-bottom: 1px solid var(--ink-200);
  padding: 0.625rem 0;
  min-height: var(--navbar-h);
}
.app-navbar .navbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.app-navbar .navbar-brand .brand-dot {
  color: var(--amber-500);
  font-weight: 700;
  margin: 0 0.08em;
}
.clinica-chip {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-700);
  padding: 0.25rem 0.6rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.clinica-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber-500);
  display: inline-block;
}
.user-email {
  font-size: 0.8125rem;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-700);
  padding: 0.3rem 0.55rem;
  border-radius: 0.5rem;
}
.btn-ghost:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

/* ============================================================
   Sidebar (persistente desktop, offcanvas mobile)
   ============================================================ */

.app-sidebar {
  background: var(--cream-50);
  border-right: 1px solid var(--ink-200);
}
.app-sidebar .offcanvas-lg {
  background: var(--cream-50);
}
@media (min-width: 992px) {
  .app-sidebar {
    position: fixed;
    top: var(--navbar-h);
    bottom: 0;
    left: 0;
    width: 25%;
    overflow-y: auto;
    z-index: 1019;
  }
  .app-sidebar + main.col {
    margin-left: 25%;
  }
}
@media (min-width: 1200px) {
  .app-sidebar {
    width: 16.6667%;
  }
  .app-sidebar + main.col {
    margin-left: 16.6667%;
  }
}
.app-sidebar .offcanvas-header {
  border-bottom: 1px solid var(--ink-200);
}

.sidebar-inner {
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sidebar-logo {
  padding: 0 0.875rem;
}
.sidebar-logo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.sidebar-section-label {
  display: block;
  padding: 0 0.875rem;
  margin-bottom: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.875rem;
  color: var(--ink-700);
  text-decoration: none;
  border-radius: 0.4rem;
  border-left: 2px solid transparent;
  font-size: 0.9125rem;
  font-weight: 500;
  line-height: 1.2;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.sidebar-link i {
  color: var(--ink-400);
  font-size: 1rem;
  transition: color .15s ease;
}
.sidebar-link:hover {
  color: var(--ink-900);
  background: rgba(16, 17, 25, 0.035);
}
.sidebar-link:hover i { color: var(--ink-600); }
.sidebar-link.is-active {
  color: var(--ink-900);
  font-weight: 600;
  background: #fff;
  border-left-color: var(--amber-500);
  box-shadow: 0 1px 0 rgba(16, 17, 25, 0.04);
}
.sidebar-link.is-active i { color: var(--amber-600); }

/* ============================================================
   Cards
   ============================================================ */

.card {
  --bs-card-border-color: var(--ink-200);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-bg: #fff;
  --bs-card-cap-bg: #fff;
  --bs-card-cap-padding-y: 0.875rem;
  --bs-card-cap-padding-x: 1.125rem;
  --bs-card-spacer-y: 1.125rem;
  --bs-card-spacer-x: 1.125rem;
  box-shadow: var(--shadow-card);
}
.card-header {
  border-bottom: 1px solid var(--ink-200);
  font-weight: 600;
  color: var(--ink-900);
}
.card-header .micro-label { margin-right: 0.5rem; }

/* ============================================================
   Dashboard-specific
   ============================================================ */

.dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink-200);
}
.dash-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 2.4vw + 1rem, 2.6rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 0.35rem;
  color: var(--ink-900);
}
.dash-hero__meta {
  color: var(--ink-500);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.dash-hero__meta strong { color: var(--ink-800); font-weight: 600; }
.dash-hero__meta .sep { margin: 0 0.55rem; color: var(--ink-300); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.metric {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
  overflow: hidden;
}
.metric__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.metric__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.metric__hint {
  font-size: 0.8125rem;
  color: var(--ink-500);
}
.metric.is-attention {
  background: linear-gradient(180deg, var(--amber-50) 0%, #fff 70%);
  border-color: var(--amber-300);
}
.metric.is-attention .metric__value { color: var(--amber-600); }
@media (max-width: 640px) {
  .metric-strip { grid-template-columns: 1fr; }
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.25rem 0 0.75rem;
}
.section-head__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink-900);
}
.section-head__link {
  font-size: 0.8125rem;
  color: var(--ink-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.section-head__link:hover { color: var(--amber-600); }

/* A list item row used in dashboard cards + elsewhere */
.row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--ink-100);
}
.row-item:last-child { border-bottom: 0; }
.row-item__time {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
}
.row-item__date {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  min-width: 5rem;
}
.row-item__main { flex: 1; min-width: 0; }
.row-item__name {
  color: var(--ink-900);
  font-weight: 500;
  text-decoration: none;
}
.row-item__name:hover { color: var(--amber-600); }
.row-item__sub {
  font-size: 0.8125rem;
  color: var(--ink-500);
  margin-top: 0.1rem;
}

/* ============================================================
   Empty state
   ============================================================ */

.empty-state {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-500);
  font-size: 0.9rem;
}
.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink-50);
  color: var(--ink-400);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.empty-state--card {
  padding: 2.25rem 1.5rem;
}

/* ============================================================
   Tables refinadas
   ============================================================ */

.table {
  --bs-table-color: var(--ink-800);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ink-100);
  --bs-table-hover-bg: rgba(16, 17, 25, 0.025);
  margin-bottom: 0;
}
.table thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-200);
  padding: 0.65rem 0.75rem;
  background: transparent;
}
.table tbody td {
  border-top: 1px solid var(--ink-100);
  padding: 0.85rem 0.75rem;
  vertical-align: middle;
}
.table tbody tr:first-child td { border-top: 0; }
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: 0.475rem;
  --bs-btn-padding-x: 0.9rem;
  border-radius: 0.55rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--ink-900);
  --bs-btn-border-color: var(--ink-900);
  --bs-btn-hover-bg: var(--ink-700);
  --bs-btn-hover-border-color: var(--ink-700);
  --bs-btn-active-bg: var(--ink-800);
  --bs-btn-active-border-color: var(--ink-800);
}

.btn-outline-primary {
  --bs-btn-color: var(--ink-900);
  --bs-btn-border-color: var(--ink-300);
  --bs-btn-hover-bg: var(--ink-900);
  --bs-btn-hover-border-color: var(--ink-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ink-900);
  --bs-btn-active-border-color: var(--ink-900);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink-700);
  --bs-btn-border-color: var(--ink-200);
  --bs-btn-hover-bg: var(--ink-100);
  --bs-btn-hover-border-color: var(--ink-300);
  --bs-btn-hover-color: var(--ink-900);
}

/* CTA âmbar — reservar pra ações de atenção (raro) */
.btn-accent {
  --bs-btn-color: var(--ink-900);
  --bs-btn-bg: var(--amber-300);
  --bs-btn-border-color: var(--amber-300);
  --bs-btn-hover-bg: var(--amber-500);
  --bs-btn-hover-border-color: var(--amber-500);
  --bs-btn-hover-color: var(--ink-900);
}

/* ============================================================
   Forms (crispy Bootstrap5 output)
   ============================================================ */

.form-control,
.form-select {
  border-color: var(--ink-200);
  background: #fff;
  color: var(--ink-900);
  border-radius: 0.55rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.9125rem;
}
.form-control::placeholder { color: var(--ink-400); }
.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 0.35rem;
}
.invalid-feedback {
  font-size: 0.8125rem;
  color: var(--st-danger-fg);
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--st-danger-fg);
}

/* ============================================================
   Status pills (tint + text, sem saturação Bootstrap)
   ============================================================ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  background: var(--st-neutral-bg);
  color: var(--st-neutral-fg);
}
.status-pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
.status-pill--success { background: var(--st-success-bg); color: var(--st-success-fg); }
.status-pill--info    { background: var(--st-info-bg);    color: var(--st-info-fg); }
.status-pill--warn    { background: var(--st-warn-bg);    color: var(--st-warn-fg); }
.status-pill--danger  { background: var(--st-danger-bg);  color: var(--st-danger-fg); }
.status-pill--neutral { background: var(--st-neutral-bg); color: var(--st-neutral-fg); }

/* Legacy Bootstrap badges (usados em aparelhos/list) — reconciliar */
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.3em 0.55em;
  border-radius: 999px;
}
.badge.bg-success       { background: var(--st-success-bg) !important; color: var(--st-success-fg) !important; }
.badge.bg-info          { background: var(--st-info-bg) !important;    color: var(--st-info-fg) !important; }
.badge.bg-warning       { background: var(--st-warn-bg) !important;    color: var(--st-warn-fg) !important; }
.badge.bg-danger        { background: var(--st-danger-bg) !important;  color: var(--st-danger-fg) !important; }
.badge.bg-secondary     { background: var(--st-neutral-bg) !important; color: var(--st-neutral-fg) !important; }
.badge.bg-light         { background: var(--ink-100) !important;       color: var(--ink-700) !important; }

/* ============================================================
   Breadcrumb
   ============================================================ */

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ink-300);
  --bs-breadcrumb-item-active-color: var(--ink-900);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.breadcrumb a {
  color: var(--ink-500);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--amber-600); }

/* ============================================================
   Alerts (muted)
   ============================================================ */

.alert {
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
}
.alert-warning {
  background: var(--amber-50);
  border-color: var(--amber-300);
  color: var(--ink-800);
}
.alert-info {
  background: var(--st-info-bg);
  border-color: #c3cedb;
  color: var(--st-info-fg);
}

/* ============================================================
   Login page
   ============================================================ */

.login-surface {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--bs-border-radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-pop);
}
.login-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin-bottom: 0.15rem;
}
.login-brand .brand-dot {
  color: var(--amber-500);
  font-weight: 700;
}
.login-sub {
  color: var(--ink-500);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   Filter bar (pendências, listas com filtros)
   ============================================================ */

.filter-bar {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.filter-bar .form-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ============================================================
   Form shell (surface + padding + limpar hr crispy)
   ============================================================ */

.form-shell {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--bs-border-radius-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: var(--shadow-card);
}
.form-shell hr { margin: 1.25rem -1.5rem; border-color: var(--ink-100); }
.form-shell .asteriskField { color: var(--amber-600); margin-left: 0.15rem; }
.form-shell .form-text { color: var(--ink-500); font-size: 0.8125rem; }

.form-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-100);
}

/* ============================================================
   Agenda grid
   ============================================================ */

.agenda-grade {
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}
.agenda-grade thead th {
  background: var(--cream-50);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  border-bottom: 1px solid var(--ink-200);
  padding: 0.65rem 0.75rem;
  vertical-align: middle;
}
.agenda-grade thead th:first-child {
  width: 72px;
  background: var(--cream-50);
}
.agenda-grade tbody th,
.agenda-grade tbody td {
  vertical-align: top;
  border-top: 1px solid var(--ink-100);
  border-right: 1px solid var(--ink-100);
}
.agenda-grade tbody th:last-child,
.agenda-grade tbody td:last-child { border-right: 0; }
.agenda-grade tbody th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-500);
  background: var(--cream-50);
  padding: 0.35rem 0.5rem;
  width: 72px;
  text-align: right;
}
.agenda-grade tbody td {
  height: 40px;
  padding: 0.35rem 0.5rem;
}

.agenda-slot-vazio {
  background-color: rgba(16, 17, 25, 0.012);
}
.agenda-slot-ocupado {
  background: #fff;
  border-left: 3px solid var(--ink-400);
  padding: 0.6rem 0.7rem !important;
  font-size: 0.875rem;
  line-height: 1.35;
}
.agenda-slot-ocupado .badge { font-size: 0.7rem; }
.agenda-status-agendado   { border-left-color: var(--ink-500); }
.agenda-status-confirmado { border-left-color: #4a7bb0; background: #f4f8fc; }
.agenda-status-atendido   { border-left-color: #5a8644; background: #f3f7ed; }
.agenda-status-faltou     { border-left-color: var(--amber-500); background: var(--amber-50); }
.agenda-status-cancelado  { border-left-color: var(--ink-300); opacity: 0.55; }

/* ============================================================
   Search input group (refinado)
   ============================================================ */

.input-group-search .input-group-text {
  background: #fff;
  border-color: var(--ink-200);
}
.input-group-search .form-control {
  box-shadow: none;
}

/* ============================================================
   Pagination
   ============================================================ */

.pagination {
  --bs-pagination-color: var(--ink-700);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--ink-200);
  --bs-pagination-hover-color: var(--ink-900);
  --bs-pagination-hover-bg: var(--ink-50);
  --bs-pagination-hover-border-color: var(--ink-200);
  --bs-pagination-focus-color: var(--ink-900);
  --bs-pagination-focus-bg: var(--ink-100);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--ink-900);
  --bs-pagination-active-border-color: var(--ink-900);
  --bs-pagination-disabled-color: var(--ink-400);
  --bs-pagination-disabled-bg: var(--ink-50);
  --bs-pagination-disabled-border-color: var(--ink-200);
}

/* ============================================================
   Misc
   ============================================================ */

.text-muted { color: var(--ink-500) !important; }
hr { border-color: var(--ink-200); opacity: 1; }

/* Make Bootstrap's border-end blend */
.border-end { border-color: var(--ink-200) !important; }
.border-bottom { border-color: var(--ink-200) !important; }
.bg-light { background-color: var(--cream-50) !important; }