/* ========== HUD DARK CORE ========== */
:root {
  --bg-main: #0b0b0f;
  --bg-card: #141414;
  --accent: #1DB954;
  --danger: #ff3b3b;
  --text-main: #ffffff;
  --text-muted: #b5b5b5;
}

/* HUD overrides */
body.hud {
  background: var(--bg-main) !important;
  color: var(--text-main);
}

body.hud .main-content {
  background: var(--bg-main) !important;
}

body.hud .live-card,
body.hud .hud-card {
  background: var(--bg-card) !important;
  border-radius: 28px;
  box-shadow: 0 0 40px rgba(29,185,84,.18);
}

body.hud .today-amount {
  color: var(--accent);
}


body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f6f8;
}

.app {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
    width: 220px;
    background: #1e293b;
    color: #fff;
    padding: 20px;
}

.sidebar h2 {
    margin-bottom: 20px;
}

.sidebar a {
    display: block;
    color: #cbd5e1;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
}

.sidebar a:hover {
    background: #334155;
    color: #fff;
}

.logout {
    color: #f87171;
}

/* CONTENT */
.content {
    flex: 1;
    padding: 30px;
}

/* CARDS */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.card {
    background: white;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    color: #111;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card:hover {
    background: #e5e7eb;
}

/* TABLE */
table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

th, td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

th {
    background: #f1f5f9;
}


/* =====================
   DASHBOARD
===================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}

.dashboard-grid canvas {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* SALDO da zauzme cijelu širinu */
#saldoChart {
    grid-column: span 2;
}

/* =====================
   MOBILE
===================== */

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    #saldoChart {
        grid-column: span 1;
    }

    .dashboard-grid canvas {
        padding: 10px;
    }
}

canvas {
    max-width: 100% !important;
/* maknuli smo height:auto !important jer ruši Chart.js sizing */
}

/* ===== LAYOUT ===== */

.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    background: #1e1e2f;
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    font-size: 20px;
    background: #151521;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
}

.sidebar-nav a {
    display: block;
    padding: 15px;
    color: #ccc;
    text-decoration: none;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: #2e2e44;
    color: #fff;
}

.sidebar-nav a.logout {
    margin-top: 20px;
    color: #ff6b6b;
}

/* ===== MAIN ===== */

.main-content {
    flex: 1;
    padding: 20px;
    background: #f4f6fa;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        z-index: 1000;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: inline-block;
    }

    .main-content {
        padding: 15px;
    }
}


.live-wrap{
    max-width:460px;
    margin:40px auto;
    display:flex;
    flex-direction:column;
    gap:25px;
}

.live-card{
    background:#111;
    border-radius:20px;
    padding:25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.4);
}

.today-amount{
    font-size:36px;
    margin-top:10px;
    color:#4cff7b;
}

.today-hud{
    font-size:42px;
    font-weight:800;
    text-align:center;
    color:#4cff7b;
    margin-bottom:20px;
    letter-spacing:1px;
    text-shadow:0 0 18px rgba(76,255,123,.35);
}

.glow {
    animation: glowPulse 0.8s ease-out;
}

@keyframes glowPulse {
    0%   { text-shadow: 0 0 0 transparent; }
    50%  { text-shadow: 0 0 20px #4cff7b; }
    100% { text-shadow: 0 0 0 transparent; }
}

.delta{
    text-align:center;
    font-size:15px;
    opacity:.7;
    letter-spacing:1px;
}

/* =========================
   MOBILE BOTTOM NAV (HUD)
========================= */
.mobile-nav{
  display:none;
}

@media (max-width: 768px){
  /* sidebar ostaje desktop; mobile dobiva bottom nav */
  body.hud .sidebar{
    display:none; /* na HUD-u ga skroz maknemo na mobile */
  }

  body.hud .main-content{
	padding-bottom: calc(90px + env(safe-area-inset-bottom));
    /*padding-bottom: 90px; /* da bottom nav ne prekriva graf */
  }

  .mobile-nav{
    display:flex;
    position:fixed;
    left:12px;
    right:12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
    height:64px;
    background: rgba(20,20,20,.92);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    z-index: 2000;
    align-items:center;
    justify-content:space-between;
    padding: 0 10px;
  }

  .mobile-nav .nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color: var(--text-muted);
    text-decoration:none;
    font-size:12px;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav .nav-ico{
    font-size:18px;
    line-height:18px;
  }

  .mobile-nav .nav-txt{
    font-size:11px;
    opacity:.9;
  }

  .mobile-nav .nav-item.is-active{
    color: var(--text-main);
  }

  /* central + (Spotify-ish) */
  .mobile-nav .nav-add{
    flex:0 0 64px;
    width:64px;
    height:64px;
    border:none;
    border-radius: 20px;
    background: var(--accent);
    color:#0b0b0f;
    font-weight:900;
    font-size:28px;
    margin-top:-18px; /* “iskače” iz bara */
    box-shadow: 0 0 30px rgba(29,185,84,.35);
    cursor:pointer;
  }
  .mobile-nav .nav-add .nav-ico{
    font-size:28px;
  }
}

/* =========================
   QUICK ADD MODAL (HUD)
========================= */
.qa-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 2500;
  display:none;
}

.qa-modal{
  position: fixed;
  left: 50%;
  bottom: 90px; /* iznad bottom nava */
  transform: translateX(-50%) translateY(20px);
  width: min(520px, calc(100% - 24px));
  background: rgba(20,20,20,.96);
  border-radius: 28px;
  overflow: hidden; /* ništa ne viri van rubova */
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  z-index: 2600;
  display:none;
  padding: 16px 16px 18px;
}

