/* ===========================
   SmartWerk — Invoices (dark UI)
   Matches Dashboard/Login look
   =========================== */

:root{
  --bg:#0e1014;
  --panel:#151b28;
  --panel-2:#141827;
  --line:#232a42;
  --muted:#9aa3b2;
  --txt:#e9edf5;
  --brand:#7aa4ff;
  --accent:#3b79ff;
  --accent-2:#27c693;
  --danger:#ff5470;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, #1d2233 0%, var(--bg) 40%),
    linear-gradient(var(--bg), var(--bg));
}

/* ===== Top actions bar (styled like dashboard topbar) ===== */
nav.actions{
  position: sticky; top:0; z-index:50;
  display:flex; gap:10px; align-items:center; justify-content:flex-start;
  padding:14px 22px;
  background:linear-gradient(180deg, rgba(21,26,40,.9), rgba(21,26,40,.65));
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(6px);
}

/* ===== Layout ===== */
main{
  max-width:1100px;
  margin:0 auto;
  padding:18px 22px 28px;
}
h1{ margin:4px 0 16px 0; font-size:22px; letter-spacing:.2px }
h2{ margin:0 0 10px 0; font-size:16px; color:#dbe2f6 }

/* ===== Panels / steps ===== */
section.step{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  margin:12px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* ===== Buttons (same as dashboard/login) ===== */
.btn, button, .actions .btn{
  appearance:none;
  background:#2b3350;
  border:1px solid #3b4567;
  color:var(--txt);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:.15s ease;
}
.btn:hover, button:hover{ filter:brightness(1.08) }
.btn.primary{ background:var(--accent); border-color:#4d86ff; color:#fff }
.btn.ghost{ background:transparent; border-color:#2a3552 }
.btn.danger{ background:#4a2330; border-color:#6a2c40 }

/* ===== Form Controls (covers inputs without type attr too) ===== */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select{
  width:100%;
  background:#121728;
  color:var(--txt);
  border:1px solid #2b3350;
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  color-scheme: dark;
}
input::placeholder, textarea::placeholder{ color:#74809a }
input:focus, textarea:focus, select:focus{
  border-color:#4d86ff;
  box-shadow:0 0 0 3px rgba(77,134,255,.15);
}

/* Chrome autofill forced white bg — fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--txt);
  -webkit-box-shadow: 0 0 0 30px #121728 inset !important;
          box-shadow: 0 0 0 30px #121728 inset !important;
  caret-color: var(--txt);
}

label{ font-size:13px; color:#bfc6da; display:inline-block; margin:6px 0 4px }

/* ===== Items table ===== */
table{
  width:100%;
  border-collapse:collapse;
  background:#111629;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
thead th{
  text-align:left; font-weight:700; font-size:12px; letter-spacing:.3px; color:#aab6d6;
  background:#131a30; padding:12px 10px; border-bottom:1px solid var(--line);
}
tbody td{
  padding:8px 10px; border-bottom:1px solid #1f2540; vertical-align:middle;
}
tbody tr:last-child td{ border-bottom:none }
tbody td .btn{ padding:6px 10px; border-radius:8px }

/* ===== Summary ===== */
#subtotal,#totalVat,#grandTotal{ font-variant-numeric: tabular-nums }
#grandTotal{ font-weight:800 }

/* ===== Saved invoices list ===== */
.invoice-block{
  background:#111629;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin:10px 0;
}
.invoice-block strong{ color:#fff }
.invoice-block em{ color:var(--muted) }
.status-badge{
  display:inline-block;
  padding:2px 8px;
  font-size:12px;
  border-radius:999px;
  border:1px solid transparent;
  line-height:1.6;
  margin-left:6px;
}
.status-badge.draft{ background:#2a3147; border-color:#3a425e; color:#c9d2e3 }
.status-badge.sent{ background:var(--accent); border-color:#4d86ff; color:#fff }
.status-badge.paid{ background:#143329; border-color:#1f634d; color:var(--accent-2) }

/* ===== OCR section ===== */
.ocr-section{
  background:#111629;
  border:1px dashed #2a3150;
  border-radius:12px;
  padding:12px;
  margin:12px 0;
}
.ocr-section pre{
  background:#0f1425; color:#dfe7ff;
  border:1px solid #283055;
  padding:10px; border-radius:10px; white-space:pre-wrap;
}

/* ===== Chart ===== */
#incomeChart{
  background:#0f1425;
  border:1px solid #263054;
  border-radius:12px;
  padding:10px;
}

/* ===== Flatpickr dark tune ===== */
.flatpickr-calendar{
  background:#0f1425 !important;
  color:var(--txt) !important;
  border:1px solid #2a3150 !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.45) !important;
}
.flatpickr-day{ color:#cbd6ff }
.flatpickr-day:hover{ background:#1a2340 }
.flatpickr-day.today{ border-color:#6ea0ff }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange{
  background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important;
}
.flatpickr-months, .flatpickr-weekdays{ background:#141b30; color:#dbe2f6 }
.flatpickr-weekday{ color:#9fb2ff }

/* ===== Signatures: ONLY signature canvases white ===== */
canvas.signature{
  background:#ffffff;
  border:1px solid #d4dae6;
  border-radius:8px;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  nav.actions{ justify-content:space-between; flex-wrap:wrap }
  main{ padding:14px 14px 22px }
  table thead{ display:none }
  table tr{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; padding:8px 10px }
  table td, table th{ border:none }
  table td.item-total{ text-align:right }
}

/* === SmartWerk — high-contrast dark theme for Flatpickr === */
.flatpickr-calendar {
  --fp-bg: #101521;
  --fp-surface: #151b2d;
  --fp-border: #2c3552;
  --fp-text: #eef3ff;
  --fp-muted: #b9c6ee;
  --fp-accent: #3b79ff;
  --fp-hover: #2b3556;

  background: var(--fp-bg) !important;
  color: var(--fp-text) !important;
  border: 1px solid var(--fp-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}

/* header, місяць/рік, кнопки навігації */
.flatpickr-months,
.flatpickr-weekdays {
  background: var(--fp-surface) !important;
  color: var(--fp-text) !important;
  border-bottom: 1px solid var(--fp-border) !important;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInputWrapper input,
.flatpickr-weekday {
  color: var(--fp-muted) !important;
  font-weight: 600 !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--fp-text) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--fp-text) !important;
}

/* дні */
.flatpickr-day {
  color: var(--fp-text) !important;
  background: transparent !important;
  border-radius: 8px !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled {
  color: #8a95c0 !important;
}
.flatpickr-day:hover {
  background: var(--fp-hover) !important;
}
.flatpickr-day.today {
  border-color: var(--fp-accent) !important;
  color: var(--fp-text) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--fp-accent) !important;
  border-color: var(--fp-accent) !important;
  color: #fff !important;
}

/* час (якщо ввімкнено) */
.flatpickr-time, .flatpickr-time input, .flatpickr-time .numInputWrapper {
  background: var(--fp-surface) !important;
  color: var(--fp-text) !important;
}

/* інпут і плейсхолдери */
input.flatpickr-input,
input.js-date {
  color: #eef3ff !important;
}
input.flatpickr-input::placeholder,
input.js-date::placeholder,
#invoiceDate::placeholder,
#dueDate::placeholder,
#dateFrom::placeholder,
#dateTo::placeholder {
  color: #c7d2ff !important;
}

/* === Fix: month name color = year color (high-contrast) === */
.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  color: var(--fp-text) !important; /* той самий колір, що і для року */
}

/* Якщо використовується селект для місяця — теж фарбуємо його й опції */
.flatpickr-calendar select.flatpickr-monthDropdown-months {
  color: var(--fp-text) !important;
  background: var(--fp-surface) !important;
  border: 1px solid var(--fp-border) !important;
}
.flatpickr-calendar select.flatpickr-monthDropdown-months option {
  color: var(--fp-text) !important;
  background: var(--fp-bg) !important;
}

.topbar {
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  padding: 0 20px;
}

.topbar nav a.btn {
  background-color: #3b79ff;
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 10px;
  margin-right: 10px;
  display: inline-block;
  transition: background-color 0.2s ease-in-out;
}

.topbar nav a.btn:hover {
  background-color: #2a66db;
  color: white;
}
/* === Collapsible Sections === */
.collapsible {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  margin: 16px 0;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

.section-toggle {
  width: 100%;
  background: none;
  color: var(--txt);
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  border: none;
  cursor: pointer;
  background-color: #1a2233;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-toggle:hover {
  background-color: #222c45;
}

.section-content {
  padding: 16px 18px;
  display: none;
  animation: fadeIn 0.25s ease-in-out;
}

.section-content.open {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}