:root { --bg: #f8fafc; --card: #ffffff; --muted: #64748b; --border: #e2e8f0; }

.wrap { display: grid; grid-template-rows: auto 1fr;  }
.topbar { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 18px; background:#fff; border-bottom:1px solid var(--border); }
.topbar .title { display:flex; gap:10px; align-items:center; font-weight:700; font-size:1.05rem; }
.topbar .title i { font-size:1.1rem; }
.topbar .actions { display:flex; gap:10px; align-items:center; }
.pwd { display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:#fff; border-radius:10px; padding:6px 10px; }
.pwd input { border:none; outline:none; min-width:160px; }
.grid { display:grid; grid-template-columns: 420px 1fr; gap:16px; padding:9px; }
@media (max-width: 960px){ .grid { grid-template-columns: 1fr;width:97%;padding:3px; gap:12px;} 
.topbar {display:flex;flex-direction: column;}
.topbar .title { display:flex; gap:10px; align-items:center; font-weight:700; font-size:1.05rem;width:100%; }
.wrap { margin-bottom:50px; }
}
.panel {width:100%; background: var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.panel h3 { margin:0; padding:12px 14px; border-bottom:1px solid var(--border); font-size:0.95rem; font-weight:700; display:flex; gap:8px; align-items:center; }
.list { max-height: calc(100dvh - 320px); overflow-y:auto; }
.list .item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.list .item:hover { background:#f1f5f9; }
.list .title { display:flex; flex-direction:column; gap:2px;width:95% !important; }
.list .title b { font-size:0.95rem; }
.list .title span { font-size:0.75rem; color: var(--muted); }
.detail { padding:14px; display:grid; gap:14px;max-width:100%; }
.detail .head { display:flex; align-items:center; justify-content:space-between; }
.detail .name { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; }
.detail .name small { color: var(--muted); font-weight:600; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; font-size:0.92rem; }
.table th { background:#f8fafc; font-weight:700; }
.muted { color: var(--muted); }
.search { display:flex; padding:10px; border-bottom:1px solid var(--border); gap:8px; }
.search input { width:100%; border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.modal { position: fixed; inset: 0; display:none; align-items:center; justify-content:center; background: rgba(15,23,42,0.35); z-index: 60; }
.modal.active { display:flex; }
.modal .box { width:min(980px, 96vw); max-height: 90dvh; overflow:auto; background:#fff; border-radius:16px; border:1px solid var(--border); }
.modal .box header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.modal .box .body { padding:12px; display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 960px){ .modal .box .body { grid-template-columns: 1fr;max-height:70vh;overflow-y: auto;width:98%; } }
.listbox { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.listbox h4 { margin:0; padding:10px 12px; background:#f8fafc; border-bottom:1px solid var(--border); font-size:0.9rem; }
.listbox .rows { max-height: 58dvh; overflow:auto; }
.row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.row .id { font-size:0.75rem; color: var(--muted); }
.btn { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); padding:8px 12px; border-radius:10px; cursor:pointer; background:#fff; }
.btn.primary { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
.btn.ghost { background:#fff; }
.btn.danger { background:#ef4444; border-color:#ef4444; color:#fff; }

@media print {
  .topbar, aside.panel, .search, #btnGerenciar, #btnRefresh, #fecharModal, .modal { display:none !important; }
  .grid { grid-template-columns: 1fr !important; padding: 0; }
  body { background: #ffffff; }
  .panel { border: none; }
  .table th { background: #fff; }
}


/* Wrapper com scroll vertical para a tabela */
.table-wrapper {
    width:100%;
  max-height: calc(100dvh - 300px); /* ajusta conforme seu topo/rodapé */
  overflow-y: auto;
}
@media (max-width: 960px){
  .panel {width:100%; background: var(--card); border:1px solid var(--border); border-radius:14px; overflow-x:auto; }
  .table-wrapper { max-height: calc(100dvh - 340px); width:750px;}
  .btn { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); padding:4px 5px; border-radius:10px; cursor:pointer; background:#fff; }
}

/* Alinhamento e fonte para números */
.table .num {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .2px;
}

/* Imprimir somente a tabela */
@media print {
  body * { visibility: hidden !important; }
  #printOnlyTable, #printOnlyTable * { visibility: visible !important; }
  #printOnlyTable {
    position: static !important;
    inset: 0 !important;
    width: 100% !important;
    background: #fff !important;
  }
  .table-wrapper { max-height: none !important; overflow: visible !important; }
}


/* Altura máx. com rolagem vertical para a tabela */
.table-wrapper{
  max-height: calc(100dvh - 340px); /* ajuste se tiver mais/menos topo/rodapé */
  overflow-y: auto;
}
@media (max-width: 960px){
  .table-wrapper{ max-height: calc(100dvh - 340px); }
}

/* thead sticky dentro do wrapper com sombra ao rolar */
.table-wrapper thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc; /* igual ao th */
}
.table-wrapper thead.sticky-shadow th{
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

/* números à direita e monospace */
.table .num{
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  letter-spacing: .2px;
}

/* Imprimir somente a tabela */
@media print{
  body *{ visibility: hidden !important; }
  #printOnlyTable, #printOnlyTable *{ visibility: visible !important; }
  #printOnlyTable{ position: static !important; inset: 0 !important; width:100% !important; background:#fff !important; }
  .table-wrapper{ max-height: none !important; overflow: visible !important; }
}

/* Botões pílula mais leves */
.btn { border-radius: 999px; font-weight: 600; }

/* Caixas de lista com título enxuto */
.listbox h4 { display:flex; align-items:center; justify-content:space-between; }

/* Linha de toggles */
.toggle-line { display:flex; align-items:center; gap:10px; }

/* Switch minimalista */
.switch { position:relative; display:inline-block; width:44px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; inset:0; background:#e2e8f0; border-radius:999px; transition:.2s; }
.switch .slider:before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:.2s; }
.switch input:checked + .slider { background:#22c55e; }
.switch input:checked + .slider:before { transform: translateX(20px); }


/* Cabeçalho (maior altura) */
.table-wrapper thead th{
  padding: 14px 12px !important;           /* era ~10px */
  line-height: 1.2;
  vertical-align: middle;
  font-size:1.2rem !important;
}

/* Rodapé fixo (sticky) */
.table-wrapper tfoot td{
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: #f8fafc;          /* combina com thead */
  border-top: 1px solid var(--border);
}

/* Sombras quando rolar (topo e base) */
.table-wrapper thead.sticky-shadow th{
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.table-wrapper tfoot.sticky-shadow td{
  box-shadow: 0 -2px 0 rgba(0,0,0,.06);
}

/* (já existe) wrapper com rolagem; ajuste se quiser mais/menos altura útil */
/* .table-wrapper { max-height: calc(100dvh - 300px); } */

/* Impressão – sem sticky/rolagem */
@media print{
  .table-wrapper{ max-height: none !important; overflow: visible !important; }
  .table-wrapper thead th,
  .table-wrapper tfoot td{ position: static !important; box-shadow: none !important; }
}

/* ====== Fontes mais leves no modal ====== */
.modal .box{ font-size:0.92rem; }
.modal .box header{ font-size:0.95rem; }
.modal .box .row b{ font-size:0.95rem; }
.modal .box .row .muted, .modal .box .id{ font-size:0.8rem; }
.modal .box .btn{ font-size:0.85rem; padding:6px 10px; }
.modal .box .rows .row{ padding:8px 10px; }
.listbox h4{ font-size:0.85rem; }
.toggle-line .muted{ font-size:0.85rem; }


/* Só ícones no mobile para botões principais */
@media (max-width: 640px){
  /* Topbar */
  #btnGerenciar, #btnRefresh,
  /* Cabeçalho do detalhe */
  #btnAtualizar, #btnExport, #btnPrint{
    font-size: 0;              /* esconde o texto */
    gap: 0;                    /* remove espaço entre ícone e texto */
    padding: 10px;
    width: 42px; height: 42px; /* vira um botão circular */
    border-radius: 999px;
    justify-content: center;
  }
  #btnGerenciar i, #btnRefresh i,
  #btnAtualizar i, #btnExport i, #btnPrint i{
    font-size: 1.45rem;        /* mantém ícone visível */
    margin: 0;                 /* sem espaçamento lateral */
  }
  .detail { padding:5px; display:grid; gap:14px;max-width:100%; }
.detail .head { display:flex; align-items:center; justify-content:flex-start; }
  .head { width:100%;display:flex; align-items:center; justify-content:flex-start; }

}



/* em carteira_diaria/assets/diaria.css */
.list .num{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

/* Badges de valores (PL / Caixa) */
.badgeRow{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  width:100%;
}
.badgeStat{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #f8fafc;
  width:40%;
}
.badgeStat .label{
  font-size: .70rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--muted);
  line-height: 1;
}
.badgeStat .value{
  font-size: 1.0rem !important;
  line-height: 1.15;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Cores por tipo */
.badgeStat.pl{
  background: #e0f2fe;            /* azul clarinho */
  border-color: #bae6fd;
}
.badgeStat.pl .label{ color:#0369a1; }
.badgeStat.pl .value{ color:#0c4a6e; }

.badgeStat.caixa{
  background: #dcfce7;            /* verde clarinho */
  border-color: #bbf7d0;
}
.badgeStat.caixa .label{ color:#15803d; }
.badgeStat.caixa .value{ color:#065f46; }

/* Mobile: badges ficam mais compactos */
@media (max-width: 640px){
  .badgeStat{ padding: 6px 8px; }
  .badgeStat .value{ font-size: .84rem; }
}


/* Drag handle + estados */
.row .drag-handle { color:#94a3b8; cursor: grab; margin-right:8px; }
.row.dragging { opacity: .6; }
.rows.reordering .row { transition: transform .12s ease; }

/* Botão salvar ordem aparece enxuto no header da listbox */
.listbox h4 .save-order {
  margin-left: auto;
  display: inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); background:#fff; padding:6px 10px;
  border-radius: 999px; cursor:pointer; font-size:.85rem;
}
.listbox h4 .save-order:disabled { opacity:.5; cursor:not-allowed; }


/* Rodapé de totais (PL / Caixa) */
.totals-footer{
  max-width:600px;
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  padding:5px 16px; margin:0px 0px 0 18px;
  background:#fff; border:0px solid var(--border); border-radius:12px;
}
.totals-footer .badgeStat{ padding:8px 12px; }
.totals-footer .badgeStat .label{ font-size:.72rem; }
.totals-footer .badgeStat .value{ font-size:.95rem; }

/* Mobile: encosta nas bordas e quebra linha se precisar */
@media (max-width: 640px){
  .totals-footer{ margin:12px 12px 0 12px; flex-wrap:wrap; justify-content:flex-start; }
}


.carteira-picker{ display:flex; align-items:center; gap:8px; }
.carteira-picker select{
  min-width: 220px; border:1px solid var(--border); border-radius:10px; padding:6px 10px; background:#fff;
}
@media (max-width:640px){
  .carteira-picker select{ min-width: 160px; }
}

#btnExcluirCarteira{ border-color:#fecaca; }