/* ===================================
   CV Builder Pro - Enhanced Utilities
   Extended utility classes for layout
   =================================== */

/* ===================================
   Flex Utilities
   =================================== */
.flex { display: flex; }

.shrink { flex-shrink: 1; }

/* ===================================
   Grid Utilities
   =================================== */
.grid { display: grid; }

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

.lowercase { text-transform: lowercase; }

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

/* ===================================
   Border Utilities
   =================================== */
.border { border: 1px solid var(--border-color); }

.rounded { border-radius: var(--radius-md); }

.shadow { box-shadow: var(--shadow-md); }

/* ===================================
   Display Utilities
   =================================== */
.hidden { display: none !important; }
/* Hidden at first paint, and left to the app after that. #prevBtn carried
   style="display: none" for this: renderStep writes prevBtn.style.display on
   every render, so the attribute only ever governed the frames before the
   first render ran. An inline display beats a class, which is why this one
   is not !important - .hidden would win against the app and the Back button
   would never come back. */
.starts-hidden { display: none; }
.block { display: block; }
.inline { display: inline; }

.visible { visibility: visible; }

.absolute { position: absolute; }
.fixed { position: fixed; }

.static { position: static; }

.transition { transition: all var(--transition-base); }

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

.-translate-y-1 { transform: translateY(-0.25rem); }
.-translate-y-2 { transform: translateY(-0.5rem); }

/* ===================================
   Responsive Utilities
   =================================== */
@media (max-width: 768px) {
    .sm\:hidden { display: none !important; }
    .sm\:block { display: block !important; }
    .sm\:flex { display: flex !important; }
    .sm\:flex-col { flex-direction: column !important; }
    .sm\:text-center { text-align: center !important; }
    .sm\:w-full { width: 100% !important; }
    .sm\:p-3 { padding: var(--spacing-sm) !important; }
    .sm\:gap-3 { gap: var(--spacing-sm) !important; }
}

@media (min-width: 769px) {
    .md\:hidden { display: none !important; }
    .md\:block { display: block !important; }
    .md\:flex { display: flex !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:hidden { display: none !important; }
    .lg\:block { display: block !important; }
    .lg\:flex { display: flex !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}