/* ==========================================================
   TABS
========================================================== */

.admin-tabs{

    display:flex;

    gap:8px;

    margin-bottom:22px;

    border-bottom:1px solid var(--border);

}

.admin-tab{

    background:none;

    color:var(--text-secondary);

    padding:10px 18px;

    border-bottom:3px solid transparent;

    font-weight:600;

    transition:var(--transition);

}

.admin-tab:hover{

    color:var(--text);

}

.admin-tab.active{

    color:var(--gold);

    border-bottom-color:var(--gold);

}

.admin-tab-panel{

    display:none;

    flex-direction:column;

    gap:20px;

}

.admin-tab-panel.active{

    display:flex;

}

/* ==========================================================
   TABELAS
========================================================== */

.admin-table{

    width:100%;

    border-collapse:collapse;

    font-size:.88rem;

}

.admin-table th{

    text-align:left;

    color:var(--text-secondary);

    font-weight:600;

    padding:10px 12px;

    border-bottom:1px solid var(--border);

    text-transform:uppercase;

    font-size:.72rem;

    letter-spacing:.5px;

}

.admin-table td{

    padding:12px;

    border-bottom:1px solid var(--border);

    vertical-align:middle;

    overflow-wrap:anywhere;

}

/* Em telas estreitas a tabela rola dentro do painel, sem vazar */

.admin-tab-panel .panel{

    overflow-x:auto;

}

.admin-table tr:last-child td{

    border-bottom:none;

}

.admin-actions{

    display:flex;

    gap:8px;

}

.admin-actions .button{

    margin-top:0;

    width:auto;

}

/* ==========================================================
   FORMULÁRIO DE CARTA
========================================================== */

.admin-card-form h2{

    font-family:"Cinzel",serif;

    color:var(--gold);

    margin-bottom:16px;

    font-size:1.1rem;

}

.admin-form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}

@media (max-width:700px){

    .admin-form-grid{
        grid-template-columns:1fr;
    }

}

.admin-form-grid .input{

    margin-bottom:0;

}

.admin-form-desc{

    grid-column:1 / -1;

}

.admin-form-grid button{

    grid-column:1 / -1;

    margin-top:4px;

}

/* ==========================================================
   ABA CARTAS — GERAL
========================================================== */

.admin-section-title{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.1rem;

    margin-bottom:10px;

    display:flex;

    align-items:center;

    gap:10px;

}

.admin-hint{

    color:var(--text-secondary);

    font-size:.85rem;

    line-height:1.55;

    margin-bottom:18px;

}

.admin-hint strong{

    color:var(--text);

}

/* ==========================================================
   IMPORTAÇÃO
========================================================== */

.import-dropzone{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:34px 20px;

    border:2px dashed var(--border);

    border-radius:12px;

    color:var(--text-secondary);

    cursor:pointer;

    transition:var(--transition);

    text-align:center;

}

.import-dropzone:hover,
.import-dropzone.drag-over{

    border-color:var(--gold);

    color:var(--text);

    background:rgba(201,168,79,.05);

}

.import-dropzone strong{

    color:var(--gold);

}

.import-dropzone .icon-xl{

    margin-bottom:4px;

}

.import-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:18px;

}

.import-row{

    display:grid;

    grid-template-columns:auto 1fr auto auto;

    align-items:center;

    gap:14px;

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:12px;

    padding:10px 14px;

}

.import-thumb{

    width:52px;

    height:65px;

    object-fit:cover;

    border-radius:6px;

    border:1px solid var(--border);

}

.import-fields{

    display:grid;

    grid-template-columns:1.3fr .8fr 1fr 70px 70px 130px;

    gap:8px;

    min-width:0;

}

.import-generic{

    margin-bottom:0;

    padding:10px 8px;

    font-size:.78rem;

}

.import-stat{

    padding:10px 8px;

    text-align:center;

}

/* esconde as setinhas do input number (ficam feias tão pequenas) */

.import-stat::-webkit-outer-spin-button,
.import-stat::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;

}

.import-fields .input{

    margin-bottom:0;

    padding:10px 12px;

    font-size:.85rem;

}

@media (max-width:800px){

    .import-row{
        grid-template-columns:auto 1fr auto;
    }

    .import-fields{
        grid-template-columns:1fr;
    }

    .import-status{
        display:none;
    }

}

.import-actions{

    display:flex;

    gap:10px;

    margin-top:16px;

}

.import-actions .button{

    margin-top:0;

}

/* ==========================================================
   GRADE DA COLEÇÃO
========================================================== */

.admin-card-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));

    gap:14px;

    /* com muitas cartas, a grade rola sozinha em vez de esticar a página */
    max-height:580px;

    overflow-y:auto;

    padding:4px 6px 4px 2px;

}

.goto-group{

    cursor:pointer;

}

.goto-group:hover{

    filter:brightness(1.3);

}

.admin-card{

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:12px;

    padding:10px;

    display:flex;

    flex-direction:column;

    gap:8px;

    cursor:grab;

    transition:var(--transition);

}

.admin-card.dragging{

    opacity:.4;

}

.admin-card.drag-over{

    border-color:var(--gold);

    box-shadow:0 0 0 2px rgba(201,168,79,.35);

    transform:scale(1.02);

}

