/* ===== INVOICING PAGE =====
   Styles for the invoicing dashboard. */

/* ── Summary bar ─────────────────────────────────── */

.invoicing-summary {
  display: flex;
  gap: 2rem;
  padding: .6rem 1rem;
  margin: .75rem 0;
  background: var(--brand-green-light);
  border-radius: 6px;
  font-size: .875rem;
  flex-wrap: wrap;
}

/* ── Status badges ───────────────────────────────── */

.badge-invoiced {
  background: #fbbf24;
  color: #78350f;
}

.badge-paid {
  background: #10b981;
  color: #fff;
}

.badge-beyond {
  background: #3b82f6;
  color: #fff;
}

/* ── Invoicing table row separators ───────────────── */

.invoicing-table td {
  border-bottom: 1px solid #e5e7eb;
}

/* ── Disable alternating row colours on invoicing tables ──── */

.invoicing-table tr:nth-child(even) {
  background-color: transparent;
}

.invoicing-table tr:hover {
  background-color: #f5f5f5;
}

/* ── Row state modifiers ─────────────────────────── */

.invoicing-table tr.invoice-invoiced,
.invoicing-table tr.invoice-invoiced:nth-child(even) {
  background-color: #fef0e0;
}

.invoicing-table tr.invoice-paid,
.invoicing-table tr.invoice-paid:nth-child(even) {
  background-color: var(--brand-green-light);
}

.invoicing-table tr.invoice-invoiced:hover {
  background-color: #fde5c8;
}

.invoicing-table tr.invoice-paid:hover {
  background-color: var(--brand-green-light-hover);
}

/* ── Quick-nav month buttons ────────────────────────── */

.invoicing-quick-nav {
  font-size: .78rem;
  padding: .3rem .55rem;
  min-width: 0;
  letter-spacing: -.01em;
}


/* ── Free extra day toggle ──────────────────────────── */

.badge-free {
  background: #8b5cf6;
  color: #fff;
}

.invoice-free {
  background-color: #ede9fe;
}

.toggle-free-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: .15rem .5rem;
  font-size: .78rem;
  cursor: pointer;
  color: #6b7280;
  transition: all .15s ease;
}

.toggle-free-btn:hover {
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.toggle-free-btn.active {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
}

.toggle-free-btn.active:hover {
  background: #7c3aed;
  border-color: #7c3aed;
}

/* ── Beyond-cutoff link ─────────────────────────────── */

.beyond-cutoff-link {
  display: inline-block;
  font-size: .78rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: #f0f0f0;
  color: #555;
  text-decoration: none;
  font-weight: 600;
}

.beyond-cutoff-link:hover {
  background: #e0e0e0;
}

.beyond-cutoff-link.has-selection {
  background: var(--brand-green-light);
  color: var(--brand-green);
}

/* ── Beyond-cutoff updated cell values ────────────────── */

.beyond-updated {
  color: var(--brand-green);
  font-weight: 600;
}

/* ── Beyond-cutoff modal checkboxes ────────────────── */

.beyond-check {
  cursor: pointer;
}

/* ── Standalone row-type badges ──────────────────── */

.badge-extras {
  background: #6366f1;
  color: #fff;
}

.badge-holiday {
  background: #f59e0b;
  color: #fff;
}

/* ── Standalone extras selection ──────────────────── */

.sa-extras-check,
.sa-extras-select-all {
  cursor: pointer;
}

.sa-extras-partial {
  color: #6366f1;
  font-weight: 600;
}

.sa-extras-confirm-btn {
  font-size: .85rem;
  padding: .35rem .75rem;
  cursor: pointer;
}

/* ── Contract extras price override ──────────────── */

.price-override-active {
  color: #d97706;
  font-weight: 600;
}

.extra-price-input {
  width: 5rem;
  font-size: .8rem;
  padding: .15rem .3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: right;
}

/* ── Standalone invoice form ──────────────────────── */

.standalone-invoice-form input[type="number"] {
  width: 5.5rem;
  padding: .2rem .4rem;
  font-size: .8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}


/* ===== INVOICING OVERVIEW (Rechnungsübersicht) =====
   Yearly 12-month overview table. */

/* ── Table ───────────────────────────────────────────── */

.inv-overview-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: .88rem;
}

/* ── Header cells ────────────────────────────────────── */

.inv-ov-th {
  padding: .6rem .5rem;
  text-align: center;
  font-weight: 600;
  font-size: .82rem;
  border-bottom: 2px solid #d1d5db;
  background: #f3f4f6;
}

.inv-ov-th--month {
  text-align: left;
  min-width: 100px;
}

.inv-ov-th--section {
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #e5e7eb;
}

.inv-ov-th--standalone {
  border-left: 2px solid #d1d5db;
}

.inv-ov-sub {
  font-weight: 500;
  font-size: .78rem;
  color: #6b7280;
}

/* ── Body cells ──────────────────────────────────────── */

.inv-overview-table td {
  padding: .55rem .5rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.inv-overview-table tr:hover {
  background: #f9fafb;
}

/* ── Current month highlight ─────────────────────────── */

.inv-overview-table tr.inv-ov-current {
  background: #fef9c3;
}

.inv-overview-table tr.inv-ov-current:hover {
  background: #fef08a;
}

/* ── Month name column ───────────────────────────────── */

.inv-ov-month {
  text-align: left !important;
  font-weight: 600;
}

.inv-ov-month a {
  color: var(--brand-green);
  text-decoration: none;
}

.inv-ov-month a:hover {
  text-decoration: underline;
  color: var(--brand-green-hover);
}

/* ── Count column ────────────────────────────────────── */

.inv-ov-count {
  font-weight: 500;
  color: #374151;
}

/* ── Status columns (color-coded) ────────────────────── */

.inv-ov-status {
  font-weight: 600;
}

.inv-ov-open {
  color: #dc2626;
}

.inv-ov-invoiced {
  color: #d97706;
}

.inv-ov-paid {
  color: #059669;
}

/* ── Amount column ───────────────────────────────────── */

.inv-ov-amount {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Standalone section visual separator ─────────────── */

.inv-ov-standalone-start {
  border-left: 2px solid #d1d5db;
}