/* =========================================================
   Casa Roma — Admin, tema claro (Material)
   Carregado depois de admin.css. Mesma linguagem visual do site público:
   fundo cinza, superfícies brancas com elevação, vermelho como cor de ação.
   ========================================================= */

body.admin-light {
    /* Os tokens do admin.css foram criados para o tema escuro:
       --black* são as superfícies e --white é a cor do texto. */
    --black:      #EBECEF;
    --black-2:    #FFFFFF;
    --black-3:    #F1F2F5;
    --gray:       #5F636C;
    --gray-2:     #E3E5E9;
    --white:      #121316;
    --border:     #E1E4E8;
    --border-red: rgba(225, 6, 0, 0.22);
    --red-dark:   #B30500;

    --ink:        #121316;
    --ink-2:      #34373E;
    --line-2:     #C6CBD2;
    --red-50:     #FFF3F2;
    --red-100:    #FFE1DE;
    --mp:         #009EE3;
    --elev-2:     0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.10);
    --elev-4:     0 2px 4px rgba(0, 0, 0, 0.10), 0 4px 14px rgba(0, 0, 0, 0.12);
    --elev-8:     0 6px 12px rgba(0, 0, 0, 0.10), 0 12px 28px rgba(0, 0, 0, 0.16);
    --on-color:   #FFFFFF; /* texto sobre fundos coloridos */

    background: var(--black);
    color: var(--ink);
}

.admin-light h1, .admin-light h2, .admin-light h3, .admin-light h4 {
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.015em;
}
.admin-light :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(225, 6, 0, 0.35);
    outline-offset: 2px;
}

