/* Minha Lista - estilos próprios (sobre o Bootstrap 5) */

:root {
    --ml-primary: #198754;
    --ml-primary-dark: #146c43;
    --ml-bg: #f6f7f9;
    --ml-card-radius: 14px;
    --ml-safe-top: env(safe-area-inset-top, 0px);
    --ml-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
    background-color: var(--ml-bg);
    -webkit-tap-highlight-color: transparent;
}

body {
    padding-bottom: calc(72px + var(--ml-safe-bottom));
    font-size: 1rem;
}

@media (min-width: 992px) {
    body { padding-bottom: 0; }
}

a { text-decoration: none; }

/* -------------------- Navbar / topo -------------------- */
.ml-topbar {
    padding-top: var(--ml-safe-top);
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* -------------------- Bottom navigation (mobile) -------------------- */
.ml-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    display: flex;
    padding-bottom: var(--ml-safe-bottom);
    box-shadow: 0 -2px 10px rgba(0,0,0,.04);
}

@media (min-width: 992px) {
    .ml-bottom-nav { display: none; }
}

.ml-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px 6px;
    color: #6c757d;
    font-size: .70rem;
    min-height: 56px;
}

.ml-bottom-nav a i { font-size: 1.3rem; }

.ml-bottom-nav a.active { color: var(--ml-primary); font-weight: 600; }

/* -------------------- Cards / listas -------------------- */
.ml-card {
    border: none;
    border-radius: var(--ml-card-radius);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}

.ml-action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.25rem .5rem;
    border-radius: var(--ml-card-radius);
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    color: #212529;
    text-align: center;
    min-height: 108px;
    transition: transform .1s ease;
}

.ml-action-tile:active { transform: scale(0.97); }

.ml-action-tile i {
    font-size: 1.9rem;
    color: var(--ml-primary);
}

.ml-action-tile span { font-weight: 600; font-size: .92rem; }

/* -------------------- Botões grandes (mobile-first) -------------------- */
/* display:flex + align-items:center centralizam o conteúdo verticalmente -
   sem isso, min-height por si só empurra o texto para o topo do botão
   (fica mais espaço embaixo do que em cima, texto "descentralizado"). */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.btn-lg-touch {
    min-height: 52px;
    font-size: 1.05rem;
}

/* -------------------- Checkboxes grandes (Modo Compra) -------------------- */
.ml-check {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
}

/* -------------------- Itens de lista (compras) -------------------- */
.ml-shop-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem .25rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    cursor: pointer;
    user-select: none;
}

.ml-shop-item:last-child { border-bottom: none; }

.ml-shop-item .ml-shop-name {
    font-size: 1.08rem;
    font-weight: 600;
}

.ml-shop-item .ml-shop-meta {
    font-size: .88rem;
    color: #6c757d;
}

.ml-shop-item.purchased .ml-shop-name,
.ml-shop-item.purchased .ml-shop-meta {
    text-decoration: line-through;
    color: #adb5bd;
}

.ml-shop-item.purchased { opacity: .72; }

/* -------------------- Badges de status -------------------- */
.badge-status-pending { background-color: #ffc107; color: #212529; }
.badge-status-active { background-color: #198754; }
.badge-status-blocked { background-color: #dc3545; }

/* -------------------- Indicador de Wake Lock -------------------- */
.ml-wakelock-indicator {
    position: fixed;
    top: calc(var(--ml-safe-top) + 8px);
    right: 8px;
    z-index: 1050;
    font-size: .72rem;
    opacity: .85;
}

/* -------------------- Utilitários -------------------- */
.ml-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.ml-empty-state i { font-size: 2.5rem; opacity: .5; }

.ml-truncate-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}