/* ==========================================================
   SolarPro Design System - Utility Classes
   Atomic helper classes for rapid layout and styling
   ========================================================== */

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

/* ── Flex Direction ── */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-row-rev { flex-direction: row-reverse; }
.flex-col-rev { flex-direction: column-reverse; }

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

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

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

/* ── Flex Grow/Shrink ── */
.flex-1     { flex: 1 1 0%; }
.flex-auto  { flex: 1 1 auto; }
.flex-none  { flex: none; }
.flex-grow  { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ── Gap ── */
.gap-0  { gap: 0; }
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }
.gap-xl { gap: 24px; }
.gap-2xl { gap: 32px; }

/* ── Spacing: Margin ── */
.m-0  { margin: 0; }
.m-1  { margin: 4px; }
.m-2  { margin: 8px; }
.m-3  { margin: 12px; }
.m-4  { margin: 16px; }
.m-6  { margin: 24px; }
.m-8  { margin: 32px; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }

.ml-0  { margin-left: 0; }
.ml-1  { margin-left: 4px; }
.ml-2  { margin-left: 8px; }
.ml-3  { margin-left: 12px; }
.ml-4  { margin-left: 16px; }
.ml-6  { margin-left: 24px; }
.ml-8  { margin-left: 32px; }

.mr-0  { margin-right: 0; }
.mr-1  { margin-right: 4px; }
.mr-2  { margin-right: 8px; }
.mr-3  { margin-right: 12px; }
.mr-4  { margin-right: 16px; }
.mr-6  { margin-right: 24px; }
.mr-8  { margin-right: 32px; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 4px; margin-right: 4px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.mx-3 { margin-left: 12px; margin-right: 12px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 4px; margin-bottom: 4px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.my-3 { margin-top: 12px; margin-bottom: 12px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* ── Spacing: Padding ── */
.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-6  { padding: 24px; }
.p-8  { padding: 32px; }

.pt-0  { padding-top: 0; }
.pt-1  { padding-top: 4px; }
.pt-2  { padding-top: 8px; }
.pt-3  { padding-top: 12px; }
.pt-4  { padding-top: 16px; }
.pt-6  { padding-top: 24px; }
.pt-8  { padding-top: 32px; }

.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: 4px; }
.pb-2  { padding-bottom: 8px; }
.pb-3  { padding-bottom: 12px; }
.pb-4  { padding-bottom: 16px; }
.pb-6  { padding-bottom: 24px; }
.pb-8  { padding-bottom: 32px; }

.pl-0  { padding-left: 0; }
.pl-1  { padding-left: 4px; }
.pl-2  { padding-left: 8px; }
.pl-3  { padding-left: 12px; }
.pl-4  { padding-left: 16px; }
.pl-6  { padding-left: 24px; }
.pl-8  { padding-left: 32px; }

.pr-0  { padding-right: 0; }
.pr-1  { padding-right: 4px; }
.pr-2  { padding-right: 8px; }
.pr-3  { padding-right: 12px; }
.pr-4  { padding-right: 16px; }
.pr-6  { padding-right: 24px; }
.pr-8  { padding-right: 32px; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }

/* ── Typography ── */
.text-xs   { font-size: 11px; }
.text-sm   { font-size: 12.5px; }
.text-base { font-size: 14px; }
.text-lg   { font-size: 16px; }
.text-xl   { font-size: 18px; }
.text-2xl  { font-size: 22px; }
.text-3xl  { font-size: 28px; }
.text-4xl  { font-size: 36px; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-accent-blue { color: var(--accent-blue); }
.text-green     { color: var(--accent-green); }
.text-amber     { color: var(--accent-amber); }
.text-red       { color: var(--accent-red); }
.text-solar     { color: var(--solar-orange); }

.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }

.leading-tight  { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.75; }

.tracking-tight { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide  { letter-spacing: 0.04em; }

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

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

.text-mono { font-family: var(--font-mono); }

.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;
}

/* ── Width ── */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.w-50    { width: 50%; }
.w-fit   { width: fit-content; }
.min-w-0 { min-width: 0; }
.max-w-sm  { max-width: 384px; }
.max-w-md  { max-width: 512px; }
.max-w-lg  { max-width: 768px; }
.max-w-xl  { max-width: 1024px; }
.max-w-full { max-width: 100%; }

/* ── Height ── */
.h-full   { height: 100%; }
.h-auto   { height: auto; }
.h-screen { height: 100vh; }
.min-h-0  { min-height: 0; }
.min-h-screen { min-height: 100vh; }

/* ── 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-full { border-radius: var(--radius-full); }

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

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

/* ── Visibility ── */
.hidden      { display: none; }
.visible     { visibility: visible; }
.invisible   { visibility: hidden; }
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

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

.inset-0 { inset: 0; }
.top-0   { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0  { left: 0; }

/* ── Z-Index ── */
.z-0   { z-index: 0; }
.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-50  { z-index: 50; }
.z-100 { z-index: 100; }

/* ── Borders ── */
.border     { border: 1px solid var(--border-default); }
.border-0   { border: none; }
.border-t   { border-top: 1px solid var(--border-default); }
.border-b   { border-bottom: 1px solid var(--border-default); }
.border-l   { border-left: 1px solid var(--border-default); }
.border-r   { border-right: 1px solid var(--border-default); }

/* ── Background ── */
.bg-primary   { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary  { background-color: var(--bg-tertiary); }
.bg-card      { background-color: var(--bg-card); }
.bg-transparent { background-color: transparent; }

/* ── Shadow ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

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

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

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

/* ── Aspect Ratio ── */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }

/* ── 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;
}