/* ==========================================================
   Money 97 Web - folha de estilo (visual Windows 95)
   ========================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #3a6ea5;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px; color: #000;
}

/* nenhum texto do sistema sai em italico */
i, em, cite, dfn, var, address { font-style: normal; }

/* O texto do layout sai em maiusculas: menus, rotulos, cabecalhos e botoes. */
body { text-transform: uppercase; }

/* Ja o que o usuario digitou aparece exatamente como foi gravado. */
input, select, textarea, option, optgroup, ::placeholder, datalist,
table.grid tbody td, table.m97-grid tbody td, .m97-list tbody td,
.m97-icon .nome, table.wz-resumo td:last-child {
  text-transform: none;
}

/* linhas que sao rotulo, e nao dado, seguem o layout */
table.grid thead th, table.m97-grid thead th, .m97-list thead th,
table.grid tfoot td, table.grid tr.grp td, .m97-list tr.grupo td {
  text-transform: uppercase;
}

a { color: #0000c0; text-decoration: underline; cursor: pointer; }
a:hover { color: #cc0000; }

/* ---------- janela ---------- */
.win {
  /* ocupa a janela inteira: o usuario trabalha o dia todo nesta tela */
  max-width: none; margin: 0; background: #d4d0c8;
  border: 0; box-shadow: none;
  display: flex; flex-direction: column; min-height: 100vh;
}

.titlebar {
  background: linear-gradient(90deg, #0a246a 0%, #3a6ea5 60%, #a6caf0 100%);
  color: #fff; font-weight: bold; padding: 3px 4px;
  display: flex; align-items: center; gap: 5px;
}
.tb-icon {
  background: #ffd700; color: #806000; border: 1px solid #806000;
  width: 15px; height: 15px; text-align: center; line-height: 13px;
  font-size: 11px; font-weight: bold;
}
.tb-text { flex: 1; font-size: 11px; }
.tb-buttons { display: flex; gap: 2px; }
.tb-buttons i, .tb-buttons a {
  display: inline-block; width: 17px; height: 15px; background: #d4d0c8;
  border: 1px outset #fff; color: #000; text-align: center; line-height: 12px;
  font-style: normal; font-size: 10px; text-decoration: none;
}
.tb-buttons a.close:hover { background: #c04040; color: #fff; }

/* ---------- menus ---------- */
.menubar { display: flex; background: #d4d0c8; border-bottom: 1px solid #808080; padding: 1px 2px; }
.menu { position: relative; }
.menu > span { display: block; padding: 3px 9px; cursor: default; }
.menu:hover > span { background: #000080; color: #fff; }
.menu > ul {
  display: none; position: absolute; left: 0; top: 100%; z-index: 90;
  background: #d4d0c8; border: 2px outset #fff; min-width: 190px;
  list-style: none; margin: 0; padding: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,.4);
}
.menu:hover > ul { display: block; }
.menu > ul li a, .menu > ul li span { display: block; padding: 3px 18px; color: #000; text-decoration: none; }
.menu > ul li a:hover { background: #000080; color: #fff; }
.menu > ul li.sep { border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 3px 1px; height: 0; }

/* ---------- barra de ferramentas ---------- */
.toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  background: #d4d0c8; padding: 3px 4px;
  border-bottom: 1px solid #808080; box-shadow: inset 0 -1px 0 #fff;
}
.tbtn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; color: #000; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
}
.tbtn:hover { border: 1px outset #fff; background: #dfdbd4; color: #000; }
.tbtn.on { border: 1px inset #808080; background: #c8c4bc; font-weight: bold; }
.tbtn.nav { color: #000060; }
.tb-sep { width: 2px; height: 20px; border-left: 1px solid #808080; border-right: 1px solid #fff; margin: 0 4px; }
.tb-find { margin-left: auto; display: flex; gap: 3px; }
.tb-find input { width: 130px; }

.ico { width: 14px; height: 14px; display: inline-block; border: 1px solid #606060; }
.ico-home      { background: #ffd700; }
.ico-accounts  { background: #4169b0; }
.ico-bills     { background: #c04040; }
.ico-reports   { background: #40a040; }
.ico-investing { background: #a040a0; }
.ico-budget    { background: #c07000; }
.ico-planner   { background: #008080; }
.ico-categories{ background: #808040; }
.ico-contents  { background: #d0d0d0; }
.ico-register  { background: #4169b0; }
.ico-reconcile { background: #6080a0; }
.ico-checks    { background: #2e8b57; }
.ico-loans     { background: #8b4513; }
.ico-find      { background: #708090; }
.ico-taxes     { background: #b03060; }

/* lista do Sumario (estilo Contents do Money 97) */
table.grid.contents-list td { border-right: 0; padding: 5px; }
table.grid.contents-list tr { cursor: pointer; }

/* ---------- corpo ---------- */
.body { display: flex; flex: 1; align-items: stretch; }

/* ---------- barra lateral ---------- */
.sidebar { width: 172px; background: #d4d0c8; border-right: 1px solid #808080; padding: 6px 5px; flex-shrink: 0; }
.sb-title {
  background: linear-gradient(90deg, #000080, #4169b0);
  color: #fff; font-weight: bold; padding: 3px 6px; margin: 8px 0 4px;
}
.sb-title:first-child { margin-top: 0; }
.sb-links { list-style: none; margin: 0; padding: 0 0 0 4px; }
.sb-links li { margin: 3px 0; }
.sb-links a { color: #000080; }
.sb-box { background: #fff; border: 1px inset #808080; padding: 4px 5px; }
.sb-box div { display: flex; justify-content: space-between; gap: 6px; padding: 1px 0; }
.sb-box .tot { border-top: 1px solid #808080; margin-top: 3px; padding-top: 3px; font-weight: bold; }

/* ---------- conteudo ---------- */
.content { flex: 1; background: #fff; border-left: 1px solid #fff; min-width: 0; display: flex; flex-direction: column; }
.banner {
  background: linear-gradient(90deg, #000080 0%, #2a4a90 45%, #7aa0d0 100%);
  padding: 7px 12px; border-bottom: 2px solid #000040;
}
.banner h1 { margin: 0; font-size: 16px; color: #fff; font-weight: bold; letter-spacing: .3px; }
.pane { padding: 10px 12px 18px; flex: 1; }

.secbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid #000080; margin: 14px 0 6px; padding-bottom: 3px;
}
.secbar:first-child { margin-top: 0; }
.secbar h2 { font-size: 12px; color: #000080; margin: 0; }
.secbar-right { display: flex; gap: 6px; align-items: center; }

/* ---------- tabelas / registro ---------- */
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th {
  background: #d4d0c8; border: 1px outset #fff; padding: 3px 5px;
  text-align: left; font-weight: bold; white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.grid td { border-bottom: 1px solid #d8d8d8; border-right: 1px solid #eee; padding: 3px 5px; vertical-align: top; }
table.grid tbody tr:nth-child(even) { background: #f4f4f4; }
table.grid tbody tr:hover { background: #e8eefa; }
table.grid tr.sel, table.grid tr.sel:hover { background: #316ac5; color: #fff; }
table.grid tr.sel a, table.grid tr.sel .amt { color: #fff; }
table.grid tr.void td { color: #909090; text-decoration: line-through; }
table.grid tfoot td { border-top: 2px solid #000080; font-weight: bold; background: #eef1f7; }
table.grid td.r, table.grid th.r { text-align: right; }
table.grid td.c, table.grid th.c { text-align: center; }
table.grid td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grid tr.future td { color: #4a4a4a; }
table.grid tr.grp td { background: #dfe4ee; font-weight: bold; color: #000080; }

.amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.amt.neg { color: #c00000; }
.muted { color: #606060; }
.small { font-size: 10px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* linha de edicao expandida do registro (estilo Money) */
tr.editrow > td { background: #eef1f7; border-top: 2px solid #000080; border-bottom: 2px solid #000080; padding: 8px; }
.editgrid { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.editgrid .fld { display: flex; flex-direction: column; gap: 2px; }
.editgrid .fld > label { font-size: 10px; color: #000080; font-weight: bold; }

/* ---------- formularios ---------- */
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px;
  border: 1px inset #808080; background: #fff; padding: 2px 3px;
}
input:focus, select:focus, textarea:focus { outline: 1px dotted #000080; }
input[readonly] { background: #ebe9e4; color: #404040; }
select { padding: 1px; }
textarea { resize: vertical; }

button, .btn, input[type=submit] {
  font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px;
  background: #d4d0c8; border: 2px outset #fff; padding: 2px 12px;
  cursor: pointer; color: #000; text-decoration: none; display: inline-block; min-width: 66px; text-align: center;
}
button:active, .btn:active, input[type=submit]:active { border-style: inset; }
button.primary, input[type=submit].primary { font-weight: bold; }
button.link { border: 0; background: none; color: #0000c0; text-decoration: underline; min-width: 0; padding: 0; }
.btn-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

form.frm { max-width: 620px; }
.frm .row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.frm .row > label { width: 160px; text-align: right; flex-shrink: 0; }
.frm .row > .in { flex: 1; display: flex; gap: 6px; align-items: center; }
.frm .row input[type=text], .frm .row select, .frm .row textarea { width: 100%; }
.frm .row input.w-s { width: 110px; flex: none; }
.frm .row .hint { color: #606060; font-size: 10px; }
fieldset { border: 1px solid #808080; margin: 10px 0; padding: 8px 10px; }
legend { color: #000080; font-weight: bold; padding: 0 4px; }

/* ---------- caixas e avisos ---------- */
.flash { border: 1px solid #808080; padding: 5px 8px; margin: 0 0 10px; background: #ffffe1; }
.flash.ok    { background: #e4f4e4; border-color: #308030; }
.flash.err   { background: #ffe4e4; border-color: #a04040; }
.flash.info  { background: #ffffe1; border-color: #a0a040; }

.box { border: 1px solid #808080; background: #fff; margin-bottom: 12px; }
.box > h3 {
  margin: 0; padding: 4px 8px; font-size: 11px; color: #fff;
  background: linear-gradient(90deg, #000080, #5a80c0);
}
.box > .in { padding: 8px; }
.cols { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.cols > * { flex: 1 1 300px; min-width: 280px; }

.tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.tile {
  border: 1px solid #808080; background: #f7f7f7; padding: 7px 10px; min-width: 150px; flex: 1;
}
.tile b { display: block; font-size: 15px; margin-top: 3px; }

.legend { list-style: none; margin: 6px 0 0; padding: 0; }
.legend li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.legend i { width: 11px; height: 11px; display: inline-block; border: 1px solid #606060; }
.legend span.v { margin-left: auto; font-variant-numeric: tabular-nums; }

.chart { background: #fff; border: 1px inset #808080; }

/* barra de progresso do orcamento */
.bar { background: #e0e0e0; border: 1px inset #808080; height: 12px; width: 100%; position: relative; }
.bar > i { display: block; height: 100%; background: #4169b0; }
.bar > i.over { background: #c04040; }

/* ---------- assistentes (Wizard do Windows 95) ---------- */
.wizard {
  background: #d4d0c8; border: 2px outset #fff; max-width: 620px; margin: 4px 0 0;
  box-shadow: 2px 2px 6px rgba(0,0,0,.35);
}
.wizard .wz-body { display: flex; background: #fff; }
.wizard .wz-art {
  width: 148px; flex-shrink: 0;
  background: linear-gradient(165deg, #000080 0%, #4169b0 60%, #a6caf0 100%);
  color: #fff; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px;
}
.wizard .wz-art b { font-size: 13px; line-height: 1.3; display: block; }
.wizard .wz-art .wz-steps { list-style: none; margin: auto 0 0; padding: 0; font-size: 10px; }
.wizard .wz-art .wz-steps li { padding: 2px 0; opacity: .65; }
.wizard .wz-art .wz-steps li.on { opacity: 1; font-weight: bold; }
.wizard .wz-art .wz-steps li.done { opacity: .85; }
.wizard .wz-main { flex: 1; padding: 14px 16px 18px; min-width: 0; }
.wizard .wz-main h2 { font-size: 12px; color: #000080; margin: 0 0 4px; }
.wizard .wz-main p.wz-hint { color: #404040; margin: 0 0 12px; }
.wizard .wz-buttons {
  border-top: 1px solid #808080; box-shadow: inset 0 1px 0 #fff;
  padding: 8px 10px; display: flex; gap: 6px; justify-content: flex-end; background: #d4d0c8;
}
.wizard .wz-buttons .left { margin-right: auto; }

/* lista de escolha do assistente (tipo de conta) */
.wz-choice { display: flex; flex-direction: column; gap: 2px; }
.wz-choice label {
  display: flex; gap: 8px; align-items: flex-start; padding: 5px 6px;
  border: 1px solid transparent; cursor: pointer;
}
.wz-choice label:hover { background: #e8eefa; }
.wz-choice label.sel { background: #316ac5; color: #fff; border-color: #000080; }
.wz-choice label.sel .d { color: #dfe8f8; }
.wz-choice input { margin-top: 1px; }
.wz-choice .t { font-weight: bold; }
.wz-choice .d { display: block; color: #505050; font-size: 10px; }

/* resumo final do assistente */
table.wz-resumo { border-collapse: collapse; width: 100%; }
table.wz-resumo td { padding: 2px 4px; border-bottom: 1px solid #e4e4e4; }
table.wz-resumo td:first-child { color: #404040; width: 45%; }
table.wz-resumo td:last-child { font-weight: bold; text-align: right; }

/* tabs (abas do estilo Money) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid #808080; margin: 8px 0 0; }
.tabs a {
  padding: 3px 12px; background: #c8c4bc; border: 1px solid #808080; border-bottom: 0;
  text-decoration: none; color: #000;
}
.tabs a.on { background: #fff; font-weight: bold; position: relative; top: 1px; }

/* pagina de login */
body.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.loginbox { width: 380px; background: #d4d0c8; border: 2px outset #fff; box-shadow: 3px 3px 10px rgba(0,0,0,.5); }
.loginbox .in { padding: 14px; }
.loginbox .art {
  background: linear-gradient(160deg, #000080, #4169b0 70%, #a6caf0);
  color: #fff; padding: 16px; text-align: center;
}
.loginbox .art h1 { margin: 0; font-size: 18px; }
.loginbox .art p { margin: 3px 0 0; font-size: 11px; }

@media (max-width: 780px) {
  .body { flex-direction: column; }
  .sidebar { width: auto; border-right: 0; border-bottom: 1px solid #808080; }
  .toolbar { overflow-x: auto; }
  .frm .row { flex-direction: column; align-items: stretch; }
  .frm .row > label { width: auto; text-align: left; }
}

@media print {
  body { background: #fff; }
  .win { border: 0; box-shadow: none; max-width: none; }
  .titlebar, .menubar, .toolbar, .sidebar, .statusbar, .btn-row, .secbar-right { display: none !important; }
  .banner { background: none; border-bottom: 2px solid #000; }
  .banner h1 { color: #000; }
}

/* ---------- barra de status ---------- */
.statusbar {
  display: flex; gap: 2px; background: #d4d0c8; border-top: 1px solid #fff; padding: 2px 3px;
}
.statusbar span { border: 1px inset #808080; padding: 1px 6px; }
.statusbar .sb1 { flex: 1; }
.statusbar .sb2 { width: 200px; }
.statusbar .sb3 { width: 120px; text-align: right; }