/* Base font */
body { font-family: 'Inter', sans-serif; }

/* Deactivated accounts: still fully visible/usable everywhere, just dimmed. */
.inactive-account { opacity: 0.55; }

/* Prevent iOS Safari from auto-zooming the page when a form field is focused
   (it does this whenever a focused input's font-size is below 16px). Belt-and-
   suspenders alongside the viewport `maximum-scale=1.0, user-scalable=no`
   (index.html), which is what actually allows the Journal form below to use a
   smaller font without triggering the zoom. */
input, select, textarea {
  font-size: 16px !important;
}

/* Journal form: smaller font so longer Buchungstexte/Kontonamen fit without
   truncation. Safe to go below 16px here because the viewport meta tag
   already disables iOS's auto-zoom-on-focus app-wide. Also restores the
   combobox search field's intended 0.8125rem size (previously silently
   overridden by the !important rule above). */
#journal-form input,
#journal-form select {
  font-size: 13px !important;
}

/* Prevent iOS Safari from treating quick repeated taps (e.g. favorite-star
   toggling) as a double-tap-to-zoom gesture, which can swallow the second tap. */
button, a, .tab-link {
  touch-action: manipulation;
}

/* Tab content */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Tab active state — styled differently per nav context */
#main-nav .tab-link.active-tab {
  color: #2563eb;
  border-color: #3b82f6;
}
#mobile-menu-panel .tab-link.active-tab {
  background-color: #eff6ff;
  color: #2563eb;
}

/* Mobile slide-in menu */
#mobile-menu-panel.open { transform: translateX(0); }

/* Budget summary totals: font scales with available width so the amount stays on one line */
.budget-total-amount {
  font-size: clamp(0.7rem, 3.5vw, 1.25rem);
}

/* Exchange rate ticker: font scales with available width to fit on as few lines as possible.
   Lower floor than other clamp()s here since it now always shares its row with the
   refresh button (kept on one line, see index.html), leaving a bit less width. */
.rates-compact {
  font-size: clamp(0.5rem, 2.6vw, 0.75rem);
}

/* Monthly view amounts: font scales with available width so each column stays on one line */
.monthly-amount {
  font-size: clamp(0.62rem, 2.6vw, 0.875rem);
}

/* T-Konto minimum height */
.t-konto-entries { min-height: 80px; }

