/* Gobux Polish Theme
   This stylesheet defines a cohesive colour palette, typography and layout primitives for the Gobux web app.
   It introduces soft backgrounds, elevated cards, responsive grids, buttons, tables, badges and focus rings.
   The dark mode values automatically apply when the user's OS prefers a dark theme. */
:root{
  /* Colour palette */
  --bg: hsl(220 20% 97%);
  --panel: hsl(0 0% 100%);
  --ink: hsl(222 35% 15%);
  --muted: hsl(222 12% 45%);
  --brand: hsl(261 75% 55%);
  --brand-ink: #fff;
  --ok: hsl(158 60% 40%);
  --warn: hsl(40 95% 45%);
  --err: hsl(0 75% 55%);
  --ring: hsla(261, 75%, 55%, .35);

  /* Radii, shadows and sizing scales */
  --r: 16px;
  --shadow: 0 10px 30px rgba(2,10,34,.08);
  --maxw: 1120px;

  /* Spacing scale */
  --s1: 6px; --s2: 10px; --s3: 14px; --s4: 18px; --s5: 24px; --s6: 32px; --s7: 48px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: hsl(230 21% 10%);
    --panel: hsl(230 18% 14%);
    --ink: hsl(0 0% 100%);
    --muted: hsl(230 8% 68%);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, hsla(261,85%,60%,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, hsla(200,85%,60%,.10), transparent 60%),
    var(--bg);
}

/* Layout helpers */
.app{
  min-height:100%;
  display:grid;
  grid-template-rows: auto 1fr auto;
}
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(120%) blur(8px);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.topbar-inner{max-width:var(--maxw); margin:0 auto; padding: var(--s4) var(--s5); display:flex; gap: var(--s5); align-items:center; justify-content:space-between;}
.brand{display:flex; gap:var(--s3); align-items:center; font-weight:700}
.brand .dot{width:10px; height:10px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 6px var(--ring)}
.user{display:flex; gap: var(--s3); align-items:center; color:var(--muted);}

.container{max-width:var(--maxw); margin:0 auto; padding: var(--s6) var(--s5);}
.grid{
  display:grid; gap: var(--s5);
  grid-template-columns: repeat(12, 1fr);
}
.card{
  background:var(--panel);
  box-shadow:var(--shadow);
  border-radius:var(--r);
  padding: var(--s5);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(2,10,34,.12); }
.card h3{margin:0 0 var(--s3); font-size:1.05rem}

/* Column utilities */
.col-4{grid-column: span 4}
.col-5{grid-column: span 5}
.col-6{grid-column: span 6}
.col-7{grid-column: span 7}
.col-8{grid-column: span 8}
.col-12{grid-column: span 12}
@media (max-width: 900px){
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column: span 12}
}

/* Buttons */
.btn{
  appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:600;
  background:var(--brand); color:var(--brand-ink); cursor:pointer;
  box-shadow: 0 6px 18px hsla(261,75%,55%,.25);
  transition: transform .08s ease, box-shadow .12s ease, filter .08s;
}
.btn:hover{ filter: brightness(1.05) }
.btn:active{ transform: translateY(1px) }

/* Table */
.table{ width:100%; border-collapse:separate; border-spacing:0 8px; font-size:.9rem; }
.table thead th{ text-align:left; font-size:.82rem; letter-spacing:.02em; color:var(--muted); position:sticky; top:0; background:transparent; padding:0 16px 4px; }
.table tbody tr{ background:var(--panel); box-shadow: var(--shadow); }
.table tbody td{ padding:14px 16px; border-top:1px solid color-mix(in oklab, var(--ink) 10%, transparent); border-bottom:1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
.table tbody tr:hover{ outline: 2px solid var(--ring); }
.table td.num{text-align:right;}

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.78rem; }
.badge.ok{ background: color-mix(in oklab, var(--ok) 18%, transparent); color: color-mix(in oklab, var(--ok) 90%, white); }
.badge.warn{ background: color-mix(in oklab, var(--warn) 20%, transparent); color: color-mix(in oklab, var(--warn) 85%, white); }
.badge.err{ background: color-mix(in oklab, var(--err) 20%, transparent); color: color-mix(in oklab, var(--err) 90%, white); }

/* Focus styles */
:where(button, a, input, select, textarea):focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 10px;
}

/*
 * Mobile adjustments: reduce horizontal scrolling and improve layout on small screens.
 * When the viewport width is under 700px, stack grid columns into a single column,
 * reduce card padding, hide decorative sparklines and allow tables to scroll
 * horizontally within their containers. Additionally, prevent the overall page
 * from scrolling horizontally by hiding overflow on the body. These rules only
 * take effect on narrow screens so the desktop experience remains unaffected.
 */
