/* Theme variables */
    :root {
      --bg-gradient: linear-gradient(-45deg, #f9fafb, #e2e8f0, #d9e2ec, #f0f4f8);
      --text-color: #1f2937;
      --card-bg: rgba(255, 255, 255, 0.9);
      --particle-color: #10b981;
    }

    body.dark-mode {
      --bg-gradient: linear-gradient(-45deg, #1f2937, #111827, #374151, #1e293b);
      --text-color: #f9fafb;
      --card-bg: rgba(31, 41, 55, 0.9);
      --particle-color: #3b82f6;
    }

    /* Body styles */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: var(--text-color);
      background: var(--bg-gradient);
      background-size: 400% 400%;
      animation: gradientBG 20s ease infinite;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      transition: background 0.5s, color 0.5s;
      position: relative;
      overflow: hidden;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Canvas for particles */
    #particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
    }

    /* Header */
    header {
      background: var(--card-bg);
      backdrop-filter: blur(10px);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1em;
      height: 5em;
      margin: 1em;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      text-align: center;
      animation: fadeIn 1.5s ease;
      transition: background 0.5s;
      position: relative;
      width: 80%;
    }

    .logo {
      max-width: 4em;
      max-height: 4em;
      animation: bounceIn 1.2s ease;
    }

    .naslov {
      font-size: 1.5em;
      font-weight: bold;
      animation: fadeIn 2s ease;
    }

    /* Dark mode toggle */
    #darkToggle {
  		position: fixed;      /* sada se gumb fiksira na ekran */
  		top: 15px;            /* udaljenost od vrha */
  		right: 15px;          /* udaljenost od desnog ruba */
  		background: linear-gradient(90deg, #3b82f6, #1e40af);
  		color: #fff;
  		border: none;
  		border-radius: 20px;
  		padding: 5px 10px;
  		cursor: pointer;
  		font-size: 0.9em;
  		transition: 0.3s;
  		z-index: 1000;        /* da bude iznad svega */
	}

	#darkToggle:hover {
  		transform: scale(1.05);
  		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

    @keyframes bounceIn {
      0% { transform: scale(0.5); opacity: 0; }
      50% { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(1); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Form styling */
    .centered-form {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
      animation: fadeIn 1.5s ease;
    }

    label {
      font-weight: bold;
    }

    input[type="number"] {
      padding: 0.4em;
      border: 1px solid #ccc;
      border-radius: 5px;
      transition: 0.3s;
      background: var(--card-bg);
      color: var(--text-color);
    }

    input[type="number"]:focus {
      outline: none;
      border-color: #10b981;
      box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
    }

    /* Button styling */
    .button-23 {
      padding: 0.5em 1em;
      background: linear-gradient(90deg, #10b981, #059669);
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s ease;
      font-weight: bold;
    }

    .button-23:hover {
      background: linear-gradient(90deg, #34d399, #059669);
      transform: scale(1.05);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    #izvjestaj {
    margin: 20px auto;      /* centriranje horizontalno */
    width: 80%;             /* širina */
    background: var(--card-bg);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.6s ease, background 0.5s;
    max-height: 60vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    display: flex;          /* omogućava centriranje tablice */
    justify-content: center; /* centriranje horizontalno */
}

#izvjestaj table {
    width: auto;             /* tablica zauzima samo širinu sadržaja */
    border-collapse: collapse;
    text-align: left;        /* poravnanje teksta u ćelijama */
}