:root {
    --primary: #07948f;
    --primary-dark: #0d6b68;
    --primary-light: #e7f7f5;

    --secondary: #64748b;
    --secondary-dark: #475569;

    --info: #3b82f6;
    --info-dark: #2563eb;

    --bg: #f8fafc;
    --card: #ffffff;

    --text: #0f172a;
    --muted: #64748b;

    --border: #e5e7eb;

    --shadow:
        0 4px 15px rgba(15, 23, 42, 0.06);
}


/* =========================================================
   BODY
========================================================= */

.admin-body {

    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   WRAPPER
========================================================= */

.admin-wrapper {

    min-height: 100vh;

    display: flex;

    width: 100%;
}


/* =========================================================
   ÁREA PRINCIPAL
========================================================= */

.admin-main {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    position: relative;

    z-index: 1;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.admin-content {

    flex: 1;

    width: 100%;

    min-width: 0;

    padding: 26px;
}


/* =========================================================
   TÍTULO
========================================================= */

.page-title {

    margin-bottom: 24px;
}

.page-title h1 {

    margin: 0;

    font-size: 26px;

    font-weight: 700;

    color: var(--text);
}

.page-title p {

    margin: 6px 0 0;

    color: var(--muted);

    font-size: 14px;
}


/* =========================================================
   CARDS
========================================================= */

.admin-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 20px;

    box-shadow: var(--shadow);
}

.admin-card.highlight {

    border-color:
        rgba(7, 148, 143, 0.35);
}

.admin-card h3 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;
}


/* =========================================================
   GRID
========================================================= */

.admin-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-top: 22px;
}


/* =========================================================
   NÚMEROS
========================================================= */

.card-number {

    margin-top: 8px;

    font-size: 28px;

    font-weight: 700;

    color: var(--primary);
}

.big-number {

    margin-top: 10px;

    font-size: 26px;

    font-weight: 700;

    color: var(--primary);
}


/* =========================================================
   LISTAS
========================================================= */

.admin-list {

    margin-top: 10px;

    padding-left: 18px;

    color: var(--muted);
}


/* =========================================================
   FORMULÁRIOS LEGADOS
========================================================= */

.form-grid-2 {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 12px;
}

.form-group label {

    display: block;

    margin-bottom: 6px;

    font-size: 13px;

    font-weight: 600;

    color: var(--text);
}

.form-group input,
.form-group textarea,
.form-group select {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: #ffffff;

    font-size: 14px;

    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    border-color:
        rgba(7, 148, 143, 0.6);

    box-shadow:
        0 0 0 4px rgba(7, 148, 143, 0.12);
}

.form-group textarea {

    resize: vertical;

    min-height: 120px;
}

.form-group input[type="checkbox"] {

    width: 18px;

    height: 18px;

    margin-right: 8px;

    accent-color: var(--primary);

    cursor: pointer;
}

.form-actions {

    margin-top: 22px;
}


/* =========================================================
   BOTÃO SALVAR
========================================================= */

.btn-save {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 16px;

    border: 0;

    border-radius: 7px;

    background: var(--primary);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.1s ease;
}

.btn-save:hover {

    background: var(--primary-dark);

    color: #ffffff;
}

.btn-save:active {

    transform: translateY(1px);
}

/* =========================================================
   BOTÃO CANCELAR
========================================================= */

.btn-cancel {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 16px;

    border: 0;

    border-radius: 7px;

    background: var(--secondary);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.1s ease;
}

.btn-cancel:hover {

    background: var(--secondary-dark);

    color: #ffffff;
}

.btn-cancel:active {

    transform: translateY(1px);
}

/* =========================================================
   BOTÃO VER HISTÓRICO
========================================================= */

.btn-history {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 16px;

    border: 0;

    border-radius: 7px;

    background: var(--info);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.1s ease;
}

.btn-history:hover {

    background: var(--info-dark);

    color: #ffffff;
}

.btn-history:active {

    transform: translateY(1px);
}


/* =========================================================
   TABELAS
========================================================= */

.admin-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 14px;

    font-size: 14px;
}

.admin-table th {

    padding: 12px;

    text-align: left;

    background:
        rgba(7, 148, 143, 0.08);

    border-bottom:
        1px solid var(--border);

    font-weight: 700;
}

.admin-table td {

    padding: 12px;

    border-bottom:
        1px solid var(--border);

    color: var(--text);
}


/* =========================================================
   EXCLUSÃO
========================================================= */

.btn-delete {

    display: inline-block;

    padding: 8px 12px;

    border:
        1px solid rgba(255, 93, 93, 0.4);

    border-radius: 8px;

    background:
        rgba(255, 93, 93, 0.12);

    color: #dc2626;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        background-color 0.2s ease;
}

