/* Financial Management Tool — shared styles */
* { box-sizing: border-box; }
:root {
  --brand: #1e7f4f; --brand-dk: #14603a; --ink: #1c2733; --mut: #66738a;
  --bg: #f2f5f8; --card: #ffffff; --line: #e3e8ee; --bad: #c0392b; --warn: #b8860b;
}
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
a { color: var(--brand); }

/* header / nav */
#nav { background: linear-gradient(120deg, var(--brand-dk), var(--brand)); color: #fff; padding: 14px 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.logo { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.bname { font-size: 18px; font-weight: 700; }
.bsub { font-size: 12px; opacity: .85; }
#nav nav { display: flex; gap: 4px; flex-wrap: wrap; }
#nav nav a { color: #eaf4ee; text-decoration: none; padding: 9px 16px; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 13px; }
#nav nav a:hover { background: rgba(255,255,255,.12); }
#nav nav a.on { background: var(--bg); color: var(--brand-dk); }
.warn { background: #fff3cd; color: #7a5c00; padding: 6px 12px; border-radius: 6px; margin: 8px 0; font-size: 12px; }

/* layout */
main.wrap, main#app { max-width: 1180px; margin: 0 auto; padding: 20px 22px 60px; }
h1 { font-size: 22px; margin: 6px 0 16px; }
h2 { font-size: 15px; margin: 0 0 12px; color: var(--brand-dk); }
.muted { color: var(--mut); font-weight: 400; }
.small { font-size: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(16,32,48,.04); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid2 .card { margin-bottom: 0; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.rowflex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.scrollx { overflow-x: auto; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--mut); border-radius: 10px; padding: 12px 14px; }
.kpi.good { border-left-color: var(--brand); }
.kpi.bad { border-left-color: var(--bad); }
.klabel { font-size: 12px; color: var(--mut); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.kval { font-size: 21px; font-weight: 700; margin: 2px 0; }
.ksub { font-size: 12px; color: var(--mut); }
.bignum { font-size: 24px; font-weight: 700; margin: 6px 0; }

/* tables */
table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tbl th { color: var(--mut); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.pos { color: var(--brand-dk); } .neg { color: var(--bad); }
.totalrow td { font-weight: 700; border-top: 2px solid #c9d2dc; background: #f7fafc; }
.totalrow.net td { background: #eef7f1; }
.grouprow td { background: #eef2f6; font-weight: 700; color: var(--brand-dk); font-size: 12px; }
.muted2 td { color: var(--mut); font-style: italic; }
.sticky { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 190px; white-space: normal !important; }
.totalrow .sticky, .grouprow .sticky { background: inherit; }
.tagwarn { background: #fff3cd; color: #7a5c00; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; }
.acts { white-space: nowrap; }

/* ============================================================
   WAVE 9, STAGE 3b, WP4.6 — TABLES AND ITEMS, ALIGNED.

   "Ensure tables and items are properly arranged and aligned
   across all modules."

   The rules below are written once and apply to every table in
   the system, because a rule about alignment that is applied
   module by module is a rule that will be inconsistent by the
   third module.

   WHAT WAS WRONG.

     • A column header sat left while its figures sat right, so
       the eye had to travel to find the pairing. Headers now
       follow their column.
     • Every cell was nowrap, so a long name pushed the table
       sideways and the action buttons off the screen. Names and
       reasons wrap now; figures, dates and buttons do not,
       because those are the things that must never break.
     • Action buttons were packed against each other and against
       the cell edge, at different heights depending on how many
       there were. They are laid out now.
     • Head rows scrolled away on a long table.
     • A figure and a total used different digit spacing, so
       columns of numbers did not line up under each other even
       when they were right-aligned.
   ============================================================ */

/* a header belongs over its own column */
.tbl th.num { text-align: right; }
.tbl th.acts, .tbl td.acts { text-align: right; }

/* figures line up under one another, everywhere, including totals */
.tbl td.num, .tbl th.num, .kval, .bignum, .totalrow td { font-variant-numeric: tabular-nums; }

/* prose may wrap; figures, dates and buttons may not */
.tbl td { white-space: normal; }
.tbl td.num, .tbl td.acts, .tbl td.nowrap, .tbl th { white-space: nowrap; }
.tbl td { vertical-align: top; }
.tbl td.num, .tbl td.acts { vertical-align: middle; }

/* the first column carries the name of the thing and gets the room */
.tbl td:first-child { min-width: 120px; }

/* a long table keeps its headings in view */
.tbl thead th { position: sticky; top: 0; z-index: 3; background: var(--card, #fff); box-shadow: inset 0 -1px 0 var(--line); }
.scrollx { overflow-x: auto; max-width: 100%; }

/* buttons inside a cell are laid out rather than run together */
.tbl td.acts { padding-top: 4px; padding-bottom: 4px; }
.tbl td.acts .mini, .tbl td .mini { margin: 2px 0 2px 4px; vertical-align: middle; }
.tbl td.acts > .mini:first-child { margin-left: 0; }

/* a row is easier to follow across a wide table */
.tbl tbody tr:nth-child(even) > td { background: rgba(0, 0, 0, .015); }
.tbl tbody tr:hover > td { background: rgba(31, 122, 84, .06); }
.tbl tbody tr:nth-child(even) > td.sticky, .tbl tbody tr:hover > td.sticky { background: #fff; }
.totalrow td, .grouprow td, .totalrow.net td { background-image: none; }

/* the small key figures at the top of a page keep one baseline */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: stretch; }
.kpi { display: flex; flex-direction: column; justify-content: flex-start; }

/* a card heading and the controls beside it sit on one line, and
   wrap as a unit on a narrow screen rather than overlapping */
.rowflex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rowflex > .spacer { flex: 1 1 auto; }
.rowflex h2 { margin: 0; }

/* a status word is the same width wherever it appears */
.pos, .neg, .tagwarn { display: inline-block; }

@media (max-width: 700px) {
  .tbl th, .tbl td { padding: 6px; }
  .tbl td:first-child { min-width: 0; }
}

/* forms */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: end; }
.form.grid3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--mut); }
input, select { padding: 8px 10px; border: 1px solid #c9d2dc; border-radius: 8px; font: inherit; color: var(--ink); background: #fff; min-width: 0; }
input:focus, select:focus { outline: 2px solid #bfe3d0; border-color: var(--brand); }
input.cell { width: 96px; padding: 4px 6px; text-align: right; border-radius: 6px; }
input.cell.wide { width: 100%; text-align: left; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; grid-column: 1 / -1; margin-top: 4px; }
.btn { background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--brand-dk); }
.btn.ghost { background: #fff; color: var(--brand-dk); border: 1px solid var(--brand); }
.btn.danger { background: #fff; color: var(--bad); border: 1px solid var(--bad); }
.btn.filebtn { position: relative; overflow: hidden; display: inline-block; }
.btn.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mini { border: 1px solid #c9d2dc; background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 12px; }
.mini:hover { border-color: var(--brand); color: var(--brand-dk); }
.mini.danger { color: var(--bad); }
.warntext { color: var(--bad); font-weight: 600; }

/* charts */
svg.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--mut); margin-bottom: 4px; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* reports */
.report { padding: 28px 34px; }
.rhead { text-align: center; margin-bottom: 18px; }
.rname { font-size: 19px; font-weight: 800; letter-spacing: .3px; }
.rtitle { font-size: 15px; font-weight: 700; color: var(--brand-dk); margin-top: 2px; }
.rperiod { font-size: 13px; margin-top: 2px; }
.rstd { font-size: 11px; color: var(--mut); margin-top: 4px; }
table.rtbl { width: 100%; max-width: 720px; margin: 0 auto; border-collapse: collapse; font-size: 13.5px; }
.rtbl td, .rtbl th { padding: 5px 8px; }
.rtbl th { border-bottom: 1.5px solid var(--ink); font-size: 12px; }
.rtbl .sect td { font-weight: 800; padding-top: 14px; text-transform: uppercase; font-size: 12px; letter-spacing: .4px; }
.rtbl .sect2 td { font-weight: 700; padding-top: 8px; }
.rtbl .sub td { font-weight: 700; border-top: 1px solid #98a4b5; }
.rtbl .strong td { font-weight: 800; border-top: 1px solid #98a4b5; }
.rtbl .grand td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); }
.rnote { max-width: 720px; margin: 14px auto 0; font-size: 12px; color: var(--mut); }
.rfoot { max-width: 720px; margin: 22px auto 0; font-size: 11px; color: var(--mut); border-top: 1px solid var(--line); padding-top: 8px; text-align: center; }

/* print */
@media print {
  #nav, .no-print, h1.no-print { display: none !important; }
  body { background: #fff; }
  main#app { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; padding: 0; }
  .report { padding: 0; }
}

/* ---- login & user chip (unified system) ---- */
body.loginbg { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(135deg, #14603a, #1e7f4f 55%, #2a9d64); }
.loginbox { background: #fff; border-radius: 16px; padding: 34px 38px; width: 380px; max-width: 92vw;
  box-shadow: 0 18px 50px rgba(8, 40, 24, .35); display: flex; flex-direction: column; gap: 12px; }
.loginbox h1 { font-size: 19px; margin: 0; text-align: center; }
.loginbox .lsub { margin: 0 0 4px; text-align: center; color: var(--mut); font-size: 12.5px; }
.loginbox .lnote { margin: 6px 0 0; color: var(--mut); font-size: 11.5px; text-align: center; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 14px; }
.auth-slogan { font-size: 13px; font-weight: 700; color: var(--brand-dk); letter-spacing: .3px; text-align: center; text-transform: uppercase; margin-top: 4px; }
.logo.lbig { width: 108px; height: 108px; font-size: 24px; margin: 0 auto; background: var(--brand); color: #fff; }
.lerr { color: var(--bad); font-size: 12.5px; font-weight: 600; text-align: center; min-height: 16px; }
.btn.lwide { width: 100%; padding: 11px; font-size: 15px; }
.uchip { text-align: right; line-height: 1.25; margin-right: 2px; }
.uchip b { display: block; font-size: 13px; }
.uchip span { font-size: 11px; opacity: .85; }
.cswitch { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; max-width: 240px; }
.cswitch option { color: var(--ink); }
.mini.light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); padding: 5px 10px; }
.mini.light:hover { background: rgba(255,255,255,.28); color: #fff; }
#nav .brand { flex-wrap: wrap; gap: 10px; }

/* ---- documents & print (enhancement) ---- */
.rtitle { text-transform: uppercase; }
.doctbl { margin-top: 14px; }
.docmeta { margin-top: 10px; }
.docmeta td { border: none; }
.docsign { margin-top: 34px; }
.docsign td { border: none; padding-top: 24px; font-size: 12.5px; color: var(--mut); }
.tagme { background: #d9efe3; color: var(--brand-dk); padding: 1px 7px; border-radius: 10px; font-size: 11px; }
@media print {
  body.printdoc #app > :not(#docviewwrap) { display: none !important; }
  body.printdoc .kpis, body.printdoc h1 { display: none !important; }
  #docviewwrap .card { border: none; box-shadow: none; }
}

/* ---- password eye & login links ---- */
.pwwrap { display: flex; gap: 6px; }
.pwwrap input { flex: 1; min-width: 0; }
.eye { border: 1px solid #c9d2dc; background: #fff; border-radius: 8px; padding: 0 10px; cursor: pointer; font-size: 14px; }
.eye:hover { border-color: var(--brand); }
.llink { display: block; text-align: center; font-size: 13px; margin-top: 2px; }

/* ---- party form modal ---- */
.pmodal { position: fixed; inset: 0; background: rgba(12, 30, 20, .45); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.pbox { background: #fff; border-radius: 14px; padding: 22px 26px; width: 520px; max-width: 94vw;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 18px 50px rgba(8, 40, 24, .4); }
.payinfo { border-top: 1px solid var(--line); padding-top: 8px; }

/* ---- company logo ---- */
.logo.haslogo { background: #fff; padding: 3px; }
.logo.haslogo img { width: 250%; height: 230%; object-fit: contain; border-radius: 7px; display: block; }
.doclogo { height: 60px; max-width: 220px; object-fit: contain; display: block; margin: 0 auto 6px; }
.logoprev { height: 46px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: #fff; }

/* ---- standard document letterhead (proforma invoice format) ---- */
.lhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 6px; }
.lhead-logo { max-height: 86px; max-width: 220px; object-fit: contain; }
.lhead-noimg { width: 72px; height: 72px; border-radius: 12px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.lhead-co { text-align: right; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.lhead-name { font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.lhead-rule { border-bottom: 3px solid var(--brand-dk); margin-bottom: 14px; }
.dtitle { text-align: center; font-size: 17px; font-weight: 800; letter-spacing: 1px; color: var(--brand-dk); text-transform: uppercase; margin: 8px 0 14px; }
.dmeta { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 8px; flex-wrap: wrap; }
.dbill { min-width: 240px; }
.dbill-name { font-weight: 700; font-size: 13.5px; margin: 2px 0; }
.dref { text-align: right; font-size: 13px; line-height: 1.7; }
.dref span { color: var(--mut); }
.dsect, h3.dsect { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-dk); margin: 16px 0 4px; }
.rtbl .nte { width: 46px; color: var(--mut); font-size: 12px; }
.rtbl .notetext { white-space: normal; color: var(--ink); font-size: 12.5px; padding-bottom: 10px; }
.rtbl thead th { vertical-align: bottom; }

/* ---- menu bar: drop-down groups + search ---- */
nav.navbar { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.navlink { color: #eaf4ee; text-decoration: none; padding: 9px 14px; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 13px; display: inline-block; }
.navlink:hover { background: rgba(255,255,255,.12); }
.navlink.on { background: var(--bg); color: var(--brand-dk); }
.navgrp { position: relative; display: inline-block; }
.navgrp .caret { font-size: 10px; opacity: .8; }
.navdd { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 190px;
  border: 1px solid var(--line); border-radius: 0 10px 10px 10px; box-shadow: 0 12px 30px rgba(10,40,25,.22); z-index: 60; padding: 6px; }
.navgrp:hover .navdd, .navgrp.open .navdd { display: block; }
.navdd a { display: block; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 8px; }
.navdd a:hover { background: var(--bg); color: var(--brand-dk); }
.navdd a.on { background: var(--bg); color: var(--brand-dk); }
.navsearch { position: relative; padding-bottom: 4px; }
.navsearch input { border: none; border-radius: 8px; padding: 7px 12px; font-size: 13px; width: 190px; background: rgba(255,255,255,.92); }
.navsearch input:focus { outline: 2px solid rgba(255,255,255,.6); background: #fff; }
.navres { right: 0; left: auto; border-radius: 10px 0 10px 10px; }
.navnone { display: block; padding: 8px 12px; color: var(--mut); font-size: 13px; }
@media print { #nav { display: none !important; } }


/* ---- login screen: responsive (Update Pack 3.1) ---- */
body.loginbg { padding: 24px 16px; box-sizing: border-box; }
.loginbox { width: 100%; max-width: 400px; box-sizing: border-box; }
.loginbox form { display: flex; flex-direction: column; gap: 12px; }
.loginbox label { display: block; font-size: 13px; font-weight: 600; }
.loginbox input { width: 100%; box-sizing: border-box; font-size: 16px; padding: 11px 12px;
  border: 1px solid #c9d2dc; border-radius: 9px; margin-top: 4px; }
.loginbox input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.loginbox .ltitle { font-size: 18px; line-height: 1.25; }
.lerr:empty { display: none; }
.lerr { background: #fdecec; border: 1px solid #f5c2c2; border-radius: 8px; padding: 8px 10px; }
.lerr.ok { background: #eaf7ef; border-color: #b7e0c6; color: var(--brand-dk); }
.lmode { font-size: 11.5px; text-align: center; margin: 8px 0 0; padding: 7px 9px; border-radius: 8px; line-height: 1.45; }
.lmode.ok { background: #eaf7ef; color: #14603a; }
.lmode.warn { background: #fff6e5; color: #8a5a00; }
.lmode.bad { background: #fdecec; color: #a11b1b; }
.loginbox .eye { min-width: 44px; }
.btn.lwide:disabled { opacity: .7; cursor: progress; }

@media (max-width: 480px) {

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  body.loginbg {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    overflow-x: hidden;
  }

  .loginbox {
    width: 100%;
    max-width: 420px;
    min-height: calc(80vh - 32px);
    padding: 24px 20px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    margin: 0;
    box-sizing: border-box;
  }

  .auth-brand {
    margin-bottom: 12px;
  }

  .logo.lbig {
    width: 80px;
    height: 80px;
  }

  .loginbox .ltitle {
    font-size: 18px;
    line-height: 1.3;
  }

  .loginbox .lsub,
  .loginbox .lnote {
    font-size: 13px;
    line-height: 1.6;
  }

  .btn.lwide {
    width: 100%;
    padding: 14px;
    font-size: 15px;
  }

  .loginbox input,
  .loginbox select,
  .loginbox textarea {
    font-size: 16px;
    /* kuzuia zoom ya Safari */
  }

}
@media (max-height: 520px) and (orientation: landscape) {
  body.loginbg { align-items: flex-start; }
  .logo.lbig { width: 56px; height: 56px; }
  .auth-brand { margin-bottom: 6px; }
  .loginbox { padding: 18px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .loginbox { animation: lfade .25s ease-out; }
  @keyframes lfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

#app-toast-root {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 24px));
}
.app-toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(28, 39, 51, .96);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 14px 28px rgba(8, 20, 15, .24);
  pointer-events: auto;
  animation: app-toast-in .18s ease-out;
}
.app-toast.hide { opacity: 0; transform: translateY(-6px); transition: .18s ease; }
.app-toast.success { border-left: 4px solid var(--brand); }
.app-toast.error { border-left: 4px solid var(--bad); }
.app-toast.warning { border-left: 4px solid var(--warn); }
.app-toast.info { border-left: 4px solid #7c8aa0; }
.app-toast-title { flex: 1; font-size: 13px; line-height: 1.4; font-weight: 600; }
.app-toast-close { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
@keyframes app-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }