/* ===========================================
   BASE STYLES - Reset e estilos fundamentais
   Design System MACAM BRASIL
   =========================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--ml-font-body);
    font-weight: var(--ml-font-medium);
    line-height: 1.6;
    color: var(--ml-black);
    background-color: var(--ml-gray-100);
    overflow-x: hidden;
}

/* ========================================
   TIPOGRAFIA MACAM BRASIL
   Títulos: SEMPRE em caixa alta
   Subtítulos: Preferencialmente caixa alta
   Texto geral: Escrita tradicional
   ======================================== */

h1, h2, h3, h4, h5, h6,
.ml-heading {
    font-family: var(--ml-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

h1, .ml-h1 {
    font-size: var(--ml-text-4xl);
    font-weight: var(--ml-font-black);
}

h2, .ml-h2 {
    font-size: var(--ml-text-3xl);
    font-weight: var(--ml-font-bold);
}

h3, .ml-h3 {
    font-size: var(--ml-text-2xl);
    font-weight: var(--ml-font-bold);
}

h4, .ml-h4 {
    font-size: var(--ml-text-xl);
    font-weight: var(--ml-font-medium);
}

h5, .ml-h5 {
    font-size: var(--ml-text-lg);
    font-weight: var(--ml-font-medium);
}

h6, .ml-h6 {
    font-size: var(--ml-text-base);
    font-weight: var(--ml-font-medium);
}

/* Subtítulos - Preferencialmente caixa alta */
.ml-subtitle {
    font-size: var(--ml-text-lg);
    font-weight: var(--ml-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ml-gray-400);
}

/* Texto geral - Escrita tradicional */
p, .ml-text {
    font-size: var(--ml-text-base);
    font-weight: var(--ml-font-medium);
    text-transform: none;
}

.ml-text-sm {
    font-size: var(--ml-text-sm);
}

.ml-text-lg {
    font-size: var(--ml-text-lg);
}

/* ========================================
   LINKS E BOTÕES BASE
   ======================================== */

a {
    color: var(--ml-primary);
    text-decoration: none;
    transition: color var(--ml-transition-fast);
}

a:hover {
    color: var(--ml-gray-400);
}

button {
    font-family: inherit;
    font-weight: var(--ml-font-bold);
    cursor: pointer;
    border: none;
    background: none;
}

/* ========================================
   IMAGENS RESPONSIVAS
   ======================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   CONTAINER RESPONSIVO
   ======================================== */

.ml-container {
    width: 100%;
    max-width: var(--ml-container-xl);
    margin-inline: auto;
    padding-inline: var(--ml-space-md);
}

@media (min-width: 640px) {
    .ml-container {
        padding-inline: var(--ml-space-lg);
    }
}

/* ========================================
   UTILITÁRIOS DE LAYOUT
   ======================================== */

.ml-flex {
    display: flex;
}

.ml-flex-col {
    flex-direction: column;
}

.ml-flex-wrap {
    flex-wrap: wrap;
}

.ml-items-center {
    align-items: center;
}

.ml-justify-center {
    justify-content: center;
}

.ml-justify-between {
    justify-content: space-between;
}

.ml-gap-sm {
    gap: var(--ml-space-sm);
}

.ml-gap-md {
    gap: var(--ml-space-md);
}

.ml-gap-lg {
    gap: var(--ml-space-lg);
}

/* ========================================
   UTILITÁRIOS DE TEXTO
   ======================================== */

.ml-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ml-capitalize {
    text-transform: capitalize;
}

.ml-normal-case {
    text-transform: none;
    letter-spacing: normal;
}

.ml-text-center {
    text-align: center;
}

.ml-text-right {
    text-align: right;
}

/* ========================================
   UTILITÁRIOS DE COR
   ======================================== */

.ml-text-primary {
    color: var(--ml-primary);
}

.ml-text-gray {
    color: var(--ml-gray-400);
}

.ml-text-light {
    color: var(--ml-gray-300);
}

.ml-bg-white {
    background-color: var(--ml-white);
}

.ml-bg-light {
    background-color: var(--ml-gray-100);
}

.ml-bg-dark {
    background-color: var(--ml-primary);
    color: var(--ml-white);
}

/* ========================================
   VISIBILIDADE RESPONSIVA
   ======================================== */

.ml-hidden {
    display: none !important;
}

@media (max-width: 639px) {
    .ml-hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .ml-hidden-tablet {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .ml-hidden-desktop {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .ml-show-desktop-only {
        display: none !important;
    }
}

@media (min-width: 640px) {
    .ml-show-mobile-only {
        display: none !important;
    }
}

/* ========================================
   ACESSIBILIDADE
   ======================================== */

:focus-visible {
    outline: 2px solid var(--ml-primary);
    outline-offset: 2px;
}

.ml-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Redução de movimento para acessibilidade */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    body {
        background: white;
        color: black;
    }
    
    .ml-no-print {
        display: none !important;
    }
}

/* ========================================
   COMPATIBILIDADE BOOTSTRAP
   ======================================== */

/* Dropdowns Bootstrap - Contraste corrigido */
.dropdown-menu {
    background-color: var(--ml-white);
    border: 1px solid var(--ml-gray-200);
    box-shadow: var(--ml-shadow-md);
    border-radius: var(--ml-radius-md);
}

.dropdown-item,
.dropdown-item-text {
    color: var(--ml-primary) !important;
    font-family: var(--ml-font-body);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ml-gray-100);
    color: var(--ml-primary) !important;
}

/* Select/Dropdown Bootstrap */
.form-select,
select.form-control {
    color: var(--ml-primary) !important;
    background-color: var(--ml-white);
    border-color: var(--ml-gray-300);
}

.form-select option,
select.form-control option {
    color: var(--ml-primary);
    background-color: var(--ml-white);
}

/* Botões Bootstrap */
.btn-primary {
    background-color: var(--ml-primary) !important;
    border-color: var(--ml-primary) !important;
}

.btn-secondary {
    background-color: var(--ml-gray-400) !important;
    border-color: var(--ml-gray-400) !important;
}

.btn-outline-light {
    color: var(--ml-primary) !important;
    border-color: var(--ml-gray-300) !important;
}

.btn-outline-light:hover {
    background-color: var(--ml-gray-100) !important;
    color: var(--ml-primary) !important;
}

/* Layout Principal - Correção de gaps e overlap */
#content {
    width: 100%;
    min-height: 100vh;
    background-color: var(--ml-gray-100);
    transition: margin-left var(--ml-transition-slow);
}

@media (min-width: 1024px) {
    #content {
        /* Margem para dar espaço à sidebar fixa */
        margin-left: var(--ml-sidebar-width);
        width: calc(100% - var(--ml-sidebar-width));
    }

    /* Quando sidebar está colapsada (toggle via JS adiciona esta classe) */
    #content.sidebar-collapsed {
        margin-left: var(--ml-sidebar-collapsed);
        width: calc(100% - var(--ml-sidebar-collapsed));
    }
}

/* Navbar Spacer */
.ml-navbar__spacer {
    flex-grow: 1;
}

/* Container wrapper */
#content-wrapper {
    padding: var(--ml-space-md);
    width: 100%;
    overflow-x: hidden; /* Evita scroll horizontal indesejado */
}

@media (min-width: 768px) {
    #content-wrapper {
        padding: var(--ml-space-lg);
    }
}

@media (min-width: 1024px) {
    #content-wrapper {
        padding: var(--ml-space-xl);
    }
}