/**
 * public/css/theme.css
 * Tema visual "Ibramed" - camada puramente cosmética sobre o Bootstrap 5.3.
 *
 * IMPORTANTE (não mexer sem ler): este arquivo NUNCA deve renomear ou remover
 * classes/IDs usados pelo JS (ex.: #alertaAdmin, #corpoTabela, .campo-*,
 * .btn-salvar, .linha-registro, .badge-status-*). Ele só redefine variáveis do
 * Bootstrap e adiciona classes novas (prefixo "ib-"), então pode ser incluído
 * em qualquer página sem risco de quebrar comportamento existente.
 */

:root {
    --ib-blue-900: #0f2340;
    --ib-blue-800: #16345f;
    --ib-blue-700: #1a4d8f;
    --ib-blue-600: #1d6fa8;
    --ib-blue-500: #1d7dba;
    --ib-blue-400: #3a9bd6;
    --ib-blue-100: #eaf4fb;
    --ib-bg: #f2f6fb;

    /* Reskin das variáveis nativas do Bootstrap: qualquer componente que já
       usa .btn-primary, .bg-primary, .text-primary, .border-primary etc. em
       qualquer página herda a cor da marca automaticamente, sem precisar
       editar HTML nenhum. */
    --bs-primary: var(--ib-blue-500);
    --bs-primary-rgb: 29, 125, 186;
    --bs-link-color: var(--ib-blue-600);
    --bs-link-color-rgb: 26, 77, 143;
    --bs-link-hover-color: var(--ib-blue-800);
    --bs-link-hover-color-rgb: 22, 52, 95;
    --bs-body-bg: var(--ib-bg);
}

body {
    background-color: var(--ib-bg);
}

/* ---- Botões: cantos levemente arredondados + leve profundidade ---- */
.btn {
    border-radius: 0.5rem;
}

.btn-primary,
.btn-outline-primary:hover {
    background-color: var(--ib-blue-500);
    border-color: var(--ib-blue-500);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ib-blue-700);
    border-color: var(--ib-blue-700);
}

.btn-outline-primary {
    color: var(--ib-blue-600);
    border-color: var(--ib-blue-500);
}

.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active {
    background-color: var(--ib-blue-500);
    border-color: var(--ib-blue-500);
}

/* ---- Navbar padrão com a logo Ibramed (usada em todas as telas internas) ---- */
.ib-navbar {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(15, 35, 64, 0.08);
}

.ib-navbar .navbar-brand {
    color: var(--ib-blue-800) !important;
    font-weight: 600;
}

.ib-navbar .navbar-brand:hover {
    color: var(--ib-blue-500) !important;
}

.ib-navbar-logo {
    height: 32px;
    width: auto;
}

.ib-navbar-seta {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--ib-blue-500);
}

.ib-navbar-titulo {
    font-size: 1.05rem;
}

/* Navbars antigas que ainda usam bg-primary/bg-dark (fallback, caso alguma
   página não tenha sido migrada para .ib-navbar) recebem o azul da marca em
   vez do azul padrão do Bootstrap - mantém tudo visualmente consistente. */
.navbar.bg-primary {
    background-color: var(--ib-blue-500) !important;
}

.navbar.bg-dark {
    background-color: var(--ib-blue-800) !important;
}

/* ---- Cards e tabelas: sombra suave, bordas mais arredondadas ---- */
.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(15, 35, 64, 0.08);
}

.table-responsive {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 35, 64, 0.06);
}

.table {
    margin-bottom: 0;
}

.table thead th {
    background-color: var(--ib-blue-100);
    color: var(--ib-blue-800);
    border-bottom: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ---- Tiles do painel inicial (index.php) ---- */
.ib-tile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 35, 64, 0.08);
    border-radius: 0.85rem;
    box-shadow: 0 2px 10px rgba(15, 35, 64, 0.06);
    text-decoration: none;
    color: var(--ib-blue-800);
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.ib-tile:hover,
.ib-tile:focus {
    color: var(--ib-blue-800);
    border-color: var(--ib-blue-400);
    box-shadow: 0 6px 16px rgba(15, 35, 64, 0.12);
    transform: translateY(-2px);
}

.ib-tile-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 0.65rem;
    background-color: var(--ib-blue-100);
    color: var(--ib-blue-500);
    font-size: 1.35rem;
}

.ib-tile-admin .ib-tile-icone {
    background-color: #eef0f5;
    color: var(--ib-blue-800);
}

/* ---- Tela de login ---- */
.ib-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.ib-login-marca {
    background: linear-gradient(160deg, var(--ib-blue-500) 0%, var(--ib-blue-800) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.ib-login-marca img {
    max-width: 230px;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 1.25rem;
}

.ib-login-marca p {
    max-width: 320px;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.ib-login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background-color: #fff;
}

.ib-login-form-inner {
    width: 100%;
    max-width: 360px;
}

.ib-login-logo-mobile {
    display: none;
    max-width: 190px;
    width: 100%;
    height: auto;
    margin: 0 auto 1.5rem;
}

/* Em telas pequenas, esconde o painel azul lateral (que teria altura
   desproporcional em celular) e mostra a logo colorida acima do formulário -
   mantém a tela 100% utilizável em qualquer largura. */
@media (max-width: 767.98px) {
    .ib-login-marca {
        display: none;
    }

    .ib-login-logo-mobile {
        display: block;
    }

    .ib-login-form {
        padding-top: 3rem;
    }
}