/* ==========================================================================
   FINTECH / BANKING DESIGN SYSTEM
   Plateforme Financiere MVP
   ========================================================================== */

/* Google Fonts ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (:root)
   ========================================================================== */
:root {
  /* ---- Brand / Fintech Palette ----------------------------------------- */
  --color-primary:          #3B82F6;
  --color-primary-light:    #60A5FA;
  --color-primary-lighter:  #93C5FD;
  --color-primary-lightest: #DBEAFE;
  --color-primary-dark:     #2563EB;
  --color-primary-darker:   #1D4ED8;

  --color-navy:             #0F172A;
  --color-navy-light:       #1E293B;
  --color-navy-lighter:     #334155;

  --color-success:          #10B981;
  --color-success-light:    #34D399;
  --color-success-lighter:  #A7F3D0;
  --color-success-lightest: #D1FAE5;
  --color-success-dark:     #059669;

  --color-warning:          #F59E0B;
  --color-warning-light:    #FBBF24;
  --color-warning-lighter:  #FDE68A;
  --color-warning-lightest: #FEF3C7;
  --color-warning-dark:     #D97706;

  --color-danger:           #EF4444;
  --color-danger-light:     #F87171;
  --color-danger-lighter:   #FCA5A5;
  --color-danger-lightest:  #FEE2E2;
  --color-danger-dark:      #DC2626;

  --color-info:             #06B6D4;
  --color-info-light:       #22D3EE;
  --color-info-lightest:    #CFFAFE;
  --color-info-dark:        #0891B2;

  /* ---- Text Colors ------------------------------------------------------ */
  --text-primary:           #0F172A;
  --text-secondary:         #64748B;
  --text-muted:             #94A3B8;
  --text-inverse:           #FFFFFF;
  --text-link:              var(--color-primary);
  --text-link-hover:        var(--color-primary-dark);

  /* ---- Background Colors ------------------------------------------------ */
  --bg-page:                #F8FAFC;
  --bg-card:                #FFFFFF;
  --bg-sidebar:             var(--color-navy);
  --bg-sidebar-hover:       var(--color-navy-light);
  --bg-sidebar-active:      var(--color-navy-lighter);
  --bg-input:               #FFFFFF;
  --bg-input-disabled:      #F1F5F9;
  --bg-overlay:             rgba(15, 23, 42, 0.50);

  /* ---- Border Colors ---------------------------------------------------- */
  --border-color:           #E2E8F0;
  --border-color-light:     #F1F5F9;
  --border-color-dark:      #CBD5E1;
  --border-color-focus:     var(--color-primary);

  /* ---- Typography ------------------------------------------------------- */
  --font-family:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                            Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue',
                            sans-serif;
  --font-mono:              'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                            'SF Mono', Consolas, 'Liberation Mono', Menlo,
                            monospace;

  /* Text scale: 12 - 30 px */
  --text-xs:                0.75rem;   /* 12px */
  --text-sm:                0.8125rem; /* 13px */
  --text-base:              0.875rem;  /* 14px */
  --text-md:                1rem;      /* 16px */
  --text-lg:                1.125rem;  /* 18px */
  --text-xl:                1.25rem;   /* 20px */
  --text-2xl:               1.5rem;    /* 24px */
  --text-3xl:               1.875rem;  /* 30px */

  --leading-none:           1;
  --leading-tight:          1.25;
  --leading-snug:           1.375;
  --leading-normal:         1.5;
  --leading-relaxed:        1.625;

  --font-light:             300;
  --font-regular:           400;
  --font-medium:            500;
  --font-semibold:          600;
  --font-bold:              700;
  --font-extrabold:         800;

  --tracking-tight:         -0.025em;
  --tracking-normal:        0;
  --tracking-wide:          0.025em;

  /* ---- Spacing (4 px base unit) ---------------------------------------- */
  --space-0:                0;
  --space-px:               1px;
  --space-0-5:              0.125rem;  /*  2px */
  --space-1:                0.25rem;   /*  4px */
  --space-1-5:              0.375rem;  /*  6px */
  --space-2:                0.5rem;    /*  8px */
  --space-2-5:              0.625rem;  /* 10px */
  --space-3:                0.75rem;   /* 12px */
  --space-3-5:              0.875rem;  /* 14px */
  --space-4:                1rem;      /* 16px */
  --space-5:                1.25rem;   /* 20px */
  --space-6:                1.5rem;    /* 24px */
  --space-7:                1.75rem;   /* 28px */
  --space-8:                2rem;      /* 32px */
  --space-9:                2.25rem;   /* 36px */
  --space-10:               2.5rem;    /* 40px */
  --space-12:               3rem;      /* 48px */
  --space-14:               3.5rem;    /* 56px */
  --space-16:               4rem;      /* 64px */
  --space-20:               5rem;      /* 80px */
  --space-24:               6rem;      /* 96px */
  --space-32:               8rem;      /* 128px */

  /* ---- Border Radius ---------------------------------------------------- */
  --radius-none:            0;
  --radius-sm:              0.25rem;   /*  4px */
  --radius-md:              0.5rem;    /*  8px */
  --radius-lg:              0.75rem;   /* 12px */
  --radius-xl:              1rem;      /* 16px */
  --radius-2xl:             1.5rem;    /* 24px */
  --radius-full:            9999px;

  /* ---- Box Shadows ------------------------------------------------------ */
  --shadow-sm:              0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md:              0 4px 6px -1px rgba(15, 23, 42, 0.08),
                            0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg:              0 10px 15px -3px rgba(15, 23, 42, 0.08),
                            0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl:              0 20px 25px -5px rgba(15, 23, 42, 0.10),
                            0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --shadow-2xl:             0 25px 50px -12px rgba(15, 23, 42, 0.25);
  --shadow-inner:           inset 0 2px 4px 0 rgba(15, 23, 42, 0.05);
  --shadow-none:            0 0 0 0 transparent;

  /* ---- Transitions ------------------------------------------------------ */
  --transition-fast:        150ms;
  --transition-base:        200ms;
  --transition-slow:        300ms;
  --transition-slower:      500ms;
  --ease-default:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:                cubic-bezier(0.4, 0, 1, 1);
  --ease-out:               cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:            cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* ---- Z-Index Scale ---------------------------------------------------- */
  --z-dropdown:             1000;
  --z-sticky:               1020;
  --z-fixed:                1030;
  --z-modal-backdrop:       1040;
  --z-modal:                1050;
  --z-popover:              1060;
  --z-tooltip:              1070;
  --z-toast:                1080;

  /* ---- Layout ----------------------------------------------------------- */
  --sidebar-width:          260px;
  --sidebar-collapsed:      72px;
  --header-height:          64px;
  --content-max-width:      1280px;

  /* ---- Focus Ring ------------------------------------------------------- */
  --focus-ring-color:       rgba(59, 130, 246, 0.5);
  --focus-ring-width:       3px;
  --focus-ring-offset:      2px;
  --focus-ring:             0 0 0 var(--focus-ring-offset) var(--bg-card),
                            0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}


