/* 1:1 sa React (Tailwind: slate-950, primary emerald, secondary indigo) */
:root {
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --primary: #10b981;
  --primary-20: rgba(16, 185, 129, 0.2);
  --secondary: #6366f1;
  --secondary-20: rgba(99, 102, 241, 0.2);
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background: var(--slate-950);
  color: #f1f5f9;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

.app { max-width: 42rem; margin: 0 auto; }

.hidden { display: none !important; }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ========== Header ========== */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--slate-800);
  padding: 0.75rem 1rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 42rem;
  margin: 0 auto;
}

.btn-menu {
  padding: 0.5rem;
  margin-right: 0.25rem;
  background: transparent;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
}

.btn-menu:hover { background: var(--slate-800); color: #f1f5f9; }

.logo {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: white;
}

.year-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--slate-800);
  border: 1px solid var(--slate-700);
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
}

.year-label {
  font-weight: 800;
  font-size: 0.75rem;
  min-width: 3rem;
  text-align: center;
  color: white;
}

.btn-nav {
  background: none;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 1rem;
}

.btn-nav:hover { background: var(--slate-700); color: #f1f5f9; }

/* ========== Main ========== */
.main { padding-bottom: 8rem; }

/* Upcoming – samo ako ima */
.upcoming-wrap { margin-bottom: 0; }

.upcoming-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--slate-500);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.upcoming-list {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.upcoming-card {
  min-width: 240px;
  background: var(--slate-900);
  border: 1px solid var(--slate-800);
  border-radius: 1.5rem;
  padding: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
  transition: transform 0.15s, border-color 0.15s;
}

.upcoming-card:hover { border-color: var(--primary); transform: scale(1.02); }

.upcoming-date {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.upcoming-client { font-weight: 700; color: white; margin-bottom: 0.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.upcoming-venue { font-size: 0.75rem; color: var(--slate-500); margin-bottom: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.upcoming-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }

.upcoming-time {
  font-size: 0.65rem;
  font-weight: 800;
  background: var(--slate-800);
  color: var(--slate-400);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}

.upcoming-price { font-size: 0.75rem; font-weight: 800; color: var(--primary); }

/* Summary card */
.summary-card {
  background: linear-gradient(135deg, var(--primary-20), var(--secondary-20));
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.summary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

.summary-label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); }

.summary-year-badge { font-size: 0.75rem; font-weight: 500; color: var(--slate-400); background: rgba(15,23,42,0.5); padding: 0.25rem 0.5rem; border-radius: 9999px; }

.summary-amount { font-size: 2.25rem; font-weight: 800; color: white; display: flex; align-items: baseline; gap: 0.5rem; }

.summary-currency { font-size: 1.125rem; font-weight: 700; color: var(--primary); }

/* Calendar – mesec po mesec */
.calendar-section { margin-bottom: 2rem; }

.month-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--slate-400);
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  position: sticky;
  top: 3.5rem;
  background: rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(4px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.month-title::before { content: ""; width: 4px; height: 1rem; background: var(--primary); border-radius: 4px; }

.days-grid { display: grid; gap: 1rem; }

.day-card {
  display: block;
  width: 100%;
  padding: 1.25rem;
  border-radius: 1.5rem;
  border: 1px solid var(--slate-800);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  background: rgba(15, 23, 42, 0.4);
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}

.day-card:hover { border-color: var(--slate-700); }

.day-card.has-reservation {
  background: var(--slate-900);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
}

.day-card.has-reservation::after {
  content: "✓";
  position: absolute;
  top: 0; right: 0;
  width: 3rem; height: 3rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 0 0 0 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
}

.day-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }

.day-card-date-wrap { display: flex; align-items: baseline; gap: 0.75rem; }

.day-date-num { font-size: 1.875rem; font-weight: 800; color: white; }

.day-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}

.day-badge.petak { background: rgba(99, 102, 241, 0.1); color: var(--indigo-400); }
.day-badge.subota { background: rgba(244, 63, 94, 0.1); color: var(--rose-400); }

.day-time-pill {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--slate-400);
  background: var(--slate-800);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

.day-card-body { margin-top: 0.5rem; }

.day-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }

