/* ============================================================================
   IMPLANTA UTILITIES CSS
   Classes utilitárias para espaçamento, texto, background, sombras, etc.
   ============================================================================ */

/* =================== ESPAÇAMENTO CUSTOM =================== */

/* Margens customizadas */
.mt-custom { margin-top: 2.5rem; }
.mb-custom { margin-bottom: 2.5rem; }
.ml-custom { margin-left: 2.5rem; }
.mr-custom { margin-right: 2.5rem; }
.mx-custom { margin-left: 2.5rem; margin-right: 2.5rem; }
.my-custom { margin-top: 2.5rem; margin-bottom: 2.5rem; }

/* Paddings customizados */
.pt-custom { padding-top: 2.5rem; }
.pb-custom { padding-bottom: 2.5rem; }
.pl-custom { padding-left: 2.5rem; }
.pr-custom { padding-right: 2.5rem; }
.px-custom { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-custom { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* =================== TEXTO =================== */

/* Cores de texto */
.text-implanta-primary {
    color: var(--implanta-primary) !important;
}

.text-implanta-secondary {
    color: var(--implanta-secondary) !important;
}

.text-implanta-dark {
    color: var(--implanta-dark-gray) !important;
}

.text-implanta-light {
    color: var(--implanta-light-gray) !important;
}

/* Peso de fonte */
.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fw-black { font-weight: 900; }

/* Tamanho de texto */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

/* Transformação de texto */
.text-uppercase-custom {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

/* Quebra de texto */
.text-truncate-custom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-wrap {
    white-space: normal;
}

.text-nowrap {
    white-space: nowrap;
}

/* =================== BACKGROUND =================== */

/* Cores de fundo */
.bg-implanta-primary {
    background-color: var(--implanta-primary) !important;
    color: var(--implanta-white) !important;
}

.bg-implanta-secondary {
    background-color: var(--implanta-secondary) !important;
    color: var(--implanta-black) !important;
}

.bg-implanta-light {
    background-color: var(--implanta-light-gray) !important;
    color: var(--implanta-dark-gray) !important;
}

.bg-implanta-very-light {
    background-color: var(--implanta-very-light-gray) !important;
    color: var(--implanta-dark-gray) !important;
}

.bg-implanta-dark {
    background-color: var(--implanta-dark-gray) !important;
    color: var(--implanta-white) !important;
}

/* Gradientes personalizados */
.gradient-primary {
    background: linear-gradient(135deg, var(--implanta-primary) 0%, var(--implanta-secondary) 100%) !important;
    color: var(--implanta-white) !important;
}

.gradient-dark {
    background: #14AFCC !important;
    color: var(--implanta-white) !important;
}

/* Cores de fundo para estatísticas */
.bg-stats-primary {
    background: linear-gradient(135deg, var(--implanta-primary) 0%, #0d8ba3 100%) !important;
    color: var(--implanta-white) !important;
}

.bg-stats-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    color: var(--implanta-white) !important;
}

.bg-stats-warning {
    background: linear-gradient(135deg, #fd7e14 0%, #dc6545 100%) !important;
    color: var(--implanta-white) !important;
}

.bg-stats-info {
    background: linear-gradient(135deg, var(--implanta-secondary) 0%, var(--implanta-primary) 100%) !important;
    color: var(--implanta-black) !important;
}

/* Opacidade */
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* =================== BORDAS =================== */

/* Border radius */
.rounded-xs { border-radius: 4px; }
.rounded-sm { border-radius: 6px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 10px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 15px; }
.rounded-3xl { border-radius: 20px; }
.rounded-full { border-radius: 50%; }

/* Cores de borda */
.border-implanta-primary {
    border-color: var(--implanta-primary) !important;
}

.border-implanta-secondary {
    border-color: var(--implanta-secondary) !important;
}

.border-implanta-light {
    border-color: var(--implanta-light-gray) !important;
}

.border-implanta-dark {
    border-color: var(--implanta-dark-gray) !important;
}

/* Espessura de borda */
.border-0 { border-width: 0; }
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-3 { border-width: 3px; }
.border-4 { border-width: 4px; }
.border-5 { border-width: 5px; }

/* =================== SOMBRAS =================== */

/* Sombras customizadas */
.shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-sm-custom {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.shadow-md-custom {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.shadow-lg-custom {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.shadow-xl-custom {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.shadow-2xl-custom {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.shadow-none {
    box-shadow: none !important;
}

/* Sombra interna */
.shadow-inset {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* =================== DISPLAY E FLEXBOX =================== */

/* Display */
.d-grid { display: grid; }
.d-inline-grid { display: inline-grid; }

/* Gap (para flex e grid) */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }

/* Flex utilities extras */
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

/* =================== POSICIONAMENTO =================== */

/* 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-100 { z-index: 100; }
.z-1000 { z-index: 1000; }
.z-9999 { z-index: 9999; }

/* =================== DIMENSÕES =================== */

/* Largura */
.w-fit { width: fit-content; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }

/* Altura */
.h-fit { height: fit-content; }
.h-10 { height: 10%; }
.h-20 { height: 20%; }
.h-30 { height: 30%; }
.h-40 { height: 40%; }
.h-60 { height: 60%; }
.h-70 { height: 70%; }
.h-80 { height: 80%; }
.h-90 { height: 90%; }

/* Altura mínima */
.min-h-screen { min-height: 100vh; }
.min-h-200 { min-height: 200px; }
.min-h-300 { min-height: 300px; }
.min-h-400 { min-height: 400px; }
.min-h-500 { min-height: 500px; }

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

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait { cursor: wait; }
.cursor-move { cursor: move; }
.cursor-help { cursor: help; }

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

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

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

/* =================== TRANSIÇÕES =================== */

.transition-all {
    transition: all 0.15s ease;
}

.transition-colors {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.transition-transform {
    transition: transform 0.15s ease;
}

.transition-opacity {
    transition: opacity 0.15s ease;
}

.transition-shadow {
    transition: box-shadow 0.15s ease;
}

.transition-slow {
    transition-duration: 0.3s;
}

.transition-fast {
    transition-duration: 0.1s;
}

/* =================== HOVER EFFECTS =================== */

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-shadow:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.hover-opacity:hover {
    opacity: 0.8;
}

/* =================== RESPONSIVIDADE =================== */

@media (max-width: 768px) {
    .text-sm-xs { font-size: 0.75rem; }
    .text-sm-sm { font-size: 0.875rem; }
    
    .px-sm-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .py-sm-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    
    .shadow-sm-none { box-shadow: none !important; }
}

@media (max-width: 576px) {
    .text-xs-xs { font-size: 0.75rem; }
    .text-xs-sm { font-size: 0.875rem; }
    
    .px-xs-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
    .py-xs-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
}