/* ==========================================================================
   2. CSS RESET
   ========================================================================== */

/* Box-sizing globally */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* Prevent font-size inflation on mobile */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size: 16px;
  scroll-behavior: smooth;
}

/* Base body */
body {
  min-height: 100vh;
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  overflow-wrap: break-word;
}

h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

/* Paragraphs & inline text */
p {
  overflow-wrap: break-word;
  line-height: var(--leading-relaxed);
}

/* Links */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-default);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* Lists */
ul, ol {
  list-style: none;
}

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

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

/* Textarea - prevent resize issues */
textarea {
  resize: vertical;
}

/* Button reset */
button {
  cursor: pointer;
  border: none;
  background: none;
}

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

/* Remove built-in form styling in Firefox */
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Remove default appearance on input[type="number"] spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Remove search input clear button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Accessible hidden content */
[hidden] {
  display: none !important;
}


/* ==========================================================================
   3. SELECTION COLOR
   ========================================================================== */

::selection {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}


/* ==========================================================================
   4. FOCUS OUTLINE STYLE (Blue Ring)
   ========================================================================== */

/* Remove default outlines; we add our own */
:focus {
  outline: none;
}

/* Visible focus ring for keyboard navigation only */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Specific focus for inputs and textareas */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--border-color-focus);
  box-shadow: var(--focus-ring);
}

/* Specific focus for buttons and links */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}


/* ==========================================================================
   5. SCROLLBAR STYLING (Thin, Navy-Themed)
   ========================================================================== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-navy-lighter) transparent;
}

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-navy-lighter);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-navy-light);
}

/* Hide scrollbar on sidebar but keep scrolling */
.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}


/* ==========================================================================
   6. TRANSITION DEFAULTS
   ========================================================================== */

/* Default transition for interactive elements */
a,
button,
input,
textarea,
select,
[role="button"],
.transition {
  transition-property: color, background-color, border-color, box-shadow,
                       opacity, transform;
  transition-duration: var(--transition-base);
  transition-timing-function: var(--ease-default);
}

.transition-fast {
  transition-duration: var(--transition-fast);
}

.transition-slow {
  transition-duration: var(--transition-slow);
}

.transition-none {
  transition: none;
}


/* ==========================================================================
   7. UTILITY CLASSES -- TYPOGRAPHY
   ========================================================================== */

