/**
 * COEUS DESIGN SYSTEM V2 - HELPER UTILITIES
 *
 * PURPOSE:
 * Miscellaneous utility classes for common patterns
 * Consolidates cleanup classes and one-off utilities
 *
 * INCLUDES:
 * - Text utilities (color, style, transformation)
 * - Border utilities (accents, colors)
 * - Badge utilities (colored pills)
 * - Icon utilities (sizing, spacing)
 * - State utilities (disabled, hover, focus)
 * - Flex utilities (specific patterns)
 *
 * DEPENDENCIES: variables-v2.css, themes-v2.css
 * VERSION: 2.0.0
 * CREATED: 2025-11-18
 */

/* ============================================ */
/*                TEXT UTILITIES                */
/* ============================================ */

/* Text colors (theme-aware) */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }

/* iOS system colors */
.text-blue   { color: var(--ios-system-blue); }
.text-green  { color: var(--ios-system-green); }
.text-orange { color: var(--ios-system-orange); }
.text-red    { color: var(--ios-system-red); }
.text-indigo { color: var(--ios-system-indigo); }
.text-purple { color: var(--ios-system-purple); }
.text-pink   { color: var(--ios-system-pink); }
.text-teal   { color: var(--ios-system-teal); }
.text-yellow { color: var(--ios-system-yellow); }

/* Text styles */
.text-muted-italic {
  font-style: italic;
  color: #9ca3af;
}

.empty-state-text {
  color: #9ca3af;
  font-style: italic;
  font-size: 1em;
}

.text-error-message {
  color: #ef4444;
  font-style: italic;
}

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

/* Text transformation */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

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

/* ============================================ */
/*              BORDER UTILITIES                */
/* ============================================ */

