/* ── CSP Hardening: Utility Classes ──
   Extracted from inline style="" attributes to enable eventual removal of
   'unsafe-inline' from style-src CSP directive.
   
   Migration strategy:
   1. ✅ Extract common static patterns to utility classes (this file)
   2. Replace style="" with class="" in HTML partials
   3. For dynamic styles (JS-generated), use el.style.* (exempt from CSP)
   4. For <style> blocks injected by JS, use CSP nonce via Cloud Function proxy
   5. Remove 'unsafe-inline' from style-src after migration complete
   
   NOTE: el.style.color = 'red' in JavaScript does NOT require 'unsafe-inline'.
   Only <style> blocks and style="" attributes in HTML do.
*/

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

/* ── Display ── */
.hidden { display: none; }
.flex { display: flex; }
.grid { display: grid; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.inline-block { display: inline-block; }

/* ── Flex utilities ── */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.flex-1 { flex: 1; }

/* ── Positioning ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ── Spacing ── */
.m-0 { margin: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }

/* ── Typography ── */
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-xs { font-size: 0.7rem; }
.text-sm { font-size: 0.8rem; }
.text-base { font-size: 0.9rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.25rem; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Colors (common inline patterns) ── */
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--text-primary); }
.text-accent { color: var(--accent-color, #818cf8); }
.text-green { color: #10b981; }
.text-red { color: #ef4444; }
.text-amber { color: #f59e0b; }
.text-purple { color: #a78bfa; }

/* ── Borders ── */
.border { border: 1px solid var(--border-color); }
.border-subtle { border: 1px solid var(--border-subtle, rgba(255,255,255,0.05)); }
.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

/* ── Backgrounds ── */
.bg-card { background: var(--bg-card); }
.bg-transparent { background: transparent; }

/* ── Width ── */
.w-full { width: 100%; }

/* ── Button reset (common close/dismiss pattern) ── */
.btn-reset { background: none; border: none; cursor: pointer; padding: 0; }

/* ── Cursor ── */
.cursor-pointer { cursor: pointer; }

/* ── Opacity ── */
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }

/* ── Transitions ── */
.transition { transition: all 0.2s ease; }

/* ── Accessible Quick View button (WCAG 2.5.8: 44×44 touch target) ── */
.btn-quickview {
    background: none;
    border: none;
    color: var(--accent-blue, #60a5fa);
    cursor: pointer;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
}
.btn-quickview:hover,
.btn-quickview:focus-visible { opacity: 1; }