@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Core surfaces */
  --bg: #0c0f10; /* Near-black background */
  --panel: #121518; /* Sidebar/panels slightly lighter */
  --card-bg: #181c20; /* Cards a shade lighter than panel */
  --header: #121518; /* Match panels for consistency */
  --footer: #121518;

  /* Text */
  --text: #e4e8ec; /* Neutral light gray for readability */
  --muted: #a0a6ad; /* Softer neutral gray, avoids teal cast */
  --input-bg: #1e2328;

  /* Accent */
  --accent: #009a9a; /* Your main brand color */
  --accent-secondary: #1e2328;
  --active: #009a9a86; /* More noticeable highlight for active states */

  /* Borders & depth */
  --border: 3px solid var(--border-color);
  --border-color: #2a2f33; /* Hairline borders */
  --border-radius: 0.5rem;
  --inner-stroke: rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-icon: 3px 3px 3px 0px #000000;

  --modal-backdrop: rgba(0, 0, 0, 0.6);
  --panel-elev: color-mix(in oklab, var(--panel) 92%, black);
  --focus-ring: var(--active);

  /* Semantic states (harmonized with teal) */
  --success: #2fbf71; /* Green that pairs with teal */
  --warning: #e0a847; /* Amber/gold for warnings */
  --danger: #d85a5a; /* Muted red, not clashing with teal */

  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
             "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans",
             "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Delete Me */
.chart-container {
  height: 100%;
  width: 100%;
  background: var(--panel);
  border-radius: var(--border-radius);
  border: var(--border);
  box-shadow: var(--shadow-sm);
}

/* Elements */
body {
  font: 500 1rem/1 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  display: grid;
  min-height: 100vh;
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto minmax(auto, auto) auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar footer";
}

#site-header {
  display: grid;
  grid-template-columns: 1fr auto;
  height: 4em;
  align-items: center;
  background: var(--header);
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  grid-area: header;
  padding: 1em;
  position: sticky;
  top: 0;
}

aside {
  height: calc(100vh - 4rem);
  top: 4rem;
  grid-area: sidebar;
  position: sticky;
  align-self: start;
}

.active {
  /* background: var(--active); */
  background: linear-gradient(90deg,rgba(0, 154, 154, 0.5) 0%, rgba(0, 154, 154, 0.25) 25%, rgba(237, 83, 83, 0) 75%);
}

main {
  grid-area: main;
  display: grid;
  min-height: calc(100svh - 4rem);
  background-color: var(--bg);
  padding: 25px;
  gap: 20px;
}
h1,h2,h3,h4,h5,h6 {
  color: var(--text);
  font-size: 2rem;
  font-weight: 600;
}
main h1.page-title {
  grid-area: title;
}

form {
  background-color: var(--card-bg);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: 1rem;
}

div.labeledInput {
  display: grid;
  grid: auto 1fr / 1fr;
}

label {
  color: var(--muted);
  font-size: 1rem;
}
div.labeledInput label {
  margin-bottom: 0.33rem;
}

#site-footer {
  background-color: var(--footer);
  grid-area: footer;
  padding: 2em;
}

button {
  color: var(--text);
  border: none;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: transform 0.2s ease;
}
button:hover {
  transform: translateY(-2px);
}
button:active {
  transform: translateY(1px);
}

/* Inputs */
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: var(--border-radius);
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: var(--border-radius);
}
input[type="color"] {
  appearance: none;
  outline: none;
  width: 50px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--border-radius);
  background: black;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--inner-stroke);
}

input:not([type="color"]), select, textarea {
  padding: 0.5rem;
  min-width: 125px;
  width: 100%;
  border: var(--border);
  min-height: 40px;
  height: 2.5rem;
  border-radius: var(--border-radius);
  background-color: var(--input-bg);
  color: var(--text);
}

/* Classes */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  row-gap: 1rem;
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}

.card div.subheading {
  /* background: var(--warning); */
  display: flex;
  flex: 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.list {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius);
  padding: 5px;
  gap: 8px;
  overflow-y: auto;
}

