/*
  Cadastros no celular (Cliente, Fornecedor...) — padrão "feed" tipo Instagram/Facebook, só abaixo de 768px:
    .b9-crud-form    formulário vira folha em tela cheia (abre pelo "+" ou ao tocar no card); no desktop continua no topo da página
    .b9-crud-feed    lista de cards no lugar da tabela
    .b9-crud-fab     botão flutuante "+"
    .b9-crud-sheet   menu de ações que sobe de baixo ("⋯" do card)
  Desktop (>=768px) não muda nada: tabela + formulário no topo.
*/

@media (max-width: 767.98px) {
    .b9-crud-form {
        display: none;
    }

    .b9-crud-form.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: var(--default-body-bg-color, #fff);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    .b9-crud-form.is-open > .card {
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100%;
    }

    .b9-crud-form.is-open .card-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--custom-white, #fff);
    }

    /* Salvar sempre à vista, mesmo com o teclado aberto */
    .b9-crud-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: var(--custom-white, #fff);
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
        margin-top: 8px;
        border-top: 1px solid rgba(16, 24, 40, .08);
    }

    .b9-crud-actions .btn {
        min-height: 44px;
    }

    .b9-crud-form .form-control,
    .b9-crud-form .form-select {
        min-height: 44px;
        font-size: 16px; /* evita o zoom automático do iOS ao focar o campo */
    }
}

/* Feed de cards */
.b9-crud-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.b9-crud-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--custom-white, #fff);
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.b9-crud-card:active {
    background: rgba(132, 90, 223, .06);
}

.b9-crud-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: #845ADF;
}

.b9-crud-avatar.is-off {
    background: #9ca3af;
}

.b9-crud-body {
    flex: 1 1 auto;
    min-width: 0;
}

.b9-crud-name {
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.b9-crud-line {
    font-size: .8125rem;
    color: #6b7280;
    margin-top: 2px;
}

.b9-crud-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.b9-crud-more {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b7280;
}

.b9-crud-more:active {
    background: rgba(16, 24, 40, .08);
}

/* Botão flutuante "+" */
.b9-crud-fab {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 1040;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: #845ADF;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(132, 90, 223, .45);
}

/* Menu de ações que sobe de baixo */
.b9-crud-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, .45);
}

.b9-crud-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1061;
    background: var(--custom-white, #fff);
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .2);
}

.b9-crud-sheet-grip {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: 4px auto 10px;
}

.b9-crud-sheet-title {
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.b9-crud-sheet button {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0 8px;
    font-size: 1rem;
    border-radius: 10px;
}

.b9-crud-sheet button:active {
    background: rgba(16, 24, 40, .06);
}

.b9-crud-sheet .is-danger {
    color: #dc2626;
}