/* =========================
   DISPLAY
========================= */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

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

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

/* Fill space */
.flex-fill {
    flex: 1 1 0% !important;
}

/* Grow */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }

/* Shrink */
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* Shorthand */
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: 0 0 auto !important; }

/* =========================
   RESPONSIVE DISPLAY
========================= */

/* SM (>= 640px) */
@media (min-width: 640px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
}

/* MD (>= 768px) */
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

/* LG (>= 1024px) */
@media (min-width: 1024px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

/* XL (>= 1280px) */
@media (min-width: 1280px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

/* =========================
   GAP SYSTEM
========================= */

.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--ms-space-xs) !important; }
.gap-sm { gap: var(--ms-space-sm) !important; }
.gap-md { gap: var(--ms-space-md) !important; }
.gap-lg { gap: var(--ms-space-lg) !important; }
.gap-xl { gap: var(--ms-space-xl) !important; }
.gap-2xl { gap: var(--ms-space-2xl) !important; }

/* =========================
   MARGIN SYSTEM
========================= */

.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }

.m-xs { margin: var(--ms-space-xs) !important; }
.m-sm { margin: var(--ms-space-sm) !important; }
.m-md { margin: var(--ms-space-md) !important; }
.m-lg { margin: var(--ms-space-lg) !important; }
.m-xl { margin: var(--ms-space-xl) !important; }
.m-2xl { margin: var(--ms-space-2xl) !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-auto { margin-top: auto !important; }
.mt-xs { margin-top: var(--ms-space-xs) !important; }
.mt-sm { margin-top: var(--ms-space-sm) !important; }
.mt-md { margin-top: var(--ms-space-md) !important; }
.mt-lg { margin-top: var(--ms-space-lg) !important; }
.mt-xl { margin-top: var(--ms-space-xl) !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-auto { margin-bottom: auto !important; }
.mb-xs { margin-bottom: var(--ms-space-xs) !important; }
.mb-sm { margin-bottom: var(--ms-space-sm) !important; }
.mb-md { margin-bottom: var(--ms-space-md) !important; }
.mb-lg { margin-bottom: var(--ms-space-lg) !important; }
.mb-xl { margin-bottom: var(--ms-space-xl) !important; }

/* Margin Left */
.ms-0 { margin-left: 0 !important; }
.ms-auto { margin-left: auto !important; }
.ms-xs { margin-left: var(--ms-space-xs) !important; }
.ms-sm { margin-left: var(--ms-space-sm) !important; }
.ms-md { margin-left: var(--ms-space-md) !important; }
.ms-lg { margin-left: var(--ms-space-lg) !important; }
.ms-xl { margin-left: var(--ms-space-xl) !important; }

/* Margin Right */
.me-0 { margin-right: 0 !important; }
.me-auto { margin-right: auto !important; }
.me-xs { margin-right: var(--ms-space-xs) !important; }
.me-sm { margin-right: var(--ms-space-sm) !important; }
.me-md { margin-right: var(--ms-space-md) !important; }
.me-lg { margin-right: var(--ms-space-lg) !important; }
.me-xl { margin-right: var(--ms-space-xl) !important; }

/* Margin X */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
.mx-sm {
    margin-left: var(--ms-space-sm) !important;
    margin-right: var(--ms-space-sm) !important;
}
.mx-md {
    margin-left: var(--ms-space-md) !important;
    margin-right: var(--ms-space-md) !important;
}

/* Margin Y */
.my-sm {
    margin-top: var(--ms-space-sm) !important;
    margin-bottom: var(--ms-space-sm) !important;
}
.my-md {
    margin-top: var(--ms-space-md) !important;
    margin-bottom: var(--ms-space-md) !important;
}

/* =========================
   PADDING SYSTEM
========================= */

.p-0 { padding: 0 !important; }

.p-xs { padding: var(--ms-space-xs) !important; }
.p-sm { padding: var(--ms-space-sm) !important; }
.p-md { padding: var(--ms-space-md) !important; }
.p-lg { padding: var(--ms-space-lg) !important; }
.p-xl { padding: var(--ms-space-xl) !important; }
.p-2xl { padding: var(--ms-space-2xl) !important; }

/* Padding Top */
.pt-sm { padding-top: var(--ms-space-sm) !important; }
.pt-md { padding-top: var(--ms-space-md) !important; }
.pt-lg { padding-top: var(--ms-space-lg) !important; }

/* Padding Bottom */
.pb-sm { padding-bottom: var(--ms-space-sm) !important; }
.pb-md { padding-bottom: var(--ms-space-md) !important; }
.pb-lg { padding-bottom: var(--ms-space-lg) !important; }

/* Padding X */
.px-sm {
    padding-left: var(--ms-space-sm) !important;
    padding-right: var(--ms-space-sm) !important;
}
.px-md {
    padding-left: var(--ms-space-md) !important;
    padding-right: var(--ms-space-md) !important;
}
.px-lg {
    padding-left: var(--ms-space-lg) !important;
    padding-right: var(--ms-space-lg) !important;
}

/* Padding Y */
.py-xs {
    padding-top: var(--ms-space-xs) !important;
    padding-bottom: var(--ms-space-xs) !important;
}
.py-sm {
    padding-top: var(--ms-space-sm) !important;
    padding-bottom: var(--ms-space-sm) !important;
}
.py-md {
    padding-top: var(--ms-space-md) !important;
    padding-bottom: var(--ms-space-md) !important;
}

/* =========================
   TEXT ALIGNMENT
========================= */

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

/* =========================
   SIZE HELPERS
========================= */

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* =========================
   HEIGHT HELPERS
========================= */

.h-2xs { height: var(--ms-space-2xs) !important; } /* 2px */
.h-xs  { height: var(--ms-space-xs) !important; }  /* 4px */
.h-sm  { height: var(--ms-space-sm) !important; }  /* 8px */
.h-md  { height: var(--ms-space-md) !important; }  /* 12px */
.h-lg  { height: var(--ms-space-lg) !important; }  /* 16px */
.h-xl  { height: var(--ms-space-xl) !important; }  /* 20px */
.h-2xl { height: var(--ms-space-2xl) !important; } /* 24px */
.h-3xl { height: var(--ms-space-3xl) !important; } /* 32px */
.h-4xl { height: var(--ms-space-4xl) !important; } /* 40px */
.h-5xl { height: var(--ms-space-5xl) !important; } /* 48px */
.h-6xl { height: var(--ms-space-6xl) !important; } 

/* =========================
   POSITION HELPERS
========================= */

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }

/* =========================
   OVERFLOW HELPERS
========================= */

.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-x { overflow-x: auto !important; }
.overflow-y { overflow-y: auto !important; }

/* =========================
   CURSOR HELPERS
========================= */

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* =========================
   CONTAINER SYSTEM
========================= */

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--ms-space-lg);
}