.icon-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 50px;
  height: 40px;
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: var(--input-bg);
}
.icon-select-btn:hover,.icon-select-btn:active {
  transform: none;
}

.icon-btn {
  display: grid;
  padding: 0;
  inline-size: 35px;
  block-size: 35px;
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  place-items: center;
  cursor: pointer;
}

.icon {
  display: block;
}

input.search {
  border: none;
}

.sidebar-nav {
  position: fixed;
  width: 300px;
  background: var(--panel);
}

.menu {
  display: grid;
  row-gap: 0.5rem;
}

.menu-group {
  display: grid;
  grid-template-rows: auto 0fr;
}

.menu-group .config-content {
  overflow: hidden;
}

.menu-group.open {
  grid-template-rows: auto 1fr;
}

.menu a {
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  padding: 1rem 1rem;
  font-weight: 600;
  gap: 0.5rem;
}

.menu a.select {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

.select-arrow {
  transition: transform 0.25s ease;
}

.select-arrow.open {
  transform: rotate(90deg);
}

.menu a:hover {
  background: rgba(255, 255, 255, 0.06);
}

a.config-option {
  padding-left: 3rem;
  display: flex;
  align-items: center;
}
/* somehow bring to bottom of aside menu */
a#logoutButton {
  margin-top: auto;
}

.config-select {
  display: grid;
  grid-template-rows: 0fr; /* collapsed */
  transition: grid-template-rows 0.28s ease;
}

.config-content {
  overflow: hidden;
} /* clip while collapsing */

.config-select.show {
  grid-template-rows: 1fr;
} /* expanded */


/* Elements with Classes */
button.primary {
  background-color: var(--accent);
  font-weight: 600;
}
button.primary:active {
  background-color: #007a7a;
}
button.secondary {
  background-color: var(--accent-secondary);
  font-weight: 500;
}


/* Dashboard */
main.dashboard {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto 1fr 1fr 1fr;
  grid-template-areas:
    "title title title title title title title title"
    "stat1 stat1 stat2 stat2 stat3 stat3 stat4 stat4"
    "linegraph linegraph linegraph linegraph piegraph piegraph piegraph piegraph"
    "linegraph linegraph linegraph linegraph piegraph piegraph piegraph piegraph";
}

#net-worth {
  grid-area: stat1;
}

#income-expenses {
  grid-area: stat2;
}

#debt-to-income {
  grid-area: stat3;
}

#savings-rate {
  grid-area: stat4;
}

#dashboard-projection {
  grid-area: linegraph;
}

#dashboard-breakdown {
  grid-area: piegraph;
}

/* Categories Page */
main.categories {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "title title title title"
    "form form . search"
    "list list list list";
}

#category-form {
  grid-area: form;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#category-name {
  flex: 1 1;
}

#category-icon-select {
  flex: 0 0 auto;
}

#category-color {
  flex: 0 0 auto;
}

#add-category-button {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

#category-search {
  grid-area: search;
  margin-top: auto;
}

#category-list {
  grid-area: list;
}


/* Accounts */
main.accounts {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "title title title title"
    "form form . search"
    "list list list list";
}

#account-form {
  grid-area: form;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "name type number"
    "balance balance button";
  gap: 20px;
}

#account-name {
  grid-area: name;
}

#account-type {
  grid-area: type;
}

#account-number {
  grid-area: number;
}

#account-balance {
  grid-area: balance;
}

#add-account-button {
  grid-area: button;
  margin-top: auto;
}

#account-search {
  grid-area: search;
  display: grid;
  grid: auto 1fr / 1fr;
  border: none;
  margin-top: auto;
}

#account-list {
  grid-area: list;
}


/* Income */
main.income {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "title title title title"
    "form form form search"
    "list list list list";
}

#income-form {
  grid-area: form;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "name name amount amount startDate startDate"
    "account account repeat repeat button button";
  gap: 20px;
}

