/*
Theme Name: Northstar Finance Dashboard
Author: Portfolio Theme
Description: A bold, responsive personal finance dashboard portfolio theme with cash-flow visuals, spending allocation, transaction entry, and savings goals.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: northstar-finance
*/

:root {
      --bg: #090909;
      --panel: #10110f;
      --panel-2: #151714;
      --text: #f4f2e9;
      --muted: #9b9c93;
      --line: #2a2d27;
      --lime: #d5ff54;
      --lime-soft: rgba(213,255,84,.12);
      --orange: #ff8f5b;
      --blue: #8dc4ff;
      --red: #ff6f6f;
      --radius: 22px;
      --shadow: 0 24px 80px rgba(0,0,0,.32);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 83% 4%, rgba(213,255,84,.07), transparent 28%),
        linear-gradient(180deg, #0b0c0a 0%, #090909 48%, #0b0b0b 100%);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
    }

    button, input, select { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; text-decoration: none; }

    .shell { max-width: 1540px; margin: 0 auto; padding: 0 26px 40px; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 18px;
      min-height: 76px;
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(18px);
      background: rgba(9,9,9,.8);
    }

    .brand {
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .16em;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .brand-mark {
      width: 28px; height: 28px;
      border: 1px solid var(--lime);
      border-radius: 50%;
      display: grid; place-items: center;
      color: var(--lime);
      font-size: 12px;
    }

    .nav {
      display: flex;
      gap: 6px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #0d0e0c;
    }

    .nav button {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 9px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .nav button.active { background: var(--text); color: #090909; }

    .top-actions { display: flex; justify-content: flex-end; gap: 10px; }
    .ghost, .primary {
      border-radius: 999px;
      padding: 10px 15px;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .ghost { border: 1px solid var(--line); color: var(--text); background: transparent; }
    .primary { border: 1px solid var(--lime); background: var(--lime); color: #080a05; }

    .hero {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 24px;
      padding: 52px 0 30px;
      align-items: end;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--lime);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .2em;
      font-weight: 900;
      margin-bottom: 15px;
    }
    .eyebrow::before { content:""; width: 34px; height: 1px; background: var(--lime); }

    h1 {
      margin: 0;
      max-width: 920px;
      font-size: clamp(58px, 8.2vw, 138px);
      line-height: .82;
      text-transform: uppercase;
      letter-spacing: -.072em;
      font-weight: 950;
    }

    .hero-copy {
      border-left: 1px solid var(--line);
      padding-left: 24px;
      padding-bottom: 7px;
    }
    .hero-copy p { margin: 0 0 20px; max-width: 430px; color: #c6c7be; line-height: 1.6; font-size: 15px; }
    .hero-meta { display: flex; gap: 22px; flex-wrap: wrap; }
    .hero-meta div { min-width: 105px; }
    .hero-meta strong { display: block; font-size: 22px; letter-spacing: -.04em; }
    .hero-meta span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }

    .ticker {
      margin: 4px calc(50% - 50vw) 26px;
      border-block: 1px solid var(--line);
      overflow: hidden;
      background: var(--lime);
      color: #0a0a08;
      transform: rotate(-.35deg);
    }
    .ticker-track {
      width: max-content;
      display: flex;
      gap: 28px;
      padding: 11px 0;
      animation: marquee 22s linear infinite;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: 12px;
    }
    @keyframes marquee { to { transform: translateX(-50%); } }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: 34px 0 14px;
    }
    .section-title { display: flex; gap: 14px; align-items: baseline; }
    .section-title .num { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
    .section-title h2 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .12em; }
    .periods { display: flex; gap: 6px; flex-wrap: wrap; }
    .periods button {
      border: 1px solid var(--line); background: transparent; color: var(--muted);
      border-radius: 999px; padding: 8px 12px; font-size: 11px; text-transform: uppercase; font-weight: 900;
    }
    .periods button.active { color: #090909; border-color: var(--text); background: var(--text); }

    .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .card {
      background: linear-gradient(155deg, rgba(255,255,255,.025), rgba(255,255,255,.006));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .kpi { min-height: 190px; padding: 20px; position: relative; }
    .kpi::after {
      content:""; position:absolute; width:92px; height:92px; border-radius:50%;
      border:1px solid rgba(255,255,255,.05); right:-30px; bottom:-34px;
    }
    .kpi-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .label { color: var(--muted); font-size: 10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
    .delta { font-size: 11px; padding: 6px 8px; border-radius:999px; background:var(--lime-soft); color:var(--lime); font-weight:900; }
    .delta.neg { background: rgba(255,111,111,.1); color: var(--red); }
    .big-number { margin-top: 29px; font-size: clamp(32px, 3vw, 52px); letter-spacing: -.06em; font-weight:950; }
    .sub { color: var(--muted); font-size: 12px; margin-top: 7px; }
    .microbar { height: 7px; border-radius:99px; background:#22241f; overflow:hidden; margin-top:23px; }
    .microbar span { display:block; height:100%; background:var(--lime); border-radius:99px; }

    .main-grid { display: grid; grid-template-columns: 1.55fr .75fr; gap: 12px; margin-top: 12px; }
    .chart-card { min-height: 450px; padding: 20px; }
    .card-head { display:flex; justify-content:space-between; gap:16px; align-items:start; }
    .card-head h3 { margin: 7px 0 0; font-size: 26px; letter-spacing:-.04em; }
    .icon-btn { border:1px solid var(--line); background:transparent; color:var(--text); width:38px; height:38px; border-radius:50%; }

    .chart-stats { display:flex; gap:28px; margin:24px 0 7px; }
    .chart-stat strong { font-size: 19px; }
    .chart-stat span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; margin-top:3px; letter-spacing:.11em; }
    .legend-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; background:var(--lime); }
    .legend-dot.alt { background:var(--blue); }

    #cashflowChart { width: 100%; height: 285px; display:block; overflow:visible; }
    .chart-grid line { stroke:#252821; stroke-width:1; }
    .axis-label { fill:#74766d; font-size:10px; font-weight:700; }
    .income-line { stroke:var(--lime); stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
    .expense-line { stroke:var(--blue); stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.82; }
    .income-area { fill:url(#incomeGradient); opacity:.42; }

    .allocation { padding: 20px; min-height:450px; display:flex; flex-direction:column; }
    .donut-wrap { display:grid; place-items:center; padding:24px 0 18px; }
    .donut {
      width: 190px; height:190px; border-radius:50%;
      background: conic-gradient(var(--lime) 0 34%, var(--blue) 34% 57%, var(--orange) 57% 74%, #f3f0e4 74% 88%, #575a51 88% 100%);
      display:grid; place-items:center; position:relative;
    }
    .donut::after { content:""; width:122px; height:122px; border-radius:50%; background:#10110f; border:1px solid var(--line); }
    .donut-center { position:absolute; z-index:2; text-align:center; }
    .donut-center strong { display:block; font-size:29px; letter-spacing:-.06em; }
    .donut-center span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.11em; }
    .category-list { display:grid; gap:10px; margin-top:auto; }
    .category-row { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; padding-top:10px; border-top:1px solid var(--line); }
    .cat-left { display:flex; align-items:center; gap:10px; font-size:12px; }
    .swatch { width:9px; height:9px; border-radius:50%; background:var(--lime); }
    .category-row:nth-child(2) .swatch { background:var(--blue); }
    .category-row:nth-child(3) .swatch { background:var(--orange); }
    .category-row:nth-child(4) .swatch { background:#f3f0e4; }
    .cat-value { text-align:right; }
    .cat-value strong { font-size:12px; }
    .cat-value span { color:var(--muted); font-size:10px; margin-left:7px; }

    .editorial {
      margin: 12px 0;
      display:grid; grid-template-columns:.65fr 1.35fr;
      min-height:320px;
      border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
      background:var(--lime); color:#0a0a08;
    }
    .editorial-side { padding:24px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid rgba(0,0,0,.18); }
    .editorial-side .label { color:#424538; }
    .editorial-side p { max-width:350px; font-size:13px; line-height:1.55; color:#2e3029; }
    .editorial-main { padding:24px 28px; display:flex; align-items:center; }
    .editorial-main h2 { margin:0; font-size:clamp(48px,6.7vw,104px); line-height:.86; text-transform:uppercase; letter-spacing:-.07em; max-width:940px; }

    .lower-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:12px; }
    .transactions { padding:20px; }
    .table-head, .transaction {
      display:grid; grid-template-columns: 1.3fr .8fr .7fr .55fr; gap:14px; align-items:center;
    }
    .table-head { color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.13em; font-weight:900; padding:18px 8px 10px; }
    .transaction { padding:13px 8px; border-top:1px solid var(--line); font-size:12px; }
    .merchant { display:flex; gap:11px; align-items:center; font-weight:800; }
    .merchant-icon { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#1a1c17; border:1px solid var(--line); }
    .category-chip { width:max-content; padding:6px 8px; border-radius:999px; border:1px solid var(--line); color:#c7c9be; font-size:10px; }
    .amount { text-align:right; font-weight:900; }
    .amount.positive { color:var(--lime); }
    .date { color:var(--muted); }

    .goal-card { padding:20px; min-height:430px; display:flex; flex-direction:column; }
    .goal-circle {
      width:180px; height:180px; margin:28px auto 20px; border-radius:50%;
      display:grid; place-items:center; position:relative;
      background:conic-gradient(var(--lime) 0 72%, #20221e 72% 100%);
    }
    .goal-circle::after { content:""; width:142px; height:142px; border-radius:50%; background:#10110f; position:absolute; }
    .goal-circle div { position:relative; z-index:2; text-align:center; }
    .goal-circle strong { display:block; font-size:36px; letter-spacing:-.06em; }
    .goal-circle span { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
    .goal-details { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; }
    .goal-box { border:1px solid var(--line); border-radius:15px; padding:14px; }
    .goal-box span { display:block; color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.12em; }
    .goal-box strong { display:block; margin-top:7px; font-size:16px; }

    footer {
      margin-top:36px; border-top:1px solid var(--line); padding:26px 0 10px;
      display:flex; justify-content:space-between; gap:18px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
    }

    .modal-backdrop {
      position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:20px;
      background:rgba(0,0,0,.72); backdrop-filter:blur(10px);
    }
    .modal-backdrop.open { display:grid; }
    .modal { width:min(540px,100%); border:1px solid var(--line); border-radius:24px; background:#0d0e0c; box-shadow:var(--shadow); padding:22px; }
    .modal h3 { margin:4px 0 20px; font-size:32px; text-transform:uppercase; letter-spacing:-.05em; }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .field { display:grid; gap:7px; }
    .field.full { grid-column:1/-1; }
    .field label { color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.12em; font-weight:900; }
    .field input, .field select { background:#151714; border:1px solid var(--line); color:var(--text); padding:12px; border-radius:12px; outline:none; }
    .field input:focus, .field select:focus { border-color:var(--lime); }
    .modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

    .toast {
      position:fixed; right:24px; bottom:24px; z-index:120; padding:12px 15px; border-radius:12px;
      color:#0a0a08; background:var(--lime); font-size:12px; font-weight:900;
      transform:translateY(30px); opacity:0; pointer-events:none; transition:.28s ease;
    }
    .toast.show { transform:translateY(0); opacity:1; }

    @media (max-width: 1080px) {
      .topbar { grid-template-columns:1fr auto; }
      .nav { display:none; }
      .hero, .main-grid, .lower-grid { grid-template-columns:1fr; }
      .hero-copy { border-left:0; border-top:1px solid var(--line); padding:20px 0 0; }
      .kpis { grid-template-columns:repeat(2,1fr); }
      .editorial { grid-template-columns:1fr; }
      .editorial-side { border-right:0; border-bottom:1px solid rgba(0,0,0,.18); }
    }

    @media (max-width: 680px) {
      .shell { padding-inline:14px; }
      .topbar { min-height:66px; }
      .top-actions .ghost { display:none; }
      .hero { padding-top:36px; }
      h1 { font-size:clamp(56px,19vw,92px); }
      .kpis { grid-template-columns:1fr; }
      .toolbar { align-items:flex-start; flex-direction:column; }
      .editorial-main { padding:24px 20px 30px; }
      .editorial-main h2 { font-size:clamp(44px,15vw,70px); }
      .table-head { display:none; }
      .transaction { grid-template-columns:1fr auto; }
      .transaction > .category-chip, .transaction > .date { display:none; }
      .form-grid { grid-template-columns:1fr; }
      .field.full { grid-column:auto; }
      footer { flex-direction:column; }
    }
/* WordPress integration */
body.northstar-finance-theme { margin: 0; }
body.admin-bar .topbar { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .topbar { top: 46px; } }