/* Font sizes */
.text-xs    { font-size: var(--text-xs);   }
.text-sm    { font-size: var(--text-sm);   }
.text-base  { font-size: var(--text-base); }
.text-md    { font-size: var(--text-md);   }
.text-lg    { font-size: var(--text-lg);   }
.text-xl    { font-size: var(--text-xl);   }
.text-2xl   { font-size: var(--text-2xl);  }
.text-3xl   { font-size: var(--text-3xl);  }

/* Font weights */
.font-light     { font-weight: var(--font-light);     }
.font-regular   { font-weight: var(--font-regular);   }
.font-medium    { font-weight: var(--font-medium);    }
.font-semibold  { font-weight: var(--font-semibold);  }
.font-bold      { font-weight: var(--font-bold);      }
.font-extrabold { font-weight: var(--font-extrabold); }

/* Line heights */
.leading-none    { line-height: var(--leading-none);    }
.leading-tight   { line-height: var(--leading-tight);   }
.leading-snug    { line-height: var(--leading-snug);    }
.leading-normal  { line-height: var(--leading-normal);  }
.leading-relaxed { line-height: var(--leading-relaxed); }

/* Letter spacing */
.tracking-tight  { letter-spacing: var(--tracking-tight);  }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide   { letter-spacing: var(--tracking-wide);   }

/* Text colors */
.text-primary   { color: var(--text-primary);   }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted);     }
.text-inverse   { color: var(--text-inverse);   }
.text-success   { color: var(--color-success);  }
.text-warning   { color: var(--color-warning);  }
.text-danger    { color: var(--color-danger);   }
.text-info      { color: var(--color-info);     }
.text-blue      { color: var(--color-primary);  }

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

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

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

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

/* Monospace */
.font-mono { font-family: var(--font-mono); }


/* ==========================================================================
   8. UTILITY CLASSES -- COLORS & BACKGROUNDS
   ========================================================================== */

/* Backgrounds */
.bg-page       { background-color: var(--bg-page);              }
.bg-card       { background-color: var(--bg-card);              }
.bg-sidebar    { background-color: var(--bg-sidebar);           }
.bg-primary    { background-color: var(--color-primary);        }
.bg-primary-light { background-color: var(--color-primary-lightest); }
.bg-navy       { background-color: var(--color-navy);           }
.bg-success    { background-color: var(--color-success);        }
.bg-success-light { background-color: var(--color-success-lightest); }
.bg-warning    { background-color: var(--color-warning);        }
.bg-warning-light { background-color: var(--color-warning-lightest); }
.bg-danger     { background-color: var(--color-danger);         }
.bg-danger-light  { background-color: var(--color-danger-lightest);  }
.bg-info       { background-color: var(--color-info);           }
.bg-info-light { background-color: var(--color-info-lightest);  }
.bg-overlay    { background-color: var(--bg-overlay);           }
.bg-transparent { background-color: transparent;                }


/* ==========================================================================
   9. UTILITY CLASSES -- SPACING
   ========================================================================== */

/* Margin */
.m-0    { margin: var(--space-0);  } .m-1  { margin: var(--space-1);  }
.m-2    { margin: var(--space-2);  } .m-3  { margin: var(--space-3);  }
.m-4    { margin: var(--space-4);  } .m-5  { margin: var(--space-5);  }
.m-6    { margin: var(--space-6);  } .m-8  { margin: var(--space-8);  }
.m-auto { margin: auto;           }

.mt-0  { margin-top: var(--space-0); } .mt-1 { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }

.mb-0  { margin-bottom: var(--space-0); } .mb-1 { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }

.ml-0  { margin-left: var(--space-0); } .ml-1 { margin-left: var(--space-1); }
.ml-2  { margin-left: var(--space-2); } .ml-3 { margin-left: var(--space-3); }
.ml-4  { margin-left: var(--space-4); } .ml-auto { margin-left: auto; }

.mr-0  { margin-right: var(--space-0); } .mr-1 { margin-right: var(--space-1); }
.mr-2  { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); }
.mr-4  { margin-right: var(--space-4); } .mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

/* Padding */
.p-0  { padding: var(--space-0);  } .p-1  { padding: var(--space-1);  }
.p-2  { padding: var(--space-2);  } .p-3  { padding: var(--space-3);  }
.p-4  { padding: var(--space-4);  } .p-5  { padding: var(--space-5);  }
.p-6  { padding: var(--space-6);  } .p-8  { padding: var(--space-8);  }
.p-10 { padding: var(--space-10); } .p-12 { padding: var(--space-12); }

.pt-0 { padding-top: var(--space-0); } .pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); } .pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); } .pt-6 { padding-top: var(--space-6); }

.pb-0 { padding-bottom: var(--space-0); } .pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); } .pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); } .pb-6 { padding-bottom: var(--space-6); }

.pl-0 { padding-left: var(--space-0); } .pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); } .pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); } .pl-6 { padding-left: var(--space-6); }