#income-name {
  grid-area: name;
}

#income-amount {
  grid-area: amount;
}

#income-startDate {
  grid-area: startDate;
}

#income-repeat-button {
  grid-area: repeat;
  margin-top: auto;
}

#income-account {
  grid-area: account;
}

#add-income-button {
  grid-area: button;
  margin-top: auto;
}

#income-list {
  grid-area: list;
}

#income-search {
  grid-area: search;
  display: grid;
  grid: auto 1fr / 1fr;
  border: none;
  margin-top: auto;
}

/* Expenses */
main.expenses {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "title . . ."
    "form form form search"
    "list list list list";
}

#expense-search {
  grid-area: search;
  margin-top: auto;
}

#expense-form {
  display: grid;
  grid-area: form;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "name amount category"
    "account startDate repeat"
    "notes notes button";
    gap: 20px;
}

#expense-list {
  grid-area: list;
}

#expense-name {
  grid-area: name;
}
#expense-amount {
  grid-area: amount;
}
#expense-category {
  grid-area: category;
}
#expense-account {
  grid-area: account;
}
#expense-startDate {
  grid-area: startDate;
}
#expense-repeat-button {
  grid-area: repeat;
  margin-top: auto;
}
#expense-notes {
  grid-area: notes;
}
#expense-notes-input {
  resize: vertical;
}
#add-expense-button {
  grid-area: button;
  margin-top: auto;
}


/* Credit Cards */
main.creditcards {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: 
    "title . . ."
    "form form . search"
    "list list list list";
}

#creditcard-form {
  grid-area: form;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: 
    "name type last4"
    "limit balance interest"
    "payment date button";
  gap: 20px;
}

#creditcard-name {
  grid-area: name;
}
#creditcard-type {
  grid-area: type;
}
#creditcard-last4 {
  grid-area: last4;
}
#creditcard-limit {
  grid-area: limit;
}
#creditcard-balance {
  grid-area: balance;
}
#creditcard-interest {
  grid-area: interest;
}
#creditcard-dueDate {
  grid-area: date;
}
#creditcard-minPayment {
  grid-area: payment;
}
#add-creditcard-button {
  grid-area: button;
  margin-top: auto;
}

#creditcard-search {
  grid-area: search;
  margin-top: auto;
}

#creditcard-list {
  grid-area: list;
}


/* Loans */
main.loans {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: 
  "title"
  "form"
  "search"
  "list";
}

#loan-search {
  grid-area: search;
}

#loan-form {
  grid-area: form;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-template-areas: 
    "name name last4 last4 type type"
    "amount amount balance balance interest interest"
    "date date term term repeat repeat"
    "asset asset asset category category category"
    "notes notes notes notes button button";
  gap: 20px;
}

#loan-name {
  grid-area: name;
}
#loan-type {
  grid-area: type;
}
#loan-last4 {
  grid-area: last4;
}
#loan-amount {
  grid-area: amount;
}
#loan-balance {
  grid-area: balance;
}
#loan-interest {
  grid-area: interest;
}
#loan-startDate {
  grid-area: date;
}
#loan-term {
  grid-area: term;
  display: grid;
  grid: auto 1fr / 1fr 1fr;
  grid-template-areas: 
  "label label"
  "input select";
}
#loan-term-label {
  grid-area: label;
}
#loan-term-input {
  grid-area: input;
}
#loan-term-select {
  grid-area: select;
}

#loan-repeat-button {
  grid-area: repeat;
  margin-top: auto;
}
#loan-asset {
  grid-area: asset;
}
#loan-category {
  grid-area: category;
}
#loan-notes {
  grid-area: notes;
}
#loan-notes-input {
  resize: vertical;
}
#add-loan-button {
  grid-area: button;
  margin-top: auto;
}

#loan-list {
  grid-area: list;
}

/* Assets */
main.assets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: 
    "title . . ."
    "form form . search"
    "list list list list";
}

