/* ================================================================
   VITALITEK BASE RESET & UTILITY CSS
   FR-007 Design System

   This file contains:
   - CSS Reset / Normalize
   - Base element styles (html, body, headings, links, lists)
   - Utility classes for spacing, typography, display, flex, grid
   - Print styles

   Import AFTER design-tokens.css, BEFORE components and accessibility.
   ================================================================ */


/* ============================================
   1. CSS RESET / NORMALIZE
   Modern reset: removes browser inconsistencies while
   preserving useful defaults. Based on Andy Bell's
   modern CSS reset with healthcare-specific additions.
   ============================================ */

/* Box sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins */
* {
  margin: 0;
}

/* Prevent font-size inflation on mobile */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size: 100%; /* Respects browser font-size setting for zoom/accessibility */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body defaults */
body {
  min-height: 100vh;
  line-height: var(--line-height-normal, 1.5);
  font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-text-primary, #1A1A2E);
  background-color: var(--color-surface-secondary, #F8F9FC);
  -webkit-font-smoothing: antialiased;
}

/* Headings: tighter line-height, balanced text wrapping */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight, 1.25);
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--color-text-primary, #1A1A2E);
}

h1 {
  font-size: var(--text-4xl, 2.5rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-3xl, 2rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-weight-semibold, 600);
}

h4 {
  font-size: var(--text-xl, 1.25rem);
  font-weight: var(--font-weight-semibold, 600);
}

h5 {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-weight-medium, 500);
}

h6 {
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-weight-medium, 500);
}

/* Paragraphs */
p {
  text-wrap: pretty;
  overflow-wrap: break-word;
  line-height: var(--line-height-normal, 1.5);
}

/* Links */
a {
  color: var(--color-primary, #C8457E);
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-primary-dark, #A03366);
}

a:not([class]) {
  text-decoration: underline;
}

/* Lists */
ul, ol {
  padding-left: 1.5rem;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding-left: 0;
}

/* Description lists (used heavily in superbill detail views) */
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs, 0.5rem) var(--space-lg, 1.5rem);
  align-items: baseline;
}

