/* responsive.css
   Global responsive overrides for the whole SPA.
   Load AFTER all other css files.
*/

/* Make media/content fluid */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

/* Prevent accidental horizontal scroll */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================
   Shared SPA layout (.app)
   ========================= */
@media (max-width: 640px) {
  .app {
    flex-direction: column;
    min-height: 100vh;
  }

  /* Sidebar -> bottom nav */
  .sidebar {
    width: 100%;
    height: 72px;
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;

    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .sidebar-nav {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    gap: 10px;
  }

  .icon-btn {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .sidebar-bottom {
    display: none;
  }

  /* Main padding so it doesn't sit under the bottom nav */
  .main {
    padding: 16px 14px 96px;
  }

  .topbar {
    gap: 12px;
    margin-bottom: 18px;
  }

  .topbar-title {
    font-size: 18px;
  }

  .topbar-right {
    justify-content: flex-end;
    gap: 10px;
  }

  /* Panels/cards should be full width */
  .panel,
  .packages-panel {
    margin: 0;
    max-width: 100%;
    padding: 22px 16px;
    border-radius: 12px;
  }

  /* Any buttons that had fixed widths */
  .submit-btn,
  .btn,
  button {
    max-width: 100%;
  }
}

/* =========================
   Landing / marketing page
   (index.css)
   ========================= */
@media (max-width: 768px) {
  .hero-container {
    height: auto;
    min-height: 100vh;
    padding: 28px 16px 24px;
  }

  /* Was absolute + fixed width */
  .hero-sub {
    position: static;
    width: 100%;
    max-width: 680px;
    gap: 28px;
  }

  .info-boxes {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 0 4px;
  }

  .info-box {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  /* popup on landing/auth */
  .popup-modal {
    width: 92vw;
    max-width: 430px;
    padding: 18px 16px;
  }
}

/* =========================
   DataTables / wide tables
   ========================= */
@media (max-width: 768px) {
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.dataTable {
    width: 100% !important;
  }
}

/* =========================
   Profile table wrap safety
   ========================= */
@media (max-width: 768px) {
  .profile-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================
   FIX: elementi se režu na mobitelu (overflow:hidden)
   ========================= */
@media (max-width: 768px) {
  /* profil i slične kartice – na mobitelu NE smiju rezati sadržaj */
  .profile-card,
  .panel,
  .packages-panel {
    overflow: visible !important;
  }

  /* tablice: wrapper scrolla, tablica se ne reže */
  .profile-table-wrap,
  .dataTables_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .profile-table,
  table.dataTable {
    display: block;
    width: 100% !important;
    overflow: visible !important;
  }
}

/* =========================
   FIX: bottom nav zna prekriti donje elemente
   (ako neki view ima svoj padding/margin)
   ========================= */
@media (max-width: 640px) {
  .main {
    padding-bottom: 120px !important; /* malo više sigurnosti */
  }
}

/* =========================
   KPD Results: DataTable -> cards on mobile
   ========================= */
@media (max-width: 720px) {
  /* sakrij header tablice */
  #resultsTable thead {
    display: none;
  }

  /* svaki red kao kartica */
  #resultsTable tbody tr {
    display: block !important;
    margin: 12px 0 !important;
    padding: 12px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }

  /* svaka ćelija ide u svoj “blok” */
  #resultsTable tbody td {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    border: none !important;
    text-align: left !important;
  }

  /* mali naslov iznad svake ćelije */
  #resultsTable tbody td::before {
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* nazivi polja po stupcima: Input / Output / Vrijeme */
  #resultsTable tbody td:nth-child(1)::before {
    content: "Input";
  }
  #resultsTable tbody td:nth-child(2)::before {
    content: "Output";
  }
  #resultsTable tbody td:nth-child(3)::before {
    content: "Vrijeme";
  }

  /* Vrijeme malo “tiše” */
  #resultsTable tbody td:nth-child(3) {
    opacity: 0.85;
    font-size: 13px;
  }

  /* ključno: dt-kv grid mora imati smislenu širinu labela na mobitelu */
  #resultsTable .dt-kv {
    grid-template-columns: 92px 1fr !important;
    gap: 10px !important;
    align-items: start;
  }

  /* da se label ne lomi slovo-po-slovo */
  #resultsTable .dt-k {
    white-space: nowrap !important;
  }

  /* da se vrijednosti lijepo prelamaju */
  #resultsTable .dt-v {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* =========================
   FIX: footer/sadržaj ne smije biti ispod bottom sidebara
   ========================= */
:root {
  --bottom-nav-h: 72px; /* visina mob sidebara */
  --bottom-nav-safe: 18px; /* malo lufta */
}