#asset-search {
  grid-area: search;
  margin-top: auto;
}

#asset-form {
  grid-area: form;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-template-areas: 
    "name type"
    "id price"
    "value ownership"
    "notes button";
  gap: 20px;
}

#asset-name {
  grid-area: name;
}
#asset-type {
  grid-area: type;
}
#asset-id {
  grid-area: id;
  grid: auto 1fr / 1fr 1fr;
  grid-template-areas: 
    "idtl idvl"
    "idts idvi";
}
#id-type-label {
  grid-area: idtl;
}
#asset-id-type-select {
  grid-area: idts;
}
#id-value-label {
  grid-area: idvl;
}
#asset-id-value-input {
  grid-area: idvi;
}

#asset-price {
  grid-area: price;
}
#asset-value {
  grid-area: value;
}
#asset-ownership {
  grid-area: ownership;
}
#asset-notes {
  grid-area: notes;
}
#asset-notes-input {
  resize: vertical;
}
#add-asset-button {
  grid-area: button;
  margin-top: auto;
}

#asset-list {
  grid-area: list;
}


div.list-item {
  display: grid;
  background-color: var(--panel);
  border: none;
  box-shadow: var(--shadow-icon);
  border-radius: var(--border-radius);
  height: auto;
  font-size: 1.25rem;
  color: var(--text);
  align-items: center;
  padding: 10px;
  column-gap: 25px;
  row-gap: 5px;
  transition: transform 0.2s ease;
  grid-template-columns: auto auto 1fr 1fr 1fr auto auto;
  grid-template-rows: repeat(4, auto);
  grid-template-areas: 
    "icon name section1 section2 notes edit del"
    "icon name section3 section4 notes edit del"
    "icon name section5 section6 notes edit del"
    "icon name section7 section8 notes edit del";
}


div.list-item.small {
  grid-template-columns: auto auto 1fr 1fr auto auto;
  grid-template-rows: 1fr;
  grid-template-areas:
    "icon name section1 section2 edit del";
}
div.list-item.showProgress {
  grid-template-areas: 
    "icon name section1 section2 notes edit del"
    "icon name section3 section4 notes edit del"
    "icon name section5 section6 notes edit del"
    "icon name section7 section7 notes edit del";
}
/* div.category.list-item {
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: 1fr;
  grid-template-areas: 
    "icon name edit del";
}
div.account.list-item {
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: 1fr;
  grid-template-areas: 
    "icon name section1 edit del";
}
div.income.list-item {
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: repeat(4, auto);
  grid-template-areas: 
    "icon name section1 edit del"
    "icon name section2 edit del"
    "icon name section3 edit del"
    "icon name section4 edit del";
}
div.expense.list-item {
  grid-template-columns: auto auto 1fr 2fr auto auto;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "icon name section1 notes edit del"
    "icon name section2 notes edit del";
}
div.creditcard.list-item {
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "icon name section1 edit del"
    "icon name section2 edit del"
    "icon name section3 edit del";
}
div.loan.list-item {
  grid-template-columns: auto auto 1fr 2fr auto auto;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "icon name section1 notes edit del"
    "icon name section2 notes edit del"
    "icon name section3 notes edit del"
    "icon name section4 notes edit del";
}
div.asset.list-item {
  grid-template-columns: auto auto 1fr 2fr auto auto;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "icon name section1 notes edit del"
    "icon name section2 notes edit del";
} */

div.list-item:hover {
  transform: translateY(-2px);
  outline: 3px solid var(--accent-secondary);
}
.icon-container {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  border: none;
  height: 40px;
  width: 40px;
  padding: 5px;
  border-radius: 10px;
  box-shadow: var(--shadow-icon);
}
#cat-edit-form {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: 
    "name name name"
    "icon color ."
    ". . ."
    ". . save";
    height: 100%;
  gap: 10px;
}
#cat-edit-name {
  grid-area: name;
}
#cat-edit-icon-select {
  grid-area: icon;
}
#cat-edit-color {
  grid-area: color;
}
#cat-edit-save-btn {
  grid-area: save;
}