.qa-modal.open,
.qa-overlay.open{
  display:block;
}

.qa-modal.open{
  transform: translateX(-50%) translateY(0);
  transition: transform .18s ease;
}

.qa-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.qa-title{
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.qa-sub{
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.qa-close{
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 18px;
  cursor:pointer;
  padding: 8px 10px;
  border-radius: 12px;
}

.qa-close:hover{
  background: rgba(255,255,255,.06);
  color: var(--text-main);
}

.qa-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.qa-label{
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.qa-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text-main);
  outline: none;
}

.qa-input:focus{
  border-color: rgba(29,185,84,.55);
  box-shadow: 0 0 0 3px rgba(29,185,84,.12);
}

.qa-submit{
  margin-top: 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #0b0b0f;
  font-weight: 800;
  cursor: pointer;
}

.qa-msg{
  font-size: 12px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
}

.qa-ok{ background: rgba(29,185,84,.12); color: var(--accent); }
.qa-err{ background: rgba(255,59,59,.12); color: #ff8a8a; }

/* desktop: modal može raditi i bez bottom nava */
@media (min-width: 769px){
  .qa-modal{ bottom: 24px; }
}

/* HUD TOAST */
.hud-toast{
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%) scale(.95);
  background: rgba(29,185,84,.95);
  color:#0b0b0f;
  padding:10px 16px;
  border-radius: 14px;
  font-weight: 800;
  opacity:0;
  z-index:3000;
  transition:.25s ease;
}

.hud-toast.show{
  opacity:1;
  transform: translateX(-50%) scale(1);
}

.speed{
  text-align:center;
  font-size:12px;
  opacity:.75;
  letter-spacing:.4px;
  margin-top:6px;
  color: var(--text-muted);
}

.speed-danger{ color: #ff8a8a !important; opacity: .9; }
.speed-good{ color: var(--accent) !important; opacity: .9; }


/* MONTH CARD */
.month-card { padding: 18px; text-align:left; }

.month-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.month-title{ font-weight:800; letter-spacing:.3px; }
.month-sub{ font-size:12px; opacity:.7; }

.month-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; }
.month-block{ background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius:18px; padding:14px; }
.month-income{ opacity:.92; }

.month-kicker{ font-size:12px; opacity:.75; margin-bottom:6px; }
.month-big{ font-size:22px; font-weight:900; }
.month-big.small{ font-size:18px; font-weight:900; }

.month-delta{ font-size:12px; margin-top:6px; opacity:.9; }
.month-delta.good{ color: var(--accent); }
.month-delta.bad{ color: #ff8a8a; }

.month-bar{ height:10px; border-radius:999px; background: rgba(255,255,255,.06); overflow:hidden; margin-top:10px; }
.month-bar-fill{ height:100%; width:0%; background: rgba(29,185,84,.95); transition: width .35s ease; }
.month-bar-fill.bad{ background: rgba(255,90,90,.9); }
.month-bar-fill.good{ background: rgba(29,185,84,.95); }

.month-note{ font-size:11px; opacity:.7; margin-top:8px; }
.month-note.subtle{ opacity:.6; }

@media (max-width: 420px){
  .month-grid{ grid-template-columns: 1fr; }
}

/* MONTH CARD ANIMATIONS */
.month-card.is-updated{
  animation: monthCardPulse .45s cubic-bezier(.22,.61,.36,1);
}

@keyframes monthCardPulse{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* Progress bar: malo glađi osjećaj */
.month-bar-fill{
  transition: width .45s ease;
}

.month-card.is-updated{
  box-shadow: 0 0 42px rgba(29,185,84,.12);
}

/* =========================
   HARD NO-SCROLL HUD (MOBILE)
   cilj: iPhone 14 Pro i slični
========================= */
@media (max-width: 768px){

  /* 1) Manje "zraka" u layoutu */
  body.hud .live-wrap{
    margin: 18px auto;
    gap: 14px;
  }

  body.hud .live-card{
    padding: 16px;
    border-radius: 22px;
  }

  /* 2) Header stack (HUD broj + delta + tempo) malo kompaktnije */
  body.hud .today-hud{
    font-size: 36px;
    margin-bottom: 10px;
  }

  body.hud .delta{
    font-size: 13px;
    margin-top: -2px;
  }

  body.hud .speed{
    font-size: 11px;
    margin-top: 4px;
  }

  /* 3) Chart visina (override global canvas height:auto) */
  body.hud .live-card canvas#liveChart{
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

  /* 4) Monthly card kompresija (bez gubitka info) */
  body.hud .month-card{
    padding: 14px;
  }

  body.hud .month-top{
    margin-bottom: 8px;
  }

  body.hud .month-block{
    padding: 12px;
    border-radius: 16px;
  }

  body.hud .month-kicker{
    margin-bottom: 4px;
    font-size: 11px;
  }

  body.hud .month-big{
    font-size: 20px;
  }

  body.hud .month-big.small{
    font-size: 16px;
  }

  body.hud .month-delta{
    font-size: 11px;
    margin-top: 5px;
  }

  body.hud .month-bar{
    height: 9px;
    margin-top: 8px;
  }

  body.hud .month-note{
    font-size: 10px;
    margin-top: 6px;
  }

  /* 5) Dodatno: income "note" sakrijemo (štedi visinu, info ostaje u delta) */
  body.hud #mtdIncomeNote{
    display: none;
  }
}

/* =========================
   iOS SAFARI FIX – spriječi auto-zoom na input
   (font-size mora biti >= 16px)
========================= */
@media (max-width: 768px){
  .qa-modal input,
  .qa-modal select,
  .qa-modal textarea{
    font-size: 16px;
  }
}