dt {
  font-size: var(--text-sm, 0.8125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-tertiary, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

dd {
  font-size: var(--text-base, 1rem);
  color: var(--color-text-primary, #1A1A2E);
}

/* Images and media */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Form elements: inherit fonts */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* Textarea: only vertical resize by default */
textarea {
  resize: vertical;
}

/* Button reset: remove default button styles for custom styling */
button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* Remove animations for people who prefer not to see them */
/* (Expanded version in accessibility.css) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Table defaults */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th {
  text-align: left;
  font-weight: var(--font-weight-semibold, 600);
}

/* Fieldset and legend reset */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #1A1A2E);
  padding: 0;
  margin-bottom: var(--space-sm, 0.75rem);
}

/* Remove default summary marker */
summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: var(--border-width, 1px) solid var(--color-border-subtle, #E5E7EB);
  margin: var(--space-lg, 1.5rem) 0;
}

/* Code and pre */
code, kbd, samp, pre {
  font-family: var(--font-family-mono, 'SF Mono', 'Cascadia Code', Consolas, monospace);
  font-size: 0.875em;
}

code:not([class]) {
  padding: 0.125rem 0.375rem;
  background: var(--color-surface-tertiary, #F0F0F5);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-primary, #1A1A2E);
}

pre {
  overflow-x: auto;
  padding: var(--space-md, 1rem);
  background: var(--color-surface-tertiary, #F0F0F5);
  border-radius: var(--radius-md, 8px);
}

pre code {
  padding: 0;
  background: none;
}

/* Strong and emphasis */
strong, b {
  font-weight: var(--font-weight-semibold, 600);
}

/* Small text */
small {
  font-size: var(--text-sm, 0.8125rem);
}

/* Blockquote */
blockquote {
  padding-left: var(--space-md, 1rem);
  border-left: var(--border-width-accent, 4px) solid var(--color-primary-light, #F5E0EB);
  color: var(--color-text-secondary, #4A4A68);
  font-style: italic;
}

/* Address */
address {
  font-style: normal;
}

/* Selection */
::selection {
  background: var(--color-primary-light, #F5E0EB);
  color: var(--color-text-primary, #1A1A2E);
}

/* Placeholder */
::placeholder {
  color: var(--color-text-tertiary, #6B7280);
  opacity: 1;
}


/* ============================================
   2. TYPOGRAPHY UTILITIES
   ============================================ */

/* Font sizes */
.vt-text-xs    { font-size: var(--text-xs, 0.75rem); }
.vt-text-sm    { font-size: var(--text-sm, 0.8125rem); }
.vt-text-base  { font-size: var(--text-base, 1rem); }
.vt-text-lg    { font-size: var(--text-lg, 1.125rem); }
.vt-text-xl    { font-size: var(--text-xl, 1.25rem); }
.vt-text-2xl   { font-size: var(--text-2xl, 1.5rem); }
.vt-text-3xl   { font-size: var(--text-3xl, 2rem); }
.vt-text-4xl   { font-size: var(--text-4xl, 2.5rem); }

/* Font weights */
.vt-font-normal    { font-weight: var(--font-weight-normal, 400); }
.vt-font-medium    { font-weight: var(--font-weight-medium, 500); }
.vt-font-semibold  { font-weight: var(--font-weight-semibold, 600); }
.vt-font-bold      { font-weight: var(--font-weight-bold, 700); }

/* Font families */
.vt-font-sans { font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); }
.vt-font-mono { font-family: var(--font-family-mono, 'SF Mono', 'Cascadia Code', Consolas, monospace); }

/* Line heights */
.vt-leading-tight    { line-height: var(--line-height-tight, 1.25); }
.vt-leading-normal   { line-height: var(--line-height-normal, 1.5); }
.vt-leading-relaxed  { line-height: var(--line-height-relaxed, 1.75); }

/* Text alignment */
.vt-text-left    { text-align: left; }
.vt-text-center  { text-align: center; }
.vt-text-right   { text-align: right; }

/* Text colors */
.vt-text-primary     { color: var(--color-text-primary); }
.vt-text-secondary   { color: var(--color-text-secondary); }
.vt-text-tertiary    { color: var(--color-text-tertiary); }
.vt-text-on-primary  { color: var(--color-text-on-primary); }
.vt-text-success     { color: var(--color-success); }
.vt-text-warning     { color: var(--color-warning); }
.vt-text-error       { color: var(--color-error); }
.vt-text-info        { color: var(--color-info); }

/* Text decoration */
.vt-underline      { text-decoration: underline; }
.vt-no-underline   { text-decoration: none; }
.vt-line-through   { text-decoration: line-through; }

/* Text transform */
.vt-uppercase    { text-transform: uppercase; letter-spacing: 0.025em; }
.vt-lowercase    { text-transform: lowercase; }
.vt-capitalize   { text-transform: capitalize; }
.vt-normal-case  { text-transform: none; }

/* Text overflow */
.vt-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vt-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vt-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Word break for long clinical codes */
.vt-break-words  { overflow-wrap: break-word; }
.vt-break-all    { word-break: break-all; }

/* Whitespace */
.vt-whitespace-nowrap { white-space: nowrap; }
.vt-whitespace-pre    { white-space: pre; }


/* ============================================
   3. SPACING UTILITIES
   ============================================ */

/* Margin - all sides */
.vt-m-0    { margin: 0; }
.vt-m-xxs  { margin: var(--space-xxs); }
.vt-m-xs   { margin: var(--space-xs); }
.vt-m-sm   { margin: var(--space-sm); }
.vt-m-md   { margin: var(--space-md); }
.vt-m-lg   { margin: var(--space-lg); }
.vt-m-xl   { margin: var(--space-xl); }
.vt-m-2xl  { margin: var(--space-2xl); }
.vt-m-auto { margin: auto; }

/* Margin - top */
.vt-mt-0    { margin-top: 0; }
.vt-mt-xxs  { margin-top: var(--space-xxs); }
.vt-mt-xs   { margin-top: var(--space-xs); }
.vt-mt-sm   { margin-top: var(--space-sm); }
.vt-mt-md   { margin-top: var(--space-md); }
.vt-mt-lg   { margin-top: var(--space-lg); }
.vt-mt-xl   { margin-top: var(--space-xl); }
.vt-mt-2xl  { margin-top: var(--space-2xl); }

/* Margin - bottom */
.vt-mb-0    { margin-bottom: 0; }
.vt-mb-xxs  { margin-bottom: var(--space-xxs); }
.vt-mb-xs   { margin-bottom: var(--space-xs); }
.vt-mb-sm   { margin-bottom: var(--space-sm); }
.vt-mb-md   { margin-bottom: var(--space-md); }
.vt-mb-lg   { margin-bottom: var(--space-lg); }
.vt-mb-xl   { margin-bottom: var(--space-xl); }
.vt-mb-2xl  { margin-bottom: var(--space-2xl); }

/* Margin - left */
.vt-ml-0    { margin-left: 0; }
.vt-ml-xs   { margin-left: var(--space-xs); }
.vt-ml-sm   { margin-left: var(--space-sm); }
.vt-ml-md   { margin-left: var(--space-md); }
.vt-ml-lg   { margin-left: var(--space-lg); }
.vt-ml-auto { margin-left: auto; }

/* Margin - right */
.vt-mr-0    { margin-right: 0; }
.vt-mr-xs   { margin-right: var(--space-xs); }
.vt-mr-sm   { margin-right: var(--space-sm); }
.vt-mr-md   { margin-right: var(--space-md); }
.vt-mr-lg   { margin-right: var(--space-lg); }
.vt-mr-auto { margin-right: auto; }

/* Margin - horizontal */
.vt-mx-0    { margin-left: 0; margin-right: 0; }
.vt-mx-xs   { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.vt-mx-sm   { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.vt-mx-md   { margin-left: var(--space-md); margin-right: var(--space-md); }
.vt-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin - vertical */
.vt-my-0    { margin-top: 0; margin-bottom: 0; }
.vt-my-xs   { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.vt-my-sm   { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.vt-my-md   { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.vt-my-lg   { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

/* Padding - all sides */
.vt-p-0    { padding: 0; }
.vt-p-xxs  { padding: var(--space-xxs); }
.vt-p-xs   { padding: var(--space-xs); }
.vt-p-sm   { padding: var(--space-sm); }
.vt-p-md   { padding: var(--space-md); }
.vt-p-lg   { padding: var(--space-lg); }
.vt-p-xl   { padding: var(--space-xl); }
.vt-p-2xl  { padding: var(--space-2xl); }

/* Padding - top */
.vt-pt-0    { padding-top: 0; }
.vt-pt-xs   { padding-top: var(--space-xs); }
.vt-pt-sm   { padding-top: var(--space-sm); }
.vt-pt-md   { padding-top: var(--space-md); }
.vt-pt-lg   { padding-top: var(--space-lg); }
.vt-pt-xl   { padding-top: var(--space-xl); }

/* Padding - bottom */
.vt-pb-0    { padding-bottom: 0; }
.vt-pb-xs   { padding-bottom: var(--space-xs); }
.vt-pb-sm   { padding-bottom: var(--space-sm); }
.vt-pb-md   { padding-bottom: var(--space-md); }
.vt-pb-lg   { padding-bottom: var(--space-lg); }
.vt-pb-xl   { padding-bottom: var(--space-xl); }

/* Padding - left */
.vt-pl-0    { padding-left: 0; }
.vt-pl-xs   { padding-left: var(--space-xs); }
.vt-pl-sm   { padding-left: var(--space-sm); }
.vt-pl-md   { padding-left: var(--space-md); }
.vt-pl-lg   { padding-left: var(--space-lg); }

/* Padding - right */
.vt-pr-0    { padding-right: 0; }
.vt-pr-xs   { padding-right: var(--space-xs); }
.vt-pr-sm   { padding-right: var(--space-sm); }
.vt-pr-md   { padding-right: var(--space-md); }
.vt-pr-lg   { padding-right: var(--space-lg); }

/* Padding - horizontal */
.vt-px-0    { padding-left: 0; padding-right: 0; }
.vt-px-xs   { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.vt-px-sm   { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.vt-px-md   { padding-left: var(--space-md); padding-right: var(--space-md); }
.vt-px-lg   { padding-left: var(--space-lg); padding-right: var(--space-lg); }

/* Padding - vertical */
.vt-py-0    { padding-top: 0; padding-bottom: 0; }
.vt-py-xs   { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.vt-py-sm   { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.vt-py-md   { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.vt-py-lg   { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

/* Gap utility (for flex and grid containers) */
.vt-gap-0    { gap: 0; }
.vt-gap-xxs  { gap: var(--space-xxs); }
.vt-gap-xs   { gap: var(--space-xs); }
.vt-gap-sm   { gap: var(--space-sm); }
.vt-gap-md   { gap: var(--space-md); }
.vt-gap-lg   { gap: var(--space-lg); }
.vt-gap-xl   { gap: var(--space-xl); }

/* Workspace density gap (for data-entry surfaces) */
.vt-gap-ws-xs  { gap: var(--space-ws-xs, 0.25rem); }
.vt-gap-ws-sm  { gap: var(--space-ws-sm, 0.5rem); }
.vt-gap-ws-md  { gap: var(--space-ws-md, 0.75rem); }
.vt-gap-ws-lg  { gap: var(--space-ws-lg, 1rem); }


/* ============================================
   4. DISPLAY UTILITIES
   ============================================ */

.vt-block         { display: block; }
.vt-inline-block  { display: inline-block; }
.vt-inline        { display: inline; }
.vt-flex          { display: flex; }
.vt-inline-flex   { display: inline-flex; }
.vt-grid          { display: grid; }
.vt-inline-grid   { display: inline-grid; }
.vt-hidden        { display: none; }
.vt-contents      { display: contents; }

/* Visibility */
.vt-visible    { visibility: visible; }
.vt-invisible  { visibility: hidden; }

/* Overflow */
.vt-overflow-hidden    { overflow: hidden; }
.vt-overflow-auto      { overflow: auto; }
.vt-overflow-x-auto    { overflow-x: auto; }
.vt-overflow-y-auto    { overflow-y: auto; }
.vt-overflow-x-hidden  { overflow-x: hidden; }

/* Position */
.vt-relative  { position: relative; }
.vt-absolute  { position: absolute; }
.vt-fixed     { position: fixed; }
.vt-sticky    { position: sticky; top: 0; }


/* ============================================
   5. FLEXBOX UTILITIES
   ============================================ */

/* Direction */
.vt-flex-row          { flex-direction: row; }
.vt-flex-col          { flex-direction: column; }
.vt-flex-row-reverse  { flex-direction: row-reverse; }
.vt-flex-col-reverse  { flex-direction: column-reverse; }

/* Wrap */
.vt-flex-wrap     { flex-wrap: wrap; }
.vt-flex-nowrap   { flex-wrap: nowrap; }

/* Justify content */
.vt-justify-start    { justify-content: flex-start; }
.vt-justify-center   { justify-content: center; }
.vt-justify-end      { justify-content: flex-end; }
.vt-justify-between  { justify-content: space-between; }
.vt-justify-around   { justify-content: space-around; }
.vt-justify-evenly   { justify-content: space-evenly; }

/* Align items */
.vt-items-start      { align-items: flex-start; }
.vt-items-center     { align-items: center; }
.vt-items-end        { align-items: flex-end; }
.vt-items-stretch    { align-items: stretch; }
.vt-items-baseline   { align-items: baseline; }

/* Align self */
.vt-self-start    { align-self: flex-start; }
.vt-self-center   { align-self: center; }
.vt-self-end      { align-self: flex-end; }
.vt-self-stretch  { align-self: stretch; }

/* Flex sizing */
.vt-flex-1       { flex: 1 1 0%; }
.vt-flex-auto    { flex: 1 1 auto; }
.vt-flex-initial { flex: 0 1 auto; }
.vt-flex-none    { flex: none; }
.vt-flex-grow    { flex-grow: 1; }
.vt-flex-shrink-0 { flex-shrink: 0; }


/* ============================================
   6. GRID UTILITIES
   ============================================ */

.vt-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vt-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vt-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Auto-fill grids for card layouts */
.vt-grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }  /* ~224px */
.vt-grid-auto-md { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }  /* ~288px */
.vt-grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }  /* ~352px */

/* Column span */
.vt-col-span-1   { grid-column: span 1; }
.vt-col-span-2   { grid-column: span 2; }
.vt-col-span-3   { grid-column: span 3; }
.vt-col-span-4   { grid-column: span 4; }
.vt-col-span-6   { grid-column: span 6; }
.vt-col-span-full { grid-column: 1 / -1; }

/* Place items */
.vt-place-center { place-items: center; }
.vt-place-start  { place-items: start; }


/* ============================================
   7. WIDTH & HEIGHT UTILITIES
   ============================================ */

.vt-w-full  { width: 100%; }
.vt-w-auto  { width: auto; }
.vt-w-fit   { width: fit-content; }

.vt-h-full    { height: 100%; }
.vt-h-screen  { height: 100vh; }
.vt-h-auto    { height: auto; }

.vt-min-h-0       { min-height: 0; }
.vt-min-h-screen  { min-height: 100vh; }

.vt-max-w-none    { max-width: none; }
.vt-max-w-sm      { max-width: 24rem; }    /* 384px  */
.vt-max-w-md      { max-width: 28rem; }    /* 448px -- auth cards */
.vt-max-w-lg      { max-width: 32rem; }    /* 512px  */
.vt-max-w-xl      { max-width: 36rem; }    /* 576px  */
.vt-max-w-2xl     { max-width: 42rem; }    /* 672px  */
.vt-max-w-3xl     { max-width: 48rem; }    /* 768px -- forms */
.vt-max-w-4xl     { max-width: 56rem; }    /* 896px -- detail views */
.vt-max-w-5xl     { max-width: 64rem; }    /* 1024px */
.vt-max-w-6xl     { max-width: 72rem; }    /* 1152px */
.vt-max-w-7xl     { max-width: 75rem; }    /* 1200px -- content max */
.vt-max-w-full    { max-width: 100%; }
.vt-max-w-prose   { max-width: 65ch; }     /* Optimal reading width */


/* ============================================
   8. BORDER & RADIUS UTILITIES
   ============================================ */

.vt-border      { border: var(--border-width, 1px) solid var(--color-border, #D1D5DB); }
.vt-border-t    { border-top: var(--border-width, 1px) solid var(--color-border, #D1D5DB); }
.vt-border-b    { border-bottom: var(--border-width, 1px) solid var(--color-border, #D1D5DB); }
.vt-border-l    { border-left: var(--border-width, 1px) solid var(--color-border, #D1D5DB); }
.vt-border-r    { border-right: var(--border-width, 1px) solid var(--color-border, #D1D5DB); }
.vt-border-0    { border: 0; }

.vt-border-subtle  { border-color: var(--color-border-subtle, #E5E7EB); }
.vt-border-strong  { border-color: var(--color-border-strong, #9CA3AF); }
.vt-border-primary { border-color: var(--color-primary); }
.vt-border-error   { border-color: var(--color-error); }

.vt-rounded-none { border-radius: 0; }
.vt-rounded-sm   { border-radius: var(--radius-sm, 4px); }
.vt-rounded-md   { border-radius: var(--radius-md, 8px); }
.vt-rounded-lg   { border-radius: var(--radius-lg, 12px); }
.vt-rounded-xl   { border-radius: var(--radius-xl, 16px); }
.vt-rounded-full { border-radius: var(--radius-full, 9999px); }


/* ============================================
   9. SHADOW UTILITIES
   ============================================ */

.vt-shadow-none  { box-shadow: none; }
.vt-shadow-sm    { box-shadow: var(--shadow-sm); }
.vt-shadow-md    { box-shadow: var(--shadow-md); }
.vt-shadow-lg    { box-shadow: var(--shadow-lg); }
.vt-shadow-xl    { box-shadow: var(--shadow-xl); }
.vt-shadow-inner { box-shadow: var(--shadow-inner); }


/* ============================================
   10. BACKGROUND UTILITIES
   ============================================ */

.vt-bg-surface-primary    { background-color: var(--color-surface-primary); }
.vt-bg-surface-secondary  { background-color: var(--color-surface-secondary); }
.vt-bg-surface-tertiary   { background-color: var(--color-surface-tertiary); }
.vt-bg-surface-elevated   { background-color: var(--color-surface-elevated); }
.vt-bg-primary-light      { background-color: var(--color-primary-light); }
.vt-bg-success-bg         { background-color: var(--color-success-bg); }
.vt-bg-warning-bg         { background-color: var(--color-warning-bg); }
.vt-bg-error-bg           { background-color: var(--color-error-bg); }
.vt-bg-info-bg            { background-color: var(--color-info-bg); }
.vt-bg-transparent        { background-color: transparent; }


/* ============================================
   11. LAYOUT CONTAINERS
   ============================================ */

/* Page container: centers content with max-width */
.vt-container {
  width: 100%;
  max-width: var(--content-max-width, 75rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md, 1rem);
  padding-right: var(--space-md, 1rem);
}

@media (min-width: 48rem) {
  .vt-container {
    padding-left: var(--space-lg, 1.5rem);
    padding-right: var(--space-lg, 1.5rem);
  }
}

/* Form container: narrower for focused form layouts */
.vt-container--form {
  max-width: var(--form-max-width, 48rem);
}

/* Detail container: moderate width for read-only detail views */
.vt-container--detail {
  max-width: var(--detail-max-width, 56rem);
}

/* Auth container: narrow centered card */
.vt-container--auth {
  max-width: var(--auth-card-max-width, 28rem);
}

/* Full width within parent (no max-width) */
.vt-container--fluid {
  max-width: none;
}

/* Admin shell: sidebar + main content */
.vt-admin-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width, 16rem) 1fr;
  min-height: 100vh;
}

@media (max-width: 63.99rem) {
  .vt-admin-shell {
    grid-template-columns: 1fr;
  }
}

/* Split pane layout for superbill builder */
.vt-split-pane {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-lg, 1.5rem);
  align-items: start;
}

.vt-split-pane__main {
  min-width: 0; /* Prevent grid blowout */
}

.vt-split-pane__aside {
  position: sticky;
  top: var(--space-md, 1rem);
}

@media (max-width: 63.99rem) {
  .vt-split-pane {
    grid-template-columns: 1fr;
  }

  .vt-split-pane__aside {
    position: static;
    order: -1; /* Move summary above the form on tablet */
  }
}

/* Section spacing: consistent vertical rhythm between page sections */
.vt-section {
  padding-top: var(--space-xl, 2rem);
  padding-bottom: var(--space-xl, 2rem);
}

.vt-section--sm {
  padding-top: var(--space-md, 1rem);
  padding-bottom: var(--space-md, 1rem);
}

.vt-section--lg {
  padding-top: var(--space-3xl, 4rem);
  padding-bottom: var(--space-3xl, 4rem);
}

/* Stack: vertical rhythm between children */
.vt-stack > * + * {
  margin-top: var(--space-md, 1rem);
}

.vt-stack--xs > * + * { margin-top: var(--space-xxs); }
.vt-stack--sm > * + * { margin-top: var(--space-xs); }
.vt-stack--md > * + * { margin-top: var(--space-md); }
.vt-stack--lg > * + * { margin-top: var(--space-lg); }
.vt-stack--xl > * + * { margin-top: var(--space-xl); }


/* ============================================
   12. RESPONSIVE BREAKPOINT UTILITIES
   ============================================ */

/* Hide/show at breakpoints */
@media (max-width: 47.99rem) {
  .vt-hide-mobile  { display: none !important; }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .vt-hide-tablet  { display: none !important; }
}

@media (min-width: 64rem) {
  .vt-hide-desktop { display: none !important; }
}

@media (min-width: 48rem) {
  .vt-show-tablet   { display: block !important; }
}

@media (min-width: 64rem) {
  .vt-show-desktop  { display: block !important; }
}

/* Responsive grid column overrides */
@media (min-width: 48rem) {
  .vt-md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .vt-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vt-lg-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Responsive flex direction */
@media (max-width: 47.99rem) {
  .vt-mobile-col { flex-direction: column; }
}

/* Responsive text alignment */
@media (max-width: 47.99rem) {
  .vt-mobile-text-center { text-align: center; }
}


/* ============================================
   13. MISCELLANEOUS UTILITIES
   ============================================ */

/* Cursor */
.vt-cursor-pointer    { cursor: pointer; }
.vt-cursor-not-allowed { cursor: not-allowed; }
.vt-cursor-default    { cursor: default; }

/* User select */
.vt-select-none { user-select: none; }
.vt-select-all  { user-select: all; }

/* Pointer events */
.vt-pointer-events-none { pointer-events: none; }
.vt-pointer-events-auto { pointer-events: auto; }

/* Opacity */
.vt-opacity-0    { opacity: 0; }
.vt-opacity-25   { opacity: 0.25; }
.vt-opacity-50   { opacity: 0.5; }
.vt-opacity-75   { opacity: 0.75; }
.vt-opacity-100  { opacity: 1; }

/* Z-index */
.vt-z-0       { z-index: 0; }
.vt-z-10      { z-index: 10; }
.vt-z-20      { z-index: 20; }
.vt-z-30      { z-index: 30; }
.vt-z-40      { z-index: 40; }
.vt-z-50      { z-index: 50; }

/* Transition utility */
.vt-transition {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-timing-function: ease-out;
  transition-duration: var(--transition-normal, 0.2s);
}

.vt-transition-fast { transition-duration: var(--transition-fast, 0.1s); }
.vt-transition-slow { transition-duration: var(--transition-slow, 0.3s); }

/* Divider: a horizontal line between sections */
.vt-divider {
  border: none;
  border-top: var(--border-width, 1px) solid var(--color-border-subtle, #E5E7EB);
  margin: var(--space-lg, 1.5rem) 0;
}

.vt-divider--text {
  display: flex;
  align-items: center;
  gap: var(--space-md, 1rem);
  color: var(--color-text-tertiary, #6B7280);
  font-size: var(--text-sm, 0.8125rem);
  margin: var(--space-lg, 1.5rem) 0;
}

.vt-divider--text::before,
.vt-divider--text::after {
  content: '';
  flex: 1;
  border-top: var(--border-width, 1px) solid var(--color-border-subtle, #E5E7EB);
}


/* ============================================
   14. PRINT STYLES
   ============================================ */

@media print {
  /* Global print resets */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Ensure proper page breaks */
  html, body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }

  /* Remove navigation, sidebars, and interactive elements */
  .vt-nav,
  .vtk-skip-link,
  .vt-skip-link,
  .vt-sidebar,
  .vtk-sidebar,
  .vt-toast-container,
  .vtk-toast-container,
  .vt-modal-backdrop,
  .vt-footer,
  .vt-nav__hamburger,
  .vt-pagination,
  [role="navigation"],
  [role="complementary"] {
    display: none !important;
  }

  /* Admin shell becomes single column */
  .vt-admin-shell {
    display: block !important;
  }

  /* Links: show URL after link text */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
    color: #666 !important;
  }

  /* Do not show URL for internal nav links or anchor links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  nav a::after,
  .vt-btn::after {
    content: none;
  }

  /* Headings: avoid page breaks right after headings */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Keep tables, figures, and images together */
  table, figure, img {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Table: ensure borders are visible */
  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc !important;
    padding: 0.5rem;
  }

  th {
    background-color: #f0f0f0 !important;
    font-weight: bold;
  }

  /* Status badges: print with text, maintain visibility */
  .vtk-status-badge,
  .vt-badge {
    border: 1px solid #333 !important;
    padding: 2px 8px;
    font-weight: bold;
  }

  /* Superbill print: optimize for paper */
  .vt-split-pane {
    display: block !important;
  }

  .vt-split-pane__aside {
    position: static !important;
    page-break-before: avoid;
  }

  /* Total display: prominent on paper */
  .vtk-total-display,
  .vt-total-display {
    font-size: 14pt !important;
    font-weight: bold !important;
    text-align: right;
    border-top: 2px solid #000 !important;
    padding-top: 0.5rem;
  }

  /* Hide action buttons in print */
  .vt-btn-group,
  .vt-btn,
  .vtk-btn,
  button:not([type="submit"]) {
    display: none !important;
  }

  /* Show a specific print button if marked */
  .vt-print-show {
    display: block !important;
  }

  /* Ensure page breaks before major sections */
  .vt-page-break-before {
    page-break-before: always;
    break-before: page;
  }

  .vt-page-break-avoid {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Print header with organization info */
  .vt-print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #000;
  }

  /* Responsive table: force table display for print */
  .vtk-responsive-table table,
  .vtk-responsive-table thead,
  .vtk-responsive-table tbody,
  .vtk-responsive-table tr,
  .vtk-responsive-table th,
  .vtk-responsive-table td {
    display: revert !important;
  }

  .vtk-responsive-table .vtk-mobile-cards {
    display: none !important;
  }

  /* Page margins */
  @page {
    margin: 1.5cm 2cm;
  }

  @page :first {
    margin-top: 2cm;
  }
}