@media (max-width: 640px) {
  /* najvažnije: osiguraj da glavni sadržaj ima mjesta ispod */
  .main {
    padding-bottom: calc(
      var(--bottom-nav-h) + var(--bottom-nav-safe)
    ) !important;
  }

  /* ako ima footer unutar main-a, dodaj mu još malo da bude 100% vidljiv */
  /*footer,
  .footer {
    padding-bottom: calc(var(--bottom-nav-h) + var(--bottom-nav-safe)) !important;
  }*/

  /* i da se može scrollati do samog dna */
  /*body {
    padding-bottom: calc(var(--bottom-nav-h) + var(--bottom-nav-safe));
  }*/
}

/* =========================
   LANDING: fix "odrezano" na mobitelu
   (hero-sub je absolute + hero-container 100vh)
   ========================= */
@media (max-width: 640px) {
  /* neka landing može rasti koliko treba */
  #landing.hero-container,
  .hero-container {
    height: auto !important;
    min-height: 100vh !important;
    padding: 18px 14px 28px !important;
  }

  /* tekst gore */
  .hero-text {
    width: 100% !important;
    max-width: 520px;
    padding-top: 18px;
  }

  /* KLJUČNO: absolute -> normal flow */
  .hero-sub {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 520px;
    margin-top: 18px;
    gap: 18px !important;
  }

  /* gumbi/cta blokovi da ne budu preširoki i da se ne lome */
  .hero-sub-block1,
  .hero-sub-block2 {
    width: 100% !important;
    justify-content: center;
  }

  .demo,
  .paketi {
    width: 100% !important;
    text-align: center;
  }
}

/* extra small */
@media (max-width: 380px) {
  .hero-sub {
    gap: 14px !important;
  }
}

/* =========================
   LANDING: Paketi (pricing) — stack na mobitelu
   ========================= */
@media (max-width: 640px) {
  /* da container ima normalan padding */
  .pricing-container {
    padding: 28px 14px !important;
  }

  /* KLJUČNO: flex row -> column */
  .pricing-boxes {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* kartice da budu pune širine i centrirane */
  .pricing-card {
    flex: none !important;
    width: 100% !important;
    max-width: 520px;
    margin: 0 auto !important;
    padding: 18px !important;
  }
}

/* =========================
   LANDING header/topbar: da se logo i "Prijava" ne overlapaju
   ========================= */
@media (max-width: 520px) {
  /* header/topbar container (najčešće je .topbar, .header, .nav...) */
  .topbar,
  .header,
  .nav,
  .landing-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* lijevo: brand/title */
  .topbar-title,
  .brand,
  .logo-text {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* da smije shrinkati */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* umjesto overlapa */
  }

  /* desno: prijava */
  .login-btn,
  .prijava-btn,
  .topbar-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

/* ultra small: prebaci gumb u novi red (nikad overlap) */
@media (max-width: 380px) {
  .topbar-right {
    justify-content: flex-end !important;
  }
}

/* =========================
   LANDING topbar: uvijek malo lufta između brenda i gumba
   ========================= */
@media (max-width: 520px) {
  /* desni blok (gdje je gumb) uvijek ima minimalni odmak */
  .topbar-right,
  .nav-right,
  .header-right {
    margin-left: auto !important;
    padding-left: 12px !important; /* "siguran" razmak od brenda */
  }

  /* ako gumb stoji direktno u topbaru bez wrappera */
  .login-btn,
  .prijava-btn {
    margin-left: 12px !important;
  }
}

/* =========================
   LANDING HEADER: BIG-DATA.HR uvijek u 1 redu + manji gumbi
   (override index.css gdje su header-left/right flex:1)
   ========================= */
@media (max-width: 520px) {
  header {
    padding: 0 12px !important;
    height: 64px !important;
  }

  /* makni "lijevo i desno iste širine" na mobitelu */
  .header-left,
  .header-right {
    flex: 0 0 auto !important;
  }

  /* logo NIKAD u 2 reda */
  .header-left .logo {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* desno: manji razmaci */
  .header-right {
    margin-left: auto !important;
    gap: 10px !important;
  }

  /* PRIJAVA + REGISTRACIJA: manji gumbi, ali i dalje klikabilni */
  .header-right .login,
  .header-right .register {
    font-size: 12px !important; /* link2 je 16px, ovo ga smanji */
    padding: 8px 10px !important; /* register u index.css ima 14px */
    border-radius: 10px !important;
    line-height: 1 !important;
  }
}

/* extra small: još malo stisni */
@media (max-width: 380px) {
  .header-right {
    gap: 8px !important;
  }

  .header-right .login,
  .header-right .register {
    font-size: 11px !important;
    padding: 7px 8px !important;
  }
}