.pr-0 { padding-right: var(--space-0); } .pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); } .pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); } .pr-6 { padding-right: var(--space-6); }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }


/* ==========================================================================
   10. UTILITY CLASSES -- BORDERS & RADIUS
   ========================================================================== */

.border      { border: 1px solid var(--border-color); }
.border-t    { border-top: 1px solid var(--border-color); }
.border-b    { border-bottom: 1px solid var(--border-color); }
.border-l    { border-left: 1px solid var(--border-color); }
.border-r    { border-right: 1px solid var(--border-color); }
.border-none { border: none; }

.border-light { border-color: var(--border-color-light); }
.border-dark  { border-color: var(--border-color-dark);  }

.rounded-none { border-radius: var(--radius-none); }
.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); }


/* ==========================================================================
   11. UTILITY CLASSES -- SHADOWS
   ========================================================================== */

.shadow-none  { box-shadow: var(--shadow-none);  }
.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);   }
.shadow-inner { box-shadow: var(--shadow-inner); }


/* ==========================================================================
   12. UTILITY CLASSES -- LAYOUT & DISPLAY
   ========================================================================== */

.block        { display: block;        }
.inline-block { display: inline-block; }
.inline       { display: inline;       }
.hidden       { display: none;         }

.flex         { display: flex;         }
.inline-flex  { display: inline-flex;  }
.grid         { display: grid;         }

/* Flex utilities */
.flex-row     { flex-direction: row;     }
.flex-col     { flex-direction: column;  }
.flex-wrap    { flex-wrap: wrap;         }
.flex-nowrap  { flex-wrap: nowrap;       }
.flex-1       { flex: 1 1 0%;           }
.flex-auto    { flex: 1 1 auto;         }
.flex-none    { flex: none;             }
.grow         { flex-grow: 1;           }
.grow-0       { flex-grow: 0;           }
.shrink       { flex-shrink: 1;         }
.shrink-0     { flex-shrink: 0;         }

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

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

.self-start  { align-self: flex-start; }
.self-center { align-self: center;     }
.self-end    { align-self: flex-end;   }

/* Gap */
.gap-0  { gap: var(--space-0);  }
.gap-1  { gap: var(--space-1);  }
.gap-2  { gap: var(--space-2);  }
.gap-3  { gap: var(--space-3);  }
.gap-4  { gap: var(--space-4);  }
.gap-5  { gap: var(--space-5);  }
.gap-6  { gap: var(--space-6);  }
.gap-8  { gap: var(--space-8);  }
.gap-10 { gap: var(--space-10); }


/* ==========================================================================
   13. UTILITY CLASSES -- SIZING
   ========================================================================== */

.w-full    { width: 100%;          }
.w-screen  { width: 100vw;         }
.w-auto    { width: auto;          }
.w-fit     { width: fit-content;   }
.min-w-0   { min-width: 0;         }
.max-w-full { max-width: 100%;     }
.max-w-screen { max-width: 100vw;  }
.max-w-content { max-width: var(--content-max-width); }

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


/* ==========================================================================
   14. UTILITY CLASSES -- POSITIONING
   ========================================================================== */

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

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


/* ==========================================================================
   15. UTILITY CLASSES -- OVERFLOW
   ========================================================================== */

.overflow-auto    { overflow: auto;    }
.overflow-hidden  { overflow: hidden;  }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll;  }
.overflow-x-auto  { overflow-x: auto;  }
.overflow-y-auto  { overflow-y: auto;  }


/* ==========================================================================
   16. UTILITY CLASSES -- OPACITY & VISIBILITY
   ========================================================================== */

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

.visible   { visibility: visible; }
.invisible { visibility: hidden;  }


/* ==========================================================================
   17. UTILITY CLASSES -- CURSOR & INTERACTION
   ========================================================================== */

.cursor-pointer  { cursor: pointer;    }
.cursor-default  { cursor: default;    }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait     { cursor: wait;       }
.cursor-grab     { cursor: grab;       }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all;  }


/* ==========================================================================
   18. UTILITY CLASSES -- Z-INDEX
   ========================================================================== */

.z-0        { z-index: 0;                      }
.z-10       { z-index: 10;                     }
.z-20       { z-index: 20;                     }
.z-30       { z-index: 30;                     }
.z-40       { z-index: 40;                     }
.z-50       { z-index: 50;                     }
.z-dropdown { z-index: var(--z-dropdown);      }
.z-sticky   { z-index: var(--z-sticky);        }
.z-fixed    { z-index: var(--z-fixed);         }
.z-modal    { z-index: var(--z-modal);         }
.z-popover  { z-index: var(--z-popover);       }
.z-tooltip  { z-index: var(--z-tooltip);       }
.z-toast    { z-index: var(--z-toast);         }


/* ==========================================================================
   19. SCREEN-READER ONLY (Accessibility)
   ========================================================================== */

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

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}