:root {
  --tn-primary:#2563eb;
  --tn-primary-dark:#1d4ed8;
  --tn-primary-soft:#eff6ff;
  --tn-green:#16a34a;
  --tn-green-soft:#f0fdf4;
  --tn-red:#dc2626;
  --tn-red-soft:#fef2f2;
  --tn-purple:#7c3aed;
  --tn-purple-soft:#f5f3ff;
  --tn-text:#172033;
  --tn-muted:#64748b;
  --tn-border:#e2e8f0;
  --tn-background:#f8fafc;
  --tn-surface:#fff;
  --tn-dark:#0f172a;
  --tn-sidebar-w:250px;
}

* { box-sizing:border-box; }
body { margin:0; font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--tn-text); background:var(--tn-background); }
a { text-decoration:none; }

/* AUTH (login / signup / verify / forgot / reset) -- same card look as admin2608's login screen */
/* Stays at the top while the page scrolls (solid, so the form never shows through it). */
.tn-guest-topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--tn-border); background:rgba(248,250,252,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tn-guest-topbar .tn-navbar-brand { font-size:19px; }
.tn-guest-topbar .tn-brand-logo { height:32px; }
.tn-guest-topbar a.tn-back-link { color:var(--tn-muted); font-size:13px; font-weight:600; }
.tn-guest-topbar a.tn-back-link:hover { color:var(--tn-primary); }

.tn-admin-login-wrap { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 300px); padding:20px; }
.tn-admin-login-card { width:100%; max-width:420px; padding:36px 32px; border:1px solid var(--tn-border); border-radius:16px; background:var(--tn-surface); box-shadow:0 20px 45px rgba(15,23,42,.08); }
.tn-admin-login-brand { display:flex; align-items:center; gap:10px; margin-bottom:26px; font-size:20px; font-weight:800; color:var(--tn-text); }
.tn-admin-login-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--tn-primary); color:#fff; font-size:16px; }
.tn-admin-login-card h1 { margin:0 0 6px; font-size:20px; font-weight:800; }
.tn-admin-login-card p.sub { margin:0 0 22px; color:var(--tn-muted); font-size:13px; }
.tn-form-label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:#334155; }
.tn-form-control { width:100%; height:44px; padding:0 13px; border:1px solid var(--tn-border); border-radius:9px; font-size:14px; color:var(--tn-text); background:#fff; }
select.tn-form-control { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
textarea.tn-form-control { height:auto; padding:11px 13px; resize:vertical; }

/* CUSTOM DROPDOWN -- replaces every <select> in the dashboard. A native
   <select>'s own popup is rendered by the OS/browser and can't be styled
   consistently (different look on every platform, and this site's own
   wrapper card around it doubled up visually) -- this is a plain button +
   floating menu instead, styled identically everywhere. See dropdown.js's
   initDropdowns()/ddSetValue() for the behavior; a hidden <input> carries
   the real name/value so it still works inside a normal POST <form>. */
.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); }

/* TOAST -- transient post-action feedback (Entry added/updated/deleted,
   Ledger saved, mutation errors). Separate from the persistent inline
   .tn-alert banners still used for auth-page form-validation errors, which
   must stay visible until the user fixes the form, not auto-vanish in a
   few seconds. */
