/* app-replica.css — the Addtivity Finance window, redrawn for the browser.
 *
 * Every token here is copied from the real program, not invented:
 * AddtivityFinance/App.xaml ("Addtivity Light" palette), Theme.xaml (Card, H1/H2,
 * NavButton, SegButton, PrimaryButton, GhostButton), MainWindow.xaml (230px sidebar,
 * brand lockup, nav groups). If the app's theme changes, change it here too —
 * the demo's one promise is that it looks like the download.
 *
 * The nav glyphs are the same emoji the app uses, forced to text presentation
 * (U+FE0E) because WPF renders them as monochrome outlines — a color emoji here
 * would look LESS like the real program, not more.
 */

.aw{
  /* ---- palette: App.xaml lines 24-52, verbatim ---- */
  --aw-bg:#F9F6ED; --aw-card:#FFFFFF; --aw-card-border:#E6DDC9;
  --aw-field-bg:#FDFCF6; --aw-field-border:#DBD0B4;
  --aw-hover:#F1EADA; --aw-selected:#E6DDC9;
  --aw-sidebar:#023D3E; --aw-nav-header:#7FA9AA;
  --aw-accent:#023D3E; --aw-accent2:#D2D758;
  --aw-text:#023D3E; --aw-text-dim:#5E7A7B; --aw-danger:#C4453B;
  --aw-on-accent:#F9F6ED;
  --aw-sb-text:#F9F6ED; --aw-sb-text-dim:#9EBFC0;
  --aw-sb-selected:#0A5455; --aw-sb-hover:#06494A;
  /* chart + status colours read off the rendered app */
  --aw-chart:#7B72EE; --aw-green:#16A34A; --aw-amber:#E8A020; --aw-badge:#F87171;

  font-family:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:13px;
  color:var(--aw-text);
  background:var(--aw-bg);
  display:flex;
  flex-direction:column;
  height:860px;
  border:1px solid #C9C2AE;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
  text-align:left;
}

/* ---- Windows title bar: it's a Windows program, and the frame should say so ---- */
.aw-titlebar{
  height:36px; flex-shrink:0;
  background:#FDFCF6; border-bottom:1px solid var(--aw-card-border);
  display:flex; align-items:center; gap:9px; padding:0 0 0 12px;
  font-size:12px; color:var(--aw-text-dim);
}
.aw-titlebar .aw-appicon{ width:16px; height:16px; flex-shrink:0; }
.aw-title{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aw-winbtns{ display:flex; height:100%; }
.aw-winbtn{
  width:46px; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--aw-text-dim); user-select:none;
}
.aw-winbtn.close:hover{ background:#C42B1C; color:#fff; }
.aw-winbtn:not(.close):hover{ background:var(--aw-hover); }

.aw-body{ flex:1; display:flex; min-height:0; }

/* ---- Sidebar: MainWindow.xaml, 230px, deep teal ---- */
.aw-side{
  width:230px; flex-shrink:0;
  background:var(--aw-sidebar);
  border-right:1px solid var(--aw-card-border);
  display:flex; flex-direction:column;
  color:var(--aw-sb-text-dim);
}
.aw-brand{ display:flex; align-items:center; margin:26px 18px 10px 22px; flex-shrink:0; }
.aw-brand svg{ width:34px; height:34px; flex-shrink:0; }
.aw-brand-text{ margin-left:12px; }
.aw-brand-name{ font-family:'Melodrama',Georgia,serif; font-weight:500; font-size:15px; line-height:17px; color:var(--aw-sb-text); }
.aw-brand-sub{ font-size:11px; font-weight:700; letter-spacing:0.5px; margin-top:1px; color:var(--aw-accent2); }

.aw-nav{ flex:1; overflow-y:auto; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:rgba(210,215,88,0.5) transparent; }
.aw-nav::-webkit-scrollbar{ width:6px; }
.aw-nav::-webkit-scrollbar-thumb{ background:rgba(210,215,88,0.45); border-radius:3px; }

.aw-nav-header{
  font-size:10px; font-weight:700; letter-spacing:0.5px;
  color:var(--aw-nav-header);
  margin:16px 0 4px 26px;
}
.aw-nav-btn{
  display:flex; align-items:center; width:calc(100% - 24px);
  margin:3px 12px; padding:11px 14px;
  background:transparent; border:none; border-radius:10px;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--aw-sb-text-dim);
  cursor:pointer; text-align:left; position:relative;
}
.aw-nav-btn:hover{ background:var(--aw-sb-hover); }
.aw-nav-btn.active{ background:var(--aw-sb-selected); color:var(--aw-sb-text); }
.aw-nav-btn:focus-visible{ outline:2px solid var(--aw-accent2); outline-offset:-2px; }
.aw-nav-glyph{ font-size:13px; width:17px; text-align:center; flex-shrink:0;
  font-family:"Segoe UI Symbol","Segoe UI Emoji",inherit; }
