/* ==============================================
   APOLLO TI - SISTEMA CENTRALIZADO PRINCIPAL
   Importa todos os módulos do sistema
   ============================================== */

/* ==============================================
   IMPORTAÇÕES DOS MÓDULOS
   ============================================== */

@import url('./apollo-core.css');
@import url('./apollo-typography.css');
@import url('./apollo-components.css');
@import url('./apollo-responsive.css');

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

/* Sobrescrever variáveis do Bootstrap para usar Apollo TI */
:root {
    --bs-primary: var(--apollo-yellow);
    --bs-secondary: var(--apollo-gray-600);
    --bs-success: var(--apollo-success-500);
    --bs-info: var(--apollo-info-500);
    --bs-warning: var(--apollo-warning-500);
    --bs-danger: var(--apollo-error-500);
    --bs-light: var(--apollo-gray-100);
    --bs-dark: var(--apollo-gray-800);
}

/* ==============================================
   SOBRESCRITA DE CLASSES BOOTSTRAP
   ============================================== */

/* Cards Bootstrap com estilo Apollo TI */
.card {
    background-color: var(--apollo-white);
    border: 1px solid var(--apollo-gray-200);
    border-radius: var(--apollo-radius-lg);
    box-shadow: var(--apollo-shadow-sm);
    transition: var(--apollo-transition);
}

.card:hover {
    border-color: var(--apollo-gray-300);
    box-shadow: var(--apollo-shadow-md);
    transform: translateY(-1px);
}

.card-header {
    background-color: var(--apollo-gray-50);
    border-bottom: 1px solid var(--apollo-gray-200);
    border-radius: var(--apollo-radius-lg) var(--apollo-radius-lg) 0 0;
    font-weight: var(--apollo-font-semibold);
    color: var(--apollo-gray-800);
}

.card-body {
    padding: var(--apollo-space-6);
}

.card-footer {
    background-color: var(--apollo-gray-50);
    border-top: 1px solid var(--apollo-gray-200);
    border-radius: 0 0 var(--apollo-radius-lg) var(--apollo-radius-lg);
}

/* Botões Bootstrap com estilo Apollo TI */
.btn {
    border-radius: var(--apollo-radius-md);
    font-weight: var(--apollo-font-medium);
    transition: var(--apollo-transition);
}

.btn-primary {
    background-color: var(--apollo-yellow);
    border-color: var(--apollo-yellow);
    color: var(--apollo-black);
}

.btn-primary:hover {
    background-color: var(--apollo-yellow-hover);
    border-color: var(--apollo-yellow-hover);
    transform: translateY(-1px);
    box-shadow: var(--apollo-shadow-md);
}

.btn-secondary {
    background-color: var(--apollo-white);
    border-color: var(--apollo-gray-300);
    color: var(--apollo-gray-800);
}

.btn-secondary:hover {
    background-color: var(--apollo-gray-50);
    border-color: var(--apollo-gray-400);
}

/* Formulários Bootstrap com estilo Apollo TI */
.form-control {
    border: 1px solid var(--apollo-gray-300);
    border-radius: var(--apollo-radius-md);
    background-color: var(--apollo-white);
    color: var(--apollo-gray-800);
    transition: var(--apollo-transition);
}

.form-control:focus {
    border-color: var(--apollo-yellow);
    box-shadow: 0 0 0 3px var(--apollo-yellow-100);
}

.form-label {
    color: var(--apollo-gray-700);
    font-weight: var(--apollo-font-medium);
}

/* Tabelas Bootstrap com estilo Apollo TI */
.table {
    background-color: var(--apollo-white);
    border-radius: var(--apollo-radius-lg);
    overflow: hidden;
    box-shadow: var(--apollo-shadow-sm);
}

.table thead th {
    background-color: var(--apollo-gray-50);
    color: var(--apollo-gray-800);
    font-weight: var(--apollo-font-semibold);
    border-bottom: 1px solid var(--apollo-gray-200);
}