.admin-card-thumb{

    aspect-ratio:4 / 5;

    border-radius:8px;

    overflow:hidden;

    border:1px solid var(--border);

    background:var(--panel);

}

.admin-card-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.admin-card-thumb img:not([src]){

    display:none;

}

.admin-card-thumb-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Cinzel",serif;

    font-size:2rem;

    color:var(--part-color,var(--gold));

}

.admin-card-name{

    font-size:.85rem;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.admin-card-meta{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:.72rem;

    color:var(--text-secondary);

    flex-wrap:wrap;

}

.admin-card-meta .badge{

    font-size:.65rem;

    padding:2px 8px;

}

.part-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--part-color,var(--gold));

    border:1px solid rgba(255,255,255,.25);

    flex-shrink:0;

}

.part-dot.part-0,
.admin-card-thumb-placeholder.part-0,
.card-thumb-placeholder.part-0{ --part-color:var(--part-0); }
.part-dot.part-1,
.admin-card-thumb-placeholder.part-1,
.card-thumb-placeholder.part-1{ --part-color:var(--part-1); }
.part-dot.part-2,
.admin-card-thumb-placeholder.part-2,
.card-thumb-placeholder.part-2{ --part-color:var(--part-2); }
.part-dot.part-3,
.admin-card-thumb-placeholder.part-3,
.card-thumb-placeholder.part-3{ --part-color:var(--part-3); }
.part-dot.part-4,
.admin-card-thumb-placeholder.part-4,
.card-thumb-placeholder.part-4{ --part-color:var(--part-4); }
.part-dot.part-5,
.admin-card-thumb-placeholder.part-5,
.card-thumb-placeholder.part-5{ --part-color:var(--part-5); }
.part-dot.part-6,
.admin-card-thumb-placeholder.part-6,
.card-thumb-placeholder.part-6{ --part-color:var(--part-6); }
.part-dot.part-7,
.admin-card-thumb-placeholder.part-7,
.card-thumb-placeholder.part-7{ --part-color:var(--part-7); }

.admin-card-actions{

    display:flex;

    gap:6px;

    align-items:center;

}

.admin-card-actions .icon-button{

    padding:5px 10px;

}

/* ==========================================================
   GRUPOS
========================================================== */

.group-search{

    margin-bottom:16px;

}

.group-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    max-height:640px;

    overflow-y:auto;

    padding-right:4px;

}

.group-box{

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:12px;

    transition:var(--transition);

    flex-shrink:0;

}

.group-box.drag-over{

    border-color:var(--gold);

    box-shadow:0 0 0 2px rgba(201,168,79,.35);

}

.group-box.flash{

    animation:groupFlash 1.5s ease;

}

@keyframes groupFlash{

    0%, 60%{

        border-color:var(--gold);

        box-shadow:0 0 0 3px rgba(201,168,79,.45);

    }

    100%{

        border-color:var(--border);

        box-shadow:none;

    }

}

/* ===== cabeçalho (sempre visível, clique para abrir/fechar) ===== */

.group-box-header{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px;

    cursor:pointer;

    flex-wrap:wrap;

    user-select:none;

}

.group-box-header:hover .group-box-chevron{

    color:var(--gold);

}

.group-box-chevron{

    color:var(--text-secondary);

    font-size:.9rem;

    transition:transform .2s ease;

    flex-shrink:0;

}

.group-box.expanded .group-box-chevron{

    transform:rotate(90deg);

}

.group-box-header h3{

    font-size:.95rem;

    color:var(--text-secondary);

    font-weight:400;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.group-box-header strong{

    color:var(--gold);

    font-family:"Cinzel",serif;

}

.group-box-header .card-thumb{

    width:32px;

    height:40px;

}

.group-box-spacer{

    flex:1;

}

/* ===== corpo (só aparece expandido) ===== */

.group-box-body{

    display:none;

    padding:4px 16px 16px;

}

.group-box.expanded .group-box-body{

    display:block;

}

.group-members{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

    gap:10px;

}

.group-member{

    display:flex;

    align-items:center;

    gap:12px;

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:10px;

    padding:10px 12px;

}

.group-member.is-main{

    border-color:rgba(201,168,79,.5);

}

.card-thumb{

    width:46px;

    height:58px;

    border-radius:6px;

    overflow:hidden;

    border:1px solid var(--border);

    background:var(--panel-light);

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

}

.card-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.card-thumb img:not([src]){

    display:none;

}

.card-thumb-placeholder{

    font-family:"Cinzel",serif;

    font-size:1.2rem;

    color:var(--part-color,var(--gold));

}

.group-member-info{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;

}

.group-member-name{

    font-size:.88rem;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.group-member-type{

    font-size:.72rem;

    color:var(--text-secondary);

}

.group-verso{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.72rem;

    color:var(--text-secondary);

    margin-top:4px;

}

.group-verso .input{

    margin-bottom:0;

    padding:6px 10px;

    font-size:.75rem;

    width:auto;

    flex:1;

    min-width:0;

}

.group-member-buttons{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.group-member-buttons .icon-button{

    padding:5px 10px;

}

.group-drop-hint{

    margin-top:12px;

    font-size:.75rem;

    color:var(--text-secondary);

    text-align:center;

    border:1px dashed var(--border);

    border-radius:8px;

    padding:8px;

}