html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ---------------------------
   Tema / cores
---------------------------- */
:root {
    --accent: #4f46e5;
    --accent-600: #4338ca;
    --accent-100: #eef2ff;
    --ring: 0 0 0 .2rem rgba(79,70,229,.15);
}

/* ---------------------------
   HEADER
---------------------------- */

.navbar-accent {
    background: #ffffff;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Linha principal: logo à esquerda, ações à direita */
.header-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.navbar-brand {
    font-weight: 600;
    letter-spacing: .2px;
}

.header-brand-logo {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    object-fit: contain;
}

.header-brand-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
}

.header-brand-subtitle {
    font-size: .9rem;
    color: #6b7280;
}

@media (min-width: 992px) {
    .header-brand-logo {
        height: 52px;
        width: 52px;
    }

    .header-brand-title {
        font-size: 2rem;
    }

    .header-brand-subtitle {
        font-size: 1rem;
    }
}

/* Ações (nome + botões) à direita */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem; /* espaço entre nome / botões */
}

/* Botões do header */
.btn-header {
    font-size: .9rem;
    border-radius: 5px;
    white-space: nowrap;
    padding: .3rem 1.1rem; /* hitbox confortável */
}

/* Nome do fornecedor (base) */
.header-name {
    font-size: .85rem;
    color: #4b5563;
    font-weight: 500;
}

.header-name-desktop {
    display: inline-block;
}

.header-name-mobile {
    display: none; /* só aparece no @media */
    padding: .15rem 0 .35rem 0;
}

/* Botão Sair (se usar .btn-lg em outro lugar) */
.btn-logout.btn-lg {
    padding: .45rem 1.2rem;
    font-weight: 600;
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--accent-600);
    --bs-btn-active-border-color: var(--accent-600);
}

main.pb-4 {
    padding-bottom: .75rem;
}

/* ---------------------------
   FOOTER
---------------------------- */

.site-footer {
    border-top: 1px solid var(--bs-border-color);
    background-color: #ffffff;
    padding: .35rem 0;
    font-size: .875rem;
    margin-top: auto;
}

.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.site-footer-logo {
    height: 28px;
    width: 28px;
    border-radius: 50%;
    object-fit: contain;
}

.site-footer-info {
    text-align: right;
}

    .site-footer-info div + div {
        margin-top: .15rem;
    }

@media (max-width: 768px) {
    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer-info {
        text-align: left;
    }
}

.app-header-bar {
    background: linear-gradient(180deg, var(--bs-body-bg), rgba(0,0,0,0));
    border-bottom: 1px solid var(--bs-border-color);
    backdrop-filter: blur(6px);
}

.app-ribbon {
    background: linear-gradient(90deg, var(--accent-100), rgba(255,255,255,0));
    border-bottom: 1px solid var(--bs-border-color);
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(79,70,229,.12);
}

.bg-accent-subtle {
    background: var(--accent-100) !important;
    color: var(--accent) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.card {
    border-radius: 14px;
}

.table thead th {
    position: sticky;
    top: 0;
}

.text-monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .95rem;
}

.price-input {
    max-width: 24ch;
    border-radius: .5rem;
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
    transition: box-shadow .15s ease, transform .1s ease;
}

    .price-input:focus {
        box-shadow: var(--ring), inset 0 0 0 1px var(--accent);
        border-color: var(--accent);
    }

.save-state {
    display: inline-block;
    min-width: 92px;
    text-align: left;
    opacity: .9;
    transition: opacity .18s ease, transform .18s ease;
}

    .save-state.enter {
        opacity: 0;
        transform: translateY(-2px);
    }

    .save-state.show {
        opacity: 1;
        transform: translateY(0);
    }

.anim-alert {
    animation: fadeSlide .28s ease-out;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------
   Mobile / Tablet
---------------------------- */
@media (max-width: 576px) {

    header{
        height: 15vh;
    }


    .header-shell {
        gap: 1rem;
    }

    .header-brand-logo {
        height: 32px;
        width: 32px;
    }

    .header-brand-title {
        font-size: 1.3rem;
    }

    .header-brand-subtitle {
        font-size: .75rem;
    }

    /* Botões ainda na mesma linha do logo, com bom espaço */
    .header-actions {
        gap: 1rem;
    }

    .btn-header {
        font-size: 0.8rem;
        padding: .26rem .85rem;
    }

    /* Nome some na linha dos botões... */
    .header-name-desktop {
        display: none;
    }

    /* ...e aparece sozinho abaixo */
    .header-name-mobile {
        display: block;
        font-size: .8rem;
    }

    .price-wrap {
        justify-content: stretch;
    }

    .price-input {
        max-width: 80%;
    }

    .save-state {
        display: block;
        width: 100%;
        text-align: right;
        margin-top: .25rem;
    }
}