/*
 * local.css -- the few things TallyKnot Local adds on top of dashboard.css (a copy of the
 * online dashboard's stylesheet, so every card, form, dropdown and chart looks the same).
 */

/* "Local" chip beside the brand in the sidebar. */
.tn-local-chip { padding:2px 8px; border-radius:100px; background:rgba(37,99,235,.25); color:#bfdbfe; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }

/* Sidebar: account-only items carry a small lock; the login link stands out. */
.tn-nav-lock { margin-left:auto; width:auto !important; font-size:10px !important; color:#64748b; }
.tn-admin-nav-link.tn-nav-login { margin-top:4px; border:1px solid rgba(255,255,255,.14); color:#fff; }
.tn-admin-nav-link.tn-nav-login:hover { background:var(--tn-primary); border-color:var(--tn-primary); }

/* The line under the breadcrumb on every page: what Local mode is + Log in + "?". */
.tn-local-note { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-bottom:18px; padding:10px 14px; border:1px solid #bfdbfe; border-radius:12px; background:var(--tn-primary-soft); font-size:13px; line-height:1.5; color:#1e3a8a; }
.tn-local-note > i { flex:0 0 auto; color:var(--tn-primary); }
.tn-local-note-text { flex:1 1 260px; min-width:0; }
.tn-local-note-login { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:100px; background:var(--tn-primary); color:#fff; font-size:12.5px; font-weight:700; white-space:nowrap; }
.tn-local-note-login:hover { background:var(--tn-primary-dark); color:#fff; }
.tn-local-note-login i { font-size:10px; }
.tn-local-note .tn-info-btn { flex:0 0 auto; width:26px; height:26px; font-size:13px; border-color:#bfdbfe; color:var(--tn-primary); }

/* "Log in to TallyKnot" popup (account-only features) and the "?" explainer. */
.tn-local-prompt-icon { display:grid; place-items:center; width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:23px; box-shadow:0 0 0 8px rgba(37,99,235,.05); }
.tn-local-prompt-title { margin:0 0 6px; text-align:center; font-size:17px; font-weight:800; color:var(--tn-text); }
.tn-local-prompt-text { margin:0 0 16px; text-align:center; font-size:13.5px; line-height:1.6; color:var(--tn-muted); }
.tn-local-points { display:grid; gap:10px; margin:0 0 4px; padding:0; list-style:none; }
.tn-local-points li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.5; color:var(--tn-text); }
.tn-local-points li i { flex:0 0 auto; width:16px; margin-top:4px; font-size:12px; text-align:center; color:var(--tn-green); }
.tn-local-points li.is-warn i { color:#d97706; }
.tn-local-subhead { margin:18px 0 10px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--tn-muted); }
.tn-local-subhead:first-child { margin-top:0; }
.tn-local-prompt-actions { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.tn-local-prompt-skip { border:0; background:none; padding:6px; font:inherit; font-size:13px; font-weight:700; color:var(--tn-muted); cursor:pointer; }
.tn-local-prompt-skip:hover { color:var(--tn-text); }

/* Ledger header: the buttons that need an account. */
.tn-btn .tn-btn-lock { font-size:.72em; opacity:.6; }

/* Entry view modal: Edit / Delete row. */
.tn-entry-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tn-form-error { margin-bottom:16px; }
.tn-form-error[hidden] { display:none; }

/* Analyze: the cards built by analyze.js sit in their own wrapper, so they need the usual gap under the head card. */
#tnAnalyzeBody { margin-top:20px; }

/* Analyze on phones: the four period tabs stay on one line (dashboard.css) -- let that line scroll
   sideways inside the card instead of pushing the whole page wider than the screen. */
@media (max-width:900px) {
  .tn-analyze-tabs { max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px 2px 8px; margin-left:-2px; margin-right:-2px; }
  .tn-analyze-tabs::-webkit-scrollbar { display:none; }
}

/* "Download app" (Google Play) -- right after each Log in link, with the green Android icon. */
.tn-android-icon { color:#3ddc84 !important; }
.tn-local-note-app { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border:1px solid #bbf7d0; border-radius:100px; background:#fff; color:var(--tn-text); font-size:12.5px; font-weight:700; white-space:nowrap; }
.tn-local-note-app:hover { border-color:#3ddc84; background:var(--tn-green-soft); color:var(--tn-text); }
.tn-local-note-app i { font-size:14px; }