.day-row-icon {
  width: 2.25rem; height: 2.25rem;
  background: var(--slate-800);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.day-client { font-weight: 700; color: var(--slate-200); }
.day-venue { font-size: 0.875rem; color: var(--slate-400); }

.day-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--slate-800);
}

.day-price { font-size: 1.125rem; font-weight: 800; color: var(--primary); }
.day-price .rsd { font-size: 0.75rem; font-weight: 700; color: var(--slate-500); margin-left: 0.25rem; }

.day-sound {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--indigo-400);
  background: rgba(99, 102, 241, 0.1);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.day-empty-msg { font-size: 0.875rem; font-weight: 700; color: var(--slate-600); display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }

/* ========== Menu ========== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(8px);
}

.menu-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 85%;
  max-width: 24rem;
  z-index: 51;
  background: var(--slate-900);
  border-right: 1px solid var(--slate-800);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.menu-panel.hidden { display: none; }
.menu-panel:not(.open) { transform: translateX(-100%); }
.menu-panel.open { transform: translateX(0); }

.menu-top {
  padding: 2rem;
  border-bottom: 1px solid var(--slate-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.menu-logo-wrap { display: flex; align-items: center; gap: 0.75rem; }

.menu-logo-icon {
  width: 2.5rem; height: 2.5rem;
  background: var(--primary);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2);
}

.menu-logo-text { font-size: 1.25rem; font-weight: 800; color: white; }

.btn-close {
  background: none;
  border: none;
  color: var(--slate-500);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.5rem;
}

.btn-close:hover { color: var(--slate-400); }

.menu-auth { padding: 0 2rem 2rem; }

.btn-google {
  width: 100%;
  padding: 1rem 1.25rem;
  background: white;
  color: #1e293b;
  font-weight: 800;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);
}

.btn-google:hover { background: #f1f5f9; }

.menu-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--slate-800);
  border: 1px solid var(--slate-700);
  border-radius: 1.5rem;
}

.menu-user-avatar {
  width: 3rem; height: 3rem;
  background: rgba(16, 185, 129, 0.2);
  color: var(--primary);
  font-weight: 800;
  font-size: 1.25rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.menu-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.menu-user-info { flex: 1; min-width: 0; }

.menu-user-name { margin: 0; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-user-email { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn-logout {
  padding: 0.5rem;
  background: transparent;
  border: none;
  color: var(--rose-500);
  cursor: pointer;
  border-radius: 0.75rem;
  font-size: 1.25rem;
}

.btn-logout:hover { background: rgba(244, 63, 94, 0.1); }

.menu-body { flex: 1; padding: 0 2rem 2rem; overflow-y: auto; }

.menu-block { margin-bottom: 2rem; }

.menu-block-title {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--slate-500);
  margin-bottom: 0.75rem;
}

.menu-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(30, 41, 59, 0.5);
  color: white;
  font-weight: 700;
  border: 1px solid var(--slate-800);
  border-radius: 1rem;
  cursor: pointer;
  font-size: 1rem;
  text-align: left;
}

.menu-btn:hover { background: var(--slate-800); }

.menu-btn-primary { background: rgba(16, 185, 129, 0.1); color: var(--primary); border-color: rgba(16, 185, 129, 0.2); }
.menu-btn-primary:hover { background: rgba(16, 185, 129, 0.2); }

.menu-btn-disabled { background: rgba(30, 41, 59, 0.5); color: var(--slate-400); cursor: default; }

.menu-stat-card {
  padding: 1.25rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid var(--slate-800);
  border-radius: 1.5rem;
}

.menu-stat-label { font-size: 0.75rem; font-weight: 700; color: var(--slate-400); margin-bottom: 0.5rem; }

.menu-stat-value { font-size: 1.5rem; font-weight: 800; color: white; }
.menu-stat-value .rsd { font-size: 0.75rem; font-weight: 700; color: var(--primary); margin-left: 0.25rem; }

.menu-about { font-size: 0.875rem; font-weight: 700; color: var(--slate-400); margin: 0.5rem 0 0; display: flex; align-items: center; gap: 0.75rem; }

.menu-footer {
  padding: 2rem;
  border-top: 1px solid var(--slate-800);
  text-align: center;
}

.menu-powered { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: var(--slate-600); margin: 0; }

/* ========== Overview Modal ========== */
.overlay-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(8px);
}