.table tbody tr:hover {
    background-color: var(--apollo-gray-50);
}

/* ==============================================
   CLASSES UTILITÁRIAS APOLLO TI
   ============================================== */

/* Sistema de Grid Apollo TI */
.apollo-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--apollo-space-3));
}

.apollo-col {
    flex: 1;
    padding: 0 var(--apollo-space-3);
    margin-bottom: var(--apollo-space-4);
}

.apollo-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.apollo-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.apollo-col-3 { flex: 0 0 25%; max-width: 25%; }
.apollo-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.apollo-col-6 { flex: 0 0 50%; max-width: 50%; }
.apollo-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.apollo-col-9 { flex: 0 0 75%; max-width: 75%; }
.apollo-col-12 { flex: 0 0 100%; max-width: 100%; }

/* Responsive Grid */
@media (max-width: 767px) {
    .apollo-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .apollo-md\:col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .apollo-md\:col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .apollo-md\:col-3 { flex: 0 0 25%; max-width: 25%; }
    .apollo-md\:col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .apollo-md\:col-6 { flex: 0 0 50%; max-width: 50%; }
    .apollo-md\:col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .apollo-md\:col-9 { flex: 0 0 75%; max-width: 75%; }
    .apollo-md\:col-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1024px) {
    .apollo-lg\:col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .apollo-lg\:col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .apollo-lg\:col-3 { flex: 0 0 25%; max-width: 25%; }
    .apollo-lg\:col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .apollo-lg\:col-6 { flex: 0 0 50%; max-width: 50%; }
    .apollo-lg\:col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .apollo-lg\:col-9 { flex: 0 0 75%; max-width: 75%; }
    .apollo-lg\:col-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ==============================================
   ANIMAÇÕES APOLLO TI
   ============================================== */

@keyframes apollo-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes apollo-slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes apollo-bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
    40%, 43% { transform: translate3d(0, -30px, 0); }
    70% { transform: translate3d(0, -15px, 0); }
    90% { transform: translate3d(0, -4px, 0); }
}

.apollo-animate-fade-in {
    animation: apollo-fade-in 0.3s ease-out;
}

.apollo-animate-slide-in {
    animation: apollo-slide-in 0.3s ease-out;
}

.apollo-animate-bounce {
    animation: apollo-bounce 1s;
}

/* ==============================================
   UTILITÁRIOS DE VISIBILIDADE
   ============================================== */

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

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

/* ==============================================
   UTILITÁRIOS DE POSICIONAMENTO
   ============================================== */

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

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

.apollo-z-10 { z-index: 10; }
.apollo-z-20 { z-index: 20; }
.apollo-z-30 { z-index: 30; }
.apollo-z-40 { z-index: 40; }
.apollo-z-50 { z-index: 50; }

/* ==============================================
   UTILITÁRIOS DE OVERFLOW
   ============================================== */

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

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

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

/* ==============================================
   UTILITÁRIOS DE CURSOR
   ============================================== */

.apollo-cursor-auto { cursor: auto; }
.apollo-cursor-default { cursor: default; }
.apollo-cursor-pointer { cursor: pointer; }
.apollo-cursor-wait { cursor: wait; }
.apollo-cursor-text { cursor: text; }
.apollo-cursor-move { cursor: move; }
.apollo-cursor-help { cursor: help; }
.apollo-cursor-not-allowed { cursor: not-allowed; }

/* ==============================================
   UTILITÁRIOS DE USER SELECT
   ============================================== */

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

/* ==============================================
   UTILITÁRIOS DE POINTER EVENTS
   ============================================== */

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

/* ==============================================
   UTILITÁRIOS DE RESIZE
   ============================================== */

.apollo-resize-none { resize: none; }
.apollo-resize-y { resize: vertical; }
.apollo-resize-x { resize: horizontal; }
.apollo-resize { resize: both; }