.aw-nav-label{ margin-left:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aw-nav-badge{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:var(--aw-badge); color:#0B1220;
  font-size:10.5px; font-weight:600;
  border-radius:9px; padding:1px 7px; min-width:20px; text-align:center;
}
.aw-nav-add{
  display:block; width:calc(100% - 24px); margin:2px 12px 6px;
  padding:7px 14px; background:transparent;
  border:1px solid var(--aw-sb-hover); border-radius:9px;
  font-family:inherit; font-size:12px; color:var(--aw-sb-text-dim);
  cursor:pointer; text-align:left;
}
.aw-nav-add:hover{ background:var(--aw-sb-hover); color:var(--aw-sb-text); }

.aw-side-foot{ margin:8px 18px 14px 24px; flex-shrink:0; }
.aw-side-foot .t1{ font-size:11px; font-weight:600; color:var(--aw-sb-text-dim); }
.aw-side-foot .t2{ font-size:11px; color:var(--aw-nav-header); margin-top:3px; line-height:1.4; }

/* ---- Content pane ---- */
.aw-main{ flex:1; min-width:0; overflow-y:auto; padding:28px 36px 40px;
  scrollbar-width:thin; scrollbar-color:#C9C2AE transparent; }
.aw-main::-webkit-scrollbar{ width:8px; }
.aw-main::-webkit-scrollbar-thumb{ background:#C9C2AE; border-radius:4px; }

.aw-h1{ font-family:'Melodrama',Georgia,serif; font-weight:500; font-size:26px; margin:0; }
.aw-pagesub{ font-size:12px; color:var(--aw-text-dim); margin:4px 0 0; line-height:1.5;
  white-space:pre-line; /* the real pages break their summary onto two lines */ }
.aw-h2{ font-size:16px; font-weight:600; margin:0; }
.aw-dim{ font-size:12px; color:var(--aw-text-dim); }
.aw-stat{ font-size:22px; font-weight:700; }
.aw-label{ font-size:11px; font-weight:600; color:var(--aw-text-dim); }

.aw-pagehead{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:22px; }

.aw-card{
  background:var(--aw-card);
  border:1px solid var(--aw-card-border);
  border-radius:16px;
  padding:20px;
}

/* stat cards: pastel icon chip + big number + dim label */
.aw-statrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.aw-statrow.cols5{ grid-template-columns:repeat(5,1fr); }
.aw-chip{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; margin-bottom:26px;
  font-family:"Segoe UI Symbol","Segoe UI Emoji",inherit;
}
.aw-chip.lav{ background:#E6DFF5; } .aw-chip.blu{ background:#D9EEF2; }
.aw-chip.pnk{ background:#F8D9E4; } .aw-chip.tea{ background:#D5EDE4; }
.aw-chip.yel{ background:#F6ECC8; }
.aw-statlbl{ font-size:12px; color:var(--aw-text-dim); margin-top:4px; }

/* action cards (Dashboard top row) */
.aw-actionrow{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-bottom:22px; }
.aw-action{ cursor:pointer; transition:background .12s ease; }
.aw-action:hover{ background:var(--aw-field-bg); }
.aw-action .g{ font-size:22px; margin-bottom:12px; font-family:"Segoe UI Symbol","Segoe UI Emoji",inherit; }
.aw-action .t{ font-size:14px; font-weight:600; }
.aw-action .s{ font-size:12px; color:var(--aw-text-dim); margin-top:3px; }

/* segmented pill toggles (SegButton) */
.aw-seg{
  display:inline-flex; align-items:center;
  background:var(--aw-card); border:1px solid var(--aw-card-border);
  border-radius:999px; padding:3px;
}
.aw-seg button{
  border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; color:var(--aw-text-dim);
  padding:7px 12px; margin:0 2px; border-radius:999px; white-space:nowrap;
}
.aw-seg button:hover{ background:var(--aw-selected); }
.aw-seg button.on{ background:var(--aw-accent); color:var(--aw-on-accent); }
.aw-seg button:focus-visible{ outline:2px solid var(--aw-accent2); }

/* buttons (PrimaryButton = teal→lime gradient pill, GhostButton = bordered pill) */
.aw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600; padding:10px 18px; border-radius:999px;
  color:var(--aw-on-accent);
  background:linear-gradient(135deg,#023D3E 0%,#D2D758 100%);
}
.aw-btn:hover{ opacity:.85; }
.aw-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600; padding:10px 18px; border-radius:999px;
  background:transparent; color:var(--aw-text-dim);
  border:1px solid var(--aw-card-border);
}
.aw-ghost:hover{ background:var(--aw-hover); color:var(--aw-text); }
.aw-ghost.sm, .aw-btn.sm{ padding:6px 14px; font-size:12px; }

/* fields */
.aw-field{
  font-family:inherit; font-size:13px; color:var(--aw-text);
  background:var(--aw-field-bg); border:1px solid var(--aw-field-border);
  border-radius:8px; padding:9px 12px;
}
.aw-select{ appearance:none; padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235E7A7B' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }

/* transactions list */
.aw-txhead{ display:flex; align-items:center; gap:14px; padding:12px 6px; }
.aw-tx{
  display:flex; align-items:center; gap:14px;
  padding:15px 6px; border-top:1px solid #EFE9D9;
}
.aw-tx:first-child{ border-top:none; }
.aw-avatar{
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:15px;
}
.aw-tx-dir{ font-size:11px; width:10px; flex-shrink:0; }
.aw-tx-dir.out{ color:var(--aw-danger); } .aw-tx-dir.in{ color:var(--aw-green); }
.aw-tx-docs{ font-size:10px; color:var(--aw-text-dim); width:24px; flex-shrink:0; }
.aw-tx-name{ font-weight:700; font-size:13.5px; letter-spacing:0.2px; text-transform:uppercase; flex:1.4; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aw-tx-date{ flex:1; font-size:12.5px; color:var(--aw-text-dim); white-space:nowrap; }
.aw-tx-cat{ flex:1; }
.aw-catchip{
  display:inline-block; font-size:11px; color:var(--aw-text-dim);
  border:1px solid var(--aw-card-border); border-radius:999px; padding:3px 10px;
  background:var(--aw-field-bg); white-space:nowrap;
}
.aw-bizchip{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.4px;
  color:var(--aw-on-accent); background:var(--aw-accent);
  border-radius:999px; padding:2px 8px; margin-left:6px;
}
.aw-tx-amt{ font-weight:700; font-size:13.5px; white-space:nowrap; text-align:right; min-width:86px; }
.aw-tx-amt.out{ color:var(--aw-danger); } .aw-tx-amt.in{ color:var(--aw-green); }
.aw-tx-note{ font-size:11.5px; font-style:italic; color:var(--aw-text-dim);
  padding:0 6px 12px 64px; margin-top:-8px; }

/* budget bars, goal bars */
.aw-bar{ height:9px; border-radius:999px; background:#EFE9D9; overflow:hidden; }
.aw-bar > div{ height:100%; border-radius:999px; background:var(--aw-accent); }
.aw-bar > div.over{ background:var(--aw-danger); }
.aw-bar.goal > div{ background:#4ADE80; }

/* alerts */
.aw-alert{ display:flex; align-items:flex-start; gap:14px; position:relative;
  padding-left:24px; overflow:hidden; }
.aw-alert::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; }
.aw-alert.act::before{ background:#F5B824; }
.aw-alert.know::before{ background:#4ADE80; }
.aw-alert-icon{ width:44px; height:44px; border-radius:10px; border:1px solid var(--aw-card-border);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
  font-family:"Segoe UI Symbol","Segoe UI Emoji",inherit; }
.aw-newchip{ display:inline-block; font-size:10.5px; font-weight:700; border-radius:999px;
  padding:2px 9px; margin-left:8px; vertical-align:2px; }
.aw-alert.act .aw-newchip{ background:#FFC53D; color:#4A3200; }
.aw-alert.know .aw-newchip{ background:#86EFAC; color:#0B3D1F; }
.aw-alert-sev{ font-size:11.5px; margin-top:6px; }
.aw-alert.act .aw-alert-sev b{ color:var(--aw-amber); }
.aw-alert.know .aw-alert-sev b{ color:var(--aw-green); }
.aw-alert-sev span{ color:var(--aw-text-dim); }
.aw-roundx{ width:34px; height:34px; border-radius:50%; border:1px solid var(--aw-card-border);
  background:transparent; color:var(--aw-text-dim); cursor:pointer; font-size:12px; flex-shrink:0; }
.aw-roundx:hover{ background:var(--aw-hover); }

/* charts */
.aw-chart-wrap{ position:relative; }
.aw-chart-wrap svg{ display:block; width:100%; height:auto; }
.aw-gridline{ stroke:#B9B2A0; stroke-width:0.6; }
.aw-axis-label{ font-size:11px; fill:#8B8574; font-family:inherit; }

/* empty / desktop-only states */
.aw-empty{ text-align:center; padding:56px 24px; }
.aw-empty .g{ font-size:34px; margin-bottom:14px; font-family:"Segoe UI Symbol","Segoe UI Emoji",inherit; }
.aw-empty .t{ font-size:15px; font-weight:700; }
.aw-empty .s{ font-size:12.5px; color:var(--aw-text-dim); margin-top:6px; max-width:420px;
  margin-left:auto; margin-right:auto; line-height:1.55; }

/* generic layout helpers */
.aw-row{ display:flex; align-items:center; gap:12px; }
.aw-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.aw-grid2{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; }
.aw-mt{ margin-top:18px; } .aw-mb{ margin-bottom:18px; }

/* The window is a desktop program: below ~1120px the page offers horizontal
   scrolling rather than pretending the app reflows like a website. */
.aw-scrollhost{ overflow-x:auto; }
.aw{ min-width:1080px; }