.overview-box {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 85vh;
  background: var(--slate-900);
  border: 1px solid var(--slate-800);
  border-radius: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.overview-header {
  padding: 2rem;
  border-bottom: 1px solid var(--slate-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--slate-900);
}

.overview-title { font-size: 1.5rem; font-weight: 800; color: white; margin: 0; }

.overview-subtitle { font-size: 0.75rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 0.1em; margin: 0.25rem 0 0; }

.overview-body { padding: 2rem; overflow-y: auto; }

.overview-item {
  padding: 1rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid var(--slate-800);
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.overview-item:hover { border-color: rgba(16, 185, 129, 0.3); }

.overview-item-date { font-size: 0.75rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }

.overview-item-time { font-size: 0.65rem; font-weight: 800; background: var(--slate-700); color: var(--slate-300); padding: 0.25rem 0.5rem; border-radius: 0.5rem; float: right; }

.overview-item-client { font-weight: 700; color: white; }

.overview-item-venue { font-size: 0.75rem; color: var(--slate-500); margin-top: 0.25rem; }

.overview-empty { text-align: center; padding: 3rem 1rem; }
.overview-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.overview-empty-p { color: var(--slate-500); font-weight: 700; margin: 0; }

/* ========== Edit Modal ========== */
.edit-box {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 95vh;
  background: var(--slate-900);
  border-top: 1px solid var(--slate-800);
  border-radius: 2.5rem 2.5rem 0 0;
  box-shadow: 0 -25px 50px -12px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 640px) {
  .edit-box { border-radius: 2.5rem; border: 1px solid var(--slate-800); margin: 1rem; }
}

.edit-header {
  padding: 2rem;
  border-bottom: 1px solid var(--slate-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--slate-900);
}

.edit-header-date-wrap { flex: 1; margin-right: 1rem; }

.edit-date-input {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.edit-date-input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; }

.edit-weekday { font-size: 0.75rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 0.1em; margin: 0.25rem 0 0; }

.edit-body { padding: 2rem; overflow-y: auto; }

.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }

.edit-label {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--slate-500);
  margin-bottom: 0.5rem;
  display: block;
}

.edit-grid .edit-label { grid-column: span 1; }
.edit-grid .edit-input { grid-column: span 1; }

.edit-input, .edit-textarea {
  width: 100%;
  padding: 1rem;
  background: var(--slate-800);
  border: 1px solid var(--slate-700);
  border-radius: 1rem;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  outline: none;
}

.edit-input:focus, .edit-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }

.edit-textarea { resize: none; margin-bottom: 1.5rem; }

.edit-sound-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: 2rem;
  margin-bottom: 2rem;
}

.edit-sound-left { display: flex; align-items: center; gap: 1rem; }

.edit-sound-icon {
  width: 3rem; height: 3rem;
  background: var(--slate-800);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.edit-sound-title { font-weight: 800; color: white; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }

.edit-sound-desc { font-size: 0.65rem; font-weight: 700; color: var(--slate-500); margin: 0.25rem 0 0; }

.toggle {
  width: 3.5rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--slate-700);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
}

.toggle[aria-checked="true"] { background: var(--indigo-600); }

.toggle-thumb {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background: white;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

.toggle[aria-checked="true"] .toggle-thumb { transform: translateX(1.75rem); }

.edit-actions { display: flex; gap: 1rem; padding-top: 1.5rem; }

.btn-delete {
  flex: 1;
  padding: 1.25rem;
  background: transparent;
  color: var(--rose-500);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
}

.btn-delete:hover { background: rgba(244, 63, 94, 0.1); }

.btn-save {
  flex: 2;
  padding: 1.25rem;
  background: var(--primary);
  color: white;
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.25);
}

.btn-save:hover { background: #0d9488; }

/* ========== FAB ========== */
.fab-wrap {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.fab {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.4);
  transition: transform 0.15s;
}

.fab:hover { transform: scale(1.1); }
.fab:active { transform: scale(0.95); }

/* ========== Toast ========== */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: white;
  color: #020617;
  padding: 1rem 2rem;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  border: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.toast-icon { color: var(--primary); font-weight: 800; font-size: 1.25rem; }

.toast-text { font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; }