/* ==============================================
   UTILITÁRIOS DE OPACIDADE
   ============================================== */

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

/* ==============================================
   UTILITÁRIOS DE TRANSFORMAÇÃO
   ============================================== */

.apollo-transform { transform: translateZ(0); }
.apollo-transform-gpu { transform: translate3d(0, 0, 0); }
.apollo-transform-none { transform: none; }

.apollo-scale-0 { transform: scale(0); }
.apollo-scale-50 { transform: scale(0.5); }
.apollo-scale-75 { transform: scale(0.75); }
.apollo-scale-90 { transform: scale(0.9); }
.apollo-scale-95 { transform: scale(0.95); }
.apollo-scale-100 { transform: scale(1); }
.apollo-scale-105 { transform: scale(1.05); }
.apollo-scale-110 { transform: scale(1.1); }
.apollo-scale-125 { transform: scale(1.25); }
.apollo-scale-150 { transform: scale(1.5); }

/* ==============================================
   UTILITÁRIOS DE ROTAÇÃO
   ============================================== */

.apollo-rotate-0 { transform: rotate(0deg); }
.apollo-rotate-1 { transform: rotate(1deg); }
.apollo-rotate-2 { transform: rotate(2deg); }
.apollo-rotate-3 { transform: rotate(3deg); }
.apollo-rotate-6 { transform: rotate(6deg); }
.apollo-rotate-12 { transform: rotate(12deg); }
.apollo-rotate-45 { transform: rotate(45deg); }
.apollo-rotate-90 { transform: rotate(90deg); }
.apollo-rotate-180 { transform: rotate(180deg); }

/* ==============================================
   UTILITÁRIOS DE TRANSLATE
   ============================================== */

.apollo-translate-x-0 { transform: translateX(0); }
.apollo-translate-x-1 { transform: translateX(0.25rem); }
.apollo-translate-x-2 { transform: translateX(0.5rem); }
.apollo-translate-x-3 { transform: translateX(0.75rem); }
.apollo-translate-x-4 { transform: translateX(1rem); }
.apollo-translate-x-5 { transform: translateX(1.25rem); }
.apollo-translate-x-6 { transform: translateX(1.5rem); }
.apollo-translate-x-8 { transform: translateX(2rem); }
.apollo-translate-x-10 { transform: translateX(2.5rem); }
.apollo-translate-x-12 { transform: translateX(3rem); }

.apollo-translate-y-0 { transform: translateY(0); }
.apollo-translate-y-1 { transform: translateY(0.25rem); }
.apollo-translate-y-2 { transform: translateY(0.5rem); }
.apollo-translate-y-3 { transform: translateY(0.75rem); }
.apollo-translate-y-4 { transform: translateY(1rem); }
.apollo-translate-y-5 { transform: translateY(1.25rem); }
.apollo-translate-y-6 { transform: translateY(1.5rem); }
.apollo-translate-y-8 { transform: translateY(2rem); }
.apollo-translate-y-10 { transform: translateY(2.5rem); }
.apollo-translate-y-12 { transform: translateY(3rem); }

/* ==============================================
   UTILITÁRIOS DE SKEW
   ============================================== */

.apollo-skew-x-0 { transform: skewX(0deg); }
.apollo-skew-x-1 { transform: skewX(1deg); }
.apollo-skew-x-2 { transform: skewX(2deg); }
.apollo-skew-x-3 { transform: skewX(3deg); }
.apollo-skew-x-6 { transform: skewX(6deg); }
.apollo-skew-x-12 { transform: skewX(12deg); }

.apollo-skew-y-0 { transform: skewY(0deg); }
.apollo-skew-y-1 { transform: skewY(1deg); }
.apollo-skew-y-2 { transform: skewY(2deg); }
.apollo-skew-y-3 { transform: skewY(3deg); }
.apollo-skew-y-6 { transform: skewY(6deg); }
.apollo-skew-y-12 { transform: skewY(12deg); }