label.section1 { grid-area: section1; }
label.section2 { grid-area: section2; }
label.section3 { grid-area: section3; }
label.section4 { grid-area: section4; }
label.section5 { grid-area: section5; }
label.section6 { grid-area: section6; }
label.section7 { grid-area: section7; }
label.section8 { grid-area: section8; }
div.progressBar-container {
  grid-area: section7;
}
label.notes {
  grid-area: notes;
}

.list-item-icon {
  grid-area: icon;
  background-color: #009a9a;
}
.list-item-edit {
  grid-area: edit;
  background-color: var(--accent-secondary);
}
.list-item-delete {
  grid-area: del;
  background-color: var(--danger);
}
.list-item-name {
  grid-area: name;
}

div.progressBar-container {
  background-color: var(--accent-secondary);
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
}
div.progressBar-container > div {
  background-color: var(--accent);
  border-radius: 10px;
  height: inherit;
  transform: translateX(-100%);
  transition: transform 1s ease;
}
div.progressBar-container > div.show {
  transform: translateX(0px);
}

#sidebar-toggle {
  display: none;
  margin-right: 0.25rem;
}

#site-header button svg path {fill: var(--text);}


/* A11y helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Modal */
.modal { position: fixed; inset: 0; display: none; z-index: 1000; }
.modal.show { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: var(--modal-backdrop); }
.modal__panel {
  position: absolute; inset: 15% 15%;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px;
  background: var(--panel-elev); border: var(--border); border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm); padding: 1rem;
}
@media (max-width: 700px) { .modal__panel { inset: 5% 4%; } }
.modal__header { display: flex; align-items: center; justify-content: space-between; }
.modal__tools { display: flex; }
.modal__footer { display: flex; justify-content: flex-end; gap: 8px; }

/* Icon grid (flex, wraps, no grow/shrink) */
.icon-grid {
  display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;
  overflow: auto;
  /* Fills available space in the modal's grid row */
  min-height: 0; /* for proper overflow inside CSS grid */
}

/* Each tile is fixed-size so columns auto-adjust per screen width */
.icon-tile {
  flex: 0 0 auto;               /* no grow, no shrink */
  width: 72px; height: 72px;    /* fixed tile; # of columns adapts with viewport */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border-color); border-radius: var(--border-radius);
  background: var(--input-bg); cursor: pointer;
}
.icon-tile.selected { box-shadow: 0 0 0 2px var(--accent) inset; }
.icon-tile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 0; }
.icon-tile img { width: 28px; height: 28px; }
.icon-tile span { font-size: 0.73rem; color: var(--muted); text-align: center; padding: 0 4px; line-height: 1.2; }



/* Medium Screen Size */
@media (max-width: 1425px) {
  main.dashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto repeat(4, 1fr);
    grid-template-areas:
      "title title"
      "stat1 stat2"
      "stat3 stat4"
      "linegraph linegraph"
      "piegraph piegraph";
  }
  main.categories {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title"
      "form"
      "search"
      "list";
  }
  main.accounts {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title"
      "form"
      "search"
      "list";
  }
  main.income {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "title"
    "form"
    "search"
    "list";
  }
  main.expenses {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "title"
    "form"
    "search"
    "list";
  }
  main.creditcards {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title"
      "form"
      "search"
      "list";
  }
  #loan-form {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
      "name name name last4 last4 last4"
      "type type type amount amount amount"
      "balance balance balance interest interest interest"
      "date date date term term term"
      "repeat repeat asset asset category category"
      "notes notes notes notes button button";
  }
  main.assets {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto) 1fr;
    grid-template-areas: 
      "title"
      "form"
      "search"
      "list";
  }
  div.list-item {
  grid-template-columns: auto auto 1fr 1fr auto auto;
  grid-template-rows: repeat(4, auto) 1fr;
  grid-template-areas: 
    "icon name section1 section2 edit del"
    "icon name section3 section4 edit del"
    "icon name section5 section6 edit del"
    "icon name section7 section8 edit del"
    "icon name notes notes edit del";
  }
  div.list-item.showProgress {
    grid-template-areas: 
      "icon name section1 section2 edit del"
      "icon name section3 section4 edit del"
      "icon name section5 section6 edit del"
      "icon name section7 section7 edit del"
      "icon name notes notes edit del";
  }
}

