Projekcija/web/static/styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Times New Roman', serif;
    background-color: #0a0a0a;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Prevent body scroll */
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

/* Gornja vrstica - Vnos pesmi */
.top-bar {
    background-color: #1a1a1a;
    padding: 15px;
    border-bottom: 2px solid #333;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0; /* Keep fixed size */
}

.top-bar label {
    font-size: 16px;
    font-weight: bold;
}

.top-bar input {
    padding: 10px 15px;
    font-size: 16px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #ffffff;
    border-radius: 4px;
    width: 100px;
}

.top-bar button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #3a7ca5;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.top-bar button:hover {
    background-color: #2d6183;
}

.caps-toggle {
    padding: 10px 15px;
    font-size: 14px;
    background-color: #4a4a4a;
    border: 1px solid #666;
    color: #ffffff;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.caps-toggle.active {
    background-color: #3a7ca5;
}

/* Sredenska vrstica - Prikaz besedila */
.content {
    flex: 1;
    display: flex;
    align-items: flex-start; /* Better for scrolling long text */
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background-color: #000000;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

.lyrics-display {
    text-align: center;
    font-size: 24px; /* Adjusted for mobile */
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
    padding-bottom: 20px;
}

.status-message {
    color: #aaa;
    font-size: 20px;
}

/* Donja vrstica - Navigacijski gumbi */
.bottom-bar {
    background-color: #1a1a1a;
    padding: 15px;
    border-top: 2px solid #333;
    display: flex;
    justify-content: space-around;
    gap: 10px;
    align-items: center;
    flex-shrink: 0; /* Keep fixed size */
}

.bottom-bar button {
    padding: 12px 10px;
    font-size: 16px;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
    flex: 1;
    min-width: 0; /* Allow shrinking */
    max-width: 120px;
}

.btn-nav {
    background-color: #556b79;
}

.btn-nav:hover {
    background-color: #3d4a52;
}

.btn-nav:disabled {
    background-color: #2a2a2a;
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-dark {
    background-color: #8b4513;
}

.btn-dark:hover {
    background-color: #6b3410;
}

.page-info {
    color: #999;
    font-size: 16px;
    min-width: 60px;
}

/* ====== Viewport & varni odmik (mobilni) ====== */

/* Fallback: najprej uporabimo 100vh, potem nove enote (svh/dvh) kjer so podprte */
:root {
  --vh: 100vh;                /* fallback */
  --container-min-h: 100vh;   /* fallback */
  --bottom-bar-h: 60px;       /* realna višina spodnje vrstice (glej .bottom-bar padding) */
}

/* Novejši brskalniki – stabilna višina toolbara */
@supports (height: 100svh) {
  :root { --vh: 100svh; --container-min-h: 100svh; }
}
/* Alternativa: dinamična višina (ko toolbar skrije/prikaže) */
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

/* Odstrani zaklepanje scrolla – to pogosto povzroči prekrivanje na mobilnih */
body {
  /* odstrani prejšnje overflow: hidden; */
  overflow: auto !important;
  min-height: var(--container-min-h);
}

/* Glavni vsebnik naj razpne celoten pogled in upošteva varne robove */
.container {
  min-height: var(--vh);
  padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
  /* ostalo iz tvojega CSS lahko ostane */
}

/* Vsebinski del naj dopušča scroll, kot že imaš */
.content {
  /* ostane: flex:1; overflow-y:auto; ... */
  /* vendar dodamo malo dna, da zadnja vrstica besedila ne trči v panel */
  padding-bottom: 12px;
}

/* Spodnja vrstica – naj bo vedno vidna in nad UI brskalnika */
.bottom-bar {
  position: sticky;   /* ostane z dokumentom, a se prilepi na dno ob scrollu */
  bottom: 0;
  z-index: 1000;      /* nad vsebino */
  /* ozadje + robovi ostanejo */
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  /* poravnaj navidezno višino: */
  min-height: var(--bottom-bar-h);
}

/* Gumbi v spodnjem panelu: malenkost večja višina za lažji tap */
.bottom-bar button {
  min-height: 44px;   /* Apple/Google priporočilo za ‘tap targets’ */
}

/* Top bar: zadrži stabilno višino, a brez vpliva na dno */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* --- (Opcijsko) tema: prilagodi spodnji panel za boljši kontrast nad browser UI --- */
@supports (backdrop-filter: blur(4px)) {
  .bottom-bar {
    background-color: rgba(26, 26, 26, 0.95);
    backdrop-filter: saturate(120%) blur(4px);
  }
}