/* Responsive max-width (Fluent style) */
@media (min-width: 640px) {
    .container { max-width: 640px; }
}

@media (min-width: 768px) {
    .container { max-width: 768px; }
}

@media (min-width: 1024px) {
    .container { max-width: 1024px; }
}

@media (min-width: 1280px) {
    .container { max-width: 1280px; }
}

.container-sm {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding-inline: var(--ms-space-md);
}

.container-md {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    padding-inline: var(--ms-space-lg);
}

/* =========================
   CENTER LAYOUT
========================= */

.centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.centered-vertical {
    display: flex;
    align-items: center;
}

.centered-horizontal {
    display: flex;
    justify-content: center;
}

/* Full viewport center */
.centered-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   WRAPPER / SECTION
========================= */

.wrapper {
    padding: var(--ms-space-xl);
}

.wrapper-sm {
    padding: var(--ms-space-md);
}

.wrapper-lg {
    padding: var(--ms-space-2xl);
}

/* =========================
   STACK (VERTICAL LAYOUT)
========================= */

.stack {
    display: flex;
    flex-direction: column;
}

.stack-xs { gap: var(--ms-space-xs); }
.stack-sm { gap: var(--ms-space-sm); }
.stack-md { gap: var(--ms-space-md); }
.stack-lg { gap: var(--ms-space-lg); }
.stack-xl { gap: var(--ms-space-xl); }

/* =========================
   FONT WEIGHT SYSTEM (Fluent)
========================= */

.fw-light { 
    font-weight: var(--ms-font-weight-light) !important; 
}

.fw-regular { 
    font-weight: var(--ms-font-weight-regular) !important; 
}

.fw-medium { 
    font-weight:  var(--ms-font-weight-medium) !important;
}

.fw-semibold { 
    font-weight: var(--ms-font-weight-semi-bold) !important; 
}

.fw-bold { 
    font-weight: var(--ms-font-weight-bold) !important; 
}

/* =========================
   FONT SIZE SYSTEM (Fluent)
========================= */

.fs-xxl { font-size: var(--ms-font-size-xxl) !important; }     /* 32px */
.fs-xl  { font-size: var(--ms-font-size-xl) !important; }      /* 28px */

.fs-h1  { font-size: var(--ms-font-size-h1) !important; }      /* 24px */
.fs-h2  { font-size: var(--ms-font-size-h2) !important; }      /* 20px */
.fs-h3  { font-size: var(--ms-font-size-h3) !important; }      /* 16px */
.fs-h4  { font-size: var(--ms-font-size-h4) !important; }      /* 14px */

.fs-body    { font-size: var(--ms-font-size-body) !important; }    /* 14px */
.fs-label   { font-size: var(--ms-font-size-label) !important; }   /* 13px */
.fs-small   { font-size: var(--ms-font-size-small) !important; }   /* 12px */
.fs-caption { font-size: var(--ms-font-size-caption) !important; } /* 11px */

/* =========================
   FONT STYLE SYSTEM (Fluent)
========================= */
.text-decoration-none   {text-decoration: none!important;}
.text-decoration-underline   {
    text-decoration: underline!important;
    text-underline-offset: 2px;
}

