/* NOTE: POSITION */
/* NOTE: DISPLAY */
/* NOTE: BOXING */
/* NOTE: STYLE */
/* NOTE: FONT */

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/Roboto_Mono.ttf");
}

:root {
  font-size: 12px;
  --font_boja: 204, 204, 204;
  --tekst_family: "Roboto Mono";
  --pozadina_boja: 98, 98, 98;


  --nav_pozadina_boja: 34, 34, 34;

  --nav_aktivan_pozadina_boja: 59, 59, 59;



  --header_pozadina_boja: 150, 150, 150;
  --header_tekst_boja: 30, 30, 30;










  --info_boja: #4e73df;
  --danger_boja: #e74a3b;
  --success_boja: #1cc88a;
  --warning_boja: #f6c23e;
  --info_pozadina_boja: #2d2d2d;

  --select_ivica_boja: #444444;
  --select_pozadina_boja: #3d3d3d;
  --select_tekst_boja: #f8f9fa;














  /* DODATE PROMENLJIVE ZA GRID (za otvaranje aside panela) */
  --aside_levi_širina: 350px;
  --aside_desni_širina: 500px;
}

/* NOTE: Selection */
::selection {
  background-color: rgba(255, 255, 255, 0.15);
}
::-moz-selection {
  background-color: gray;
  color: var(--pozadina_boja);
  text-shadow: 1px 1px 2px var(--font_boja);
}



*,
*:before,
*:after {
  /* NOTE: BOXING */
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  /* NOTE: FONT */
  font-family: var(--tekst_family);
  font-size: var(--tekst_velicina);
  font-weight: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.4px;
}

body {
  /* NOTE: POSITION */
  height: 100vh;
  /* NOTE: DISPLAY */
  display: grid;
  /* Redovi: Header, Nav, Sredina(Main+Asides), Footer */
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  /* Redovi: Header (auto), Nav (auto), Main (1fr - uzima ostatak), Footer (auto) */
  grid-template-rows: auto 50px 1fr auto;
  grid-template-columns: 1fr;
  overflow: hidden; /* Glavni prozor se ne skroluje, već delovi unutar njega */
  /* NOTE: BOXING */
  margin: 0;
  border: none;
  padding: 0;
  /* NOTE: STYLE */
  background-color: rgb(var(--pozadina_boja));
  /* NOTE: FONT */
  font-size: 1rem !important;
}

header {
  grid-area: header;
  background-color: rgb(var(--header_pozadina_boja));
  color: rgb(var(--header_tekst_boja));
  font-size: 1.3rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

nav {
  grid-area: nav;
  z-index: 30; /* Uvek iznad asidea i maina */
}

footer {
  grid-area: footer;
  background-color: #222;
  color: white;
  padding: 10px;
}

main {
  grid-area: main;
  overflow-y: auto; /* Main se nezavisno skroluje */
  padding: 20px;
}

/* ASIDE PODEŠAVANJA */
#aside_levi,
#aside_desni {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  z-index: 100;
  background-color: #e9ecef;
  transition: transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#aside_levi::-webkit-scrollbar,
#aside_desni::-webkit-scrollbar {
  display: none;
}
.aside-sadrzaj {
  width: 100%;
  padding: 20px;
}

/* --- DESNI MENI (Uvek sakriven/fiksiran dok se ne pozove) --- */
#aside_desni {
  width: var(--aside_desni_širina);
  right: 0;
  transform: translateX(100%); /* Izguran desno van ekrana */
}
body.aside_desni_otvoren #aside_desni {
  transform: translateX(0); /* Ulazi u ekran */
}

/* --- LEVI MENI (Sakriven na mobilnom) --- */
#aside_levi {
  width: var(--aside_levi_širina);
  left: 0;
  transform: translateX(-100%); /* Izguran levo van ekrana */
}
body.aside_levi_otvoren #aside_levi {
  transform: translateX(0);
}
/* =========================================
   3. DUGME ZA LEVI ASIDE (Viri iz menija)
   ========================================= */
#aside_levi_dugme {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.3s ease;
  z-index: 41;
  background-color: rgb(var(--nav_pozadina_boja));
  color: white;
  border: none;
  padding: 10px 0px;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
  font-size: 2.5rem;
}

/* Rotiramo strelicu kad je meni otvoren */
body.aside_levi_otvoren #aside_levi_dugme {
  left: var(--aside_levi_širina);
}
#aside_levi_dugme .mdi {
  transition: transform 0.3s ease;
  display: inline-block;
}
body.aside_levi_otvoren #aside_levi_dugme .mdi {
   /* Rotira se samo strelica */
   transform: rotateY(180deg);
}


/* =========================================
    4. RESPONZIVNOST (Mobilni & Tablet < 768px)
========================================= */
/* MOBILNI I TABLET (< 768px) */
@media (max-width: 767px) {
  :root {
    --aside_levi_širina: calc(100vw - 50px);
    --aside_desni_širina: 90vw;
  }
}

/* DESKTOP (>= 768px) */
@media (min-width: 768px) {
  /* NA DESKTOPU: Ubacujemo levi panel u Grid */
  /*
  body {
    grid-template-areas:
      "header header"
      "nav nav"
      "aside_levi main"
      "footer footer";
    grid-template-columns: var(--aside_levi_širina) 1fr;
  }
  
  #aside_levi {
    position: static; /* Vraća ga u grid (više nije fixed) */
    height: auto;     /* Prati visinu grid reda, a ne visinu ekrana */
    transform: none;  /* Poništava translateX, panel je UVEK vidljiv */
    box-shadow: none; /* Uklanja senku jer ne preklapa ništa */
    z-index: 1;
  }

  #aside_levi_dugme {
    display: none; /* Dugme nam ne treba na desktopu jer je panel uvek otvoren */
  }
}