.btn-delete:hover {

    background:
        rgba(255, 93, 93, 0.18);

    color: #b91c1c;
}


/* =========================================================
   SELECTS LEGADOS
========================================================= */

.admin-content select {

    max-width: 100%;
}


/* =========================================================
   GRID LEGADO
========================================================= */

.grid {

    display: grid;

    gap: 20px;
}

.grid-4 {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.grid-2 {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


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

.mt-20 {

    margin-top: 20px;
}


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

@media (max-width: 991.98px) {

    .admin-content {

        padding: 20px;
    }

    .admin-grid {

        grid-template-columns: 1fr;
    }

    .grid-4 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sidebar {

        display: none !important;
    }
}


@media (max-width: 767.98px) {

    .admin-content {

        padding: 16px;
    }

    .page-title h1 {

        font-size: 22px;
    }

    .form-grid-2 {

        grid-template-columns: 1fr;
    }

    .grid-4,
    .grid-2 {

        grid-template-columns: 1fr;
    }
}

/* =========================================================
   REQUISITOS DE SENHA
========================================================= */

.password-requirements {

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 10px;

    font-size: 13px;

}


.password-requirement,
.password-confirmation {

    display: flex;

    align-items: center;

    gap: 7px;

    line-height: 1.4;

}


.password-requirement i,
.password-confirmation i {

    font-size: 12px;

}


.password-requirement {

    color: var(--muted);

}


.password-requirement.valido,
.password-confirmation.valido {

    color: #198754;

}


.password-requirement.invalido,
.password-confirmation.invalido {

    color: #dc3545;

}


/* =========================================================
   CONFIRMAÇÃO DA SENHA
========================================================= */

.password-confirmation {

    margin-top: 8px;

    font-size: 13px;

    color: var(--muted);

}


.password-confirmation.valido {

    color: #198754;

}


.password-confirmation.invalido {

    color: #dc3545;

}


/* =========================================================
   BOTÃO DESABILITADO
========================================================= */

.btn-save:disabled {

    opacity: 0.55;

    cursor: not-allowed;

}

/* =========================================================
   MENSAGENS FLASH
========================================================= */

.celltronic-flash {

    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    padding: 14px 16px;

    margin-bottom: 20px;

    border-radius: 10px;

    border: 1px solid transparent;

    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.06);

    animation:
        celltronicFlashEntrada 0.25s ease;

}


/* =========================================================
   ÍCONE
========================================================= */

.celltronic-flash-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    min-width: 36px;

    border-radius: 50%;

    font-size: 17px;

}


/* =========================================================
   CONTEÚDO
========================================================= */

.celltronic-flash-content {

    display: flex;

    flex-direction: column;

    gap: 2px;

    flex: 1;

}

.celltronic-flash-content strong {

    font-size: 14px;

    font-weight: 700;

}

.celltronic-flash-content span {

    font-size: 14px;

    line-height: 1.45;

}


/* =========================================================
   BOTÃO FECHAR
========================================================= */

.celltronic-flash-close {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    opacity: 0.65;

    cursor: pointer;

    border-radius: 6px;

    transition:
        background 0.2s ease,
        opacity 0.2s ease;

}

.celltronic-flash-close:hover {

    opacity: 1;

    background:
        rgba(15, 23, 42, 0.06);

}


/* =========================================================
   ERRO
========================================================= */

.celltronic-flash-erro {

    color: #842029;

    background: #f8d7da;

    border-color: #f1aeb5;

}

.celltronic-flash-erro .celltronic-flash-icon {

    color: #dc3545;

    background: rgba(220, 53, 69, 0.12);

}


/* =========================================================
   SUCESSO
========================================================= */

.celltronic-flash-sucesso {

    color: #0f5132;

    background: #d1e7dd;

    border-color: #a3cfbb;

}

.celltronic-flash-sucesso .celltronic-flash-icon {

    color: #198754;

    background: rgba(25, 135, 84, 0.12);

}


/* =========================================================
   AVISO
========================================================= */

.celltronic-flash-aviso {

    color: #664d03;

    background: #fff3cd;

    border-color: #ffecb5;

}

.celltronic-flash-aviso .celltronic-flash-icon {

    color: #d39e00;

    background: rgba(211, 158, 0, 0.12);

}


/* =========================================================
   ANIMAÇÃO
========================================================= */

@keyframes celltronicFlashEntrada {

    from {

        opacity: 0;

        transform:
            translateY(-6px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .celltronic-flash {

        gap: 10px;

        padding: 12px;

    }

    .celltronic-flash-icon {

        width: 32px;

        height: 32px;

        min-width: 32px;

    }

    .celltronic-flash-content span {

        font-size: 13px;

    }

}