/* Border width */
.border-0 { border-width: 0; }
.border   { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

/* Border sides */
.border-t   { border-top-width: 1px; }
.border-r   { border-right-width: 1px; }
.border-b   { border-bottom-width: 1px; }
.border-l   { border-left-width: 1px; }

/* Border left accents (3px colored stripes) */
.border-left-danger {
  border-left: 3px solid var(--ios-system-red);
}

.border-left-primary {
  border-left: 3px solid var(--ios-system-blue);
}

.border-left-success {
  border-left: 3px solid var(--ios-system-green);
}

.border-left-warning {
  border-left: 3px solid var(--ios-system-orange);
}

/* Border radius */
.rounded-none { border-radius: 0; }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ============================================ */
/*               BADGE UTILITIES                */
/* ============================================ */

/* Base badge styles */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Colored badge variants */
.badge-indigo {
  padding: 0.25rem 0.75rem;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-purple {
  padding: 0.25rem 0.75rem;
  background: #ddd6fe;
  color: #6b21a8;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-pink {
  padding: 0.25rem 0.75rem;
  background: #fce7f3;
  color: #a21caf;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-doctype {
  display: inline-block;
  background: #3b82f6;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ============================================ */
/*                ICON UTILITIES                */
/* ============================================ */

/* Icon spacing (margin-right for inline icons) */
.icon-spacing {
  margin-right: 0.25rem;
}

/* Icon sizes */
.icon-xs { width: 1rem; height: 1rem; }     /* 16px */
.icon-sm { width: 1.25rem; height: 1.25rem; } /* 20px */
.icon-md { width: 1.5rem; height: 1.5rem; }   /* 24px */
.icon-lg { width: 2rem; height: 2rem; }       /* 32px */
.icon-xl { width: 2.5rem; height: 2.5rem; }   /* 40px */
.icon-large { font-size: 3rem; }               /* 48px - for placeholders */

/* Inline icon (with vertical alignment) */
.inline-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.25em;
}

/* Empty state icon (centered, faded) */
.empty-state-icon {
  margin: 0 auto 1rem;
  opacity: 0.3;
}

/* ============================================ */
/*               FLEX UTILITIES                 */
/* ============================================ */

/* Flex grow variants */
.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

/* Fixed flex basis */
.flex-fixed-70 {
  flex: 0 0 70px;
}

.flex-fixed-100 {
  flex: 0 0 100px;
}

/* Flex column with rounded corners */
.flex-col-rounded {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}

/* Centered flex container (full width/height) */
.flex-center-full {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ============================================ */
/*               STATE UTILITIES                */
/* ============================================ */

/* Disabled state */
.disabled-card,
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

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

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

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

/* ============================================ */
/*              BACKGROUND UTILITIES            */
/* ============================================ */

/* Transparent background */
.bg-transparent { background-color: transparent; }

/* Theme backgrounds */
.bg-primary   { background-color: var(--background-primary); }
.bg-secondary { background-color: var(--background-secondary); }
.bg-hover     { background-color: var(--background-hover); }

/* iOS system color backgrounds */
.bg-blue   { background-color: var(--ios-system-blue); }
.bg-green  { background-color: var(--ios-system-green); }
.bg-orange { background-color: var(--ios-system-orange); }
.bg-red    { background-color: var(--ios-system-red); }
.bg-indigo { background-color: var(--ios-system-indigo); }
.bg-purple { background-color: var(--ios-system-purple); }

/* ============================================ */
/*             OPACITY UTILITIES                */
/* ============================================ */

.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-30  { opacity: 0.3; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ============================================ */
/*           TRANSITION UTILITIES               */
/* ============================================ */

.transition-none { transition: none; }
.transition-all  { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
.transition-smooth { transition: all var(--transition-smooth); }
.transition-bounce { transition: all var(--transition-bounce); }
.transition-transform { transition: transform 0.2s ease; }

/* ============================================ */
/*             TRANSFORM UTILITIES              */
/* ============================================ */

.rotate-0   { transform: rotate(0deg); }
.rotate-45  { transform: rotate(45deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.-rotate-90 { transform: rotate(-90deg); }

/* Chevron rotation for collapsible elements */
.chevron-collapse {
    transition: transform 0.2s ease;
}
.chevron-collapse.rotate-90 {
    transform: rotate(90deg);
}

/* ============================================ */
/*              SHADOW UTILITIES                */
/* ============================================ */

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

/* ============================================ */
/*          COMPONENT-SPECIFIC PATTERNS         */
/* ============================================ */

/* View toggle container (for view switchers) */
.view-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.25rem;
  background: var(--glass-primary);
  border-radius: 0.5rem;
}

/* Top-right controls positioning */
.top-right-controls {
  top: 1.25em;    /* 20px responsive */
  right: 1.25em;  /* 20px responsive */
}

/* Modal max-widths */
.modal-sm { max-width: 400px; }
.modal-md { max-width: 600px; }
.modal-lg { max-width: 900px; }
.modal-xl { max-width: 1200px; }

/* Image cover (full size with rounded corners) */
.image-cover-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Amount indicators (financial) */
.amount-negative {
  color: var(--ios-system-red);
}

.amount-positive {
  color: var(--ios-system-green);
}

/* Progress bar fill (animated gradient) */
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Progress container */
.progress-container {
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

/* Summary card components */
.summary-card {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  padding: 1rem;
  border-radius: 0.5rem;
  border-left: 3px solid #3b82f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.summary-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.summary-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #1e40af;
  margin-right: 0.5rem;
}

.summary-text-primary {
  margin: 0;
  font-weight: 600;
  color: #1e40af;
  font-size: 0.875rem;
}

.summary-content {
  color: #374151;
  line-height: 1.6;
  font-size: 0.875rem;
  white-space: pre-wrap;
}

.summary-divider {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
}

/* Section heading */
.section-heading {
  margin-bottom: 1rem;
}

/* Tool card CTA badge */
.tool-card-cta {
  background: linear-gradient(to right, #f97316, #ef4444);
  color: white;
}

/* ============================================ */
/*             RESPONSIVE UTILITIES             */
/* ============================================ */

/* Breakpoint visibility helpers */
@media (max-width: 48em) {  /* Hide on small screens */
  .hide-sm { display: none !important; }
}

@media (min-width: 48em) {  /* Hide on medium+ screens */
  .show-sm { display: none !important; }
}

@media (max-width: 64em) {  /* Hide on medium screens */
  .hide-md { display: none !important; }
}

@media (min-width: 64em) {  /* Hide on large+ screens */
  .show-md { display: none !important; }
}

/* ============================================ */
/*              ACCESSIBILITY                   */
/* ============================================ */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible (keyboard navigation) */
.focus-visible:focus-visible {
  outline: 2px solid var(--ios-system-blue);
  outline-offset: 2px;
}

/* ============================================ */
/*             MISCELLANEOUS                    */
/* ============================================ */

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

/* Line clamp (multiline truncate) */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

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

/* Whitespace */
.whitespace-normal   { white-space: normal; }
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre      { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* Break words */
.break-normal { word-break: normal; overflow-wrap: normal; }
.break-words  { overflow-wrap: break-word; }
.break-all    { word-break: break-all; }