/* =========================================================
   CASHBOOK WEB APP -- /cashbook-web-app/index.php only
   The "Try it" live entry demo: stat cards, the Add Entry / delete buttons,
   the entry badges and the entry list (desktop table + mobile rows) are
   deliberately the *exact same classes and rules* as the real signed-in
   dashboard (dashboard/assets/css/dashboard.css's .tn-btn/.tn-badge/
   .tn-stat-card/.tn-entries-table/.tn-entry-list family) -- copied here
   rather than linked so this marketing page never depends on the
   dashboard's app-shell CSS (sidebar/topbar/body overrides etc.) that
   isn't meant for a page outside /dashboard. Only the demo "chrome" around
   it (toolbar, Add/Edit modal, toast, panel) is bespoke, prefixed .cbw-.
   Behaviour: assets/js/components/cashbook_web_app.js.
========================================================= */

.cbw-panel { padding:24px; border:1px solid var(--tn-border); border-radius:16px; background:#fff; box-shadow:0 30px 60px -34px rgba(15,23,42,.22); }

.cbw-demo-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid #bfdbfe; border-radius:100px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:12.5px; font-weight:700; }
.cbw-demo-note { margin:12px 0 0; color:var(--tn-muted); font-size:13.5px; line-height:1.6; }

/* ---------- toolbar: stat cards + actions (same .tn-stat-card as the real ledger page) ---------- */
.cbw-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.tn-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; flex:1 1 420px; margin:0; }
.tn-stat-card { padding:8px 10px; border:1px solid var(--tn-border); border-radius:10px; background:var(--tn-background); transition:box-shadow .15s ease, transform .15s ease; }
.tn-stat-card:hover { box-shadow:0 10px 24px rgba(15,23,42,.07); transform:translateY(-1px); }
/* Bootstrap's body { line-height:1.5 } was inherited here, so each line of
   this small text reserved 1.5x its own height in invisible space above and
   below it -- the card looked much taller than its actual content even with
   tiny padding. line-height:1 removes that. */