/* Small Screen Size */
@media (max-width: 985px) {
  #site-header {
    grid-template-columns: auto 1fr auto;
    place-items: center;
  }
  body {
    grid-template-columns: auto 1fr;
  }
  #sidebar-toggle {
    display: grid;
  }
  aside {
    position: fixed;
    width: 250px;
  }
  .sidebar-nav {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 40;
    width: 250px;
    padding: 0;
  }
  .sidebar-nav.show {
    display: block;
    padding: 0px;
    transform: translateX(0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 1);
  }
  main.dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto repeat(8, 1fr);
    grid-template-areas:
      "title"
      "stat1"
      "stat2"
      "stat3"
      "stat4"
      "linegraph"
      "linegraph"
      "piegraph"
      "piegraph";
  }
  main.categories {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title"
      "form"
      "search"
      "list";
  }
  #expense-form {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "name amount"
      "category account"
      "startDate repeat"
      "notes button";
  }
}

@media (max-width: 700px) {
  #loan-form {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(13, auto);
    grid-template-areas:
      "name"
      "last4"
      "type"
      "amount"
      "balance"
      "interest"
      "date"
      "term"
      "repeat"
      "asset"
      "category"
      "notes"
      "button";
  }
  #asset-form {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
    grid-template-areas: 
      "name"
      "type"
      "id"
      "price"
      "value"
      "ownership"
      "notes"
      "button";
  }
  div.list-item {
    grid-template-columns: auto 1fr 1fr auto;
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
      "icon name . ."
      ". section1 section2 edit"
      ". section3 section4 edit"
      ". section5 section6 del"
      ". section7 section8 del"
      ". notes notes .";
      gap: 10px 10px
  }
  div.list-item.showProgress {
    grid-template-areas: 
      "icon name . ."
      ". section1 section2 edit"
      ". section3 section4 edit"
      ". section5 section6 del"
      ". section7 section7 del"
      ". notes notes .";
  }
}

/* Smallest Screen Size */
@media (max-width: 600px) {
  #account-form {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "name type"
      "number number"
      "balance balance"
      "button button";
  }
  #income-form {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "name amount"
      "startDate account"
      "repeat button";
  }
  #expense-form {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto) 1fr auto;
    grid-template-areas:
      "name"
      "amount"
      "category"
      "account"
      "startDate"
      "repeat"
      "notes"
      "button";
  }
  #creditcard-form {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    grid-template-areas: 
      "name"
      "type"
      "last4"
      "limit"
      "balance"
      "interest"
      "payment"
      "date"
      "button";
  }
}

@media (max-width: 450px) {
  #account-form {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
      "name"
      "type"
      "number"
      "balance"
      "button";
  }
  #income-form {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
      "name"
      "amount"
      "startDate"
      "account"
      "repeat"
      "button";
  }
  div.list-item {
    grid-template-columns: auto 1fr 1fr auto;
    grid-template-rows: repeat(7, auto);
    grid-template-areas:
      "icon name . ."
      ". section1 section2 ."
      ". section3 section4 ."
      ". section5 section6 ."
      ". section7 section8 ."
      ". notes notes ."
      ". edit del .";
      gap: 10px 10px;
  }
  div.list-item.showProgress {
    grid-template-areas: 
      "icon name . ."
      ". section1 section2 ."
      ". section3 section4 ."
      ". section5 section6 ."
      ". section7 section7 ."
      ". notes notes ."
      ". . edit del";
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav {
    transition: none;
  }
  .config-select {
    transition: none;
  }
}