/*
 * CAMADA 3 — TEMA
 *
 * Conteúdo permitido: sobrescritas GLOBAIS de classes que não são nossas —
 * Bootstrap 3, o tema Inspinia (css/theme.inspinia.css) e Font Awesome.
 * É aqui que os tokens de settings.tokens.css viram cor/borda nas classes de
 * terceiros. Regras de terceiros que só valem dentro de um componente ou de um
 * módulo ficam no arquivo daquele componente/módulo, não aqui.
 *
 * O bloco @scope aplica só quando js/themes.js está com o perfil "mafmine";
 * no perfil "bootstrap" o visual original do Inspinia volta a valer.
 */


/* ==========================================================================
   1. GRADE E TIPOGRAFIA DO BOOTSTRAP
   ========================================================================== */

.row {
    padding-bottom: 5px;
}


/* ==========================================================================
   2. ÍCONES DO FONT AWESOME
   ========================================================================== */

.fa-close {
    color: var(--color-white);
}

.fa-bug {
    color: var(--color-primary);
}


/* ==========================================================================
   3. PONTE DE PALETA — BOOTSTRAP 3 E INSPINIA
   ========================================================================== */

@scope (:root[data-theme="mafmine"]) {

/* -- 3.1 Links -------------------------------------------------------- */

a,
.btn-link {
    color: var(--color-secondary);
}

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
    color: var(--color-primary);
}

/* -- 3.2 Botões ------------------------------------------------------- */

.btn.btn-primary,
.btn.btn-primary:is(:hover, :focus, :active, .active),
.open > .dropdown-toggle.btn.btn-primary {
    border-color: var(--color-primary);
    color: var(--color-white);
    background-color: var(--color-primary);
}

.btn.btn-secondary,
.btn.btn-secondary:is(:hover, :focus, :active, .active),
.open > .dropdown-toggle.btn.btn-secondary {
    border-color: var(--color-secondary);
    color: var(--color-white);
    background-color: var(--color-secondary);
}

.btn.btn-danger,
.btn.btn-danger:is(:hover, :focus, :active, .active),
.open > .dropdown-toggle.btn.btn-danger {
    border-color: var(--color-danger);
    color: var(--color-white);
    background-color: var(--color-danger);
}

.btn.btn-default,
.btn.btn-default:is(:hover, :focus, :active, .active),
.open > .dropdown-toggle.btn.btn-default {
    border-color: var(--color-border-strong);
    color: var(--color-primary);
    background-color: var(--color-white);
}

.btn.btn-default:is(:hover, :focus, :active, .active),
.open > .dropdown-toggle.btn.btn-default {
    background-color: var(--color-surface-muted);
}

.btn:is(.btn-primary, .btn-secondary, .btn-danger, .btn-default):not(.disabled, [disabled]):is(:hover, :focus) {
    box-shadow: var(--shadow-sm);
}

.btn:is(.btn-primary, .btn-secondary, .btn-danger, .btn-default):is(.disabled, [disabled]) {
    box-shadow: var(--shadow-none);
    opacity: .55;
}

/* -- 3.3 Etiquetas ---------------------------------------------------- */

.label-primary,
.label-primary[href]:is(:hover, :focus) {
    background-color: var(--color-primary);
}

.label-primary {
    color: var(--color-white);
}

/* -- 3.4 Cartões do Inspinia (ibox) ----------------------------------- */

.ibox {
    color: var(--color-primary);
}

.ibox-title {
    border: var(--border-thin);
    border-color: var(--color-fieldset-ibox-frame);
    border-top: 2px solid var(--color-fieldset-ibox-frame);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-none) var(--radius-none);
    color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 2px 6px var(--color-fieldset-ibox-frame);
}

.ibox-title h5 {
    color: var(--color-primary);
    font-weight: 700;
}

.ibox-content {
    border: var(--border-thin);
    border-color: var(--color-fieldset-ibox-frame);
    color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 2px 6px var(--color-fieldset-ibox-frame);
}

.ibox-title + .ibox-content {
    border-top: var(--border-none);
    border-radius: var(--radius-none) var(--radius-none) var(--radius-md) var(--radius-md);
}

/* O caso .ibox-content.module-content está em layout.page.css, com .module-content. */
.ibox > .ibox-content:first-child {
    border-top: 2px solid var(--color-fieldset-ibox-frame);
    border-radius: var(--radius-md);
}

.ibox-tools a {
    color: var(--color-muted);
}

.ibox-tools a:hover,
.ibox-tools a:focus {
    color: var(--color-primary);
}

}


/* ==========================================================================
   4. MOBILE
   ========================================================================== */

@media (max-width: 991px) {

    /*
     * As col-lg-* já empilham sozinhas abaixo de 1200px, mas as col-sm-*
     * continuam multicoluna entre 768 e 991px e espremem rótulo e campo.
     * Abaixo de 768px o próprio Bootstrap já as empilha — isto só estende o
     * mesmo comportamento para a faixa de tablet.
     */
    [class*="col-sm-"] {
        width: 100%;
    }

    [class*="col-sm-offset-"] {
        margin-left: 0;
    }

    /*
     * Bootstrap 3 usa white-space: nowrap em .btn, o que faz rótulos longos
     * ("Adicionar Fator de Indexação") estourarem o container em vez de quebrar.
     */
    .btn {
        white-space: normal;
    }

    .ibox-content,
    .ibox-title {
        padding: 12px;
    }

    .ibox-title {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .ibox-title h5,
    .ibox-title h1 {
        float: none;
        margin: 0;
    }

    .ibox-tools {
        display: flex;
        flex-wrap: wrap;
        float: none;
        gap: 8px;
        text-align: left;
    }

    /* Importar Projeto / Criar Novo Projeto continuam com texto, por decisão de UX. */
    .ibox-tools > .btn {
        flex: 1 1 auto;
        margin: 0;
        white-space: normal;
    }
}