/* ---------- Botões ---------- */
.admin-light .btn { border-radius: 12px; }
.admin-light .btn-primary { background: var(--red); color: var(--on-color); box-shadow: 0 6px 16px rgba(225, 6, 0, 0.25); }
.admin-light .btn-primary:hover { background: var(--red-dark); box-shadow: 0 10px 22px rgba(225, 6, 0, 0.3); }
.admin-light .btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line-2); }
.admin-light .btn-ghost:hover { background: var(--black-3); border-color: var(--line-2); color: var(--ink); }
.admin-light .btn-icon { background: #fff; color: var(--ink-2); border-color: var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.admin-light .btn-icon:hover { background: var(--red); border-color: var(--red); color: var(--on-color); }
.admin-light .btn-icon.btn-danger:hover { color: var(--on-color); }
.admin-light .btn-icon.btn-icon-add,
.admin-light .btn-icon.btn-icon-remove { color: var(--on-color); }

/* ---------- Login ---------- */
.admin-light.login-page { background: var(--black); }
.admin-light.login-page::before {
    background: radial-gradient(circle, rgba(225, 6, 0, 0.10) 0%, transparent 70%);
}
.admin-light .login-card {
    background: #fff; backdrop-filter: none;
    border: 0; border-top: 4px solid var(--red);
    box-shadow: var(--elev-8);
}
.admin-light .login-logo {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    filter: none; box-shadow: var(--elev-4);
}
.admin-light .login-header h1,
.admin-light .sidebar-header h2 {
    background: none; -webkit-text-fill-color: currentColor;
    color: var(--ink); text-transform: uppercase; font-weight: 800;
}
.admin-light .login-header h1 em,
.admin-light .sidebar-header h2 em { font-style: normal; color: var(--red); }

/* ---------- Formulários ---------- */
.admin-light .form-group label { color: var(--ink-2); font-weight: 600; }
.admin-light .form-group input[type="text"],
.admin-light .form-group input[type="number"],
.admin-light .form-group input[type="password"],
.admin-light .form-group input[type="url"],
.admin-light .form-group input[type="email"],
.admin-light .form-group input[type="date"],
.admin-light .form-group select,
.admin-light .form-group textarea,
.admin-light .form-group input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    background: var(--black-3);
    color: var(--ink);
    border: 1.5px solid transparent;
    border-radius: 12px;
    font: inherit; font-size: 0.95rem;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.admin-light .form-group input::placeholder,
.admin-light .form-group textarea::placeholder { color: #8A909A; }
.admin-light .form-group input:hover,
.admin-light .form-group select:hover,
.admin-light .form-group textarea:hover { border-color: var(--border); }
.admin-light .form-group input:focus,
.admin-light .form-group select:focus,
.admin-light .form-group textarea:focus {
    outline: none; background: #fff; border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.12);
}
.admin-light .form-group input[disabled] { background: var(--black-3); color: var(--ink-2); opacity: 1; }
.admin-light .form-group small,
.admin-light .field-hint { display: block; color: var(--gray); font-size: 0.8rem; margin-top: 6px; }
.admin-light .check-label { background: var(--black-3); border-color: transparent; color: var(--ink) !important; font-weight: 500; }
.admin-light .img-preview { background: var(--black-3); border-color: var(--border); }

.admin-light .mini-search,
.admin-light .mini-select { background: #fff; color: var(--ink); border-color: var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.admin-light .mini-search:focus,
.admin-light .mini-select:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.12); }

/* ---------- Alertas ---------- */
.admin-light .alert { border: 0; box-shadow: var(--elev-2); }
.admin-light .alert-success { background: #EAF8F2; color: #0B7A52; }
.admin-light .alert-error   { background: var(--red-50); color: var(--red-dark); }
.admin-light .alert-warning { background: #FFF6E8; color: #8A4B00; }

/* ---------- Sidebar ---------- */
.admin-light .sidebar { background: #fff; border-right: 0; box-shadow: 1px 0 0 var(--border), 4px 0 16px rgba(0, 0, 0, 0.04); }
.admin-light .sidebar-header { border-bottom-color: var(--border); }
.admin-light .sidebar-header img {
    width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
    filter: none; box-shadow: var(--elev-4);
}
.admin-light .sidebar-header span { color: var(--gray); }
.admin-light .sidebar-nav a { color: var(--ink-2); }
.admin-light .sidebar-nav a i { color: var(--gray); }
.admin-light .sidebar-nav a:hover { background: var(--black-3); color: var(--ink); }
.admin-light .sidebar-nav a.active {
    background: var(--red-50); color: var(--red-dark); font-weight: 600;
    border-left: 3px solid var(--red);
}
.admin-light .sidebar-nav a.active i { color: var(--red); }
.admin-light .sidebar-nav .badge { background: var(--black-3); color: var(--ink-2); }
.admin-light .sidebar-nav a.active .badge { background: var(--red); color: var(--on-color); }
.admin-light .sidebar-foot { border-top-color: var(--border); }
.admin-light .sidebar-nav a.sidebar-metricas i:first-child { color: #C77700; }

/* ---------- Topbar ---------- */
.admin-light .main { background: var(--black); }
.admin-light .topbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(16, 18, 24, 0.05);
}
.admin-light .topbar h1 { color: var(--ink); }
.admin-light .menu-toggle { background: #fff; color: var(--ink); border-color: var(--border); }
.admin-light .user-pill { background: var(--black-3); border-color: transparent; color: var(--ink-2); font-weight: 500; }

/* ---------- Cards / estatísticas ---------- */
.admin-light .stat-card,
.admin-light .form-card,
.admin-light .table-card,
.admin-light .quick-card,
.admin-light .slide-admin-card {
    background: #fff;
    border: 0;
    box-shadow: var(--elev-2);
}
.admin-light .stat-card:hover,
.admin-light .quick-card:hover,
.admin-light .slide-admin-card:hover { box-shadow: var(--elev-8); border-color: transparent; }
.admin-light .stat-card::after { display: none; }
.admin-light .stat-icon { background: var(--black-3); border-color: transparent; color: var(--gray); }
.admin-light .stat-card.stat-red .stat-icon,
.admin-light .stat-card.stat-green .stat-icon { color: var(--on-color); }
.admin-light .stat-value { font-family: 'Poppins', 'Inter', sans-serif; color: var(--ink); }
.admin-light .form-card::before { background: var(--red); height: 3px; }
.admin-light .form-card h3 { color: var(--ink); }
.admin-light .section-head h2 { color: var(--ink); }
.admin-light .quick-card h3 { color: var(--ink); }
.admin-light .quick-card-ga h3 { color: #C77700; }
.admin-light .quick-card-ga i { color: #C77700; }

/* ---------- Tabelas ---------- */
.admin-light .data-table th { background: #F7F8FA; color: var(--gray); border-bottom-color: var(--border); }
.admin-light .data-table td { color: var(--ink); border-bottom-color: var(--border); }
.admin-light .data-table tr:hover { background: #FAFAFB; }
.admin-light .data-table td small { color: var(--gray); }
.admin-light .text-red { color: var(--red); }
.admin-light .row-img-empty { background: var(--black-3); color: var(--gray); border-color: var(--border); }
.admin-light .row-foto-count { background: var(--ink); border-color: transparent; }
.admin-light .stock-pill { background: #EAF8F2; color: #0B7A52; border-color: transparent; }
.admin-light .stock-pill.low { background: #FFF6E8; color: #A45A00; border-color: transparent; }
.admin-light .stock-pill.out { background: var(--red-50); color: var(--red-dark); border-color: transparent; }
.admin-light .tag-pill { background: var(--red-50); color: var(--red-dark); border-color: var(--red-100); }
.admin-light .tag-pill-cat { background: #EEF4FF; color: #1D4ED8; border-color: #D5E3FF; }
.admin-light .tag-pill-sm { background: var(--black-3); color: var(--ink-2); border-color: var(--border); }
.admin-light .empty-row { color: var(--gray); }
.admin-light .status-on { color: #0B7A52; }

/* Indicador de link Mercado Pago na lista de produtos */
.admin-light .mp-pill,
.mp-pill {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: #E6F6FD; color: #0079B8;
    font-size: 0.7rem; font-weight: 700; vertical-align: middle;
}
.mp-pill:hover { background: var(--mp); color: #fff; }

/* Mensagens de contato */
.admin-light .msg-contact { color: var(--ink-2); font-size: 0.88rem; white-space: nowrap; }
.admin-light .msg-contact:hover { color: var(--red); }
.admin-light .msg-contact i { color: var(--gray); margin-right: 4px; }
.admin-light .msg-text { max-width: 520px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Fotos do produto ---------- */
.admin-light .foto-thumb { background: var(--black-3); border-color: var(--border); }
.admin-light .foto-thumb.is-cover { border-color: var(--red); }
.admin-light #fotoToast { background: var(--ink); color: #fff; }

/* Sugestões de tags no formulário de produto (estilo inline escuro) */
.admin-light .tag-suggest-chip { background: var(--black-3) !important; color: var(--ink-2) !important; border-color: var(--border) !important; }
.admin-light .tag-suggest-chip:hover { background: var(--red-50) !important; color: var(--red-dark) !important; }

/* ---------- Modais ---------- */
.admin-light .modal-backdrop { background: rgba(17, 18, 20, 0.5); }
.admin-light .modal-card { background: #fff; border: 0; box-shadow: var(--elev-8); }
.admin-light .modal-card h3 { color: var(--ink); }
.admin-light .modal-sub { color: var(--gray); }
.admin-light .modal-close { background: #fff; color: var(--ink-2); border-color: var(--border); }
.admin-light .modal-close:hover { color: var(--on-color); }
.admin-light .modal-icon { color: var(--on-color); }
.admin-light .import-error-list { background: var(--black-3); border-color: var(--border); }
.admin-light .import-error-list::-webkit-scrollbar-track { background: var(--black-3); }
.admin-light .import-error-list::-webkit-scrollbar-thumb { background: var(--line-2); }
.admin-light .import-error-item { color: var(--ink-2); border-bottom-color: var(--border); }
.admin-light .import-error-item i { color: var(--red); }
.admin-light .qr-result { background: #EAF8F2; color: #0B7A52; border-color: transparent; }

.admin-light .admin-foot { color: var(--gray); border-top-color: var(--border); }

/* Mobile: sidebar como gaveta com sombra */
@media (max-width: 900px) {
    .admin-light .sidebar { box-shadow: var(--elev-8); }
    .admin-light .sidebar-backdrop { background: rgba(17, 18, 20, 0.45); }
}

/* Valores monetários não quebram linha ("AR$" separado do número) */
.admin-light #prodTable td:nth-child(3),
.admin-light #prodTable td:nth-child(4),
.admin-light .data-table td.money { white-space: nowrap; }

/* =========================================================
   Tabelas responsivas
   Antes: min-width 700px + rolagem horizontal escondiam a coluna "Acciones"
   em monitores menores. Agora a tabela se ajusta, as ações ficam fixas à
   direita e, em telas estreitas, cada linha vira um card.
   ========================================================= */
.admin-light .table-card { overflow-x: auto; }
.admin-light .data-table { min-width: 0; }
.admin-light .data-table th { padding: 12px; white-space: nowrap; }
.admin-light .data-table td { padding: 12px; }
.admin-light .data-table td strong { overflow-wrap: anywhere; }

/* Coluna de ações sempre visível */
.admin-light .data-table td.row-actions,
.admin-light .data-table th.col-actions {
    position: sticky; right: 0; z-index: 1;
    background: #fff;
    box-shadow: -8px 0 12px -10px rgba(0, 0, 0, 0.25);
}
.admin-light .data-table th.col-actions { background: #F7F8FA; }
.admin-light .data-table tr:hover td.row-actions { background: #FAFAFB; }
.admin-light .data-table td.row-actions { white-space: nowrap; }
.admin-light .row-actions .btn-icon,
.admin-light .row-actions form { margin: 2px; }

/* Monitores médios: tabela mais compacta */
@media (max-width: 1400px) {
    .admin-light .data-table th,
    .admin-light .data-table td { padding: 10px 8px; font-size: 0.86rem; }
    .admin-light .data-table th { font-size: 0.7rem; letter-spacing: 0.06em; }
    .admin-light .row-img, .admin-light .row-img-empty { width: 44px; height: 44px; }
    .admin-light .btn-icon { width: 32px; height: 32px; }
    .admin-light .dashboard, .admin-light .section { padding-left: 20px; padding-right: 20px; }
    .admin-light .topbar { padding: 14px 20px; }
}

/* Telas estreitas: cada linha vira um card com rótulos (data-label vem do JS) */
@media (max-width: 860px) {
    .admin-light .table-card { background: transparent; box-shadow: none; overflow: visible; }
    .admin-light .data-table thead { display: none; }
    .admin-light .data-table,
    .admin-light .data-table tbody,
    .admin-light .data-table tr,
    .admin-light .data-table td { display: block; width: 100%; }
    .admin-light .data-table tr {
        background: #fff; border-radius: 14px; box-shadow: var(--elev-2);
        margin-bottom: 12px; padding: 6px 14px;
    }
    .admin-light .data-table tr:hover { background: #fff; }
    .admin-light .data-table td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 9px 0; text-align: right; font-size: 0.9rem;
        border-bottom: 1px solid var(--border);
    }
    .admin-light .data-table td::before {
        content: attr(data-label);
        flex: 0 0 auto; text-align: left;
        font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
        color: var(--gray);
    }
    .admin-light .data-table td:not([data-label])::before,
    .admin-light .data-table td[data-label=""]::before { display: none; }
    .admin-light .data-table td > * { max-width: 70%; }
    .admin-light .data-table td.row-actions {
        position: static; box-shadow: none; background: transparent;
        justify-content: flex-end; border-bottom: 0; padding-top: 10px;
    }
    .admin-light .data-table td.row-actions::before { display: none; }
    .admin-light .data-table td.row-actions > * { max-width: none; }
    .admin-light .data-table td.empty-row { display: block; text-align: center; border: 0; }
    .admin-light .data-table td.empty-row::before { display: none; }
    .admin-light .data-table td.msg-text { display: block; text-align: left; }
    .admin-light .data-table td.msg-text::before { display: block; margin-bottom: 4px; }
    .admin-light .dashboard, .admin-light .section { padding-left: 14px; padding-right: 14px; }
}

/* Botões de entrada (+) e venda (−) do estoque mantêm suas cores */
.admin-light .btn-icon.btn-icon-add { background: #1FAF55; border-color: #1FAF55; color: #fff; }
.admin-light .btn-icon.btn-icon-add:hover { background: #179247; border-color: #179247; }
.admin-light .btn-icon.btn-icon-remove { background: #0D6EFD; border-color: #0D6EFD; color: #fff; }
.admin-light .btn-icon.btn-icon-remove:hover { background: #0A58CA; border-color: #0A58CA; }
@media (max-width: 860px) {
    /* Nome do produto em cima, descrição embaixo */
    .admin-light .data-table td { flex-wrap: wrap; }
    .admin-light .data-table td > small { flex-basis: 100%; max-width: 100%; text-align: right; }
}