/* =============================================================================
   PETSTAR - SISTEMA DE GERENCIAMENTO
   Folha de Estilos Principal
   ============================================================================= */


/* =============================================================================
   VARIÁVEIS GLOBAIS
   ============================================================================= */

:root {
    --bg-sidebar: #17212f;
    --bg-header: linear-gradient(90deg, #17212f 0%, #259C92 100%);
    --bg-main: #f4f7f9;
    --border-color: #cbd5e0;
    --btn-normal: transparent;
    --btn-hover: #1f2c3d;
    --btn-active: #259C92;
    --text-sidebar: #a0aec0;
}


    /* =============================================================================
   RESET E BASE
   ============================================================================= */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
    }
    /* =============================================================================
   CABEÇALHO (TOP BAR)
   ============================================================================= */

    .sys-header {
        background: var(--bg-header);
        color: #ffffff;
        padding: 12px 20px;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #061916;
    }

    .logo-area {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .site-logo {
        height: 40px;
        width: auto;
        border-radius: 1px;
    }

    body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .toggle-btn {
        background: transparent;
        border: none;
        color: #ffffff;
        font-size: 20px;
        cursor: pointer;
        margin-right: 5px;
        transition: transform 0.2s;
    }

        .toggle-btn:hover {
            color: #cbd5e0;
            transform: scale(1.1);
        }
    /* =============================================================================
   LAYOUT PRINCIPAL
   ============================================================================= */

    .main-layout {
        display: flex;
        flex: 1;
        overflow: hidden;
    }
    /* =============================================================================
   MENU LATERAL (SIDEBAR)
   ============================================================================= */

    .sidebar {
        width: 240px;
        background-color: var(--bg-sidebar);
        padding: 15px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        white-space: nowrap;
        transition: width 0.3s ease;
    }

        .sidebar.collapsed {
            width: 70px;
            padding: 15px 10px;
        }

            .sidebar.collapsed .sidebar-title,
            .sidebar.collapsed .menu-text {
                display: none;
            }

            .sidebar.collapsed .menu-btn {
                justify-content: center;
                padding: 12px 0;
            }

    .sidebar-title {
        font-size: 11px;
        font-weight: bold;
        color: #718096;
        margin-bottom: 10px;
        padding-left: 5px;
    }

    .menu-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .menu-btn {
        background-color: var(--btn-normal);
        color: var(--text-sidebar);
        border: 1px solid transparent;
        padding: 12px 15px;
        font-size: 13px;
        font-weight: bold;
        text-align: left;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.1s ease;
    }

        .menu-btn i {
            font-size: 1.1em;
        }

        .menu-btn:hover {
            background-color: var(--btn-hover);
        }

        .menu-btn.active {
            background-color: var(--btn-active);
            color: #ffffff;
            border-color: var(--btn-active);
        }
    /* =============================================================================
   TOOLTIP FLUTUANTE (MENU RECOLHIDO)
   ============================================================================= */

    .ihm-tooltip {
        position: fixed;
        background-color: #2d3748;
        color: #ffffff;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: bold;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
        z-index: 9999;
        white-space: nowrap;
    }

        .ihm-tooltip.visible {
            opacity: 1;
        }
    /* =============================================================================
   PAINEL DE CONTEÚDO
   ============================================================================= */

    .content-panel {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
    }

    .screen-content {
        display: none;
    }

        .screen-content.active {
            display: block;
        }

    .window-box {
        background-color: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 20px;
        min-height: 400px;
    }

        .window-box h3 {
            color: #2d3748;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .window-box hr {
            border: 0;
            border-top: 1px solid var(--border-color);
            margin-bottom: 20px;
        }
    /* =============================================================================
   FORMULÁRIOS
   ============================================================================= */

    .form-container {
        max-width: 450px;
    }

    .input-block {
        margin-bottom: 15px;
    }

        .input-block label {
            display: block;
            font-size: 13px;
            font-weight: bold;
            color: #4a5568;
            margin-bottom: 6px;
        }

        .input-block input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            outline: none;
        }

            .input-block input:focus {
                border-color: #4a5568;
                background-color: #f7fafc;
            }
    /* =============================================================================
   BOTÕES DE AÇÃO
   ============================================================================= */

    .action-btn {
        background-color: var(--btn-active);
        color: white;
        border: 1px solid var(--btn-active);
        padding: 10px 20px;
        font-size: 13px;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .action-btn:hover {
            background-color: #2b6cb0;
        }

    .btnConsulta {
        background-color: #3182ce;
        color: white;
        border: 1px solid #2b6cb0;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
    }

        .btnConsulta:hover {
            background-color: #2b6cb0;
        }
    /* =============================================================================
   TABELAS DE DADOS
   ============================================================================= */

    #tabela-dados {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

        #tabela-dados th,
        #tabela-dados td {
            padding: 12px 20px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        #tabela-dados tbody tr:hover {
            background-color: #f5f5f5;
        }
    /* =============================================================================
   CALENDÁRIO
   ============================================================================= */

    .calendar-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-weight: bold;
    }

    .calendar-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

        .calendar-table th {
            background: var(--btn-active);
            color: white;
            padding: 10px;
        }

        .calendar-table td {
            border: 1px solid var(--border-color);
            padding: 45px;
        }

            .calendar-table td:hover {
                background-color: var(--btn-hover);
            }
    /* =============================================================================
   ABA: CADASTRO DE SERVIÇOS — ESTRUTURA DUPLA
   ============================================================================= */

    .janela-dupla {
        display: flex;
        gap: 20px;
        padding: 20px;
        width: 100%;
        height: calc(100vh - 120px);
        box-sizing: border-box;
    }

    .painel-card {
        background-color: #ffffff;
        border: 1px solid var(--border-color, #cbd5e0);
        border-radius: 6px;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: border-color 0.2s ease;
    }

    .painel-form {
        flex: 1;
    }

    .painel-tabela {
        flex: 5;
    }

    .painel-card h3 {
        color: #2d3748;
        margin-bottom: 10px;
        font-size: 16px;
        text-align: left;
    }

    .painel-card hr {
        border: 0;
        border-top: 1px solid var(--border-color, #cbd5e0);
        margin-bottom: 16px;
    }
    /* =============================================================================
   PAINEL ESQUERDO — FORMULÁRIO DE SERVIÇO
   ============================================================================= */

    .form-container-left {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

        .form-container-left .input-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            margin-bottom: 0;
        }

        .form-container-left label {
            margin-bottom: 5px;
            font-weight: bold;
            color: #4a5568;
            font-size: 14px;
        }

        .form-container-left input {
            width: 100%;
            padding: 10px;
            border: 1px solid #cbd5e0;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
        }

            .form-container-left input:focus {
                border-color: #259C92;
            }

        .form-container-left .action-btn {
            margin-top: 4px;
            width: 100%;
            justify-content: center;
            background-color: var(--bg-sidebar, #17212f);
            color: #fff;
            border: none;
            padding: 12px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
            transition: background-color 0.2s;
        }

            .form-container-left .action-btn:hover {
                background-color: #259C92;
            }
    /* Botão de cancelar edição */
    .btn-cancelar {
        background-color: #718096 !important;
        border-color: #718096 !important;
    }

        .btn-cancelar:hover {
            background-color: #4a5568 !important;
        }
    /* Destaque visual quando o painel está em modo de edição */
    .painel-form.modo-edicao {
        border: 2px solid #259C92;
        box-shadow: 0 0 0 3px rgba(37, 156, 146, 0.12);
    }
    /* =============================================================================
   PAINEL DIREITO — TOPO COM BUSCA E BOTÃO DE LOTE
   ============================================================================= */

    .tabela-topo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .tabela-acoes-topo {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* Caixa de busca */
    .search-box {
        position: relative;
        display: flex;
        align-items: center;
    }

        .search-box .search-icon {
            position: absolute;
            left: 10px;
            color: #a0aec0;
            font-size: 13px;
            pointer-events: none;
        }

        .search-box input {
            padding: 8px 10px 8px 32px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 13px;
            width: 210px;
            outline: none;
            transition: border-color 0.2s, background-color 0.2s;
            color: #2d3748;
        }

            .search-box input:focus {
                border-color: #259C92;
                background-color: #f0fffe;
            }

            .search-box input::placeholder {
                color: #a0aec0;
            }
    /* Botão de excluir selecionados */
    .btn-excluir-selecionados {
        display: flex;
        align-items: center;
        gap: 6px;
        background-color: #e53e3e;
        color: white;
        border: none;
        padding: 8px 14px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.15s;
        white-space: nowrap;
    }

        .btn-excluir-selecionados:hover {
            background-color: #c53030;
        }
    /* =============================================================================
   TABELA DE SERVIÇOS
   ============================================================================= */

    .tabela-container {
        flex-grow: 1;
        overflow-y: auto;
        margin-top: 4px;
        padding-right: 4px;
    }

    .tabela-ihm {
        width: 100%;
        border-collapse: collapse;
    }

        .tabela-ihm th,
        .tabela-ihm td {
            padding: 11px 12px;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }

        .tabela-ihm th {
            background-color: #f7fafc;
            color: #4a5568;
            font-weight: bold;
            font-size: 13px;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .tabela-ihm td {
            font-size: 14px;
            color: #2d3748;
        }

        .tabela-ihm tbody tr:hover {
            background-color: #f1f5f9;
        }
        /* Linha selecionada pelo checkbox */
        .tabela-ihm tbody tr:has(.check-servico:checked) {
            background-color: #ebfff9 !important;
        }
    /* =============================================================================
   CABEÇALHOS ORDENÁVEIS
   ============================================================================= */

    .th-sort {
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        transition: background-color 0.15s, color 0.15s;
    }

        .th-sort:hover {
            background-color: #edf2f7;
            color: #2d3748;
        }
        /* Coluna com ordenação ativa */
        .th-sort.ativo {
            color: #259C92;
            background-color: #f0fffe;
        }
    /* Ícone de ordenação ao lado do texto */
    .sort-icon {
        margin-left: 5px;
        font-size: 11px;
        color: #d1d9e0;
        transition: color 0.15s, transform 0.15s;
        vertical-align: middle;
    }

    .th-sort:hover .sort-icon {
        color: #a0aec0;
    }

    .th-sort.ativo .sort-icon {
        color: #259C92;
    }
    /* =============================================================================
   COLUNAS DE TAMANHO FIXO
   ============================================================================= */
    /* Colunas de tamanho fixo */
    .col-check {
        width: 40px;
        text-align: center !important;
    }

    .col-acoes {
        width: 80px;
        text-align: center !important;
    }
    /* Checkbox dentro da tabela */
    .tabela-ihm input[type="checkbox"] {
        cursor: pointer;
        width: 15px;
        height: 15px;
        accent-color: #259C92;
    }
    /* Célula das ações (editar/excluir) */
    .tabela-ihm .col-acoes {
        display: table-cell; /* mantém como célula mas alinhamos pelo flex nos botões */
    }
    /* Botões de ação por linha */
    .btn-acao {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 5px 7px;
        cursor: pointer;
        font-size: 13px;
        transition: background-color 0.15s, border-color 0.15s;
        line-height: 1;
    }

    .btn-editar {
        color: #3182ce;
    }

        .btn-editar:hover {
            background-color: #ebf8ff;
            border-color: #bee3f8;
        }

    .btn-deletar {
        color: #e53e3e;
        margin-left: 2px;
    }

        .btn-deletar:hover {
            background-color: #fff5f5;
            border-color: #fed7d7;
        }
    /* Estado vazio da tabela */
    .sem-registros {
        text-align: center !important;
        color: #a0aec0;
        font-style: italic;
        padding: 32px !important;
        line-height: 2;
    }
    /* =============================================================================
   BARRA DE ROLAGEM CUSTOMIZADA
   ============================================================================= */

    .tabela-container::-webkit-scrollbar {
        width: 7px;
    }

    .tabela-container::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .tabela-container::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 4px;
    }

        .tabela-container::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }