/* Global Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*:not(code, pre) {
    font-family: inherit;
}
:root {
    --font: system-ui, -apple-system, "Segoe UI", "Open Sans", sans-serif;
    height: 100%;
    font-size: 62.5%;
}

/* Body Styles */
body {
    font-size: 1.6rem;
    font-family: var(--font);
}
body:not(:has(> :where(.mu-layout, #root))) {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}
body:has(> :where(.mu-layout, #root)) {
    height: 100%;
    overflow: hidden;
}
body > :where(.mu-layout, #root) {
    height: 100%;
}
body:has(> :where(.mu-layout, #root)) .main_wrapper {
    overflow: auto;
    scroll-behavior: smooth;
}

/* Layout and Flex Utilities */
main {
    flex-grow: 1;
}
.rflex {
    display: flex;
    flex-direction: row;
}
.cflex {
    display: flex;
    flex-direction: column;
}
.hide,
.hidden {
    display: none !important;
}
.wrap {
    flex-wrap: wrap;
}
.fg {
    flex-grow: 1;
}
.fs {
    flex-shrink: 0;
}
.f1 {
    flex: 1;
}
.f00 {
    flex: 0 0 auto;
}
.f01 {
    flex: 0 1 auto;
}
.f10 {
    flex: 1 0 auto;
}
.f11 {
    flex: 1 1 auto;
}

/* Alignment Utilities */
.ais {
    align-items: start;
}
.aie {
    align-items: end;
}
.aic {
    align-items: center;
}
.ass {
    align-self: start;
}
.ase {
    align-self: end;
}
.asc {
    align-self: center;
}
.asst {
    align-self: stretch;
}
.jcs {
    justify-content: start;
}
.jce {
    justify-content: end;
}
.jcc {
    justify-content: center;
}
.jcsb {
    justify-content: space-between;
}
.jcsa {
    justify-content: space-around;
}
.jcse {
    justify-content: space-evenly;
}

/* Positioning Utilities */
.pos-abs {
    position: absolute;
}
.pos-fix {
    position: fixed;
}
.pos-rel {
    position: relative;
}
.pos-sti {
    position: sticky;
}

/* Images and Media */
img {
    object-fit: cover;
}
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Form Elements */
input,
button,
textarea,
select {
    font: inherit;
}
textarea{
    field-sizing: content;
}

/* Tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Headings */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    line-height: 1.3;
}
:where(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
}
:where(h1, .h1) {
    font-size: clamp(1.8rem, 1.5rem + 1vw, 2.8rem);
}
:where(h2, .h2) {
    font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.4rem);
}
:where(h3, .h3) {
    font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
}
:where(h4, .h4) {
    font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.8rem);
}
:where(h5, .h5) {
    font-size: clamp(1.3rem, 1.1rem + 0.4vw, 1.6rem);
}
:where(h6, .h6) {
    font-size: clamp(1.2rem, 1rem + 0.3vw, 1.4rem);
}

/* Text Utilities */
.bold {
    font-weight: 600;
}
.text-center {
    text-align: center;
}

/* Links */
.mu-link {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    gap: 7px;
    align-items: center;
}

/* Code and Preformatted Text */
code.mu-code,
pre.mu-pre {
    padding: 5px 10px 6px;
    border-radius: 8px;
    white-space: normal;
    background: var(--gray_200);
}
code.mu-code {
    font-weight: 600;
    font-size: 0.8em;
}
pre.mu-pre > code.mu-code {
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
}
pre.mu-pre {
    padding: 12px 18px;
    border-radius: 12px;
}
code.mu-code.dark,
pre.mu-pre.dark {
    color: white;
    background: var(--gray_800);
}

/* Buttons */
.mu-btn {
    cursor: pointer;
    user-select: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight: 600;
    padding: 10px 25px;
    text-transform: capitalize;
    gap: 10px;
    position: relative;
    transition: all 0.3s, transform 0.2s;
    isolation: isolate;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.mu-btn.outline:focus {
    outline: 2px solid rgb(var(--col, 0, 0, 0));
    outline-offset: 2px;
}
.mu-btn:has(.icon),
.mu-btn.icon {
    padding: 0;
}
.mu-btn .icon {
    width: 36px;
}
.mu-btn i {
    font-size: 0.9em;
}
.mu-btn:active{
    transform: translate(2px,2px);
}
.mu-btn.btn-loader.loading,
.mu-btn:disabled {
    cursor: not-allowed;
    pointer-events: none;
}
.mu-btn.btn-loader.loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: inherit;
    border-radius: inherit;
}
.mu-btn.btn-loader.loading::after {
    content: "";
    height: 50%;
    position: absolute;
    aspect-ratio: 1;
    border-radius: 100px;
    border: 2px solid var(--gray_600);
    border-top: 2px solid white;
    z-index: 2;
    opacity: 1;
    animation: rotate 0.5s linear infinite forwards;
}

i.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.2s;
}

/* Dividers */
.mu-divider {
    margin-block: 10px;
    display: flex;
    color: rgb(var(--col, 0, 0, 0));
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.74em;
    align-items: center;
}
.mu-divider .content {
    padding-inline: 10px;
}
hr {
    border: none;
    align-self: normal;
}
.mu-divider i.hr,
hr {
    flex: 1;
    border-top: 1px solid rgb(var(--col, 206, 212, 218));
    border-left: 1px solid rgb(var(--col, 206, 212, 218));
}

/* Containers */
:root {
    --container: 400px;
    --container-s: 540px;
    --container-m: 720px;
    --container-l: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
}

/* Base Containers */
.container,
.container-s,
.container-m,
.container-l,
.container-xl,
.container-xxl,
.container-fix,
.container-fix-s,
.container-fix-m,
.container-fix-l,
.container-fix-xl,
.container-fix-xxl,
.container-fluid {
    width: 100%;
    margin-inline: auto;
}

.container-fluid {
    max-width: none; /* Fluid container for larger layouts */
}

/* Fixed Container Sizes */
.container,
.container-fix {
    max-width: var(--container);
}
.container-fix-s {
    max-width: var(--container-s);
}
.container-fix-m {
    max-width: var(--container-m);
}
.container-fix-l {
    max-width: var(--container-l);
}
.container-fix-xl {
    max-width: var(--container-xl);
}
.container-fix-xxl {
    max-width: var(--container-xxl);
}

/* Responsive Media Queries */
@media (min-width: 576px) {
    .container,
    .container-s {
        max-width: var(--container-s);
    }
}
@media (min-width: 768px) {
    .container,
    .container-s,
    .container-m {
        max-width: var(--container-m);
    }
}
@media (min-width: 992px) {
    .container,
    .container-s,
    .container-m,
    .container-l {
        max-width: var(--container-l);
    }
}
@media (min-width: 1200px) {
    .container,
    .container-s,
    .container-m,
    .container-l,
    .container-xl {
        max-width: var(--container-xl);
    }
}
@media (min-width: 1400px) {
    .container,
    .container-s,
    .container-m,
    .container-l,
    .container-xl,
    .container-xxl {
        max-width: var(--container-xxl);
    }
}

/* Transitions */
a > i,
i > a {
    transition: 0;
}

/* Chips */
.chip {
    padding: 2px 8px 3px;
    font-weight: 600;
    font-size: 0.76em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.chip:has(i) {
    padding: 3px 10px 3px;
}
.chip i {
    font-size: 0.8em;
}

@keyframes rotate {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 36deg;
    }
}