.tn-stat-card .tn-stat-label { display:block; margin:0 0 2px; font-size:10px; line-height:1; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-stat-card .tn-stat-value { display:block; font-size:16px; line-height:1; font-weight:800; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-stat-card.tn-stat-green { background:var(--tn-green-soft); border-color:#bbf7d0; }
.tn-stat-card.tn-stat-green .tn-stat-value { color:var(--tn-green); }
.tn-stat-card.tn-stat-red { background:var(--tn-red-soft); border-color:#fecaca; }
.tn-stat-card.tn-stat-red .tn-stat-value { color:var(--tn-red); }

/* ---------- buttons: same .tn-btn family as the dashboard ---------- */
.cbw-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.tn-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border:1px solid var(--tn-primary); border-radius:9px; background:var(--tn-primary); color:#fff; font-size:14px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer; transition:.15s; }
.tn-btn:hover { background:var(--tn-primary-dark); border-color:var(--tn-primary-dark); color:#fff; }
.tn-btn i { display:inline-block; font-size:.95em; line-height:1; }
.tn-btn-outline { background:#fff; color:var(--tn-text); border-color:var(--tn-border); }
.tn-btn-outline:hover { border-color:#94a3b8; color:var(--tn-text); background:#fff; }
.tn-btn-danger { border-color:var(--tn-red); background:var(--tn-red); }
.tn-btn-danger:hover { background:#b91c1c; border-color:#b91c1c; }
.tn-btn-sm { height:34px; padding:0 12px; font-size:13px; }
.tn-btn-xs { height:28px; padding:0 9px; font-size:11.5px; }
.cbw-btn-reset { background:none; border:0; color:var(--tn-muted); font-size:13px; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.cbw-btn-reset:hover { color:var(--tn-text); }
.cbw-btn-soon { position:relative; }
.cbw-soon-badge { position:absolute; top:-9px; right:-9px; padding:2px 7px; border-radius:100px; background:#f59e0b; color:#fff; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; box-shadow:0 4px 10px rgba(245,158,11,.4); }

/* ---------- badges: same .tn-badge family as the dashboard ---------- */
.tn-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:100px; font-size:11px; font-weight:700; white-space:nowrap; }
.tn-badge-green { background:var(--tn-green-soft); color:var(--tn-green); }
.tn-badge-red { background:var(--tn-red-soft); color:var(--tn-red); }
.tn-badge-blue { background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-badge-purple { background:#f5f3ff; color:var(--tn-purple); }
.tn-badge-gray { background:#f1f5f9; color:#64748b; }

/* ---------- the entry list itself: identical markup/CSS to
   dashboard/ledger/_entries_list.php + dashboard.css's ENTRY LIST rules --
   a real <table> at 900px+, flat divided rows grouped by date below that. ---------- */
.tn-admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.tn-admin-table th { padding:11px 12px; border-bottom:2px solid var(--tn-border); color:#64748b; font-size:11px; font-weight:700; text-align:left; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.tn-admin-table td { padding:13px 12px; border-bottom:1px solid #eef2f7; vertical-align:middle; white-space:nowrap; }
.tn-admin-table tr:last-child td { border-bottom:0; }

.tn-entries-table-wrap { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--tn-border); border-radius:14px; }
.tn-entries-table-wrap .tn-admin-table th { background:var(--tn-background); }
.tn-entries-table td { white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.tn-entries-table td:nth-child(1), .tn-entries-table td:nth-child(2), .tn-entries-table td:nth-child(6), .tn-entries-table td:nth-child(7) { white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.tn-entries-table td:nth-child(3) { min-width:130px; max-width:260px; }
.tn-entries-table td:nth-child(4), .tn-entries-table td:nth-child(5) { min-width:100px; }
.tn-entry-list { display:none; }
.tn-amount-in { color:var(--tn-green); font-weight:700; }
.tn-amount-out { color:var(--tn-red); font-weight:700; }

.tn-entry-date-heading { position:relative; margin-bottom:2px; padding:14px 2px 8px 14px; font-size:12px; font-weight:800; color:var(--tn-text); text-transform:uppercase; letter-spacing:.05em; }
.tn-entry-date-heading::before { content:""; position:absolute; left:0; top:15px; bottom:9px; width:3px; border-radius:100px; background:linear-gradient(180deg,var(--tn-primary),var(--tn-purple)); }
.tn-entry-date-group:first-child .tn-entry-date-heading { padding-top:2px; }
.tn-entry-date-group:first-child .tn-entry-date-heading::before { top:3px; }
.tn-entry-row { padding:14px 2px; border-bottom:1px solid var(--tn-border); transition:background-color .12s ease; }
.tn-entry-date-group:last-child .tn-entry-row:last-child { border-bottom:0; }
.tn-entry-row:active { background-color:var(--tn-background); }
.tn-entry-row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.tn-entry-row-main { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.tn-entry-row-icon { flex:0 0 34px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:13px; margin-top:1px; }
.tn-entry-row-icon.in { background:var(--tn-green-soft); color:var(--tn-green); }
.tn-entry-row-icon.out { background:var(--tn-red-soft); color:var(--tn-red); }
.tn-entry-row-party { font-size:14.5px; font-weight:700; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-entry-row-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tn-entry-row-note { margin-top:10px; font-size:13px; color:var(--tn-text); line-height:1.45; overflow-wrap:anywhere; }
.tn-entry-row-amount { font-size:16px; font-weight:800; white-space:nowrap; }
.tn-entry-row-amount.in { color:var(--tn-green); }
.tn-entry-row-amount.out { color:var(--tn-red); }
.tn-entry-row-footer { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; margin-top:10px; padding-left:46px; font-size:12.5px; font-weight:600; color:var(--tn-muted); }
.tn-entry-row-footer > span { min-width:0; overflow-wrap:anywhere; }
.tn-entry-row-footer .by-you { color:var(--tn-primary-dark); font-weight:700; }
.tn-entry-row-footer i.fa-regular.fa-clock, .tn-entry-row-footer i.fa-clock { margin-right:3px; font-size:11px; }
.tn-entry-row-view { margin-left:auto; display:inline-flex; align-items:center; gap:4px; background:none; border:0; padding:4px 0; font-size:12px; font-weight:700; color:var(--tn-primary); cursor:pointer; }
.tn-entry-row-view i { font-size:10px; }

.tn-empty-state { display:flex; flex-direction:column; align-items:center; gap:6px; padding:56px 20px; text-align:center; color:var(--tn-muted); font-size:13.5px; line-height:1.55; }
.tn-empty-state > i { display:grid; place-items:center; width:68px; height:68px; margin-bottom:10px; border-radius:50%; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:26px; box-shadow:0 0 0 8px rgba(37,99,235,.05); }
.tn-empty-state strong { color:var(--tn-text); font-size:14.5px; }

@media (max-width:900px) {
  .tn-entries-table-wrap { display:none; }
  .tn-entry-list { display:block; }
}

/* ---------- custom dropdown (Payment Method / Category) -- same .tn-dd
   rules as the real dashboard (dash_render_dropdown() markup, behaviour
   from assets/js/components/dropdown.js, a copy of dashboard's dropdown.js
   since a native <select>'s own popup can't be restyled consistently). ---------- */
.tn-dd { position:relative; display:inline-flex; width:100%; }
.tn-dd-trigger { display:flex; align-items:center; gap:9px; width:100%; height:44px; padding:0 13px; border:1px solid var(--tn-border); border-radius:9px; background:#fff; font:inherit; font-size:14px; font-weight:600; color:var(--tn-text); text-align:left; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.tn-dd-trigger:hover { border-color:#cbd5e1; }
.tn-dd.open .tn-dd-trigger, .tn-dd-trigger:focus-visible { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.1); outline:0; }
.tn-dd-trigger > i:first-child { font-size:12px; color:var(--tn-muted); flex:0 0 auto; }
.tn-dd-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-dd-caret { font-size:10px; color:var(--tn-muted); flex:0 0 auto; transition:transform .15s ease; }
.tn-dd.open .tn-dd-caret { transform:rotate(180deg); }
.tn-dd-menu { position:fixed; top:calc(100% + 6px); left:0; min-width:180px; overscroll-behavior:contain; max-height:264px; overflow-y:auto; background:#fff; border:1px solid var(--tn-border); border-radius:10px; box-shadow:0 16px 40px rgba(15,23,42,.14); z-index:1200; padding:6px; }
.tn-dd-search { position:sticky; top:-6px; z-index:1; display:flex; align-items:center; gap:8px; margin:-6px -6px 6px; padding:8px 10px; background:#fff; border-bottom:1px solid var(--tn-border); }
.tn-dd-search i { font-size:12px; color:var(--tn-muted); flex:0 0 auto; }
.tn-dd-search input { flex:1; min-width:0; height:30px; border:0; outline:0; background:none; font:inherit; font-size:16px; color:var(--tn-text); }
.tn-dd-item[hidden], .tn-dd-empty[hidden] { display:none; }
.tn-dd-empty { padding:12px 11px; font-size:13px; color:var(--tn-muted); }
.tn-dd-item { display:block; width:100%; padding:9px 11px; border:0; background:none; border-radius:7px; font:inherit; font-size:13.5px; font-weight:600; color:var(--tn-text); text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.tn-dd-item:hover { background:var(--tn-background); }
.tn-dd-item.active { background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-dd-sm .tn-dd-trigger { height:36px; padding:0 10px; font-size:13px; }
.tn-dd-sm .tn-dd-caret { font-size:9px; }
.cbw-modal .tn-dd-trigger { height:46px; border-radius:11px; }

/* ---------- Add/Edit Entry modal (Bootstrap .modal, re-skinned) ---------- */
.cbw-modal .modal-content { border:0; border-radius:18px; box-shadow:0 30px 80px rgba(15,23,42,.32); }
.cbw-modal .modal-header { border-bottom:1px solid var(--tn-border); padding:18px 22px; }
.cbw-modal .modal-title { font-size:16px; font-weight:800; }
.cbw-modal .modal-body { padding:22px; }
.cbw-modal .modal-footer { border-top:1px solid var(--tn-border); padding:16px 22px; }
.cbw-modal .form-label { font-size:12.5px; font-weight:700; color:var(--tn-text); }
.cbw-modal .form-control, .cbw-modal .form-select { border-radius:9px; border-color:var(--tn-border); font-size:14px; }
.cbw-modal .form-control:focus, .cbw-modal .form-select:focus { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.12); }

.cbw-type-row { display:flex; gap:10px; }
.cbw-type-option { flex:1; }
.cbw-type-option input { position:absolute; opacity:0; pointer-events:none; }
.cbw-type-option label { display:flex; align-items:center; justify-content:center; gap:8px; height:44px; border:1px solid var(--tn-border); border-radius:10px; color:var(--tn-muted); font-size:13.5px; font-weight:700; cursor:pointer; transition:.15s; }
.cbw-type-option input:checked + label { border-color:transparent; }
.cbw-type-option:nth-child(1) input:checked + label { background:var(--tn-green-soft); color:var(--tn-green); border-color:#bbf7d0; }
.cbw-type-option:nth-child(2) input:checked + label { background:var(--tn-red-soft); color:var(--tn-red); border-color:#fecaca; }

/* ---------- toast (Add/edit/delete/export confirmations -- all client-side only) ---------- */
.cbw-toast-wrap { position:fixed; left:50%; bottom:26px; z-index:1200; transform:translate(-50%,16px); width:calc(100% - 32px); max-width:420px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.cbw-toast-wrap.show { opacity:1; transform:translate(-50%,0); }
.cbw-toast { display:flex; align-items:flex-start; gap:11px; padding:13px 16px; border-radius:13px; background:var(--tn-dark); color:#fff; font-size:13px; font-weight:600; line-height:1.5; box-shadow:0 20px 44px rgba(15,23,42,.35); }
.cbw-toast i { margin-top:2px; color:#4ade80; }

@media (max-width:575px) {
  /* .cbw-toolbar switches to flex-direction:column below, at which point
     flex-basis is the toolbar's *height* along the (now vertical) main
     axis, not its width -- the base rule's 420px basis (sized for the row
     layout) was telling this grid to prefer a 420px-tall box on mobile,
     adding invisible height on top of the card padding/line-height fixes. */
  .tn-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; flex:1 1 80px; }
  .tn-stat-card { padding:7px 9px; border-radius:9px; }
  .tn-stat-card .tn-stat-label { font-size:9px; }
  .tn-stat-card .tn-stat-value { font-size:14px; }
  .cbw-toolbar { flex-direction:column; align-items:stretch; gap:12px; }
  .cbw-actions { justify-content:stretch; }
  .cbw-actions .tn-btn { flex:1; }
  .cbw-panel { padding:18px; }
}

@media (prefers-reduced-motion:reduce) {
  .cbw-toast-wrap { transition:none; }
}