diff --git a/app.js b/app.js
index 8600466..74a0d7a 100644
--- a/app.js
+++ b/app.js
@@ -487,6 +487,7 @@ function renderMonthRow(month) {
|
|
|
+ ${days(month.usedUnpaid)} |
${days(month.availableDays)} |
`;
diff --git a/index.html b/index.html
index c4166cb..89205d5 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,7 @@
Vacation days |
Feriefridage |
FLEX |
+ Unpaid |
Available days |
diff --git a/style.css b/style.css
index 97a7376..7e1c2e4 100644
--- a/style.css
+++ b/style.css
@@ -283,13 +283,14 @@ button.danger { background: #5a2320; color: var(--ink); border: 1px solid #5a232
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
-.month-table { table-layout: fixed; min-width: 760px; }
+.month-table { table-layout: fixed; min-width: 840px; }
.month-table th:nth-child(1), .month-table td:nth-child(1) { width: 8.5rem; }
.month-table th:nth-child(2), .month-table td:nth-child(2) { width: auto; }
.month-table th:nth-child(3), .month-table td:nth-child(3),
.month-table th:nth-child(4), .month-table td:nth-child(4),
.month-table th:nth-child(5), .month-table td:nth-child(5),
-.month-table th:nth-child(6), .month-table td:nth-child(6) { width: 7.2rem; }
+.month-table th:nth-child(6), .month-table td:nth-child(6),
+.month-table th:nth-child(7), .month-table td:nth-child(7) { width: 7.2rem; }
th, td { padding: .75rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: rgba(255,255,255,.04); }
@@ -316,6 +317,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
}
.pill.approved, .pill.confirmed { background: #17351a; color: var(--ink); }
.pill.unpaid { background: rgba(217,130,43,.22); color: var(--brand-dark); }
+.unpaid-col { color: var(--muted); font-weight: 800; }
.important-col { background: rgba(47,143,58,.14); font-size: 1.18rem; font-weight: 900; }
.important-col .balance-override-input { font-size: 1.05rem; font-weight: 900; }
.balance-override-input {
@@ -442,7 +444,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
.planner-body-table tbody { display: block; width: 100%; min-width: 0; }
.planner-body-table tr {
display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
+ grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .18rem .28rem;
padding: .42rem 0;
border-bottom: 1px solid var(--line);
@@ -466,7 +468,8 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
.planner-body-table td:nth-child(3)::before { content: 'VD'; }
.planner-body-table td:nth-child(4)::before { content: 'FF'; }
.planner-body-table td:nth-child(5)::before { content: 'FLEX'; }
- .planner-body-table td:nth-child(6)::before { content: 'Total'; }
+ .planner-body-table td:nth-child(6)::before { content: 'Unpaid'; }
+ .planner-body-table td:nth-child(7)::before { content: 'Total'; }
.planner-body-table td:nth-child(n+3)::before {
display: block;
color: var(--muted);
@@ -481,7 +484,8 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
.month-table th:nth-child(3), .month-table td:nth-child(3),
.month-table th:nth-child(4), .month-table td:nth-child(4),
.month-table th:nth-child(5), .month-table td:nth-child(5),
- .month-table th:nth-child(6), .month-table td:nth-child(6) { width: auto; }
+ .month-table th:nth-child(6), .month-table td:nth-child(6),
+ .month-table th:nth-child(7), .month-table td:nth-child(7) { width: auto; }
.month-table td.entries { min-width: 0; }
.month-entry { margin: .05rem 0 .18rem; }
.planner-entry-meta { display: block; margin-left: 0; font-size: .64rem; }