/*
 * Este arquivo de estilo é inspirado no sistema de design do Tailwind CSS.
 *
 * Tailwind CSS
 * Copyright (c) 2019-2025 Adam Wathan, Jonathan Reinink, David Hemphill, Steve Schoger
 * https://tailwindcss.com
 *
 * Licenciado sob a Licença MIT
 * https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE
 *
 * Este arquivo é uma implementação personalizada para o projeto OficinaPro.
 * O código CSS é escrito e mantido independentemente, mas o sistema de classes utilitárias,
 * a estrutura e a organização são inspiradas no Tailwind CSS.
 */
/* staticfiles/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.roboto-uniquifier {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.inter-uniquifier {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}


:root {
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-200: #bfdbfe;
    --color-gray-100: #f3f4f6;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-green-100: #d1fae5;
    --color-green-800: #065f46;
    --color-red-100: #fee2e2;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-800: #991b1b;
    --color-yellow-100: #fef9c3;
    --color-yellow-500: #eab308;
    --color-yellow-600: #ca8a04;
    --color-yellow-800: #92400e;
    --color-orange-500: #f97316;
    --color-orange-700: #c2410c;
    --color-blue-50: #eff6ff;
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-20: 5rem;
    --spacing-25: 6.25rem;
    --spacing-30: 7.5rem;
    --spacing-40: 10rem;
}
/* Base styles */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    line-height: 1.5;
}
/* Utility Classes */
.of-bg-gray-100 { background-color: var(--color-gray-100); }
.of-bg-gray-400 { background-color: var(--color-gray-400); }
.of-bg-blue-600 { background-color: var(--color-blue-600); }
.of-bg-gray-800 { background-color: var(--color-gray-800); }
.of-bg-gray-900 { background-color: var(--color-gray-900); }
.of-bg-white { background-color: #fff; }
.of-bg-green-100 { background-color: var(--color-green-100); }
.of-bg-red-100 { background-color: var(--color-red-100); }
.of-bg-red-600 { background-color: var(--color-red-600); }
.of-bg-blue-100 { background-color: var(--color-blue-100); }
.of-bg-yellow-100 { background-color: var(--color-yellow-100); }
.of-bg-yellow-600 { background-color: var(--color-yellow-600); }
.of-bg-transparent { background-color: transparent; }
.of-bg-blue-50 { background-color: var(--color-blue-50); }
.of-bg-orange-500 { background-color: var(--color-orange-500); }
.of-text-white { color: #fff; }
.of-text-gray-300 { color: var(--color-gray-300); }
.of-text-gray-400 { color: var(--color-gray-400); }
.of-text-gray-500 { color: var(--color-gray-500); }
.of-text-gray-600 { color: var(--color-gray-600); }
.of-text-gray-700 { color: var(--color-gray-700); }
.of-text-gray-800 { color: var(--color-gray-800); }
.of-text-gray-900 { color: var(--color-gray-900); }
.of-text-blue-500 { color: var(--color-blue-500); }
.of-text-blue-600 { color: var(--color-blue-600); }
.of-text-blue-800 { color: var(--color-blue-800); }
.of-text-green-800 { color: var(--color-green-800); }
.of-text-red-500 { color: #ef4444; }
.of-text-red-600 { color: var(--color-red-600); }
.of-text-red-800 { color: var(--color-red-800); }
.of-text-yellow-500 { color: var(--color-yellow-500); }
.of-text-yellow-600 { color: var(--color-yellow-600); }
.of-text-yellow-800 { color: var(--color-yellow-800); }
.of-font-bold { font-weight: 700; }
.of-font-extrabold { font-weight: 800; }
.of-font-semibold { font-weight: 600; }
.of-font-medium { font-weight: 500; }
.of-font-light { font-weight: 300; }
.of-text-xs { font-size: 0.75rem; }
.of-text-sm { font-size: 0.875rem; }
.of-text-lg { font-size: 1.125rem; }
.of-text-xl { font-size: 1.25rem; }
.of-text-2xl { font-size: 1.5rem; }
.of-text-3xl { font-size: 1.875rem; }
.of-text-4xl { font-size: 2.25rem; }
.of-uppercase { text-transform: uppercase; }
.of-p-2 { padding: var(--spacing-2); }
.of-p-3 { padding: var(--spacing-3); }
.of-p-4 { padding: var(--spacing-4); }
.of-p-6 { padding: var(--spacing-6); }
.of-p-8 { padding: var(--spacing-8); }
.of-py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.of-py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.of-py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.of-px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.of-px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.of-px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.of-px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.of-px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.of-px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.of-mb-1 { margin-bottom: var(--spacing-1); }
.of-mb-2 { margin-bottom: var(--spacing-2); }
.of-mb-4 { margin-bottom: var(--spacing-4); }
.of-mb-6 { margin-bottom: var(--spacing-6); }
.of-mb-8 { margin-bottom: var(--spacing-8); }
.of-mb-10 { margin-bottom: var(--spacing-10); }
.of-mt-1 { margin-top: var(--spacing-1); }
.of-mt-2 { margin-top: var(--spacing-2); }
.of-mt-4 { margin-top: var(--spacing-4); }
.of-mt-8 { margin-top: var(--spacing-8); }
.of-mt-10 { margin-top: var(--spacing-10); }
.of-mt-20 { margin-top: var(--spacing-20); }
.of--mt-10 { margin-top: calc(-1 * var(--spacing-10)); }
.of--mt-20 { margin-top: calc(-1 * var(--spacing-20)); }
.of--mt-25 { margin-top: calc(-1 * var(--spacing-25)); }
.of--mt-30 { margin-top: calc(-1 * var(--spacing-30)); }
.of--mt-40 { margin-top: calc(-1 * var(--spacing-40)); }
.of-my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.of-space-y-2 > *:not(:last-child) { margin-bottom: var(--spacing-2); }
.of-space-y-4 > *:not(:last-child) { margin-bottom: var(--spacing-4); }
.of-space-x-1 > *:not(:last-child) { margin-right: var(--spacing-1); }
.of-space-x-2 > *:not(:last-child) { margin-right: var(--spacing-2); }
.of-space-x-3 > *:not(:last-child) { margin-right: var(--spacing-3); }
.of-space-x-4 > *:not(:last-child) { margin-right: var(--spacing-4); }
.of-space-x-5 > *:not(:last-child) { margin-right: var(--spacing-5); }
.of-space-x-6 > *:not(:last-child) { margin-right: var(--spacing-6); }
.of-ml-0 { margin-left: var(--spacing-0); }
.of-ml-1 { margin-left: var(--spacing-1); }
.of-ml-2 { margin-left: var(--spacing-2); }
.of-ml-3 { margin-left: var(--spacing-3); }
.of-ml-4 { margin-left: var(--spacing-4); }
.of-ml-5 { margin-left: var(--spacing-5); }
.of-ml-6 { margin-left: var(--spacing-6); }
.of-ml-auto { margin-left: auto; }
.of-mr-2 { margin-right: var(--spacing-2); }
.of-mr-3 { margin-right: var(--spacing-3); }
.of-mr-4 { margin-right: var(--spacing-4); }
.of-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}
.of-flex { display: flex; }
.of-flex-col { flex-direction: column; }
.of-flex-1 { flex: 1; }
.of-flex-shrink-0 { flex-shrink: 0; }
.of-inline-flex { display: inline-flex; }
.of-justify-between { justify-content: space-between; }
.of-justify-end { justify-content: flex-end; }
.of-items-center { align-items: center; }
.of-items-start { align-items: flex-start; }
.of-items-end { align-items: flex-end; }
.of-justify-center { justify-content: center; }
.of-min-h-screen { min-height: 100vh; }
.of-w-full { width: 100%; }
.of-w-64 { width: 16rem; }
.of-max-w-md { max-width: 28rem; }
.of-max-w-2xl { max-width: 42rem; }
.of-max-w-4xl { max-width: 56rem; }
.of-max-w-6xl { max-width: 72rem; }
.of-mx-auto { margin-left: auto; margin-right: auto; }
.of-grid { display: grid; }
.of-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.of-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.of-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.of-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.of-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.of-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.of-gap-1 { gap: var(--spacing-1); }
.of-gap-2 { gap: var(--spacing-2); }
.of-gap-3 { gap: var(--spacing-3); }
.of-gap-4 { gap: var(--spacing-4); }
.of-gap-6 { gap: var(--spacing-6); }
.of-gap-8 { gap: var(--spacing-8); }
.of-gap-x-6 > *:not(:last-child) { margin-right: var(--spacing-6); }
.of-gap-y-2 > *:not(:last-child) { margin-bottom: var(--spacing-2); }
.of-flex-wrap { flex-wrap: wrap; }
.of-overflow-x-auto { overflow-x: auto; }
.of-min-w-30 { min-width: 7.5rem; }
.of-min-w-40 { min-width: 10rem; }
.of-min-w-60 { min-width: 15rem; }
.of-min-w-80 { min-width: 20rem; }
.of-min-w-full { min-width: 100%; }
.of-whitespace-nowrap { white-space: nowrap; }
.of-relative { position: relative; }
.of-border { border: 1px solid #e5e7eb; }
.of-border-none { border: none; }
.of-border-gray-200 { border-color: #e5e7eb; }
.of-border-gray-300 { border-color: var(--color-gray-300); }
.of-border-b { border-bottom: 1px solid #e5e7eb; }
.of-border-t { border-top: 1px solid #e5e7eb; }
.of-divide-y { border-bottom: 1px solid #e5e7eb; }
.of-divide-gray-200 { border-color: #e5e7eb; }
.of-rounded-md { border-radius: 0.375rem; }
.of-rounded-lg { border-radius: 0.5rem; }
.of-rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.of-rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.of-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.of-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
select {
    width: 100%;
    padding: var(--spacing-2);
    border: 1px solid var(--color-gray-300);
    border-radius: 0.375rem;
    height: var(--spacing-10);
    appearance: none;
    box-sizing: border-box;
}
textarea {
    width: 100%;
    padding: var(--spacing-2);
    border: 1px solid var(--color-gray-300);
    border-radius: 0.375rem;
    min-height: 6rem;
    box-sizing: border-box;
}
.of-focus-ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
.of-focus-border-blue-500:focus { border-color: var(--color-blue-600); }
.of-focus-outline-none:focus { outline: none; }
.of-focus-ring-2:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.of-focus-ring-opacity-50:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.of-h-4 { height: 1rem; }
.of-h-5 { height: 1.25rem; }
.of-h-5-4 { height: 1.3125rem; }
.of-h-5-5 { height: 1.375rem; }
.of-h-6 { height: 1.5rem; }
.of-h-8 { height: 2rem; }
.of-w-4 { width: 1rem; }
.of-h-10 { height: 2.5rem; }
.of-h-16 { height: 4rem; }
.of-h-24 { height: 6rem; }
.of-form-group-mb { margin-bottom: var(--spacing-4); }
.of-transition { transition: all 0.2s ease-in-out; }
.of-duration-300 { transition-duration: 300ms; }
.of-ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.of-transform { transform: var(--tw-transform); }
.of-hover-scale-110:hover { transform: scale(1.1); }
/* Hover Effects */
.of-hover-text-white:hover { color: #fff; }
.of-hover-text-blue-200:hover { color: var(--color-blue-200); }
.of-hover-text-blue-500:hover { color: var(--color-blue-600); }
.of-hover-text-blue-900:hover { color: var(--color-blue-900); }
.of-hover-text-red-500:hover { color: var(--color-red-500); }
.of-hover-text-red-900:hover { color: var(--color-red-900); }
.of-hover-text-gray-900:hover { color: var(--color-gray-900); }

.of-hover-bg-blue-700:hover { background-color: var(--color-blue-700); }
.of-hover-bg-gray-100:hover { background-color: var(--color-gray-100); }
.of-hover-bg-gray-700:hover { background-color: var(--color-gray-700); }
.of-hover-bg-yellow-100:hover { background-color: var(--color-yellow-100); }
.of-hover-bg-yellow-600:hover { background-color: var(--color-yellow-600); }
.of-hover-bg-orange-700:hover { background-color: var(--color-orange-700); }

.of-hover-underline:hover { text-decoration: underline; }

.of-text-center { text-align: center; }
.of-text-left { text-align: left; }
.of-text-right { text-align: right; }
.of-list-disc { list-style-type: disc; }
.of-list-inside { list-style-position: inside; }
.of-list-none { list-style: none; }
a { text-decoration: none; }
.of-cursor-pointer { cursor: pointer; }
.of-cursor-not-allowed { cursor: not-allowed; }
.of-hidden { display: none !important; }
.of-z-10 { z-index: 10; }
.of-z-20 { z-index: 20; } /* Adicionado para sidebar */
.of-z-60 { z-index: 60; }
.of-top-1\/2 { top: 50%; }
.of-left-4 { left: 1rem; }
.of-right-0 { right: 0; }
.of-absolute { position: absolute; }
.of-fixed { position: fixed; }
.of--translate-y-1\/2 { transform: translateY(-50%); }
.of-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.of-block { display: block; }
.of-tracking-wider {
    letter-spacing: 0.05em; /* Ajuste fino para espaçamento entre letras */
}
/* Sidebar */
#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 16rem; /* Largura padrão */
    height: 100vh;
    background-color: var(--color-gray-900);
    color: white;
    z-index: 60; /* Mantém alto para sobrepor conteúdo */
    transition: transform 0.3s ease-in-out; /* Transição para mobile */
    transform: translateX(0); /* Visível por padrão em desktop */
}
/* Estados para sidebar colapsada em desktop */
#sidebar.sidebar-collapsed {
    width: 5rem;
}
#main-content {
    margin-left: 16rem; /* Largura padrão da sidebar */
    transition: margin-left 0.3s ease, transform 0.3s ease; /* Transição para mobile */
}
#main-content.main-content-expanded {
    margin-left: 5rem;
}
#sidebar.sidebar-collapsed nav a span,
#sidebar.sidebar-collapsed .of-p-4 span {
    display: none;
}
#sidebar.sidebar-collapsed .of-p-4 i,
#sidebar.sidebar-collapsed nav a i {
    display: block;
    margin: 0 auto;
    text-align: center;
}
#sidebar a, #sidebar button {
    color: white !important;
}
#sidebar.sidebar-collapsed #sidebar-toggle span {
    display: none;
}
/* --- Estilos para Mobile --- */
/* Oculta a sidebar e ajusta o conteúdo principal para telas móveis por padrão */
@media (max-width: 767px) { /* Breakpoint para mobile */
    #sidebar {
        transform: translateX(-100%); /* Move a sidebar para fora da tela à esquerda */
        width: 16rem; /* Mantém a largura original quando visível */
    }
    #sidebar.sidebar-mobile-open {
        transform: translateX(0); /* Mostra a sidebar quando a classe é adicionada */
    }
    #main-content {
        margin-left: 0; /* Conteúdo principal ocupa toda a largura */
        transform: translateX(0); /* Garante posição inicial */
    }
    #main-content.sidebar-mobile-open {
         transform: translateX(16rem); /* Move o conteúdo junto com a sidebar */
         /* overflow: hidden; */ /* Impede rolagem do conteúdo principal enquanto o menu está aberto */
    }
    /* Esconde o botão de toggle padrão em mobile */
    #sidebar-toggle {
        display: none;
    }
    /* Garante que o botão mobile toggle esteja visível em mobile */
    #mobile-nav-toggle {
        display: block;
    }
    /* Garante que o overlay esteja escondido inicialmente em mobile */
    #mobile-nav-overlay {
        display: block; /* Ou flex, mas hidden o esconde */
    }
    /* Ajusta a largura da sidebar para telas pequenas se necessário */
    #sidebar {
        width: 100%; /* Ou uma largura fixa menor, ex: 280px */
        max-width: 300px; /* Limita a largura máxima */
    }
    #sidebar.sidebar-mobile-open {
        transform: translateX(0);
    }
    #main-content.sidebar-mobile-open {
        transform: translateX(100%); /* Ou a largura da sidebar */
        max-width: 100vw;
    }
    .of-hidden-sm-cols-table-responsive {
        display: none; /* Ocultar colunas específicas em telas pequenas */
    }
    table th, table td {
        padding: var(--spacing-2); /* Ajusta o espaçamento interno das célular */
    }
    .sm-of-flex-row {
        flex-direction: row;
    }
    .sm-of-flex-col {
        flex-direction: column;
    }
    .sm-of-items-start {
        align-items: flex-start;
    }
    .sm-of-w-auto {
        width: auto; /* Permite que o elemento ajuste sua largura automaticamente */
    }
    .sm-of-w-77 { /*medida em rem */
        width: 19.25rem; /* Ajusta a largura para 77px */
    }
    .sm-of-table-auto {
        width: auto; /* Permite que a tabela ajuste sua largura automaticamente */
    }
    .sm-of-gap-1 {
        gap: var(--spacing-1); /* Ajusta o espaçamento entre os itens */
    }
    .sm-of-gap-4 {
        gap: var(--spacing-4); /* Ajusta o espaçamento entre os itens */
    }
    .sm-of-mt-4 {
        margin-top: var(--spacing-4); /* Ajusta a margem superior */
    }
}
/* Garante que o botão mobile toggle esteja escondido em telas maiores */
@media (min-width: 768px) {
    .md-of-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md-of-gap-8 {
        gap: var(--spacing-8);
    }
    .md-of-flex {
        display: flex;
    }
    .md-of-hidden {
        display: none !important;
    }

    #mobile-nav-toggle {
        display: none;
    }
    #close-nav-button { /* Esconde o botão de fechar em desktop */
        display: none;
    }
    #mobile-nav-overlay {
        display: none !important; /* Esconde o overlay em desktop */
    }
}
@media (min-width: 1024px) {
    .lg-of-grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    .xl-of-grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Estilos para o botão mobile toggle (já incluídos via classes Tailwind no HTML) */
/* Se quiser estilizar mais, pode adicionar aqui */
#mobile-nav-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-gray-800);
    padding: var(--spacing-2);
    z-index: 50;
}
/* Mobile Menu Overlay */
/* Estilos para o overlay */
#mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
    z-index: 10; /* Fica abaixo da sidebar */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}
#mobile-nav-overlay:not(.hidden) { /* Quando não tem a classe 'hidden' */
    opacity: 1;
    visibility: visible;
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .of-transition, .of-duration-300, .of-ease-in-out {
        transition: none;
    }
}

/* Estilos para impressão */
@media print {
    @page {
        margin: 1in;
        @bottom-center {
            content: "Página " counter(page) " de " counter(pages);
        }
    }
}