/* =====================================================
   🧭 Moderní Apple-like design pro PayTogether (Bootstrap 5)
   ===================================================== */

:root {
  --bs-primary: #007AFF; /* Apple blue */
  --bs-success: #34C759;
  --bs-danger: #FF3B30;
  --bs-warning: #FF9500;
  --bs-info: #5AC8FA;
  --bs-light: #F5F5F7;
  --bs-dark: #1C1C1E;

  --pt-surface: #ffffff;
  --pt-border: rgba(0, 0, 0, 0.06);
  --pt-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  --pt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 🩶 Základní styl písma a pozadí */
body {
  background-color: var(--bs-light);
  font-family: var(--pt-font);
  color: #111;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #111;
}

/* 🧱 Bílý box (karty) */
.bg-white {
  border-radius: 16px !important;
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow);
  transition: all 0.25s ease;
}

.bg-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ✨ Tlačítka */
.btn {
  border-radius: 10px !important;
  transition: all 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:hover {
  background-color: #0062CE;
}

/* 🧭 Sekundární tlačítka */
.btn-outline-secondary {
  color: #444;
  border-color: #ccc;
}

.btn-outline-secondary:hover {
  background-color: #f2f2f2;
  color: #000;
}

/* 🧩 Formuláře */
input, select, textarea {
  border-radius: 8px !important;
  border-color: #ddd !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(0,122,255,0.25) !important;
}

/* 🧮 Tabulky */
.table {
  border-radius: 12px;
  overflow: hidden;
}

.table > :not(caption) > * > * {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.table-light th {
  background-color: #fafafa !important;
  font-weight: 600;
}

/* 🧊 Modální okno */
.modal-content {
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* 🪶 Hover efekty na řádky tabulek */
tr:hover {
  background-color: rgba(0, 122, 255, 0.05);
}

/* 🕊️ Sekce */
section, .card, .shadow-sm {
  transition: all 0.3s ease;
}

/* 🔳 Input placeholder */
::placeholder {
  color: #aaa;
}

/* 🔗 Odkazy */
a {
  color: var(--bs-primary);
  text-decoration: none;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

header {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
}

section {
  margin-bottom: 1.5rem;
}

button, .bg-white, a {
  transition: all 0.25s ease-in-out;
}

/* === 🌙 DARK MODE FIX === */
body.dark-mode {
  background-color: #121212 !important;
  color: #e5e5e5 !important;
}

/* Boxy */
body.dark-mode .bg-white,
body.dark-mode .table,
body.dark-mode .fade-in {
  background-color: #1e1e1e !important;
  color: #e5e5e5 !important;
  border-color: #333 !important;
}

/* Tabulky */
body.dark-mode .table-light th {
  background-color: #2a2a2a !important;
  color: #e5e5e5 !important;
  border-color: #333 !important;
}

body.dark-mode table tr {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}

body.dark-mode table tr:hover {
  background-color: #2a2a2a !important;
}

/* Inputs, selects, buttons */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #2b2b2b !important;
  color: #e5e5e5 !important;
  border-color: #444 !important;
}

body.dark-mode input::placeholder {
  color: #aaa !important;
}

/* Cards / summary boxes */
body.dark-mode .shadow-sm {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
  border: 1px solid #333 !important;
}

/* Toasts */
body.dark-mode .toast {
  background-color: #333 !important;
  color: #fff !important;
}

/* Buttons */
body.dark-mode .btn-outline-secondary {
  color: #ddd !important;
  border-color: #555 !important;
}
body.dark-mode .btn-outline-secondary:hover {
  background-color: #555 !important;
}
body.dark-mode .btn-outline-danger {
  color: #ff7b7b !important;
  border-color: #ff7b7b !important;
}
body.dark-mode .btn-outline-danger:hover {
  background-color: #ff7b7b !important;
  color: #000 !important;
}

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: #555 !important;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: #777 !important;
}

/* Headings & separators */
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode .fw-semibold {
  color: #f0f0f0 !important;
}

body.dark-mode hr {
  border-top-color: #333 !important;
}

/* === Chart.js (Dark mode fix) === */
body.dark-mode canvas {
  background-color: transparent !important;
}

/* === 🧾 DARK MODE – oprava tabulky "All expenses" === */

body.dark-mode .table {
  background-color: #1b1b1b !important;
  color: #e5e5e5 !important;
  border-color: #333 !important;
}

body.dark-mode .table > :not(caption) > * > * {
  background-color: #1b1b1b !important;
  color: #e5e5e5 !important;
  border-color: #333 !important;
}

/* Hlavička tabulky */
body.dark-mode .table-light th,
body.dark-mode thead th {
  background-color: #2a2a2a !important;
  color: #f0f0f0 !important;
  border-color: #333 !important;
}

/* Sudé a liché řádky */
body.dark-mode .table tbody tr:nth-child(odd) {
  background-color: #1e1e1e !important;
}
body.dark-mode .table tbody tr:nth-child(even) {
  background-color: #242424 !important;
}

/* Hover efekt */
body.dark-mode .table tbody tr:hover {
  background-color: #2e2e2e !important;
}

/* Popisky a text v buňkách */
body.dark-mode .table td,
body.dark-mode .table th {
  color: #e5e5e5 !important;
  border-color: #333 !important;
}

/* Kategorie ikony (emoji) – necháme jasné */
body.dark-mode .table td span,
body.dark-mode .table td i {
  color: #fff !important;
}

/* Tlačítka v tabulce */
body.dark-mode .table .btn-outline-secondary {
  color: #ccc !important;
  border-color: #555 !important;
}
body.dark-mode .table .btn-outline-secondary:hover {
  background-color: #555 !important;
}
body.dark-mode .table .btn-outline-danger {
  color: #ff7b7b !important;
  border-color: #ff7b7b !important;
}
body.dark-mode .table .btn-outline-danger:hover {
  background-color: #ff7b7b !important;
  color: #000 !important;
}

/* Rámeček sekce All expenses */
body.dark-mode section.bg-white {
  background-color: #1a1a1a !important;
  border: 1px solid #333 !important;
}

/* === 🌙 DARK MODE – oprava horního headeru === */
body.dark-mode header {
  background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%) !important;
  color: #e5e5e5 !important;
  border-bottom: 1px solid #333 !important;
}

/* Texty v headeru */
body.dark-mode header h1,
body.dark-mode header p,
body.dark-mode header label,
body.dark-mode header .text-muted {
  color: #e5e5e5 !important;
}

/* Input a tlačítka v headeru */
body.dark-mode header input,
body.dark-mode header select {
  background-color: #2b2b2b !important;
  color: #e5e5e5 !important;
  border-color: #444 !important;
}

body.dark-mode header .btn-primary {
  background-color: #0a84ff !important;
  border-color: #0a84ff !important;
}

body.dark-mode header .btn-outline-secondary {
  color: #ccc !important;
  border-color: #555 !important;
}
body.dark-mode header .btn-outline-secondary:hover {
  background-color: #555 !important;
}

body.dark-mode header .btn-outline-success {
  color: #4cd964 !important;
  border-color: #4cd964 !important;
}
body.dark-mode header .btn-outline-success:hover {
  background-color: #4cd964 !important;
  color: #000 !important;
}