/* ===== Toggle Switch ===== */
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-track {
  display: block;
  width: 48px;
  height: 28px;
  background-color: #d1d5db;
  border-radius: 9999px;
  transition: background-color 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-input:checked + .toggle-track {
  background-color: #3b82f6;
}
.toggle-thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 9999px;
  transition: transform 0.2s;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.toggle-input:checked ~ .toggle-thumb {
  transform: translateX(20px);
}

/* ===== Scrollbar Hiding ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== Toast Notifications ===== */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  max-width: 22rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: toast-in 0.3s ease;
}
.toast-out { animation: toast-out 0.3s ease forwards; }
.toast-success { background-color: #22c55e; }
.toast-error   { background-color: #ef4444; }
.toast-info    { background-color: #3b82f6; }
.toast-warning { background-color: #f59e0b; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* ===== Auto-Save Indicator ===== */
#save-indicator {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  color: #9ca3af;
  background: white;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 50;
}
#save-indicator.visible { opacity: 1; }
#save-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: #d1d5db;
  flex-shrink: 0;
}
#save-indicator.saving .dot { background-color: #3b82f6; animation: pulse 1s infinite; }
#save-indicator.saved  .dot { background-color: #22c55e; }
#save-indicator.error  .dot { background-color: #ef4444; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ===== Journal row hover ===== */
#journal-table-body tr:hover td { background-color: #f9fafb; }

/* ===== Bar chart items ===== */
.bar-item {
  min-width: 2rem;
  transition: width 0.4s ease;
}

/* ===== Account Combobox ===== */
.account-combobox-wrap { position: relative; }

.combobox-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 8px 16px -4px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.06);
  z-index: 50;
}
.combobox-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  border-radius: 0.5rem 0.5rem 0 0;
  outline: none;
  background: #f9fafb;
}
.combobox-search:focus { background: #eff6ff; }
.combobox-options {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  max-height: 11rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.combobox-option {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
  color: #374151;
}
.combobox-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combobox-option:hover { background: #eff6ff; color: #1d4ed8; }
.combobox-create-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  color: #2563eb;
  border-top: 1px solid #f3f4f6;
}
.combobox-create-option:hover { background: #eff6ff; }

/* ===== Text Dropdown (Vorgabetexte) ===== */
.text-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 8px 16px -4px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.06);
  z-index: 50;
  max-height: 13rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.text-dropdown-option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: #374151;
  border-bottom: 1px solid #f9fafb;
}
.text-dropdown-option:last-child { border-bottom: none; }
.text-dropdown-option:hover { background: #eff6ff; color: #1d4ed8; }

/* ===== Currency Radio Pills ===== */
.currency-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1.5px solid #d1d5db;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
}
.currency-pill:hover { border-color: #3b82f6; color: #2563eb; background: #eff6ff; }
.currency-pill.selected { border-color: #3b82f6; background: #3b82f6; color: white; }
.currency-pill input { display: none; }

/* ===== Journal Form Grid ===== */
.field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.25rem;
  letter-spacing: 0.01em;
}
.field-input {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  background-color: #fff;
  color: #111827;
  -webkit-appearance: none;
  appearance: none;
}
.field-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
.journal-row1 {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 9rem 2fr 1.5fr 1.5fr;
}
.journal-amount-field { width: 8rem; flex-shrink: 0; }

@media (max-width: 680px) {
  .journal-row1 { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .journal-amount-field { width: 100%; }
  .journal-row1 .field-input {
    padding: 0.375rem 0.5rem;
  }
  .journal-row1 input[type="date"].field-input {
    padding: 0.375rem 0.375rem;
    min-width: 0;
  }
}

/* ===== T-Konten Grid ===== */
#t-konten-container {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
#t-konten-container.view-single {
  grid-template-columns: 1fr;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* ===== Document Explorer (Dokumente) ===== */
.doc-explorer-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  min-height: 90px;
  padding: 0.5rem;
  border: 2px dashed transparent;
  border-radius: 0.5rem;
  transition: border-color 0.15s, background-color 0.15s;
}
.doc-dropzone-active { border-color: #3b82f6; background-color: #eff6ff; }
html.dark .doc-dropzone-active { background-color: #1e3a5f; }

/* ===== Print preview page (print.html): fixed A4 layout, independent of
   whatever window size the snapshot was taken from. ===== */
#print-preview-page {
  font-size: 12px;
}
#print-preview-page .report-two-col-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
#print-preview-page .report-two-col-grid.divide-y { border-top-width: 0 !important; }
#print-preview-page .report-two-col-grid > .sm\:pr-3 { padding-right: 0.75rem !important; }
#print-preview-page .report-two-col-grid > .sm\:pl-3 { padding-left: 0.75rem !important; border-left: 1px solid #e5e7eb !important; }
#print-preview-page .report-two-col-grid > .pt-3 { padding-top: 0 !important; border-top-width: 0 !important; }
#print-preview-page .report-two-col-grid.divide-x-0 > div:nth-child(2) {
  border-left: 1px solid #e5e7eb !important;
}
#print-preview-page button { display: none !important; }
#print-preview-page .shadow-sm { box-shadow: none !important; }

@media print {
  @page { size: A4; margin: 10mm; }

  header, nav, button, #journal-form,
  #journal-pagination, #toast-container, #save-indicator,
  .tab-link:not(.active-tab) { display: none !important; }
  .tab-content:not(#berichte) { display: none !important; }
  #berichte { display: block !important; }
  body { background: white; }
  .shadow-md { box-shadow: none !important; }
  .rounded-lg { border-radius: 0 !important; }
  .container { padding-top: 0 !important; max-width: none !important; width: auto !important; }

  /* T-Konto single print */
  body.printing-tkonto .tab-content:not(#konten) { display: none !important; }
  body.printing-tkonto #konten { display: block !important; }
  body.printing-tkonto #berichte { display: none !important; }
  body.printing-tkonto #konten > div:first-child { display: none !important; }
  body.printing-tkonto .tkonto-action-btns { display: none !important; }
  body.printing-tkonto .tkonto-currency-btn { display: none !important; }
  body.printing-tkonto .shadow-sm { box-shadow: none !important; }
}

/* ============================================================
   DARK MODE
   Re-themes the existing neutral Tailwind utility classes directly
   rather than adding dark: variants to every element in the app.
   ============================================================ */
html.dark { color-scheme: dark; }

html.dark body { background-color: #0f172a; color: #cbd5e1; }

/* Card / surface backgrounds */
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-gray-50 { background-color: #273548 !important; }
html.dark .bg-gray-100 { background-color: #0f172a !important; }
html.dark .bg-gray-200 { background-color: #334155 !important; }
html.dark .hover\:bg-gray-50:hover { background-color: #2d3d52 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #3f4f64 !important; }
html.dark #journal-table-body tr:hover td { background-color: #2d3d52 !important; }
html.dark .hover\:bg-blue-50:hover { background-color: #1e3a5f !important; }
html.dark .hover\:border-blue-300:hover { border-color: #3b82f6 !important; }

/* Text */
html.dark .text-gray-900 { color: #f1f5f9 !important; }
html.dark .text-gray-800 { color: #e2e8f0 !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #64748b !important; }
html.dark .text-gray-300 { color: #475569 !important; }
html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-900:hover { color: #f1f5f9 !important; }

/* Borders / dividers */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .divide-gray-50 > *,
html.dark .divide-gray-100 > *,
html.dark .divide-gray-200 > *,
html.dark .border-b,
html.dark .border-t,
html.dark .border {
  border-color: #334155 !important;
}

/* Forms */
html.dark input,
html.dark select,
html.dark textarea,
html.dark .field-input {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }
html.dark .combobox-dropdown,
html.dark .text-dropdown {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}
html.dark .combobox-search { background-color: #273548 !important; color: #e2e8f0 !important; }
html.dark .combobox-search:focus { background-color: #1e3a5f !important; }
html.dark .combobox-option,
html.dark .text-dropdown-option { color: #e2e8f0 !important; border-bottom-color: #334155 !important; }
html.dark .combobox-option:hover,
html.dark .text-dropdown-option:hover { background-color: #273548 !important; color: #93c5fd !important; }
html.dark .combobox-create-option { color: #93c5fd !important; border-top-color: #334155 !important; }
html.dark .combobox-create-option:hover { background-color: #273548 !important; }
html.dark .currency-pill { border-color: #475569 !important; color: #94a3b8 !important; }
html.dark .currency-pill:hover { background-color: #273548 !important; }

/* Pastel account-type colors (T-Konten quick-select, Hilfe boxes) */
html.dark .bg-blue-50    { background-color: #1e3a5f !important; }
html.dark .bg-amber-50   { background-color: #4a3a14 !important; }
html.dark .bg-rose-50    { background-color: #4a1d28 !important; }
html.dark .bg-emerald-50 { background-color: #0f3d2e !important; }
html.dark .bg-green-50   { background-color: #0f3d2e !important; }
html.dark .bg-red-50     { background-color: #4a1d1d !important; }
html.dark .bg-purple-50  { background-color: #3a2350 !important; }
html.dark .bg-indigo-50  { background-color: #25275f !important; }
html.dark .bg-teal-50    { background-color: #0f3d3d !important; }
html.dark .bg-yellow-50  { background-color: #4a3a14 !important; }
html.dark .text-blue-700, html.dark .text-blue-800    { color: #93c5fd !important; }
html.dark .text-amber-700, html.dark .text-amber-800  { color: #fcd34d !important; }
html.dark .text-rose-700                              { color: #fca5b1 !important; }
html.dark .text-emerald-700                           { color: #6ee7b7 !important; }
html.dark .text-green-700, html.dark .text-green-800  { color: #6ee7b7 !important; }
html.dark .text-red-600, html.dark .text-red-700      { color: #fca5a5 !important; }
html.dark .text-purple-800                            { color: #c4b5fd !important; }
html.dark .text-indigo-800                            { color: #a5b4fc !important; }
html.dark .text-teal-800                              { color: #5eead4 !important; }
html.dark .text-yellow-800                             { color: #fcd34d !important; }
html.dark .border-blue-100, html.dark .border-blue-200    { border-color: #1d4e89 !important; }
html.dark .border-amber-100, html.dark .border-amber-200  { border-color: #6b5316 !important; }
html.dark .border-rose-200                                { border-color: #6b2533 !important; }
html.dark .border-emerald-200                             { border-color: #155740 !important; }
html.dark .border-green-100, html.dark .border-green-200  { border-color: #155740 !important; }
html.dark .border-red-200                                 { border-color: #6b2525 !important; }
html.dark .border-yellow-200                              { border-color: #6b5316 !important; }

/* Shadows read better slightly stronger on dark backgrounds */
html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-xl {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.5) !important;
}

/* Misc surfaces */
html.dark #mobile-menu-panel { background-color: #1e293b !important; }
html.dark #mobile-menu-btn,
html.dark #scroll-top-btn,
html.dark #theme-toggle-btn { background-color: #1e293b !important; }
html.dark .toggle-track { background-color: #475569; }
html.dark #mobile-menu-panel .tab-link.active-tab {
  background-color: #1e3a5f;
  color: #93c5fd;
}