/* jdeRG page styles on top of the jdweb theme (uses its CSS variables). */

.page { max-width: 72rem; margin: 0 auto; padding: 20px 22px; }

.btn { display: inline-block; background: var(--mag); color: #1a0410;
  border-radius: 4px; padding: 9px 16px; text-decoration: none; font-weight: 600;
  box-shadow: 0 0 12px rgba(255, 46, 151, 0.45); }
.btn:hover { filter: brightness(1.1); }
.lead, .muted { color: var(--mut); }

/* landing */
.hero { padding: 8px 0 4px 0; max-width: 46rem; }
.hero h1 { color: var(--green); text-shadow: 0 0 8px rgba(0, 255, 65, 0.4); }
.tiergrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tiercard { background: var(--card); border: 1px solid var(--bd); border-radius: 6px;
  padding: 14px 18px; }
.tiercard h3 { margin-top: 0; color: var(--blue); }
.tiercard .price { color: var(--green); font-size: 1.25em; font-weight: 600; }
.tiercard ul { padding-left: 1.2em; color: var(--mut); }
.tiercard li { margin: 0.3em 0; }

/* viewer */
.dropzone { border: 2px dashed var(--bd2); border-radius: 8px;
  padding: 2.5rem 1rem; text-align: center; cursor: pointer; margin: 1rem 0; }
.dropzone:hover, .dropzone.drag { border-color: var(--green);
  background: rgba(0, 255, 65, 0.05); }
.demo-row { margin: 0.5rem 0 1.5rem 0; }
.demo-row a { margin-right: 1rem; color: var(--cyan); }
.viewer-hint { color: var(--mut); font-size: 0.9em; }

/* invoice rendering (fragment) */
.inv { background: var(--panel); border: 1px solid var(--bd); border-radius: 6px;
  padding: 18px 20px; margin-top: 1rem; }
.inv-head { display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 0.5rem; }
.inv-head h2 { margin: 0; color: var(--green); }
.inv-badge { border: 1px solid var(--bd2); color: var(--blue); border-radius: 4px;
  padding: 0.15rem 0.5rem; font-size: 0.8em; white-space: nowrap; }
.inv-meta { color: var(--mut); font-size: 0.9em; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.party { background: var(--card); border: 1px solid var(--bd); border-radius: 5px;
  padding: 12px 14px; }
.party h3 { margin: 0 0 0.5rem 0; font-size: 0.8em; text-transform: uppercase;
  letter-spacing: 1px; color: var(--mut); }
.party p { margin: 0.3rem 0; }
.tblwrap { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.inv-table th { color: var(--mut); font-size: 0.8em; text-transform: uppercase;
  letter-spacing: 1px; }
.inv-table th, .inv-table td { text-align: left; padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--bd); vertical-align: top; }
.inv-table .num { text-align: right; white-space: nowrap; }
.inv-totals { margin-left: auto; width: auto; min-width: 24rem; max-width: 100%; }
.inv-totals td { border-bottom: none; }
.inv-totals .grand td { border-top: 2px solid var(--bd2); font-weight: bold;
  color: var(--green); }
@media (max-width: 44rem) {
  .inv-parties { grid-template-columns: 1fr; }
  .inv-totals { min-width: 0; width: 100%; }
}

/* forms (theme styles inputs only inside .modal / form.add) */
.frm { background: var(--panel); border: 1px solid var(--bd); border-radius: 6px;
  padding: 16px 18px; max-width: 46rem; }
.frm label { display: block; font-size: 11px; color: var(--mut); margin: 10px 0 4px;
  text-transform: uppercase; letter-spacing: 1px; }
.frm input, .frm select, .frm textarea { width: 100%; background: var(--bg);
  color: var(--ink); border: 1px solid var(--bd2); border-radius: 4px;
  padding: 8px 10px; font-size: 14px; font-family: inherit; }
.frm textarea { min-height: 60px; resize: vertical; }
.frm .row2 { display: flex; gap: 10px; }
.frm .row2 > div { flex: 1; }
.frm .actions { margin-top: 16px; display: flex; gap: 10px; align-items: center; }
.frm-wide { max-width: none; }
.msg-ok { color: var(--green); }
.msg-err { color: var(--red); }
.frm input.miss, .frm select.miss { border-color: var(--red);
  box-shadow: 0 0 6px rgba(255, 65, 65, 0.25); }
.frm input.warn-field { border-color: var(--amber); }
.field-legend { font-size: 0.85em; color: var(--mut); }
.field-legend .lg-red { color: var(--red); }
.field-legend .lg-amber { color: var(--amber); }

/* list tables + position editor */
.list-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.list-table th { color: var(--mut); font-size: 0.8em; text-transform: uppercase;
  letter-spacing: 1px; }
.list-table th, .list-table td { text-align: left; padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bd); }
.list-table .num { text-align: right; white-space: nowrap; }
.list-table a { color: var(--cyan); }
#pos-table input { min-width: 4rem; }
#pos-table .pos-bez { min-width: 16rem; }
.sum-preview { text-align: right; color: var(--green); font-weight: 600;
  margin: 0.5rem 0; }

/* validation report */
.chk { border-left: 4px solid; border-radius: 4px; padding: 0.5rem 0.9rem;
  margin: 0.5rem 0; }
.chk-error { border-color: var(--red); background: rgba(255, 65, 65, 0.07); }
.chk-warning { border-color: var(--amber); background: rgba(255, 176, 0, 0.07); }
.chk-ok { border-left: 4px solid var(--green); background: rgba(0, 255, 65, 0.07);
  border-radius: 4px; padding: 0.5rem 0.9rem; margin: 0.5rem 0; }