/* ==========================================================================
   Painel mainadmin - TBC Esportes
   Carregado apenas por resources/views/main/head.blade.php, entao nao afeta
   os temas das bancas (verde/azul/red), que tem CSS proprio.
   ========================================================================== */

:root{
	--ma-slate:#20313f;
	--ma-slate-2:#2c4152;
	--ma-border:#e3e8ee;
	--ma-bg:#f4f6fa;
	--ma-muted:#7b8794;
	--ma-primary:#2563eb;
	--ma-ok:#1d7a44;
	--ma-danger:#9b2c2c;
}

body{background:var(--ma-bg);color:#20313f;font-size:14px}
#app{min-height:100vh}
#app .container-fluid{padding-left:0;padding-right:0;overflow-x:hidden}
#app .container-fluid>.row{margin-left:0;margin-right:0}

/* ---------- Estrutura -------------------------------------------------- */
.ma-content{padding:26px 30px 70px}
@media (max-width:991.98px){ .ma-content{padding:18px 16px 60px} }

/* ---------- Menu lateral ----------------------------------------------- */
.side-nav{background:var(--ma-slate);min-height:100vh;padding-bottom:24px}
@media (min-width:992px){ .side-nav{position:sticky;top:0} }
.side-nav img{max-width:140px;filter:brightness(1.05)}
.side-nav .nav{padding:0;margin:0}
.side-nav .list-group-item{background:transparent;border:0;border-left:3px solid transparent;border-radius:0;padding:0}
.side-nav .list-group-item a{display:flex;align-items:center;gap:10px;color:#c8d4de;padding:12px 18px;font-size:14px;text-decoration:none;line-height:1.35;transition:background .15s,color .15s}
.side-nav .list-group-item a i,.side-nav .list-group-item a svg{width:18px;text-align:center;flex:0 0 18px;opacity:.9}
.side-nav .list-group-item a:hover{background:var(--ma-slate-2);color:#fff}
.side-nav .list-group-item.active{border-left-color:var(--ma-primary);background:var(--ma-slate-2)}
.side-nav .list-group-item.active a{color:#fff;font-weight:600}

/* Barra superior que aparece só no mobile, com o botão do menu */
.ma-topbar{display:none;align-items:center;gap:12px;background:var(--ma-slate);color:#fff;padding:10px 14px;position:sticky;top:0;z-index:1030}
.ma-topbar img{max-width:96px}
.ma-topbar button{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;padding:6px 11px;font-size:16px;line-height:1}
@media (max-width:991.98px){
	.ma-topbar{display:flex}
	.side-nav{display:none;min-height:0}
	.side-nav.ma-aberto{display:block}
	.ma-menu-col{padding:0}
}

/* ---------- Títulos ---------------------------------------------------- */
.ma-content h1,.ma-content h2{font-weight:700;color:var(--ma-slate);margin:0 0 4px}
.ma-content h1{font-size:28px}
.ma-content h2{font-size:24px}
.ma-content h3{font-size:18px;font-weight:700;color:var(--ma-slate);display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ma-sub{color:var(--ma-muted);font-size:14px;margin:0 0 20px;max-width:780px}

/* ---------- Cartões ---------------------------------------------------- */
.ma-card,#app .card{background:#fff;border:1px solid var(--ma-border);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.05);margin-bottom:20px}
#app .card>.card-header{background:#f7f9fc;border-bottom:1px solid var(--ma-border);font-weight:600;color:var(--ma-slate);font-size:14px;padding:12px 16px}
.ma-card-body{padding:18px}
/* Blocos antigos que usavam .bg-light como "caixa" */
#app .bg-light{background:#fff !important;border:1px solid var(--ma-border);border-radius:8px;padding:18px !important;margin-top:20px !important}

/* ---------- Tabelas ---------------------------------------------------- */
#app table{width:100%;background:#fff;border:1px solid var(--ma-border);border-radius:8px;border-collapse:separate;border-spacing:0;overflow:hidden;margin-bottom:20px}
#app table thead th{background:var(--ma-slate);color:#fff;border:0;font-size:12px;letter-spacing:.3px;text-transform:uppercase;padding:11px 12px;vertical-align:middle;font-weight:600}
#app table tbody td{padding:10px 12px;border-top:1px solid #eef1f5;vertical-align:middle}
#app table tbody tr:hover{background:#f7f9fc}
#app table.table-striped tbody tr:nth-of-type(odd){background:#fcfdfe}
#app table.table-striped tbody tr:hover{background:#f2f6fb}
@media (max-width:767.98px){
	#app table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ---------- Formulários ------------------------------------------------ */
#app label{font-size:13px;font-weight:600;color:#44546a;margin-bottom:4px}
#app .control-label{padding-top:8px}
#app input[type=text],#app input[type=number],#app input[type=email],#app input[type=password],
#app input[type=date],#app select,#app textarea{
	display:block;width:100%;padding:8px 12px;font-size:14px;line-height:1.4;color:#20313f;
	background:#fff;border:1px solid #cfd8e3;border-radius:6px;transition:border-color .15s,box-shadow .15s}
#app input[type=text]:focus,#app input[type=number]:focus,#app input[type=email]:focus,
#app input[type=password]:focus,#app select:focus,#app textarea:focus{
	outline:0;border-color:var(--ma-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
#app input[type=checkbox],#app input[type=radio]{width:auto;display:inline-block}
#app .modal p{margin-bottom:12px}
#app .modal p label{display:block}

/* ---------- Botões ----------------------------------------------------- */
#app button:not(.close):not(.navbar-toggler),#app .btn{border-radius:6px;font-weight:600;font-size:14px;padding:8px 16px;border:1px solid transparent;cursor:pointer}
#app button:not([class]){background:var(--ma-primary);color:#fff}
#app button:not([class]):hover{filter:brightness(.94)}
#app .btn-success{background:var(--ma-ok);border-color:var(--ma-ok)}
#app .btn-danger{background:var(--ma-danger);border-color:var(--ma-danger)}
#app .btn-large{background:#fff;border:1px solid #cfd8e3;color:var(--ma-slate)}
#app .btn-large:hover{background:#f2f6fb}
.ma-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.ma-acoes button{min-width:160px}

/* ---------- Modais ----------------------------------------------------- */
#app .modal-content,.modal-content{border:0;border-radius:10px;overflow:hidden}
.modal-header{background:#f7f9fc;border-bottom:1px solid var(--ma-border)}
.modal-title{font-weight:700;color:var(--ma-slate);font-size:16px}
.modal-footer{background:#f7f9fc;border-top:1px solid var(--ma-border)}
@media (max-width:575.98px){ .modal-dialog{margin:.5rem} }

/* ---------- Selos ------------------------------------------------------ */
.badge-aberta{background:#fdebc8;color:#8a5a00;font-weight:600}
.badge-apurada{background:#e4f3e9;color:#1d7a44;font-weight:600}

/* ---------- Tela de Resultados Manuais --------------------------------- */
.res-filtro{border-top:1px dashed var(--ma-border);margin-top:4px;padding-top:14px}
.res-filtro .custom-control-label{font-weight:600;color:var(--ma-slate);cursor:pointer}
.res-filtro small{display:block;margin-top:4px;margin-left:24px;font-size:12px}
.res-resumo{font-size:12px;font-weight:600;color:var(--ma-muted)}
@media (max-width:575.98px){ .res-resumo{display:none} }
#app .res-table .col-res{width:88px}
#app .res-table .col-ganhou{background:var(--ma-ok)}
#app .res-table .col-perdeu{background:var(--ma-danger)}
#app .res-table input[type=radio]{transform:scale(1.25);cursor:pointer}
#app .res-table .res-mercado td{background:#eef2f7;font-weight:700;color:var(--ma-slate);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.res-vazio{text-align:center;color:#8b97a6;padding:28px 12px;font-size:14px}
.res-acoes{display:flex;justify-content:flex-end;padding:4px 0 18px}
.res-acoes .btn{min-width:190px}
.res-perigo{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #f1d4d4;background:#fdf6f6;border-radius:8px;padding:14px 18px;margin-bottom:24px}
.res-perigo strong{color:var(--ma-danger);font-size:14px}
@media (max-width:575.98px){
	.res-perigo{flex-direction:column;align-items:stretch;text-align:left}
	.res-acoes .btn{width:100%}
}

/* ---------- Rodapé ----------------------------------------------------- */
footer .footer-copyright{padding:18px 10px;color:var(--ma-muted);font-size:12px}

/* ---------- Tela de login do painel ------------------------------------
   Usada so pelo resources/views/login.blade.php (acesso mainadmin). Os sites
   das bancas tem login proprio em {tema}/auth/login.blade.php - nao mexer
   aqui esperando mudar o login delas.                                     */
.login-body{background:linear-gradient(160deg,#20313f 0%,#17232e 55%,#101a22 100%);min-height:100vh;margin:0}
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.28);padding:32px 30px 28px}
.login-marca{text-align:center;margin-bottom:22px}
.login-marca img{max-width:132px;margin-bottom:14px}
.login-marca h1{font-size:19px;font-weight:700;color:#20313f;margin:0}
.login-marca p{font-size:13px;color:#7b8794;margin:4px 0 0}
.login-erro{background:#fdecec;border:1px solid #f3c6c6;color:#9b2c2c;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:16px}
.login-campo{margin-bottom:16px}
.login-campo label{display:block;font-size:13px;font-weight:600;color:#44546a;margin-bottom:6px}
.login-input{position:relative;display:flex;align-items:center}
.login-input>i{position:absolute;left:13px;color:#9aa7b5;font-size:14px;pointer-events:none}
#app .login-input input,.login-input input{width:100%;padding:11px 14px 11px 38px;font-size:15px;color:#20313f;background:#fff;border:1px solid #cfd8e3;border-radius:8px;transition:border-color .15s,box-shadow .15s}
#app .login-input input:focus,.login-input input:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.login-olho{position:absolute;right:6px;background:transparent;border:0;color:#9aa7b5;padding:6px 9px;cursor:pointer;line-height:1}
.login-olho:hover{color:#44546a}
.login-lembrar{margin:4px 0 20px}
.login-lembrar .custom-control-label{font-size:13px;color:#44546a;cursor:pointer}
.login-entrar{width:100%;border:0;border-radius:8px;background:#2563eb;color:#fff;font-weight:700;font-size:15px;padding:12px;cursor:pointer;transition:filter .15s}
.login-entrar:hover{filter:brightness(1.08)}
.login-entrar:active{filter:brightness(.95)}
.login-rodape{margin:22px 0 0;color:#8b9aa8;font-size:12px}
@media (max-width:420px){ .login-card{padding:26px 20px 22px} }

/* ---------- Cabecalho de pagina com acoes ------------------------------ */
.ma-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ma-page-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ma-contador{display:inline-block;background:#e7edf5;color:#44546a;border-radius:20px;font-size:11px;font-weight:700;padding:2px 9px;margin-left:4px}
#app tr.ma-clicavel{cursor:pointer}
@media (max-width:575.98px){
	.ma-page-head{flex-direction:column}
	.ma-page-acoes{width:100%}
	.ma-page-acoes .btn,.ma-page-acoes form{flex:1}
	.ma-page-acoes .btn{width:100%}
	#app .card-header.d-flex{flex-direction:column;align-items:flex-start !important;gap:10px}
	#app .card-header .btn{width:100%}
}

/* Botoes: as variantes do Bootstrap precisam vencer o estilo generico de
   #app button, senao "Sair" (btn-danger) e "Nova banca" (btn-primary) saem
   com a aparencia neutra do .btn-large legado. */
#app .btn-primary{background:#2563eb;border-color:#2563eb;color:#fff}
#app .btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
#app .btn-danger,#app .btn-danger.btn-large{background:#9b2c2c;border-color:#9b2c2c;color:#fff}
#app .btn-danger:hover{background:#842424;border-color:#842424;color:#fff}
#app .btn-outline-secondary{background:#fff;border:1px solid #cfd8e3;color:#44546a}
#app .btn-outline-secondary:hover{background:#f2f6fb;color:#20313f}
#app .btn-outline-danger{background:#fff;border:1px solid #e3b3b3;color:#9b2c2c}
#app .btn-outline-danger:hover{background:#fdf2f2;color:#7f2020}
#app .btn-sm{padding:6px 12px;font-size:13px}

/* ---------- Campos dentro dos modais -----------------------------------
   Os modais do dashboard ficam FORA de <main id="app">, entao as regras de
   formulario de #app nao os alcancam - sem isto os campos gerados pelos
   helpers Form:: aparecem com o visual cru do navegador.                 */
.modal-body{padding:20px}
.modal-body label{display:block;font-size:13px;font-weight:600;color:#44546a;margin-bottom:5px}
.modal-body p{margin-bottom:14px}
.modal-body input[type=text],.modal-body input[type=number],.modal-body input[type=email],
.modal-body input[type=password],.modal-body input[type=date],.modal-body select,.modal-body textarea{
	display:block;width:100%;padding:9px 12px;font-size:14px;line-height:1.4;color:#20313f;background:#fff;
	border:1px solid #cfd8e3;border-radius:6px;transition:border-color .15s,box-shadow .15s}
.modal-body input[type=text]:focus,.modal-body input[type=number]:focus,.modal-body input[type=email]:focus,
.modal-body input[type=password]:focus,.modal-body input[type=date]:focus,.modal-body select:focus,
.modal-body textarea:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.modal-body input[type=checkbox],.modal-body input[type=radio]{width:auto;display:inline-block;margin-right:6px}
.modal-body input[type=file]{display:block;width:100%;font-size:13px;padding:8px 0}
/* Rotulos soltos ("Site:", "Aplicativo:") viram subtitulo de secao */
.modal-body>p:empty{display:none}
.modal-footer .btn,.modal-body button[type=submit]{border-radius:6px;font-weight:600;font-size:14px;padding:8px 16px}
.modal-body button[type=submit],.modal-body input[type=submit]{
	background:#2563eb;border:1px solid #2563eb;color:#fff;border-radius:6px;font-weight:600;
	font-size:14px;padding:9px 18px;cursor:pointer;width:100%;margin-top:6px}
.modal-body button[type=submit]:hover,.modal-body input[type=submit]:hover{background:#1d4ed8;border-color:#1d4ed8}
/* Campos de cor (huebee) ficam estreitos e com a cor ao lado */
.modal-body input.color-input{max-width:160px;display:inline-block}
.modal-dialog{max-width:520px}
@media (max-width:575.98px){ .modal-dialog{max-width:none} }

.modal-body .ma-secao{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#7b8794;border-top:1px solid #e3e8ee;padding-top:14px;margin:18px 0 10px}
.modal-body input.color-input{padding:8px 10px;border-radius:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}

.ma-card-rodape{display:flex;justify-content:flex-end;gap:10px;background:#f7f9fc;border-top:1px solid #e3e8ee;padding:14px 18px}
#app .input-tags{display:none}
#app div.tagsinput{border:1px solid #cfd8e3;border-radius:6px;min-height:44px;padding:8px 10px 2px}
#app div.tagsinput span.tag{background:#2563eb;border-color:#2563eb;border-radius:4px;height:24px;line-height:22px;font-size:12px;padding:0 22px 0 8px}
#app div.tagsinput span.tag a{line-height:20px;height:24px;right:7px}
#app div.tagsinput input{height:24px;line-height:24px;font-size:13px}
@media (max-width:575.98px){ .ma-card-rodape .btn{width:100
/* ---------- Rodape de acoes dentro do cartao --------------------------- */
.ma-card-rodape{display:flex;justify-content:flex-end;gap:10px;background:#f7f9fc;border-top:1px solid #e3e8ee;padding:14px 18px}
@media (max-width:575.98px){ .ma-card-rodape .btn{width:100%} }

/* ---------- Campo de tags (plugin tagsinput) ---------------------------
   O input original fica escondido pelo plugin; quem aparece e' o div.tagsinput.
   Sem estas regras ele nao acompanha o visual dos demais campos.          */
#app div.tagsinput{border:1px solid #cfd8e3;border-radius:6px;min-height:46px;padding:8px 10px 2px;width:100% !important}
#app div.tagsinput span.tag{background:#2563eb;border-color:#2563eb;border-radius:4px;height:24px;line-height:22px;font-size:12px;padding:0 22px 0 8px}
#app div.tagsinput span.tag a{line-height:20px;height:24px;right:7px}
#app div.tagsinput input{height:24px;line-height:24px;font-size:13px}

/* ---------- Apuracoes pendentes ----------------------------------------
   A linha de detalhe e' um <tr> com uma tabela dentro, logo abaixo da linha
   do jogo. Sem fundo proprio ela se confunde com a linha de cima.          */
#app tr.pend-detalhe > td{background:#f7f9fc;padding:0 0 0 18px}
#app tr.pend-detalhe table{margin-bottom:0;background:transparent}
#app tr.pend-detalhe table th{font-size:11px;color:#6b7a90}
#app tr.pend-linha:hover{background:#eef3fa}
#app .pend-apurar{padding:2px 10px;font-size:12px}
#app a.pend-google{color:#2563eb;margin-left:6px;font-size:11px}
#app a.pend-google:hover{color:#1d4ed8}
#app .pend-sug-placar{font-size:14px}

/* ---------- Apuracoes pendentes: visao por bilhete ---------------------
   Cada bilhete e' um bloco. Ao marcar uma derrota o corpo e' escondido e
   aparece o aviso de fechado, porque dali em diante nao ha mais o que
   lancar naquele bilhete.                                                */
#app .pend-bilhete{border:1px solid #e3e8ee;border-radius:8px;margin-bottom:14px;overflow:hidden}
#app .pend-bilhete.fechado{border-color:#f0b4b4;background:#fdf6f6}
#app .pend-bilhete-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;
	background:#f7f9fc;border-bottom:1px solid #e3e8ee;padding:10px 14px;flex-wrap:wrap}
#app .pend-bilhete-cab strong{font-size:14px}
#app .pend-bilhete-cab .text-muted{margin-left:8px;font-size:12px}
#app .pend-bilhete-resumo{padding:8px 14px 0;display:flex;gap:8px;flex-wrap:wrap}
#app .pend-bilhete-corpo{padding:8px 0 0}
#app .pend-bilhete-corpo table{margin-bottom:0}
#app .pend-bilhete-corpo th{font-size:11px;color:#6b7a90}
#app .pend-bilhete-fechado{padding:14px}
#app .pend-fechado-titulo{color:#b02a2a;font-weight:700;letter-spacing:.5px}
#app .pend-fechado-motivo{font-size:13px;margin-top:2px}
#app .pend-fechado-nota{font-size:12px;color:#6b7a90;margin-top:4px}
@media (max-width:575.98px){ #app .pend-bilhete-cab{flex-direction:column;align-items:flex-start} }