.text-hover-underline:hover{
    text-decoration: underline!important;
}

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

/*Grid System*/
/* =========================
   GRID SYSTEM (12 COL)
========================= */

.grid {
    display: grid;
}

/* =========================
   GRID TEMPLATE (1 - 12)
========================= */

.grid-1  { grid-template-columns: repeat(1, 1fr); }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-5  { grid-template-columns: repeat(5, 1fr); }
.grid-6  { grid-template-columns: repeat(6, 1fr); }
.grid-7  { grid-template-columns: repeat(7, 1fr); }
.grid-8  { grid-template-columns: repeat(8, 1fr); }
.grid-9  { grid-template-columns: repeat(9, 1fr); }
.grid-10 { grid-template-columns: repeat(10, 1fr); }
.grid-11 { grid-template-columns: repeat(11, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

/* =========================
   COLUMN SPAN (LIKE COL-*)
========================= */

.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* =========================
   AUTO GRID (RESPONSIVE)
========================= */

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* =========================
   RESPONSIVE BREAKPOINT
========================= */

/* Mobile */
@media (max-width: 768px) {
    [class*="grid-"] {
        grid-template-columns: 1fr;
    }

    [class*="col-span-"] {
        grid-column: span 1 !important;
    }
}

hr {
    border: none;
    height: 1px;
    background-color: var(--ms-color-border-subtle);
    margin-block: var(--ms-space-2xl);
    opacity: 1;
    transform: translateZ(0);
}

/* ================================
   BORDER WIDTH
================================ */
.border-0 {
    border: 0 !important;
}

.border {
    border: 1px solid var(--ms-color-border-default) !important;
}

.border-1 {
    border-width: 1px !important;
}

.border-2 {
    border-width: 2px !important;
}

/* ================================
   BORDER COLOR
================================ */
.border-default {
    border-color: var(--ms-color-border-default) !important;
}

.border-subtle {
    border-color: var(--ms-color-border-subtle) !important;
}

.border-focus {
    border-color: var(--ms-color-border-focus) !important;
}

.border-error {
    border-color: var(--ms-color-border-error) !important;
}

/* Fluent-style emphasis */
.border-strong {
    border-color: var(--ms-color-neutral-400) !important;
}

/* ================================
   BORDER STYLE
================================ */
.border-solid {
    border-style: solid !important;
}

.border-none {
    border-style: none !important;
}

/* ================================
   DIRECTIONAL BORDER
================================ */
.border-top {
    border-top: 1px solid var(--ms-color-border-default) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--ms-color-border-default) !important;
}

.border-left {
    border-left: 1px solid var(--ms-color-border-default) !important;
}

.border-right {
    border-right: 1px solid var(--ms-color-border-default) !important;
}

/* subtle variants */
.border-top-subtle {
    border-top: 1px solid var(--ms-color-border-subtle) !important;
}

.border-bottom-subtle {
    border-bottom: 1px solid var(--ms-color-border-subtle) !important;
}

/* ================================
   RADIUS (Fluent geometry)
================================ */
.rounded-none {
    border-radius: var(--ms-radius-none) !important;
}

.rounded-sm {
    border-radius: var(--ms-radius-sm) !important;
}

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

.rounded-lg {
    border-radius: var(--ms-radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--ms-radius-xl) !important;
}

.rounded-pill {
    border-radius: var(--ms-radius-pill) !important;
}

/* ================================
   INTERACTION STATES
================================ */
.border-hover:hover {
    border-color: var(--ms-color-neutral-hover) !important;
}

.border-focus:focus {
    border-color: var(--ms-color-border-focus) !important;
    outline: none;
}

/* ================================
   SPECIAL UTILITY (FLUENT STYLE)
================================ */

/* Card-style border */
.border-card {
    border: 1px solid var(--ms-color-border-subtle) !important;
    border-radius: var(--ms-radius-lg) !important;
}

/* Surface separation */
.border-divider {
    border-top: 1px solid var(--ms-color-border-subtle) !important;
}

/* Reset utility */
.border-reset {
    border: none !important;
}

/* Custom width column */
.col-w-50 { width: 50px!important; }
.col-w-60 { width: 60px!important; }
.col-w-70 { width: 70px!important; }
.col-w-80 { width: 80px!important; }
.col-w-90 { width: 90px!important; }
.col-w-100 { width: 100px!important; }
.col-w-110 { width: 110px!important; }
.col-w-120 { width: 120px!important; }
.col-w-130 { width: 130px!important; }
.col-w-140 { width: 140px!important; }
.col-w-150 { width: 150px!important; }
.col-w-160 { width: 160px!important; }
.col-w-170 { width: 170px!important; }
.col-w-180 { width: 180px!important; }
.col-w-190 { width: 190px!important; }
.col-w-200 { width: 200px!important; }

.col-w-250 { width: 250px!important; }
.col-w-300 { width: 300px!important; }