@media (max-width: 700px){
  /* Prevent the entire page from scrolling sideways */
  body{ overflow-x:hidden; }
  /* Reduce container padding on small screens */
  .container{ padding: var(--s5) var(--s3); }
  /* Stack all grid columns into a single column */
  .grid{ grid-template-columns: 1fr; }
  /* Allow items in the top bar to wrap onto new lines */
  .topbar-inner{ flex-wrap: wrap; }
  /* Reduce card padding for a more compact layout */
  .card{ padding: var(--s4); }
  /* Hide the sparkline in the hero card to avoid overflow */
  .sparkline{ display:none; }
  /* Allow tables to scroll horizontally within their container so they do not force
     the entire page to scroll. On desktop screens, tables remain full width. */
  .table{ display:block; overflow-x:auto; width:100%; }

  /*
   * Stack the standard tables used in the Bills, Accounts and History sections
   * into a vertical card‑like format on small screens. To preserve context,
   * each cell uses a pseudo‑element to display its column heading. We hide
   * the table header row entirely and display each row as its own block with
   * the labels aligned on the left and values on the right. The actions cell
   * remains at the bottom of each block. Adjust these selectors if column
   * counts change in future updates.  
   */
  /* Hide table headers on small screens */
  #bills-table thead,
  #goals-table thead,
  #debts-table thead,
  #history-table thead{position:absolute; left:-9999px; top:-9999px; height:1px; width:1px; overflow:hidden;}

  /* Display each row as a block and add spacing */
  #bills-table tr,
  #goals-table tr,
  #debts-table tr,
  #history-table tr{display:block; margin-bottom:var(--s3);}

  /* Display cells as blocks with relative positioning for the label */
  #bills-table td,
  #goals-table td,
  #debts-table td,
  #history-table td{display:block; text-align:right; border:none; position:relative; padding-left:50%; white-space:pre-wrap;}

  /* Position the pseudo labels on the left */
  #bills-table td::before,
  #goals-table td::before,
  #debts-table td::before,
  #history-table td::before{position:absolute; left:0; width:50%; padding-left:0; font-weight:600; text-align:left;}

  /* Define labels for Bills table */
  #bills-table td:nth-of-type(1)::before{content:'Name';}
  #bills-table td:nth-of-type(2)::before{content:'Amount';}
  #bills-table td:nth-of-type(3)::before{content:'Frequency';}
  #bills-table td:nth-of-type(4)::before{content:'Start Date';}
  #bills-table td:nth-of-type(5)::before{content:'Next Due';}
  #bills-table td:nth-of-type(6)::before{content:'Actions';}

  /* Define labels for Goals table */
  #goals-table td:nth-of-type(1)::before{content:'Name';}
  #goals-table td:nth-of-type(2)::before{content:'Target';}
  #goals-table td:nth-of-type(3)::before{content:'Deadline';}
  #goals-table td:nth-of-type(4)::before{content:'Priority';}
  #goals-table td:nth-of-type(5)::before{content:'Saved';}
  #goals-table td:nth-of-type(6)::before{content:'Progress';}
  #goals-table td:nth-of-type(7)::before{content:'Actions';}

  /* Define labels for Debts table */
  #debts-table td:nth-of-type(1)::before{content:'Name';}
  #debts-table td:nth-of-type(2)::before{content:'Owed';}
  #debts-table td:nth-of-type(3)::before{content:'Min Payment';}
  #debts-table td:nth-of-type(4)::before{content:'Interest %';}
  #debts-table td:nth-of-type(5)::before{content:'Priority';}
  #debts-table td:nth-of-type(6)::before{content:'Actions';}

  /* Define labels for History table */
  #history-table td:nth-of-type(1)::before{content:'Date';}
  #history-table td:nth-of-type(2)::before{content:'Pay Cycle';}
  #history-table td:nth-of-type(3)::before{content:'Income 1';}
  #history-table td:nth-of-type(4)::before{content:'Income 2';}
  #history-table td:nth-of-type(5)::before{content:'Splurge';}
  #history-table td:nth-of-type(6)::before{content:'Bills';}
  #history-table td:nth-of-type(7)::before{content:'Fire %';}
  #history-table td:nth-of-type(8)::before{content:'Smile %';}
  #history-table td:nth-of-type(9)::before{content:'Fire';}
  #history-table td:nth-of-type(10)::before{content:'Smile';}
  #history-table td:nth-of-type(11)::before{content:'Mojo';}
  #history-table td:nth-of-type(12)::before{content:'Remaining';}
  #history-table td:nth-of-type(13)::before{content:'Total';}
  #history-table td:nth-of-type(14)::before{content:'Actions';}
}