/* ==========================================================================
   ui-polish.css — app-wide colourful, friendly, professional refinements.
   Loaded right after material.css on every surface (public site, booking,
   patient/admin/doctor/staff/lab portals, login). Purely ADDITIVE: it enhances
   the existing design-system primitives without changing layout. Page-specific
   stylesheets load afterwards and still win where they set their own styles.
   Palette: primary #E85D04, primary-dark #D00000, secondary #1B4965, teal #2EC4B6.
   ========================================================================== */

/* ---- Typography: crisper headings, nicer wrapping ---- */
body { text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---- Branded text selection ---- */
::selection { background: rgba(232, 93, 4, 0.20); }

/* ---- Subtle, professional scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(27, 73, 101, 0.32) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(27, 73, 101, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(27, 73, 101, 0.45); background-clip: padding-box; }

/* ---- Accessible keyboard focus (only on keyboard nav) ---- */
a:focus-visible, button:focus-visible, .md-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--md-primary, #E85D04);
  outline-offset: 2px;
}

/* ---- Buttons: vivid gradient primary with a warm glow ---- */
.md-btn {
  transition: box-shadow .2s ease, transform .12s ease, filter .2s ease, background-color .2s ease;
  font-weight: 600;
}
.md-btn-filled {
  background: linear-gradient(135deg, #F97316 0%, var(--md-primary, #E85D04) 55%, var(--md-primary-dark, #D00000) 120%);
  box-shadow: 0 4px 14px rgba(232, 93, 4, 0.32);
}
.md-btn-filled:hover {
  box-shadow: 0 8px 22px rgba(232, 93, 4, 0.42);
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.md-btn-lg:hover { transform: translateY(-1px); }
.md-btn-tonal {
  background: linear-gradient(135deg, rgba(46, 196, 182, 0.22), rgba(46, 196, 182, 0.32));
  color: #0d6e57;
}
.md-btn-tonal:hover { background: linear-gradient(135deg, rgba(46, 196, 182, 0.30), rgba(46, 196, 182, 0.42)); }
.md-btn:disabled, .md-btn[disabled], .md-btn.is-disabled {
  opacity: .5; cursor: not-allowed;
  box-shadow: none !important; transform: none !important; filter: grayscale(0.2) !important;
}

/* ---- Cards: warm, colourful hover elevation ---- */
.md-card { transition: box-shadow .25s ease, transform .25s ease; }
.md-card:hover { box-shadow: 0 10px 30px rgba(232, 93, 4, 0.13), 0 3px 10px rgba(27, 73, 101, 0.10); }
a.md-card, .md-card--interactive, .md-card[role="button"] { cursor: pointer; }
a.md-card:hover, .md-card--interactive:hover, .md-card[role="button"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(232, 93, 4, 0.16), 0 4px 12px rgba(27, 73, 101, 0.12);
}

/* ---- Chips: friendly, colour-varied specialty tags ---- */
.chip { font-weight: 600; border: 1px solid rgba(154, 52, 18, 0.16); }
.service-chips .chip:nth-of-type(4n+1),
.doctors-grid__services .chip:nth-of-type(4n+1) { background: #fff1e6; color: #9a3412; border-color: rgba(232, 93, 4, 0.24); }
.service-chips .chip:nth-of-type(4n+2),
.doctors-grid__services .chip:nth-of-type(4n+2) { background: #e1f5ee; color: #0d6e57; border-color: rgba(15, 110, 86, 0.24); }
.service-chips .chip:nth-of-type(4n+3),
.doctors-grid__services .chip:nth-of-type(4n+3) { background: #e6f1fb; color: #0c447c; border-color: rgba(24, 95, 165, 0.24); }
.service-chips .chip:nth-of-type(4n+4),
.doctors-grid__services .chip:nth-of-type(4n+4) { background: #f3ecfd; color: #4c1d95; border-color: rgba(124, 58, 237, 0.22); }

/* ---- Inputs: clearer hover + friendly focus ---- */
.md-input:hover:not(:focus):not(.is-invalid) { border-color: var(--md-primary, #E85D04); }

/* ---- Data tables: colourful branded header, row hover + zebra ---- */
.data-table thead th {
  background: linear-gradient(180deg, #fff4ec 0%, #ffe6d3 100%);
  color: #9a3412;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.data-table tbody tr { transition: background-color .15s ease; }
.data-table tbody tr:nth-child(even) { background: #fbfcfd; }
.data-table tbody tr:hover { background: #fff5ec; }

/* ---- Colourful status pills (opt-in helper for badges) ---- */
.pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.7rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.3; }
.pill-success { background: #e1f5ee; color: #0d6e57; }
.pill-warning { background: #fef3d8; color: #92610a; }
.pill-danger  { background: #fdeaea; color: #b3261e; }
.pill-info    { background: #e6f1fb; color: #0c447c; }

/* ---- Consistent muted / helper text ---- */
.muted { color: #64748b; }

/* ---- Links inside content feel clickable (scoped to article/prose only) ---- */
.md-card-pad a:not(.md-btn), article a:not(.md-btn) { color: var(--md-primary, #E85D04); }
.md-card-pad a:not(.md-btn):hover, article a:not(.md-btn):hover { text-decoration: underline; }

/* ---- Honour users who prefer less motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .md-btn, .md-card, .data-table tbody tr { transition: none; }
  .md-btn-filled:hover, .md-btn-lg:hover,
  a.md-card:hover, .md-card--interactive:hover, .md-card[role="button"]:hover { transform: none; }
}