.tn-toast-stack { position:fixed; top:80px; right:16px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.tn-toast { display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-radius:10px; background:#fff; border:1px solid var(--tn-border); box-shadow:0 12px 32px rgba(15,23,42,.18); font-size:13.5px; font-weight:600; color:var(--tn-text); animation:tn-toast-in .25s ease; }
.tn-toast-success { border-left:4px solid var(--tn-green); }
.tn-toast-error { border-left:4px solid var(--tn-red); }
.tn-toast-icon { flex:0 0 auto; margin-top:1px; font-size:15px; }
.tn-toast-success .tn-toast-icon { color:var(--tn-green); }
.tn-toast-error .tn-toast-icon { color:var(--tn-red); }
.tn-toast-message { flex:1; line-height:1.4; }
.tn-toast-close { flex:0 0 auto; margin:-2px -2px 0 0; border:0; background:none; padding:2px; color:var(--tn-muted); cursor:pointer; font-size:15px; line-height:1; }
.tn-toast-close:hover { color:var(--tn-text); }
.tn-toast.tn-toast-hide { animation:tn-toast-out .2s ease forwards; }
@keyframes tn-toast-in { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes tn-toast-out { to { opacity:0; transform:translateX(16px); } }

@media (max-width:640px) {
  .tn-toast-stack { left:16px; right:16px; top:auto; bottom:16px; max-width:none; }
}
.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:400; 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); }
/* "Add or edit categories" row pinned under a dropdown's options. */
.tn-dd-menu:has(.tn-dd-manage) { padding-bottom:0; }
.tn-dd-manage { position:sticky; bottom:0; display:flex; align-items:center; gap:9px; width:calc(100% + 12px); margin:6px -6px 0; padding:12px 17px; border:0; border-top:1px solid var(--tn-border); background:#fff; font:inherit; font-size:13px; font-weight:700; color:var(--tn-primary); text-align:left; cursor:pointer; }
.tn-dd-manage:hover { background:var(--tn-primary-soft); }
.tn-dd-manage i { font-size:12px; }

/* Small variant -- used inline in the entries filter toolbar. */
.tn-dd-sm .tn-dd-trigger { height:36px; padding:0 10px; font-size:13px; }
.tn-dd-sm .tn-dd-caret { font-size:9px; }
.tn-form-control:focus { outline:0; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.tn-form-group { margin-bottom:16px; }
.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; cursor:pointer; transition:.15s; }
.tn-btn:hover { background:var(--tn-primary-dark); border-color:var(--tn-primary-dark); color:#fff; }
.tn-btn.tn-btn-block { width:100%; }
.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:disabled { opacity:.6; cursor:not-allowed; }
.tn-btn { line-height:1; text-decoration:none; white-space:nowrap; }
.tn-btn i { display:inline-block; font-size:.95em; line-height:1; }
.tn-alert { margin-bottom:18px; padding:11px 14px; border-radius:9px; font-size:13px; font-weight:600; }
.tn-alert-error { border:1px solid #fecaca; background:var(--tn-red-soft); color:#b91c1c; }
.tn-alert-success { border:1px solid #bbf7d0; background:var(--tn-green-soft); color:#15803d; }
.tn-alert-info { border:1px solid #bfdbfe; background:var(--tn-primary-soft); color:#1d4ed8; }

.tn-auth-mode { display:flex; gap:6px; padding:4px; border-radius:11px; background:var(--tn-background); margin-bottom:24px; }
.tn-auth-mode a { flex:1; text-align:center; padding:9px 0; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--tn-muted); }
.tn-auth-mode a.active { background:#fff; color:var(--tn-text); box-shadow:0 1px 3px rgba(15,23,42,.1); }
.tn-otp-input { text-align:center; letter-spacing:8px; font-size:22px; font-weight:700; }
.tn-stay-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tn-stay-check { display:inline-flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:600; color:var(--tn-text); cursor:pointer; }
.tn-stay-check input { width:16px; height:16px; margin:0; accent-color:var(--tn-primary); cursor:pointer; }
.tn-stay-forgot { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--tn-primary); }
.tn-info-btn { display:inline-grid; place-items:center; width:20px; height:20px; padding:0; border:1px solid var(--tn-border); border-radius:50%; background:#fff; font-size:12px; font-weight:800; line-height:1; color:var(--tn-muted); cursor:pointer; }
.tn-info-btn { position:relative; }
.tn-info-btn::after { content:""; position:absolute; inset:-10px; } /* a bigger tap area than the 20px circle */
.tn-info-btn:hover, .tn-info-btn:focus-visible { border-color:var(--tn-primary); color:var(--tn-primary); outline:0; }
.tn-info-modal-body p { margin:0 0 12px; font-size:14px; line-height:1.65; color:var(--tn-text); }
.tn-info-modal-body .tn-info-note { display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; padding:12px 14px; border:1px solid #fde68a; border-radius:10px; background:#fffbeb; font-size:13px; font-weight:600; color:#92400e; }
.tn-info-modal-body .tn-info-note i { margin-top:3px; flex:0 0 auto; }
.tn-pw { position:relative; }
.tn-pw > .tn-form-control { padding-right:44px; }
.tn-pw-toggle { position:absolute; top:0; right:0; display:grid; place-items:center; width:44px; height:100%; border:0; background:none; color:var(--tn-muted); font-size:14px; cursor:pointer; }
.tn-pw-toggle:hover { color:var(--tn-text); }
.tn-auth-foot-link { text-align:center; margin-top:14px; font-size:13px; color:var(--tn-muted); }
.tn-auth-foot-link a { color:var(--tn-primary); font-weight:700; }
.tn-email-chip { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--tn-primary-soft); background:var(--tn-primary-soft); border-radius:9px; margin-bottom:16px; font-size:13.5px; font-weight:600; color:var(--tn-text); }

/* SHELL */
.tn-admin-shell { display:flex; min-height:100vh; }

.tn-admin-sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--tn-sidebar-w); overflow-y:auto; background:var(--tn-dark); color:#cbd5e1; z-index:20; transition:transform .2s ease; }
.tn-admin-sidebar-brand { display:flex; align-items:center; gap:10px; padding:22px 20px; color:#fff; font-size:17px; font-weight:800; border-bottom:1px solid rgba(255,255,255,.08); }
.tn-admin-sidebar-brand img.tn-brand-logo { height:26px; width:auto; }
.tn-admin-nav { padding:14px 12px; }
.tn-admin-nav-link { display:flex; align-items:center; gap:11px; padding:11px 12px; margin-bottom:3px; border-radius:9px; color:#cbd5e1; font-size:14px; font-weight:600; }
.tn-admin-nav-link i { width:18px; text-align:center; font-size:14px; }
.tn-admin-nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.tn-admin-nav-link.active { background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.35); }
.tn-admin-nav-divider { margin:16px 12px 8px; color:#64748b; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.tn-admin-nav-badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:var(--tn-red); color:#fff; font-size:10.5px; font-weight:800; display:grid; place-items:center; }

.tn-admin-sidebar-close { display:none; border:0; background:transparent; color:#cbd5e1; font-size:18px; margin-left:auto; padding:4px; line-height:1; cursor:pointer; }
.tn-admin-sidebar-close:hover { color:#fff; }

.tn-admin-sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:19; }
.tn-admin-sidebar-backdrop.open { display:block; }

.tn-admin-main { flex:1; margin-left:var(--tn-sidebar-w); min-width:0; display:flex; flex-direction:column; }
.tn-admin-topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 26px; border-bottom:1px solid var(--tn-border); background:#fff; box-shadow:0 1px 0 rgba(15,23,42,.02), 0 4px 16px rgba(15,23,42,.04); }
.tn-admin-topbar > div:first-child { min-width:0; }
.tn-admin-topbar-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:800; }
.tn-topbar-short { display:none; }
.tn-admin-topbar-toggle { display:none; border:0; background:transparent; font-size:18px; color:var(--tn-text); }
.tn-admin-content { padding:28px; flex:1; }

.tn-admin-card { padding:24px; border:1px solid var(--tn-border); border-radius:16px; background:#fff; }
.tn-admin-card + .tn-admin-card { margin-top:20px; }
.tn-admin-card-title { margin:0 0 18px; font-size:16px; font-weight:800; }

.tn-admin-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.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-admin-table td.tn-cell-wrap { white-space:normal; min-width:220px; }
.tn-admin-table tr.tn-row-link { cursor:pointer; }
.tn-admin-table tr.tn-row-link:hover { background:var(--tn-background); }

.tn-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:100px; font-size:11px; font-weight:700; }
.tn-badge-green { background:var(--tn-green-soft); color:var(--tn-green); }
.tn-badge-gray { background:#f1f5f9; color:#64748b; }
.tn-badge-blue { background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-badge-purple { background:#f5f3ff; color:#7c3aed; }
.tn-badge-red { background:var(--tn-red-soft); color:var(--tn-red); }

.tn-admin-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px; }
.tn-admin-toolbar .tn-form-control { height:40px; width:auto; }
/* A text search field takes the free space (it was stuck at the browser's default ~20 characters, cutting the placeholder off). */
.tn-admin-toolbar input[type="text"].tn-form-control { flex:1 1 240px; min-width:0; }
.tn-admin-toolbar .tn-dd { width:auto; min-width:220px; }
.tn-admin-toolbar .tn-dd-trigger { height:40px; }

@media (max-width:640px) {
  /* Was width:auto for the desktop inline toolbar -- on a narrow screen
     that just shrinks the trigger to fit its current label text (e.g. the
     selected ledger's name) instead of filling the row. */
  .tn-admin-toolbar .tn-dd { width:100%; min-width:0; }
}
.tn-admin-toolbar-spacer { flex:1; }
.tn-admin-list-summary { color:var(--tn-muted); font-size:13px; font-weight:600; white-space:nowrap; }

.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; }
/* Only the illustration icon (a direct child) -- never an icon inside a button in here. */
.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-title { color:var(--tn-text); font-size:16px; font-weight:800; }
.tn-empty-text { max-width:340px; }
.tn-empty-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }

.tn-pagination-admin { display:flex; align-items:center; gap:6px; margin-top:18px; flex-wrap:wrap; }
.tn-pagination-admin a, .tn-pagination-admin span { min-width:34px; height:34px; display:grid; place-items:center; padding:0 8px; border:1px solid var(--tn-border); border-radius:7px; color:#475569; font-size:13px; font-weight:700; }
.tn-pagination-admin a:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.tn-pagination-admin .active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; }
.tn-pagination-admin .disabled { opacity:.4; pointer-events:none; }

.tn-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:18px; font-size:13px; }
.tn-breadcrumb a { color:var(--tn-muted); font-weight:600; }
.tn-breadcrumb a:hover { color:var(--tn-primary); }
.tn-breadcrumb .tn-breadcrumb-sep { color:#cbd5e1; }
.tn-breadcrumb .tn-breadcrumb-current { color:var(--tn-text); font-weight:700; }

.tn-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.tn-detail-item .tn-detail-label { display:block; margin-bottom:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-detail-item .tn-detail-value { font-size:14px; font-weight:600; color:var(--tn-text); overflow-wrap:anywhere; }

.tn-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:18px; }

/* Compact variant -- the entries filter's own live Cash In/Out/Balance
   summary (reflects the active filter, unlike the ledger-wide stat cards
   above), smaller since it's a secondary/contextual number, not the
   ledger's headline totals. */
.tn-stat-grid-compact { margin-top:0; margin-bottom:18px; }
.tn-stat-grid-compact .tn-stat-card { padding:12px 14px; }
.tn-stat-grid-compact .tn-stat-value { font-size:16px; }
.tn-stat-card { padding:16px; border:1px solid var(--tn-border); border-radius:12px; 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); }
.tn-stat-card .tn-stat-label { display:block; margin-bottom:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-stat-card .tn-stat-value { font-size:20px; 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); }

.tn-filter-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.tn-filter-tabs a { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border:1px solid var(--tn-border); border-radius:100px; font-size:13px; font-weight:700; color:#475569; background:#fff; transition:.15s; }
.tn-filter-tabs a i { font-size:11px; }
.tn-filter-tabs a:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.tn-filter-tabs a.active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.25); }
.tn-filter-tabs a.tn-filter-tab-in.active { border-color:var(--tn-green); background:var(--tn-green); box-shadow:0 4px 12px rgba(22,163,74,.25); }
.tn-filter-tabs a.tn-filter-tab-out.active { border-color:var(--tn-red); background:var(--tn-red); box-shadow:0 4px 12px rgba(220,38,38,.25); }

/* TOPBAR: notification bell + user menu */
.tn-topbar-actions { display:flex; align-items:center; gap:14px; }
.tn-admin-nav-badge[hidden], .tn-notif-bell .tn-notif-dot[hidden] { display:none; }
.tn-notif-bell { position:relative; width:38px; height:38px; display:grid; place-items:center; border-radius:9px; color:#475569; font-size:16px; }
.tn-notif-bell:hover { background:var(--tn-background); color:var(--tn-text); }
.tn-notif-bell .tn-notif-dot { position:absolute; top:5px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:100px; background:var(--tn-red); color:#fff; font-size:9.5px; font-weight:800; display:grid; place-items:center; border:2px solid #fff; }
.tn-user-menu { display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:100px; }
.tn-user-menu:hover { background:var(--tn-background); }
.tn-user-avatar { width:30px; height:30px; border-radius:50%; background:var(--tn-primary); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; flex:0 0 30px; }
.tn-user-menu-name { font-size:13px; font-weight:700; color:var(--tn-text); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-dropdown-panel { position:absolute; top:56px; right:26px; width:230px; border:1px solid var(--tn-border); border-radius:12px; background:#fff; box-shadow:0 16px 40px rgba(15,23,42,.14); z-index:30; overflow:hidden; }
.tn-dropdown-panel a, .tn-dropdown-panel button { display:flex; align-items:center; gap:9px; width:100%; padding:11px 16px; border:0; background:none; text-align:left; font-size:13.5px; font-weight:600; color:var(--tn-text); cursor:pointer; }
.tn-dropdown-panel a:hover, .tn-dropdown-panel button:hover { background:var(--tn-background); }
.tn-dropdown-panel .tn-dropdown-heading { padding:12px 16px 8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-dropdown-panel .tn-dropdown-divider { height:1px; background:var(--tn-border); margin:4px 0; }

/* LEDGER CARDS -- quick-link tiles (dashboard home) stay a grid */
.tn-ledger-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.tn-ledger-card { display:flex; flex-direction:column; padding:18px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; transition:box-shadow .15s ease, border-color .15s ease; color:inherit; }
.tn-ledger-card:hover { box-shadow:0 10px 26px rgba(15,23,42,.08); border-color:#cbd5e1; color:inherit; }
.tn-ledger-card-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tn-ledger-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:18px; flex:0 0 44px; }
.tn-ledger-card-name { font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-ledger-card-role { font-size:11.5px; font-weight:700; color:var(--tn-muted); text-transform:capitalize; }
.tn-ledger-card-balance-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.tn-ledger-card-balance-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-ledger-card-balance-value { font-size:19px; font-weight:800; }
.tn-ledger-card-flows { display:flex; gap:14px; font-size:12.5px; font-weight:700; margin-top:auto; padding-top:12px; border-top:1px solid #f1f5f9; }
.tn-ledger-card-flows .in { color:var(--tn-green); }
.tn-ledger-card-flows .out { color:var(--tn-red); }
.tn-new-ledger-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px; min-height:150px; border:2px dashed var(--tn-border); border-radius:14px; color:var(--tn-muted); font-size:13.5px; font-weight:700; }
.tn-new-ledger-card:hover { border-color:var(--tn-primary); color:var(--tn-primary); }
.tn-new-ledger-card i { font-size:22px; }

/* LEDGER LIST -- the Ledgers page itself: one full-width row per ledger */
.tn-ledger-list { display:flex; flex-direction:column; gap:12px; }
.tn-ledger-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:16px 20px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; transition:box-shadow .15s ease, border-color .15s ease; color:inherit; }
.tn-ledger-row:hover { box-shadow:0 10px 26px rgba(15,23,42,.08); border-color:#cbd5e1; color:inherit; }
.tn-ledger-row-info { display:flex; align-items:center; gap:14px; flex:1 1 240px; min-width:200px; }
.tn-ledger-row-name { font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-ledger-row-role { font-size:11.5px; font-weight:700; color:var(--tn-muted); text-transform:capitalize; }
.tn-ledger-row-stats { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.tn-ledger-row-stat { min-width:88px; }
.tn-ledger-row-stat .tn-stat-label { display:block; margin-bottom:4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-ledger-row-stat .tn-stat-value { font-size:15px; font-weight:800; }
.tn-ledger-row-chevron { color:#cbd5e1; font-size:14px; margin-left:auto; }

@media (max-width:640px) {
  .tn-ledger-row { gap:14px; }
  .tn-ledger-row-stats { gap:20px; width:100%; justify-content:flex-start; }
  .tn-ledger-row-chevron { display:none; }
}

/* ENTRY LIST -- ledger detail page.
   Desktop (>=900px): .tn-entries-table-wrap (a real <table>, feels like the
   rest of the admin's data tables). Mobile (<900px): .tn-entry-list, flat
   divided rows grouped by date, mirroring the app's CashbookEntryTile --
   deliberately NOT boxed/bordered per-row, so it doesn't nest a card inside
   the .tn-admin-card--table section that already goes edge-to-edge on
   mobile (see the .tn-admin-card--table rules under @media 900px below). */
.tn-entries-table-wrap { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Entries table: text columns wrap (long party names, notes, emails) instead of
   stretching the table past its card; Type / Amount / Date / View stay on one line. */
.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(7), .tn-entries-table td:nth-child(8) { white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.tn-entries-table td:nth-child(3) { min-width:130px; max-width:300px; }
.tn-entries-table td:nth-child(4), .tn-entries-table td:nth-child(5) { min-width:100px; }
.tn-entries-table td:nth-child(6) { min-width:170px; max-width:240px; }
.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-clock { margin-right:3px; font-size:11px; }

.tn-load-more { display:flex; justify-content:center; margin-top:18px; }
.tn-load-more .tn-btn[aria-busy="true"] { pointer-events:none; opacity:.75; }
.tn-load-more-label { display:inline-flex; align-items:center; gap:8px; }
.tn-load-more .tn-btn[aria-busy="true"] .fa-rotate { animation:tn-spin .7s linear infinite; }
@keyframes tn-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

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

.tn-hidden { display:none !important; }
.tn-load-more-error { margin-top:10px; text-align:center; font-size:12.5px; color:var(--tn-red); }

/* Entries card header (title + count on the left, Add Entry on the right) and filter bar. */
.tn-entries-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.tn-entries-count { display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--tn-muted); }
.tn-filter-spinner { display:none; align-items:center; gap:6px; margin-top:4px; font-size:12.5px; font-weight:700; color:var(--tn-primary); }
.tn-filter-spinner i { animation:tn-spin .7s linear infinite; }
.tn-entries-loading .tn-filter-spinner { display:inline-flex; }
.tn-entries-loading .tn-entries-count { display:none; }

/* Sticks right below the topbar (64px tall, itself sticky at top:0 with a
   higher z-index) on both mobile and desktop -- top:0 here would put this
   at the exact same spot as the topbar and get hidden behind it. A fully
   solid background is required (not the semi-transparent fade this used to
   have) so entries scrolling underneath don't show through while stuck. */
.tn-entries-filters { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; position:sticky; top:64px; z-index:5; background:#f8fafc; padding:10px 12px; border:1px solid var(--tn-border); border-radius:12px; box-shadow:0 6px 12px -8px rgba(15,23,42,.15); }
.tn-filter-selects { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; }
.tn-filter-tabs { margin-bottom:0; }

.tn-filter-selects .tn-dd { min-width:172px; width:auto; }

.tn-form-control-sm { height:36px; padding:0 10px; font-size:13px; width:auto; min-width:140px; }
.tn-entries-loading { opacity:.6; pointer-events:none; transition:opacity .15s ease; }
.tn-btn-xs { height:28px; padding:0 9px; font-size:11.5px; }
.tn-filter-clear { color:var(--tn-red); border-color:#fecaca; }
.tn-filter-clear:hover { background:var(--tn-red-soft); border-color:var(--tn-red); color:var(--tn-red); }

@media (max-width:900px) {
  /* One row, scrolled horizontally, instead of wrapping onto several lines
     -- everything (type pills, each dropdown, Clear) keeps its natural
     width and lines up side by side; overflow-x carries whatever doesn't
     fit off-screen to the right instead of pushing it to a new line. */
  /* No boxed-card look here either -- just the sticky scrolling row, flat
     against the page like everything else on mobile. */
  .tn-entries-filters { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:var(--tn-background); border:0; border-radius:0; box-shadow:none; padding:10px 2px; margin-left:-2px; margin-right:-2px; }
  .tn-filter-tabs { flex:0 0 auto; flex-wrap:nowrap; }
  .tn-filter-tabs a { flex:0 0 auto; white-space:nowrap; }
  .tn-filter-selects { flex:0 0 auto; flex-wrap:nowrap; }
  .tn-filter-selects .tn-dd { flex:0 0 auto; width:auto; min-width:150px; }
  .tn-filter-clear { flex:0 0 auto; white-space:nowrap; }
  .tn-entries-filters::-webkit-scrollbar { display:none; }
}

.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; }

/* Entry detail/edit modal (built client-side in entries.js from a "View" button's data-view-entry payload). */
.tn-entry-modal-amount { font-size:24px; font-weight:800; }
.tn-entry-modal-rows { margin-top:14px; }
.tn-entry-modal-row { display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--tn-border); font-size:13px; }
.tn-entry-modal-row:last-child { border-bottom:0; }
.tn-entry-modal-label { flex:0 0 100px; color:var(--tn-muted); font-weight:600; }
.tn-entry-modal-value { flex:1; min-width:0; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-entry-modal-note { margin-top:12px; padding:12px; background:var(--tn-background); border-radius:10px; font-size:13px; line-height:1.5; }

/* Who created/last edited this entry -- a byline, deliberately styled
   apart from .tn-entry-modal-rows so it doesn't read as just another fact
   about the entry alongside Party/Category/Payment/Date. */
/* Who created/last edited this entry -- avatar-initial byline, same look
   as .tn-member-avatar elsewhere in this dashboard, deliberately separate
   from .tn-entry-modal-rows above so it reads as a byline, not another
   fact about the entry. */
.tn-entry-byline { margin-top:14px; padding-top:14px; border-top:1px solid var(--tn-border); display:flex; flex-direction:column; gap:12px; }
.tn-entry-byline-row { display:flex; align-items:center; gap:10px; }
.tn-entry-byline-avatar { width:30px; height:30px; border-radius:50%; background:var(--tn-primary-soft); color:var(--tn-primary); display:grid; place-items:center; font-size:12.5px; font-weight:800; flex:0 0 30px; }
.tn-entry-byline-who { font-size:12.5px; color:var(--tn-muted); }
.tn-entry-byline-who strong { color:var(--tn-text); font-weight:700; }
.tn-entry-byline-time { margin-top:2px; font-size:11.5px; color:var(--tn-muted); }

/* Edit-history list (create/update/delete log) in the entry View modal. */
.tn-entry-history { margin-top:16px; padding-top:14px; border-top:1px solid var(--tn-border); }
.tn-entry-history-title { margin-bottom:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-entry-history-row { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12.5px; }
.tn-entry-history-action { flex:0 0 auto; min-width:56px; font-weight:700; color:var(--tn-text); }
.tn-entry-history-by { flex:1; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-entry-history-time { flex:0 0 auto; color:var(--tn-muted); }

/* ICON / COLOR PICKER (ledger create/update form) */
.tn-icon-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; max-height:230px; overflow-y:auto; padding:4px; border:1px solid var(--tn-border); border-radius:10px; }
.tn-icon-picker label { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:9px; cursor:pointer; font-size:10.5px; font-weight:600; color:var(--tn-muted); text-align:center; }
.tn-icon-picker label i { font-size:17px; color:var(--tn-text); }
.tn-icon-picker input { position:absolute; opacity:0; pointer-events:none; }
.tn-icon-picker label:has(input:checked) { background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-icon-picker label:has(input:checked) i { color:var(--tn-primary); }
.tn-icon-picker label:hover { background:var(--tn-background); }
.tn-color-row { display:flex; align-items:center; gap:14px; }
.tn-color-field { display:flex; align-items:center; gap:8px; }
.tn-color-field input[type="color"] { width:44px; height:38px; padding:2px; border:1px solid var(--tn-border); border-radius:8px; background:#fff; cursor:pointer; }
.tn-ledger-preview { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--tn-border); border-radius:12px; background:var(--tn-background); margin-bottom:18px; }
.tn-ledger-preview .tn-ledger-card-name { font-size:14px; }

/* MEMBER LIST -- plain row (used inline on the ledger detail page) */
.tn-member-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #eef2f7; }
.tn-member-row:last-child { border-bottom:0; }
.tn-member-avatar { width:38px; height:38px; border-radius:50%; background:var(--tn-primary-soft); color:var(--tn-primary); display:grid; place-items:center; font-size:14px; font-weight:800; flex:0 0 38px; }
.tn-member-email { font-size:13.5px; font-weight:700; overflow-wrap:anywhere; }
.tn-member-meta { font-size:12px; color:var(--tn-muted); margin-top:2px; }
.tn-member-actions { margin-left:auto; display:flex; gap:8px; flex-shrink:0; }

/* MEMBER GRID -- clickable cards (Manage Members page) */
.tn-member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.tn-member-card { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; cursor:pointer; text-align:left; width:100%; transition:box-shadow .15s ease,border-color .15s ease,transform .1s ease; }
.tn-member-card:hover { box-shadow:0 10px 26px rgba(15,23,42,.08); border-color:#cbd5e1; transform:translateY(-1px); }
.tn-member-card-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); color:#fff; display:grid; place-items:center; font-size:16px; font-weight:800; flex:0 0 44px; }
.tn-member-card-body { min-width:0; flex:1; }
.tn-member-card-email { font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-member-card-meta { display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap; }
.tn-member-card-chevron { color:#cbd5e1; font-size:13px; flex:0 0 auto; }

.tn-invite-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; min-height:100px; border:2px dashed var(--tn-border); border-radius:14px; color:var(--tn-primary); font-size:13.5px; font-weight:700; background:none; cursor:pointer; width:100%; }
.tn-invite-card:hover { border-color:var(--tn-primary); background:var(--tn-primary-soft); }
.tn-invite-card i { font-size:20px; }

/* MODAL
   Three-part layout: header (fixed at the top), body (the only part that
   scrolls) and, for forms, a footer bar pinned to the bottom of the dialog.
   On phones it becomes a bottom sheet. */
.tn-modal-backdrop { display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.tn-modal-backdrop.open { display:flex; animation:tn-modal-fade .18s ease; }
.tn-modal { display:flex; flex-direction:column; width:100%; max-width:420px; max-height:min(88vh,760px); max-height:min(88dvh,760px); overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(15,23,42,.32), 0 0 0 1px rgba(15,23,42,.05); animation:tn-modal-pop .22s cubic-bezier(.2,.8,.2,1); }
.tn-modal.tn-modal-wide { max-width:580px; }
.tn-modal-header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 16px 24px; border-bottom:1px solid var(--tn-border); background:#fff; }
.tn-modal-header h3 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-modal-close { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:var(--tn-background); font-size:22px; line-height:1; color:var(--tn-muted); cursor:pointer; flex:0 0 auto; transition:background .15s ease, color .15s ease; }
.tn-modal-close:hover { background:#e2e8f0; color:var(--tn-text); }
.tn-modal-close:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(37,99,235,.25); }
.tn-modal-body { flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:24px; }
/* A body that ends in the footer bar drops its own bottom padding so the
   bar sits flush against the bottom edge of the dialog. */
.tn-modal-body:has(> form > .tn-modal-footer), .tn-modal-body:has(> .tn-modal-footer) { padding-bottom:0; }
.tn-modal-footer { position:sticky; bottom:0; z-index:2; display:flex; gap:10px; justify-content:flex-end; margin:8px -24px 0; padding:14px 24px; border-top:1px solid var(--tn-border); background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.tn-modal-footer .tn-btn { height:42px; padding:0 22px; }
.tn-modal-open { overflow:hidden; }
.tn-modal-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:40px 0; color:var(--tn-muted); font-size:13.5px; font-weight:600; }
.tn-modal-loading i { font-size:16px; animation:tn-spin .7s linear infinite; }
.tn-modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }

/* Entry add/edit form inside the modal */
.tn-modal .tn-form-label { margin-bottom:7px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--tn-muted); }
.tn-modal .tn-form-control, .tn-modal .tn-dd-trigger { height:46px; border-radius:11px; background:#fff; }
.tn-modal textarea.tn-form-control { height:auto; }
.tn-modal .tn-form-control:hover, .tn-modal .tn-dd-trigger:hover { border-color:#cbd5e1; }
.tn-modal .tn-form-group { margin-bottom:18px; }
.tn-modal .tn-form-row { gap:0 18px; }
.tn-modal .tn-form-row > .tn-form-group { min-width:0; }

/* Cash In / Cash Out segmented switch (was unstyled browser radios). */
.tn-radio-row { display:grid; grid-template-columns:1fr 1fr; gap:4px; height:46px; padding:4px; border:1px solid var(--tn-border); border-radius:11px; background:var(--tn-background); }
.tn-radio-item { position:relative; display:flex; align-items:center; justify-content:center; margin:0; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--tn-muted); cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease; -webkit-user-select:none; user-select:none; }
.tn-radio-item input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.tn-radio-item:hover { color:var(--tn-text); }
.tn-radio-item:has(input:checked) { background:#fff; color:var(--tn-text); box-shadow:0 1px 4px rgba(15,23,42,.14); }
.tn-radio-item:has(input[value="cash_in"]:checked) { background:var(--tn-green); color:#fff; box-shadow:0 4px 12px rgba(22,163,74,.3); }
.tn-radio-item:has(input[value="cash_out"]:checked) { background:var(--tn-red); color:#fff; box-shadow:0 4px 12px rgba(220,38,38,.3); }
.tn-radio-item:has(input:focus-visible) { outline:2px solid #93c5fd; outline-offset:2px; }

@keyframes tn-modal-fade { from { opacity:0; } to { opacity:1; } }
@keyframes tn-modal-pop { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes tn-modal-sheet { from { transform:translateY(100%); } to { transform:none; } }

/* Phones: bottom sheet, full width, stacked fields, full-width footer buttons. */
@media (max-width:640px) {
  .tn-modal-backdrop { align-items:flex-end; padding:0; }
  .tn-modal, .tn-modal.tn-modal-wide { max-width:none; max-height:92vh; max-height:92dvh; border-radius:20px 20px 0 0; animation:tn-modal-sheet .26s cubic-bezier(.2,.8,.2,1); }
  .tn-modal-header { padding:14px 14px 14px 18px; }
  .tn-modal-body { padding:18px; }
  .tn-modal-footer { margin:8px -18px 0; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .tn-modal-footer .tn-btn { flex:1 1 0; }
  .tn-modal-body:has(> .tn-modal-actions) { padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .tn-modal .tn-form-row { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .tn-modal-backdrop.open, .tn-modal { animation:none; }
}
.tn-modal-member-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.tn-modal-member-avatar { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--tn-primary),var(--tn-primary-dark)); color:#fff; display:grid; place-items:center; font-size:19px; font-weight:800; flex:0 0 52px; }

/* NOTIFICATION LIST */
.tn-notif-item { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid #eef2f7; }
.tn-notif-item:last-child { border-bottom:0; }
.tn-notif-item.unseen { background:var(--tn-primary-soft); margin:0 -24px; padding:16px 24px; }
.tn-notif-icon { width:40px; height:40px; border-radius:10px; background:var(--tn-primary-soft); color:var(--tn-primary); display:grid; place-items:center; font-size:16px; flex:0 0 40px; }
.tn-notif-body { flex:1; min-width:0; }
.tn-notif-title { font-size:13.5px; font-weight:700; }
.tn-notif-time { font-size:12px; color:var(--tn-muted); margin-top:3px; }
.tn-notif-actions { display:flex; gap:8px; margin-top:10px; }

.tn-form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tn-form-help { margin-top:5px; color:#94a3b8; font-size:12px; }

/* FOOTER (same visual language as the public site's includes/foot.php) */
.tn-footer { padding:44px 0 24px; margin-top:auto; border-top:1px solid var(--tn-border); background:var(--tn-background); }
.tn-footer .tn-navbar-brand { font-size:18px; font-weight:800; color:var(--tn-text); display:inline-flex; align-items:center; gap:8px; }
.tn-footer .tn-brand-logo { height:30px; width:auto; }
.tn-footer-heading { margin-bottom:12px; font-size:13px; font-weight:700; }
.tn-footer-link { display:block; margin:8px 0; color:var(--tn-muted); font-size:13px; }
.tn-footer-link:hover { color:var(--tn-primary); }
.tn-footer-bottom { border-top:1px solid var(--tn-border); margin-top:28px; padding-top:16px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:var(--tn-muted); font-size:12px; }

/* Slim single-row footer -- just the copyright + a couple of links. */
.tn-footer-simple { padding:20px 0; }
.tn-footer-simple .tn-footer-bottom { border-top:0; margin-top:0; padding-top:0; align-items:center; }
.tn-footer-simple .tn-footer-link { display:inline; margin:0; }

@media (max-width:900px) {
  .tn-admin-sidebar { transform:translateX(-100%); box-shadow:0 0 0 100vmax rgba(0,0,0,0); }
  .tn-admin-sidebar.open { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.25); }
  .tn-admin-sidebar-close { display:block; }
  .tn-admin-main { margin-left:0; }
  .tn-admin-topbar-toggle { display:block; }
  .tn-form-row { grid-template-columns:1fr; }
  .tn-admin-content { padding:14px; }

  /* iOS Safari force-zooms the whole page in when a focused text input's
     font-size is under 16px (to make it readable), which is exactly what
     read as "the screen zooms out and goes off-screen" -- every real text
     input on the dashboard uses .tn-form-control, so this one rule covers
     all of them. Desktop keeps its tighter 14px; this is a mobile-only,
     iOS-only quirk. */
  .tn-form-control { font-size:16px; }
  .tn-user-menu-name { display:none; }
  .tn-dropdown-panel { right:14px; }

  /* Flat everywhere on mobile, not just the entries table -- a bordered/
     shadowed box nested inside an already-narrow screen just adds visual
     clutter. .tn-admin-content's own 14px side padding above is the only
     margin now; stacked cards still separate with their normal
     margin-top, just via whitespace instead of a border. */
  .tn-admin-card {
    padding:16px 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .tn-admin-card--table {
    padding:0;
  }
  .tn-admin-card--table .tn-admin-card-title,
  .tn-admin-card--table > .d-flex {
    padding:0 2px;
  }
  .tn-admin-card--table .tn-admin-table-wrap {
    margin:0 -2px;
  }
  .tn-admin-card--table .tn-admin-toolbar,
  .tn-admin-card--table .tn-pagination-admin,
  .tn-admin-card--table .tn-empty-state,
  .tn-admin-card--table .tn-filter-tabs {
    padding-left:2px;
    padding-right:2px;
  }
}

/* CATEGORY MANAGER -- second dialog layered over the entry modal. */
.tn-modal-backdrop-top { z-index:120; }
.tn-cat-modal { max-width:460px; }
.tn-cat-body { padding:18px 24px; }
.tn-cat-list { margin:0; padding:0; list-style:none; }
.tn-cat-row { display:flex; align-items:center; gap:8px; min-height:52px; padding:6px 0; border-bottom:1px solid var(--tn-border); }
.tn-cat-row:last-child { border-bottom:0; }
.tn-cat-name { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-cat-name-danger { color:var(--tn-red); }
.tn-cat-edit-input { flex:1; min-width:0; height:38px; }
.tn-cat-row .tn-btn-sm { flex:0 0 auto; }
.tn-cat-icon-btn { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border:0; border-radius:9px; background:none; font-size:13px; color:var(--tn-muted); cursor:pointer; transition:background .15s ease, color .15s ease; }
.tn-cat-icon-btn:hover { background:var(--tn-background); color:var(--tn-primary); }
.tn-cat-icon-danger:hover { background:var(--tn-red-soft); color:var(--tn-red); }
.tn-cat-hint { margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--tn-muted); }
.tn-cat-empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:30px 10px; text-align:center; color:var(--tn-muted); font-size:13px; }
.tn-cat-empty i { margin-bottom:8px; font-size:26px; color:#cbd5e1; }
.tn-cat-empty strong { color:var(--tn-text); font-size:14px; }
.tn-cat-msg { margin-bottom:12px; padding:10px 13px; border:1px solid #fecaca; border-radius:10px; background:var(--tn-red-soft); color:#b91c1c; font-size:13px; font-weight:600; }
.tn-cat-add { flex:0 0 auto; display:flex; gap:10px; padding:14px 24px; border-top:1px solid var(--tn-border); background:#fff; }
.tn-cat-add .tn-form-control { flex:1; min-width:0; height:44px; border-radius:11px; }
.tn-cat-add .tn-btn { height:44px; }
.tn-cat-busy .tn-cat-body { opacity:.6; pointer-events:none; }
@media (max-width:640px) {
  .tn-cat-body { padding:14px 18px; }
  .tn-cat-add { padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .tn-cat-row { flex-wrap:wrap; }
  .tn-cat-name-danger, .tn-cat-edit-input { flex:1 0 100%; }
  .tn-cat-row .tn-btn-sm { flex:1 1 0; }
}

/* BUSY LOCK -- full-screen, above every dialog, blocks all clicks while a save is in flight. */
.tn-busy { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); cursor:progress; }
.tn-busy[hidden] { display:none; }
.tn-busy-box { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:320px; padding:26px 30px; border-radius:18px; background:#fff; box-shadow:0 30px 80px rgba(15,23,42,.35); text-align:center; }
.tn-busy-box i { font-size:26px; color:var(--tn-primary); animation:tn-spin .7s linear infinite; }
.tn-busy-box strong { font-size:15.5px; font-weight:800; }
.tn-busy-box span { font-size:12.5px; line-height:1.5; color:var(--tn-muted); }

/* CENTERED FORM PAGE -- New/Edit Ledger: one column in the middle of the
   content area (breadcrumb lined up with the card), instead of hugging the left. */
.tn-form-page { width:100%; max-width:640px; margin:0 auto; }
.tn-form-page .tn-admin-card { padding:30px; box-shadow:0 12px 40px rgba(15,23,42,.06); }
.tn-form-page .tn-admin-card-title { margin-bottom:22px; text-align:center; font-size:18px; }
.tn-form-page .tn-ledger-preview { justify-content:center; text-align:left; }
.tn-form-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.tn-form-actions .tn-btn { min-width:150px; }
@media (max-width:640px) {
  .tn-form-page .tn-admin-card { padding:20px 16px; }
  .tn-form-actions { flex-direction:column-reverse; }
  .tn-form-actions .tn-btn { width:100%; }
}

/* NOTIFICATIONS -- Received/Sent switch, status filters, item states. */
.tn-seg { display:flex; gap:4px; padding:4px; margin-bottom:16px; border:1px solid var(--tn-border); border-radius:12px; background:var(--tn-background); }
.tn-seg a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--tn-muted); transition:background .15s ease, color .15s ease; }
.tn-seg a:hover { color:var(--tn-text); }
.tn-seg a.active { background:#fff; color:var(--tn-text); box-shadow:0 1px 4px rgba(15,23,42,.12); }
.tn-seg-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:var(--tn-red); color:#fff; font-size:10.5px; font-weight:800; line-height:1; }
.tn-notif-filters { margin-bottom:14px; }
.tn-notif-icon--accepted { background:var(--tn-green-soft); color:var(--tn-green); }
.tn-notif-icon--rejected, .tn-notif-icon--removed { background:var(--tn-red-soft); color:var(--tn-red); }
.tn-notif-icon--cancelled, .tn-notif-icon--left { background:#f1f5f9; color:var(--tn-muted); }
.tn-notif-title { line-height:1.45; overflow-wrap:anywhere; }
.tn-notif-sub { margin-top:2px; font-size:12.5px; color:var(--tn-muted); overflow-wrap:anywhere; }
.tn-notif-time { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tn-notif-meta { color:var(--tn-muted); }
.tn-notif-new { padding:2px 8px; border-radius:100px; background:var(--tn-primary); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.tn-notif-actions { flex-wrap:wrap; }
.tn-notif-actions form { margin:0; }
.tn-notif-more { display:flex; justify-content:center; margin-top:18px; }
@media (max-width:640px) {
  .tn-notif-item.unseen { margin:0 -16px; padding:16px; }
  .tn-notif-actions .tn-btn { flex:1 1 auto; }
}

/* NUMBERED PAGER (notifications) */
.tn-notif-pager { justify-content:center; margin-top:22px; }
.tn-notif-pager .tn-pager-step { display:inline-flex; align-items:center; gap:7px; padding:0 14px; }
.tn-notif-pager .tn-pager-step i { font-size:10px; }
.tn-notif-pager .tn-pager-disabled { opacity:.45; cursor:default; }
.tn-notif-pager .tn-pager-gap { border:0; min-width:auto; padding:0 2px; color:var(--tn-muted); }
@media (max-width:640px) {
  .tn-admin-toolbar input[type="text"].tn-form-control { flex:1 1 100%; }
}


/* DASHBOARD HOME -- hero, ajax sections and their skeleton placeholders (see index.php / home.js). */
.tn-home-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tn-home-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tn-home-section { margin:20px 0 22px; }
.tn-home-stats { margin-top:0; }
@media (max-width:640px) { .tn-home-stats .tn-stat-card:last-child { grid-column:1 / -1; } }
a.tn-stat-card { display:block; color:inherit; text-decoration:none; }
.tn-stat-card .tn-stat-sub { display:block; margin-top:4px; font-size:12px; color:var(--tn-muted); }
.tn-stat-card.tn-stat-attn { background:var(--tn-primary-soft); border-color:#bfdbfe; }
.tn-stat-card.tn-stat-attn .tn-stat-value { color:var(--tn-primary); }
.tn-home-link { font-size:13px; font-weight:700; color:var(--tn-primary); }
.tn-home-recent-head, .tn-home-attn-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.tn-home-recent-links { display:flex; align-items:center; gap:14px; }
.tn-attn-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid #eef2f7; }
.tn-attn-text { flex:1; min-width:200px; }
.tn-attn-actions { display:flex; gap:8px; }
.tn-home-error { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border:1px solid #fecaca; border-radius:12px; background:var(--tn-red-soft); color:var(--tn-red); font-size:13.5px; font-weight:600; }
.tn-home-error span { flex:1; min-width:160px; }

.tn-skel { display:block; border-radius:8px; background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 37%,#eef2f7 63%); background-size:400% 100%; animation:tn-skel 1.4s ease infinite; }
.tn-skel-line { height:11px; }
.tn-skel-value { width:38%; height:24px; margin:10px 0; }
.tn-skel-icon { width:42px; height:42px; border-radius:12px; flex:0 0 42px; }
.tn-skel-row { pointer-events:none; }
@keyframes tn-skel { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
@media (prefers-reduced-motion:reduce) { .tn-skel { animation:none; } }

/* MEMBERS page: ledger picker and the Invite button share one row (see members/members_data.php). */
.tn-members-bar { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
.tn-members-bar-ledger { display:flex; align-items:center; gap:10px; flex:1 1 320px; min-width:0; margin:0; }
.tn-members-bar-ledger .tn-dd { width:auto; flex:0 1 380px; min-width:200px; }
.tn-members-bar-ledger .tn-dd-trigger { height:40px; }
.tn-members-invite { flex:0 0 auto; height:40px; }
@media (max-width:640px) {
  .tn-members-bar { flex-direction:column; align-items:stretch; }
  .tn-members-bar-ledger { flex-basis:auto; }
  .tn-members-bar-ledger .tn-dd { flex:1 1 auto; }
  .tn-members-invite { width:100%; }
}

.tn-notif-skel-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }

/* DASHBOARD HOME > Recent entries: each row links to its ledger. */
.tn-recent-entries { display:block; }
a.tn-recent-entry { display:block; color:inherit; text-decoration:none; }
a.tn-recent-entry:hover { background:var(--tn-background); }
.tn-recent-entry .tn-entry-row-footer { padding-left:46px; }
.tn-recent-entry .tn-badge { max-width:100%; overflow-wrap:anywhere; white-space:normal; }

/* LEDGER > Analyze (ledger/analyze.php + analyze_data.php, drawn by assets/js/analyze.js). */
.tn-analyze-tabs { margin-top:18px; }
.tn-analyze-range-label { display:flex; align-items:center; gap:7px; margin:14px 0 0; font-size:13px; font-weight:600; color:var(--tn-muted); }
.tn-analyze-custom { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-top:16px; }
.tn-analyze-custom .tn-form-group { flex:0 1 180px; min-width:140px; margin-bottom:0; }
.tn-analyze-note { margin:14px 0 0; font-size:12.5px; color:var(--tn-muted); }
.tn-analyze-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.tn-analyze-card-head .tn-admin-card-title { margin:0; }
.tn-analyze-card-head .tn-admin-card-title i { margin-right:6px; font-size:14px; color:var(--tn-muted); }
.tn-analyze-legend { display:flex; gap:16px; font-size:12.5px; font-weight:700; color:#475569; }
.tn-legend-dot { display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:50%; }
.tn-analyze-flow { position:relative; height:300px; }
.tn-analyze-toggle { display:inline-flex; gap:4px; padding:3px; border-radius:100px; background:var(--tn-background); border:1px solid var(--tn-border); }
.tn-analyze-toggle button { padding:6px 14px; border:0; border-radius:100px; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--tn-muted); cursor:pointer; transition:.15s; }
.tn-analyze-toggle button:hover { color:var(--tn-text); }
.tn-analyze-toggle button.active { background:#fff; color:var(--tn-text); box-shadow:0 1px 3px rgba(15,23,42,.12); }
.tn-analyze-toggle button[data-metric="cash_out"].active { color:var(--tn-red); }
.tn-analyze-toggle button[data-metric="cash_in"].active { color:var(--tn-green); }

.tn-analyze-body { display:grid; grid-template-columns:minmax(200px,260px) 1fr; gap:28px; align-items:start; }
.tn-analyze-donut { position:relative; width:100%; max-width:260px; margin:0 auto; }
.tn-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 22%; text-align:center; pointer-events:none; }
.tn-donut-center-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-donut-center-value { font-size:16px; font-weight:800; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-donut-empty canvas { opacity:.15; }

.tn-analyze-list { display:flex; flex-direction:column; min-width:0; }
.tn-bar-row { padding:12px 0; border-top:1px solid #eef2f7; }
.tn-bar-row:first-child { padding-top:0; border-top:0; }
.tn-bar-head { display:flex; align-items:center; gap:9px; margin-bottom:8px; min-width:0; }
.tn-bar-dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; }
.tn-bar-name { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--tn-text); overflow-wrap:anywhere; }
.tn-bar-count { flex:0 0 auto; font-size:12px; color:var(--tn-muted); }
.tn-bar-line { display:flex; align-items:center; gap:10px; margin-top:5px; }
.tn-bar-tag { flex:0 0 28px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--tn-muted); }
.tn-bar-track { flex:1; min-width:0; height:10px; border-radius:100px; background:#f1f5f9; overflow:hidden; }
.tn-bar-fill { display:block; height:100%; border-radius:100px; }
.tn-bar-in { background:var(--tn-green); }
.tn-bar-out { background:var(--tn-red); }
.tn-bar-amt { flex:0 0 auto; min-width:64px; font-size:13px; font-weight:800; text-align:right; }
.tn-bar-amt-in { color:var(--tn-green); }
.tn-bar-amt-out { color:var(--tn-red); }

@media (max-width:760px) {
  .tn-analyze-body { grid-template-columns:1fr; gap:22px; }
  .tn-analyze-donut { max-width:220px; }
  .tn-analyze-flow { height:240px; }
  .tn-analyze-custom .tn-form-group { flex:1 1 140px; }
  .tn-analyze-custom .tn-btn { flex:1 1 100%; }
}

/* LEDGER > Analyze > Calendar (ledger/_calendar_card.php + calendar_data.php, run by assets/js/calendar.js). */
.tn-cal-card { scroll-margin-top:80px; }
.tn-cal-loading { opacity:.55; pointer-events:none; transition:opacity .15s ease; }
.tn-cal-hint { display:flex; align-items:center; gap:7px; margin:14px 0 0; font-size:12.5px; color:var(--tn-muted); }
.tn-cal-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tn-cal-arrow { flex:0 0 auto; width:40px; height:40px; padding:0; }
.tn-cal-month-input { width:auto; min-width:170px; height:40px; font-weight:700; }
.tn-cal-today { margin-left:auto; height:40px; }
.tn-cal-month-totals { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; margin-bottom:12px; font-size:13px; font-weight:800; color:var(--tn-text); }
.tn-cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.tn-cal-weekday { padding:4px 0 6px; text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tn-muted); }
.tn-cal-cell { display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:4px; min-height:56px; padding:8px 4px 7px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; font:inherit; color:var(--tn-text); cursor:pointer; transition:.12s; }
.tn-cal-cell:hover { border-color:var(--tn-primary); background:var(--tn-primary-soft); }
.tn-cal-num { font-size:14px; font-weight:700; line-height:1; }
.tn-cal-dots { display:flex; align-items:center; justify-content:center; gap:4px; min-height:8px; }
.tn-cal-dot { display:block; width:8px; height:8px; border-radius:50%; }
.tn-cal-dot.in { background:var(--tn-green); }
.tn-cal-dot.out { background:var(--tn-red); }
.tn-cal-cell.is-today { border-color:var(--tn-primary); box-shadow:inset 0 0 0 1px var(--tn-primary); }
.tn-cal-cell.is-selected { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.28); }
.tn-cal-cell.is-selected .tn-cal-dot.in { background:#bbf7d0; }
.tn-cal-cell.is-selected .tn-cal-dot.out { background:#fecaca; }
.tn-cal-panel { margin-top:20px; padding-top:18px; border-top:1px solid var(--tn-border); }
.tn-cal-panel-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; font-size:15px; font-weight:800; color:var(--tn-text); }
.tn-cal-none { display:flex; align-items:center; justify-content:center; gap:8px; padding:26px 12px; border:1px dashed var(--tn-border); border-radius:12px; font-size:13.5px; color:var(--tn-muted); }

@media (max-width:640px) {
  .tn-cal-grid { gap:4px; }
  .tn-cal-cell { min-height:46px; padding:6px 2px 5px; border-radius:8px; }
  .tn-cal-num { font-size:13px; }
  .tn-cal-month-input { flex:1 1 auto; min-width:0; }
  .tn-cal-today { margin-left:0; }
}

/* LEDGER: a back button sits on its own row at the top left of a page's header card. */
.tn-back-btn { margin-bottom:16px; }

/* LEDGER > Calendar > the selected day: the same cards as the Analyze page, but flat inside the
   calendar card (a bordered card inside a bordered card looks heavy) -- just a divider between them. */
.tn-cal-panel .tn-admin-card { margin-top:0; padding:20px 0 0; border:0; border-top:1px solid #eef2f7; border-radius:0; background:transparent; }
.tn-cal-panel .tn-admin-card + .tn-admin-card { margin-top:20px; }
.tn-cal-panel .tn-stat-grid-compact { margin-bottom:20px; }

/* AUTH on phones -- Sign In / Create Account / Verify / Forgot / Reset. The white card is dropped: a card inside
   the page's own side padding left the fields only ~250px wide on a 360px screen. Now the form sits straight on
   the page with one 20px gutter, inputs at 16px (so iOS doesn't zoom in on focus) and 48px tall touch targets. */
@media (max-width:640px) {
  .tn-guest-topbar { gap:12px; padding:14px 20px; }
  .tn-guest-topbar .tn-navbar-brand { font-size:18px; }
  .tn-guest-topbar a.tn-back-link { font-size:12.5px; }

  .tn-admin-login-wrap { display:block; min-height:0; padding:32px 20px 36px; }
  .tn-admin-login-card { max-width:none; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .tn-admin-login-brand { margin-bottom:22px; font-size:20px; }
  .tn-admin-login-icon { width:38px; height:38px; }
  .tn-admin-login-card h1 { margin:0 0 8px; font-size:27px; line-height:1.2; font-weight:800; letter-spacing:-.02em; }
  .tn-admin-login-card p.sub { margin:0 0 26px; font-size:15px; line-height:1.55; }

  .tn-auth-mode { margin-bottom:24px; background:#eef2f7; }
  .tn-auth-mode a { padding:11px 0; font-size:14.5px; }

  .tn-admin-login-card .tn-form-group { margin-bottom:18px; }
  .tn-admin-login-card .tn-form-label { margin-bottom:7px; font-size:14px; }
  .tn-admin-login-card .tn-form-control { height:48px; font-size:16px; border-radius:11px; }
  .tn-admin-login-card .tn-otp-input { font-size:24px; }
  .tn-admin-login-card .tn-pw > .tn-form-control { padding-right:48px; }
  .tn-admin-login-card .tn-pw-toggle { width:48px; font-size:16px; }
  .tn-admin-login-card .tn-form-help { font-size:13px; }
  .tn-admin-login-card .tn-alert { font-size:14px; line-height:1.5; }
  .tn-admin-login-card .tn-email-chip { font-size:14.5px; overflow-wrap:anywhere; }
  .tn-admin-login-card .tn-btn { height:50px; font-size:16px; border-radius:11px; }

  /* "Stay signed in" + "?" stay on one line; "Forgot password?" drops to its own line beneath. */
  .tn-stay-row { margin-bottom:22px; row-gap:6px; }
  .tn-stay-check { font-size:14.5px; }
  .tn-stay-check input { width:20px; height:20px; }
  .tn-info-btn { width:22px; height:22px; font-size:13px; }
  .tn-stay-forgot { flex:0 0 100%; margin:4px 0 0; padding:4px 0; font-size:14.5px; }

  .tn-auth-foot-link { margin-top:22px; font-size:14.5px; }
  .tn-footer-simple { padding:16px 0; }
  .tn-footer-simple .container { padding-left:20px; padding-right:20px; }
}

/* Very narrow phones: the top bar shows just the logo, so it stays on one line beside "Back to TallyKnot.com". */
@media (max-width:360px) {
  .tn-guest-topbar .tn-navbar-brand { font-size:0; }
}

/* Phones: a back button says just "Back" (the arrow + word), and the top bar shows just the page ("Analyze"),
   not "Japan Expenses · Analyze" -- the ledger's name is already in the breadcrumb right below. */
@media (max-width:640px) {
  .tn-back-more { display:none; }
  .tn-topbar-full { display:none; }
  .tn-topbar-short { display:inline; }
}

/* ---- Language switch (EN <-> JA) ----
   Desktop: a small pill in the top bar, just before the bell. At the 900px break where the sidebar becomes a
   slide-in menu (phones / tablets) the pill leaves the top bar and the same link appears in the menu instead
   (.tn-admin-nav-lang). The bell stays in the top bar at every size. */
.tn-lang-switch { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--tn-border); border-radius:100px; color:#475569; font-size:12.5px; font-weight:700; white-space:nowrap; }
.tn-lang-switch:hover { background:var(--tn-background); color:var(--tn-text); }
.tn-admin-nav-lang { display:none; }

@media (max-width:900px) {
  .tn-topbar-actions .tn-lang-switch { display:none; }
  .tn-admin-nav-lang { display:flex; }
}