/* =========================================================
   PERSONLIG ØKONOMI
   Kun styles som er spesifikke for Personlig økonomi.
   Felles verktøystil styres av school-tool-standard.css
   ========================================================= */


/* INNTEKT */

.income-wrap {
  width: 180px;

  margin: 0 auto 28px;
}

.income-wrap label {
  display: block;

  margin-bottom: 8px;

  color: var(--muted);

  font-size: 13px;
  font-weight: 700;
}

.income-wrap input,
.expense-row input {
  height: 48px;

  border: 1px solid var(--line);
  border-radius: 8px;

  background: var(--bg);
  color: var(--text);
}

.income-wrap input {
  width: 100%;

  padding: 0 14px;

  font-size: 18px;
  font-weight: 700;
}

.income-wrap input::placeholder,
.expense-row input::placeholder {
  font-size: 13px;
  font-weight: 400;

  opacity: .7;
}


/* BUDSJETTHODE */

.budget-heading {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 12px;
}

.budget-heading h2 {
  margin: 0 0 3px;

  font-size: 18px;
}

.budget-heading p {
  margin: 0;

  color: var(--muted);

  font-size: 13px;
}


/* SEKUNDÆRKNAPPER */

.secondary-button {
  min-height: 38px;

  padding: 0 13px;

  border: 1px solid var(--line);
  border-radius: 8px;

  background: var(--surface-soft);
  color: var(--text);

  font-weight: 700;

  cursor: pointer;
}


/* UTGIFTSRADER */

.expense-list {
  display: grid;

  gap: 8px;
}

.expense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 38px;

  gap: 8px;

  align-items: center;
}

.expense-row input {
  width: 100%;

  padding: 0 12px;

  font-size: 14px;
}

.remove-expense {
  width: 38px;
  height: 38px;

  border: 1px solid var(--line);
  border-radius: 8px;

  background: transparent;
  color: var(--muted);

  font-size: 19px;

  cursor: pointer;
}


/* BUDSJETTVISNING */

.budget-table {
  width: fit-content;
  max-width: 100%;

  margin-top: 12px;
  margin-left: 0;
}

.budget-row {
  position: relative;

  display: grid;
  grid-template-columns: minmax(120px, 220px) 90px;

  gap: 18px;

  justify-content: start;

  padding-bottom: 8px;

  border-bottom: 0;
}

.budget-row::after {
  content: "";

  position: absolute;

  left: 0;
  right: 70px;
  bottom: 0;

  height: 1px;

  background: var(--line);
}

.budget-row:last-child::after {
  display: none;
}

.budget-value {
  position: relative;

  left: -70px;

  min-width: 0;

  color: var(--text);

  font-weight: 700;

  text-align: right;
}


/* HOVER */

@media (hover: hover) and (pointer: fine) {

  .secondary-button:hover,
  .remove-expense:hover {
    border-color: var(--accent);
  }

}


/* DARK MODE */

@media (prefers-color-scheme: dark) {

  .income-wrap input,
  .expense-row input {
    color-scheme: dark;
  }

}


/* MOBIL */

@media (max-width: 620px) {

  .budget-heading {
    align-items: flex-start;

    flex-direction: column;
  }

  .expense-row {
    grid-template-columns: 1fr 100px 36px;
  }

}

@media (max-width: 700px) {

  .budget-value {
    left: -25px;
  }

}

.budget-visual-item {
  margin-bottom: 16px;
}

.budget-visual-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.budget-visual-label span {
  color: var(--muted);
}

.budget-visual-track {
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
}

.budget-visual-fill {
  height: 100%;
}

.budget-income-fill {
  background: var(--accent);
}

.budget-expense-fill {
  background: currentColor;
  opacity: .55;
}

.budget-result-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  text-align: center;
}

.budget-result-card strong,
.budget-result-card span {
  display: block;
}

.budget-result-card span {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 900;
}

.spreadsheet-preview {
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

.sheet-row span {
  min-width: 0;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.sheet-row span + span {
  border-left: 1px solid var(--line);
}

.sheet-row:last-child span {
  border-bottom: 0;
}

.sheet-header {
  background: var(--surface-soft);
  font-weight: 900;
  text-align: center;
}

.sheet-formula-row {
  background: var(--surface-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.sheet-help {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.spreadsheet-preview .sheet-row {
  grid-template-columns: 42px minmax(0, 1.2fr) minmax(0, .8fr);
}

.sheet-row-number,
.sheet-corner {
  background: var(--surface-soft);
  font-weight: 900;
  text-align: center;
}

.sheet-explanation {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.sheet-explanation p {
  margin: 0 0 8px;
  line-height: 1.5;
}

.sheet-explanation p:last-child {
  margin-bottom: 0;
}