/* static/css/style.css */

body {
    background-color: #f8f9fa; /* Light grey background */
}

.filters-section .accordion-body.no-scroll {
  max-height: none;
  overflow: visible;
}

/* Style for individual results - customize heavily */
.search-result-item {
    border: 1px solid #dee2e6;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
}

.search-result-item h5 {
    margin-bottom: 5px;
}

.search-result-item p {
    font-size: 0.9em;
    margin-bottom: 5px;
    color: #6c757d;
}

.search-result-item .badge {
    margin-right: 5px;
}

/* Chat container */
#chat-messages {
  flex: 1 1 auto;          /* rasteže se koliko treba */
  min-height: 0;           /* sprječava rupe */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}

/* Opća struktura poruke */
.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Poruke AI-a: s lijeve strane */
.chat-message.ai {
    justify-content: flex-start;
}

/* Poruke korisnika: s desne strane, obrnut redoslijed (ikona desno) */
.chat-message.user {
    justify-content: flex-end;
}

/* Balon poruke - zajednički za AI i korisnika */
.chat-bubble {
    background-color: #f1f3f5;
    color: #212529;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.85rem;   /* manji tekst */
    padding: 0.5rem 0.75rem;  /* manje unutarnjeg razmaka */
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Desni tekst u korisničkim balonima */
.chat-message.user .chat-bubble {
    background-color: #f8f9fa;
    margin-left: auto;
    text-align: left;
}

/* Lijevi tekst u AI balonima (opcionalno, već je default) */
.chat-message.ai .chat-bubble {
    text-align: left;
    border-bottom-left-radius: 0.25rem;
}

/* Ikonice za korisnika i AI */
.chat-icon, .chat-avatar {
    background-color: #dee2e6;
    color: #495057;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* Razmak ikonica */
.chat-message.user .chat-icon,
.chat-message.user .chat-avatar {
    margin-left: 0.5rem;
}

.chat-message.ai .chat-icon,
.chat-message.ai .chat-avatar {
    margin-right: 0.5rem;
}

/* Prijelom dugih riječi */
.chat-bubble.text-break {
    word-break: break-word;
}

.chat-message.ai .chat-bubble {
  max-width: 90%;   /* AI neka koristi punu širinu kontejnera */
}

.chat-message.user .chat-bubble {
  max-width: 70%;    /* korisnik malo uže, izgleda urednije */
}


/* Responsive (opcionalno) */
@media (max-width: 576px) {
    .chat-bubble {
        max-width: 100%;
    }
}

#gemini-prompt {
  font-size: 0.9rem;
}

#ask-gemini-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
}

.gemini-body {
  display: flex;
  flex-direction: column;
  height: 75vh;      /* ili koliko želiš od viewport visine */
  max-height: 100%;  /* da ne puca */
}

.gemini-body #chat-messages {
  flex: 1 1 auto;
  min-height: 0;     /* bitno da ne ostavlja prazninu */
}


/* --- Markdown u chat balonima --- */
.chat-bubble h1, .chat-bubble h2, .chat-bubble h3,
.chat-bubble h4, .chat-bubble h5, .chat-bubble h6 {
  margin: 0.5rem 0 0.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.chat-bubble p { margin: 0.5rem 0; }
.chat-bubble ul, .chat-bubble ol { margin: 0.5rem 0 0.5rem 1.25rem; }
.chat-bubble li + li { margin-top: 0.25rem; }

.chat-bubble a { color: #0d6efd; text-decoration: underline; }
.chat-bubble a:hover { text-decoration: none; }

/* Inline code */
.chat-bubble :not(pre) > code {
  background: #f6f8fa;
  border: 1px solid #e9ecef;
  padding: .1rem .35rem;
  border-radius: .35rem;
  font-size: 0.9em;
}

/* Code block (hljs friendly) */
.chat-bubble pre {
  background: #f6f8fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
  margin: 0.5rem 0;
}
.chat-bubble pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

/* Tablice */
.chat-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}
.chat-bubble th, .chat-bubble td {
  border: 1px solid #e9ecef;
  padding: 6px 8px;
  vertical-align: top;
}
.chat-bubble thead th { background: #f8f9fa; }

/* Blok citati */
.chat-bubble blockquote {
  border-left: 4px solid #e9ecef;
  padding: .25rem .75rem;
  color: #6c757d;
  margin: .5rem 0;
}

/* Horizontalna linija */
.chat-bubble hr {
  border: 0;
  border-top: 1px solid #e9ecef;
  margin: .75rem 0;
}

/* Slike unutar poruke */
.chat-bubble img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Spriječi razbijanje layouta zbog super dugih riječi/linkova */
.chat-bubble p,
.chat-bubble li {
  overflow-wrap: anywhere;
}

.chat-bubble a {
  word-break: break-word; /* mekše od break-all */
  outline: none;
}
.chat-bubble a:focus-visible {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

/* Ako hljs tema postavlja svoju pozadinu, poništi je da se slaže s tvojim .pre backgroundom */
.chat-bubble pre code.hljs {
  background: transparent !important;
}

/* Lagani polish avatara */
.chat-avatar {
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Kontejner za akcije (Copy / Report) */
.chat-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

/* Dugmad unutar chat akcija */
.chat-actions .btn-action {
  background: transparent;
  border: none;
  color: #6c757d;          /* sivo */
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

/* Hover efekt */
.chat-actions .btn-action:hover {
  background: #e9ecef;
  color: #212529;
}

/* Različite boje za specifične akcije */
.chat-actions .btn-copy:hover {
  color: #0d6efd;  /* plava za Copy */
}

.chat-actions .btn-report:hover {
  color: #dc3545;  /* crvena za Report */
}

/* More (tri točke) dugme unutar AI balona */
.chat-more .btn.btn-link {
  color: #6c757d;
  text-decoration: none;
}
.chat-more .btn.btn-link:hover {
  color: #0d6efd;
}

/* Drop-down unutar chat balona nek bude malo "zbijeniji" */
.chat-more .dropdown-item {
  font-size: 0.85rem;
  padding: .375rem .75rem;
  color: #212529;
}

/* Hover efekt */
.chat-more .dropdown-item:hover {
  background-color: #f1f3f5; /* svijetlija siva */
  color: #212529;
}

/* Active (kliknut) efekt */
.chat-more .dropdown-item:active {
  background-color: #dee2e6 !important; /* tamnija siva umjesto plave */
  color: #212529 !important;
}

/* Poravnaj sadržaj i “more” meni u balonu */
.chat-bubble.d-flex {
  align-items: flex-start;
  gap: .5rem;
}


/* Malo smanji padding balona na mobitelu */
@media (max-width: 576px) {
  .chat-bubble {
    padding: 0.6rem 0.75rem;
  }
}

/* (Opcionalno) Uvijek prikaži horizontalni scroll za code blokove na mobilnim */
@media (max-width: 576px) {
  .chat-bubble pre {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}

/* Kontejner za točkice */
.typing-indicator {
  display: flex;       /* Poravnaj točkice jednu do druge */
  align-items: center; /* Vertikalno ih centriraj */
  justify-content: center; /* Horizontalno ih centriraj unutar chat bubble-a */
  padding: 10px 0;     /* Malo razmaka gore i dolje */
}

/* Stil samih točkica */
.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: #9ca3af; /* Svijetlo siva boja, možete je promijeniti */
  border-radius: 50%;     /* Čini ih okruglima */
  margin: 0 3px;          /* Mali razmak između točkica */
  
  /* Povezivanje s animacijom koju definiramo ispod */
  animation: bounce 1.2s infinite ease-in-out;
}

/* Kašnjenje animacije za svaku točkicu kako bi se stvorio "val" efekt */
.typing-indicator span:nth-child(1) {
  animation-delay: -0.3s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.15s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0s;
}

.highlighted-title {
    font-weight: 600;     /* malo jače od normalnog */
    color: #0d6efd;       /* Bootstrap primary plava */
}

/* Definicija same animacije "skakanja" */
@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0); /* Vrati se na početnu poziciju */
  }
  40% {
    transform: translateY(-6px); /* Skoči prema gore */
  }
}

.search-result-item .add-to-project-btn {
  white-space: nowrap;
}

/* Ako želiš da se “➕ Dodaj u projekt” vizualno odvoji od linkova */
.search-result-item .mt-2.d-flex .add-to-project-btn {
  margin-left: auto; /* gurni gumb u desno */
}

/* Badge za aktivni projekt (ako ga u toolbaru ne želiš default plavi) */
#active-project-name.badge {
  background-color: #0d6efd; /* Bootstrap primary */
  color: #fff;
}

/* Rezultati pretrage: linkovi + gumb u istom redu */
.search-result-item .actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* razmak između linkova i gumba */
  flex-wrap: nowrap; /* spriječi prelamanje u novi red */
}

.search-result-item .actions-row a,
.search-result-item .actions-row button {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ---------- Projekti (gornja tablica) ---------- */
.projects-inline-header {
  background: linear-gradient(180deg, rgba(13,110,253,0.06), rgba(13,110,253,0.00));
  border-bottom: 1px solid rgba(13,110,253,.15);
}

.table-projects > tbody > tr {
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.table-projects > tbody > tr:hover {
  background-color: #f8fafc; /* vrlo svijetla */
}
.table-projects > tbody > tr.expanded {
  background-color: #f3f7ff; /* naglasi otvoren red */
  box-shadow: inset 0 1px 0 rgba(13,110,253,.1), inset 0 -1px 0 rgba(13,110,253,.08);
}

.table-projects .project-name {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}
.table-projects .project-name .chev {
  font-size: .9rem;
  transition: transform .15s ease;
  color: #6c757d;
}
.table-projects tr[aria-expanded="true"] .project-name .chev {
  transform: rotate(90deg);
}

/* ---------- Detalji (podtablica odluka) ---------- */
.project-details {
  background: var(--bs-body-bg);
  border-left: 4px solid rgba(13,110,253,.35);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.04);
  border-radius: 0 6px 6px 6px;
}

/* manji font i zbijen raspored u podtablici */
.project-details .details-table,
.project-details .table {
  font-size: .875rem; /* manji od projekata */
}
.project-details .table thead {
  background: #f1f3f5;
}
.project-details .table tbody tr:hover {
  background: #fafbfe;
}

/* “badge” broj odluka */
.project-details .count-badge {
  font-size: .75rem;
  border: 1px solid rgba(0,0,0,.08);
}

/* sekundarne informacije */
.project-details .meta {
  color: #6c757d;
  font-size: .8rem;
}

/* gumbi u detaljima */
.project-details .btn {
  --bs-btn-padding-y: .2rem;
  --bs-btn-padding-x: .5rem;
  --bs-btn-font-size: .8rem;
}

/* Manji font i kompaktniji razmak u podtablici presuda unutar projekta */
.project-details .details-table {
  font-size: 0.75rem; /* ≈13px; po želji 0.875rem (14px) */
  line-height: 1.25;
}

.project-details .details-table th,
.project-details .details-table td {
  padding: 0.25rem 0.5rem; /* zbijenije od .table-sm */
  vertical-align: middle;
}

/* Ako u podtablici ima bedževa ili meta teksta, i njih smanji: */
.project-details .details-table .badge,
.project-details .details-table .meta,
.project-details .details-table .text-muted {
  font-size: 0.75rem; /* ≈12px */
}

.project-details .details-title {
  font-size: 0.875rem;
  line-height: 1.2;
}
.project-details .details-title .badge {
  font-size: 0.70rem;
  padding: 0.2em 0.5em;
}



/* --- Stil za tablice projekata i odluka --- */
.table, 
.table tbody tr,
.details-table tbody tr {
  background-color: #ffffff !important;  /* svi redovi bijeli */
}

.table tbody tr:hover,
.details-table tbody tr:hover {
  background-color: #f1f3f5 !important;  /* svijetlosiva na hover */
  cursor: pointer;
}

/* Ako koristiš .card za odluke iz pretrage */
.search-result-item.card:hover {
  background-color: #f8f9fa;   /* lagano posvijetli */
  transition: background-color 0.2s ease-in-out;
}

/* Stil za button Napredna semantička pretraga */
.btn-advanced-search {
  display: block;           /* da može biti centriran */
  margin: 1rem auto 0 auto; /* gornji razmak od 1rem, centriranje horizontalno */
  text-align: center;
}

/* Neutralni minimalistički stil za ostale grupe (lijepi kontrast) */
.filters-section .accordion-item:not(:has(.highlighted-title)):not(:has(.additional-title)) .accordion-button {
  background: #ffffff;
  color: #212529;
  border: 1px solid #e9ecef;
  border-radius: .5rem .5rem 0 0;
}
.filters-section .accordion-item:not(:has(.highlighted-title)):not(:has(.additional-title)) .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
}

/* ===== Istaknuti naslovi (bez gradijenata) + gumb "Semantička pretraga" ===== */
:root{
  /* malo tamnije svijetle pozadine + tamniji tekst + akcent rubovi */
  --sem-bg:   #dfeaff;   /* Napredna – tamnija svijetla plava */
  --sem-edge: #2f6fd8;   /* plavi akcent rub */
  --sem-text: #133a73;   /* tamnoplavi tekst */

  --add-bg:   #dbf3ee;   /* Dodatni – tamnija svijetla teal */
  --add-edge: #208f84;   /* teal akcent rub */
  --add-text: #0e4f47;   /* tamniji teal tekst */
}

/* zajedničke postavke za header */
.filters-section .accordion-button{
  border: 0;
  box-shadow: none !important;
  background: #fff !important;          /* default za ostale grupe */
  color: #212529 !important;
  padding: .75rem 1rem;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Napredna semantička pretraga — JAČE istaknuta */
.filters-section .accordion-button.highlighted-title{
  font-size: 1.05rem;                   /* mrvu veći naslov */
  border-left: 8px solid var(--sem-edge);
  background: var(--sem-bg) !important; /* čista, bez gradijenta */
  color: var(--sem-text) !important;
}

/* Dodatni filteri — SUZDRŽANIJE */
.filters-section .accordion-button.additional-title{
  font-size: .95rem;                    /* mrvu manji naslov */
  border-left: 5px solid var(--add-edge);
  background: var(--add-bg) !important; /* čista, bez gradijenta */
  color: var(--add-text) !important;
}

/* otvoreno stanje – suptilan donji razdjelnik; chevron standardni */
.filters-section .accordion-button:not(.collapsed){
  border-bottom: 1px solid #e3e7ee;
}
.filters-section .accordion-button::after{
  filter: none !important;
}

/* blagi hover/focus (bez glowa) */
.filters-section .accordion-button:hover,
.filters-section .accordion-button:focus{
  filter: brightness(1.02);
}

/* Gumb "Semantička pretraga" – koherentan s plavim akcentom */
.btn-advanced-search.btn-primary{
  background: #2f6fd8;
  border-color: #1857c1;
  color: #fff;
  border-width: 2px;
  padding: .55rem 1rem;
  font-weight: 700;
  border-radius: .6rem;
}
.btn-advanced-search.btn-primary:hover{ background:#2b66c8; border-color:#1857c1; }
.btn-advanced-search.btn-primary:active{ background:#275db8; border-color:#1857c1; }
.btn-advanced-search.btn-primary:focus{ box-shadow:0 0 0 .15rem rgba(47,111,216,.22); }

/* (opcionalno) full-width gumb na širim ekranima */
@media (min-width: 576px){
  .btn-advanced-search{ width: 100%; }
}
/* Fina hijerarhija težine teksta za naslove u filter panelu */
.filters-section .accordion-button {
  font-weight: 600; /* default za sve grupe */
}

/* Primarna sekcija – jače */
.filters-section .accordion-button.highlighted-title {
  font-weight: 700;
}

/* Sekundarna sekcija – suptilnije */
.filters-section .accordion-button.additional-title {
  font-weight: 500; /* ili 600 ako želiš mrvu jače */
}


/* === LOGIN PAGE === */
body.login-page{
  min-height:100dvh;                 /* bolje ponašanje na mobitelima */
  background:linear-gradient(135deg,#4db2ff 0%,#6cc7c0 100%);
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* base ima .container.mt-5 – makni taj razmak samo na loginu */
body.login-page .container.mt-5{ margin-top:0 !important; }

.login-wrap{
  min-height:100dvh;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:2rem; padding-bottom:2rem;   /* smanji za još “više gore” */
}

.brand-top{
  text-align:center; color:#fff; font-weight:800; letter-spacing:.4px;
  font-size:1.5rem; margin-bottom:.75rem; text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

.login-card{
  width:100%; max-width:420px; border:0; border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.18); overflow:hidden;
  backdrop-filter:blur(4px);
  background:rgba(255,255,255,.9);
}
.login-card .card-body{ padding:2rem; }
@media (max-width: 420px){
  .login-card .card-body{ padding:1.25rem; }
}

.btn-brand{
  --bs-btn-bg:#2b9fd3;
  --bs-btn-border-color:#2b9fd3;
  --bs-btn-color:#fff;

  /* DODAJ OVO: zadrži bijeli tekst na hover/active */
  --bs-btn-hover-bg:#238ebd;
  --bs-btn-hover-border-color:#238ebd;
  --bs-btn-hover-color:#fff;     
  --bs-btn-active-bg:#1f7fa9;
  --bs-btn-active-border-color:#1f7fa9;
  --bs-btn-active-color:#fff;    

  --bs-btn-focus-shadow-rgb: 43,159,211;
}

.footer-note{ color:#fff; text-align:center; opacity:.9; margin-top:.9rem; }

.brand{
  text-align:center;
  /* veličina branda – po želji i responsivno: */
  font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
}

.brand-subtitle{
  color:#fff;
  font-weight:700;
  letter-spacing:.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  /* koristi istu veličinu kao .brand (nasljeđuje) */
}

.brand-logo{
  height: 2em;   /* ~120% visine slova */
  width: auto;
  display: block;
  margin: 0 auto .35rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}



  /* === Brand paleta (usklađena s login stilom) === */
  :root{
    --brand-700: #1f7fa9;
    --brand-600: #238ebd;
    --brand-500: #2b9fd3;
    --brand-100: #eaf6ff;
    --brand-150: #e1f2fd;
    --header-bg: var(--brand-150);
    --header-border: rgba(43,159,211,.35);
    --header-frame: rgba(43,159,211,.4);
    --brand-shadow: 0 18px 50px rgba(0,0,0,.08);
  }

  /* === Responzivno upravljanje visinom panela === */
  :root {
    --pane-h: calc(100vh - 75px);
  }

  /* Na desktopu, paneli imaju fiksnu visinu vezanu za visinu prozora */
  @media (min-width: 992px) {
    aside > .card,
    main#main-content-area {
      height: var(--pane-h);
      max-height: var(--pane-h);
    }
    #results-pane-mobile-collapse {
        max-height: calc(100vh - 168px);
    }
  }

  /* Na mobitelu, visina je automatska kako bi se omogućilo skrolanje stranice */
  @media (max-width: 991.98px) {
    aside > .card,
    main#main-content-area {
      height: auto;
      max-height: none;
    }
    #chat-section {
        min-height: 400px; /* Daje chatu minimalnu visinu na mobitelu */
    }
  }

  main .card.shadow-sm.flex-fill { min-height: 0; }
  .gemini-body { flex: 1 1 auto; min-height: 0; }
  #chat-messages { flex: 1 1 auto; min-height: 0; }

  /* Utility za zaobljenja */
  .rounded-16 { border-radius: 16px; }
  .rounded-top-16 { border-top-left-radius: 16px; border-top-right-radius: 16px; }

  /* Kartice */
  .pane {
    position: relative; border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    border: 2px solid rgba(43,159,211,.4);
    background: #fff;
  }

  /* Header bez duplog ruba */
  .pane .card-header.header-brand { background: var(--header-bg); border-bottom: none !important; }
  .pane .card-header.header-brand.framed{
    border: 2px solid var(--header-frame); border-bottom: none;
    margin: -2px -2px 0 -2px; border-top-left-radius: 16px;
    border-top-right-radius: 16px; box-shadow: none;
  }
  .text-brand-ink { color: #0f3550; }

  /* Gumbi */
  .btn-light-brand{
    --bs-btn-bg:#fff; --bs-btn-border-color:var(--brand-500); --bs-btn-color:var(--brand-600);
    --bs-btn-hover-bg:var(--brand-100); --bs-btn-hover-border-color:var(--brand-600); --bs-btn-hover-color:var(--brand-600);
    --bs-btn-active-bg:var(--brand-150); --bs-btn-active-border-color:var(--brand-600); --bs-btn-active-color:var(--brand-600);
    --bs-btn-focus-shadow-rgb:43,159,211;
  }
  .btn-outline-brand{
    --bs-btn-color:var(--brand-600); --bs-btn-border-color:var(--brand-500); --bs-btn-bg:transparent;
    --bs-btn-hover-color:var(--brand-600); --bs-btn-hover-bg:#fff; --bs-btn-hover-border-color:var(--brand-600);
    --bs-btn-active-color:var(--brand-600); --bs-btn-active-bg:var(--brand-100); --bs-btn-active-border-color:var(--brand-600);
    --bs-btn-focus-shadow-rgb:43,159,211;
  }
  .cta-btn { align-self: center; min-height: 38px; }
  @media (min-width: 992px) { .cta-btn { align-self: stretch; } }
  .btn-set-sm .btn{ padding:.25rem .6rem; font-size:.825rem; line-height:1.2; }
  .header-compact { padding:.5rem .75rem; }

  /* === KOMPAKTNI REZULTATI – 3 reda + ikonice === */
  #results-list .search-result-item{
    border:1px solid rgba(43,159,211,.25); border-radius:10px;
    background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.04);
    margin-bottom:.35rem !important; font-size:.8rem; line-height:1.25;
    transition: all .15s ease;
  }
  #results-list .search-result-item .card-body{ padding:.25rem .6rem !important; }
  #results-list .search-result-item .card-title{ display:none !important; }
  #results-list .search-result-item .card-text{ display:none !important; }
  .result-compact{ display:grid; gap:.15rem; }
  .rc-row{ width:100%; }
  .rc-row1{ display:flex; align-items:center; gap:.5rem; color:#0f3550; }
  .rc-ordinal{
    display:inline-block; min-width:1.6rem; text-align:center;
    padding:0 .35rem; border:1px solid rgba(43,159,211,.25);
    border-radius:6px; background:#eef7fc; font-weight:700;
  }
  .rc-case{ font-weight:700; }
  .rc-row2{ display:flex; align-items:center; gap:.4rem; color:#475569; }
  .rc-row2 .bi{ font-size:.95em; color:#64748b; }
  .rc-row3{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:#475569; }
  .rc-row3 .bi{ font-size:.95em; color:#64748b; }
  .rc-badge{ font-size:.68rem; padding:.15em .4em; border-radius:6px; }

  .rc-actions{ display:flex; gap:.45rem; margin-top:.35rem; align-items:center; width: 100%; }
  .rc-icon-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:7px; flex-shrink: 0;
    border:1px solid rgba(43,159,211,.25); background:#fff; color:var(--brand-600);
    text-decoration:none; cursor:pointer;
  }
  .rc-add-btn {
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 7px; padding: 0.2rem 0.6rem; margin-left: auto;
      text-decoration: none; cursor: pointer; white-space: nowrap;
      font-size: 0.75rem; font-weight: 500;
      border: 1px solid rgba(25,135,84,.25); color: #198754; background: #fff;
  }
  .rc-icon-btn .bi, .rc-add-btn .bi{ font-size:14px; line-height:1; }
  .rc-icon-btn:hover { color:var(--brand-700); border-color:rgba(43,159,211,.45); background:var(--brand-100); }
  .rc-add-btn:hover { background-color: #198754; color: #fff; border-color: #198754; }
  .rc-add-btn.added, .rc-add-btn:disabled{ border-color:rgba(25,135,84,.45); background:#ecfdf5; color:#146c43; }

  #results-list .search-result-item:hover,
  #results-list .search-result-item:focus-within{
    background-color: var(--brand-100); border-color: rgba(43,159,211,.55);
    box-shadow: 0 6px 16px rgba(43,159,211,.12); transform: translateY(-1px);
  }
  @media (prefers-reduced-motion: reduce){
    #results-list .search-result-item:hover,
    #results-list .search-result-item:focus-within{ transform: none; }
  }

  .secondary-controls-row {
    border-top: 1px solid #e9ecef;
  }
  .filter-label-inline {
    font-size: .8rem;
    font-weight: 500;
    color: #495057;
  }
  .compact-filters {
    background-color: #f8f9fa; border: 1px solid #e9ecef;
    border-radius: .5rem; padding: 1rem;
  }
  .compact-filters .filter-heading {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; color: #6c757d;
    margin-bottom: .6rem; letter-spacing: .5px;
  }
  .compact-filters .form-label-sm {
    font-size: .75rem; margin-bottom: .2rem;
    font-weight: 500; white-space: nowrap;
  }
  .compact-filters .form-check { margin-bottom: .3rem; }
  .compact-filters .form-check-label { font-size: .8rem; }
  .compact-filters .form-check-inline { margin-right: .75rem; }

  #search-section { flex-shrink: 0; }
  #chat-section { flex-grow: 1; min-height: 0; }

  .project-controls-compact {
    border-top: 1px solid var(--header-border);
    padding-top: .35rem;
    margin-top: .35rem;
  }
  .btn-icon {
      background: transparent; border: 1px solid transparent; color: var(--brand-600);
      width: 28px; height: 28px; display: inline-flex; align-items: center;
      justify-content: center; padding: 0; border-radius: 7px;
  }
  .btn-icon:hover { background: var(--brand-100); border-color: var(--brand-500); }

  @media (min-width: 992px){
    .results-23 { flex: 0 0 20%; max-width: 20%; }
    .main-77    { flex: 0 0 80%; max-width: 80%; }
  }
  /* (po želji) na XL vrati na 25/75 */
  @media (min-width: 1200px){
    .results-23 { flex: 0 0 22%; max-width: 22%; }
    .main-77    { flex: 0 0 78%; max-width: 78%; }
  }
  
 /* Primijeni istu širinu na OBA plivajuća menija */
@media (min-width: 1200px) {
  #projectsOffcanvas,
  #dkomProjectsOffcanvas {
    --bs-offcanvas-width: 600px;
  }
}

/* Primijeni istu širinu na OBA menija na malim ekranima */
@media (max-width: 576px) {
  #projectsOffcanvas,
  #dkomProjectsOffcanvas {
    --bs-offcanvas-width: 100vw;
  }
}

/* ============================================= */
/* === PROJEKT KARTICE (Zajednički stilovi) === */
/* ============================================= */

#project-list-container,
#dkom-project-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.project-card {
    border: 1px solid #e0e5ec;
    border-left: 4px solid #ced4da;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.project-card:hover {
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.project-card.active {
    border-color: #a9cfff;
    border-left-color: #0d6efd;
    background-color: #f7faff;
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.project-card-title {
    font-weight: 600;
    color: #212529;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.project-card-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

/* 1. Uključi Flexbox na zaglavlje kartice */
.project-card-header {
  display: flex;                 
  justify-content: space-between;  
  align-items: center;           
  gap: 8px;                      /* Stvara mali razmak između naslova i akcija */
}

/* 2. Definiraj kako se naslov treba ponašati (fleksibilni dio) */
.project-card-title {
  /* Dozvoli mu da raste i da se smanjuje ovisno o prostoru */
  flex-grow: 1;                  
  flex-shrink: 1;                
  
  /* KLJUČNI DIO: Omogućuje smanjivanje ispod prirodne širine teksta */
  min-width: 0;                  

  /* CSS recept za skraćivanje teksta i dodavanje "..." */
  white-space: nowrap;           
  overflow: hidden;              
  text-overflow: ellipsis;       
}

/* 3. Osiguraj da se blok s akcijama nikada ne smanjuje (fiksni dio) */
.project-card-actions {
  flex-shrink: 0;                
}

.project-card-actions .btn {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .75rem;
}

.project-card-actions .btn-link {
    font-size: 1rem;
    padding: 0.25rem !important;
}

.project-card-meta {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 0.1rem;
}

.project-details-content-wrapper {
    padding: 0.75rem 0.25rem 0.25rem 0.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.project-description {
    font-size: 0.8rem;
    color: #495057;
    margin-bottom: 1rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.documents-list-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.documents-table {
    font-size: 0.75rem;
}

.documents-table td,
.documents-table th {
    padding: 0.3rem 0.4rem;
}

.btn-xs {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .3rem;
    --bs-btn-font-size: .7rem;
    --bs-btn-border-radius: .2rem;
}

/* ============================================= */
/* === OFFCANVAS PROJEKT HEADER === */
/* ============================================= */

#projectsOffcanvas .offcanvas-header,
#dkomProjectsOffcanvas .offcanvas-header {
    background: var(--brand-150);
    border-bottom: 2px solid var(--brand-100);
}

#projectsOffcanvas .offcanvas-title,
#dkomProjectsOffcanvas .offcanvas-title {
    color: var(--brand-700);
    font-weight: 700;
}

/* Novi projekt gumb */
#open-create-project-from-offcanvas,
#dkom-new-project-btn {
    background: var(--brand-500);
    border: 0;
    border-radius: 8px;
    font-weight: 600;
}

#open-create-project-from-offcanvas:hover,
#dkom-new-project-btn:hover {
    background: var(--brand-600);
}

/* ============================================= */
/* === PROJEKT KARTICE - DODATNI DETALJI === */
/* ============================================= */

/* Ikona foldera u naslovu */
.project-card-title .bi-folder {
    color: var(--brand-500);
}

/* Badge s brojem dokumenata */
.project-card-title .badge {
    font-size: 0.6rem;
    padding: .15em .4em;
    border-radius: 6px;
    background: var(--brand-500);
    color: white;
}

/* Hover state za projekt kartice */
.project-card:hover {
    border-left-color: var(--brand-500);
}

.project-card.active {
    border-left-color: var(--brand-600);
}

/* Gumb akcije styling */
.project-card-actions .btn-outline-primary {
    border-color: var(--brand-500);
    color: var(--brand-600);
}

.project-card-actions .btn-outline-primary:hover {
    background: var(--brand-150);
    border-color: var(--brand-600);
}

.project-card-actions .btn-link:hover {
    color: var(--brand-600);
}

/* Tablica dokumenata - header */
.documents-table th {
    background: var(--brand-100);
    font-weight: 600;
    padding: .35rem .5rem;
}

.documents-table td {
    padding: .35rem .5rem;
}

.documents-table tbody tr:hover {
    background: var(--brand-100);
}

.documents-table .btn-xs {
    padding: .15rem .35rem;
    font-size: 0.65rem;
}

/* Empty state */
.documents-list-wrapper .text-muted {
    font-size: 0.75rem;
    text-align: center;
    padding: 0.75rem;
    color: #6c757d;
}

/* ============================================= */
/* === AI DISCLAIMER (HEADER PILL VERSION) === */
/* ============================================= */

.ai-disclaimer.disclaimer-pill {
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
  color: #0a4f7c;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  border: 1px solid rgba(13, 110, 253, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.ai-disclaimer.disclaimer-pill i {
  font-size: 0.7rem;
  color: #0d6efd;
}

/* DKOM override (za teal boju) */
body.dkom-page .ai-disclaimer.disclaimer-pill,
#chat-section .ai-disclaimer.disclaimer-pill {
  color: #0a4f45;
  border-color: rgba(20, 184, 166, 0.25);
}

body.dkom-page .ai-disclaimer.disclaimer-pill i,
#chat-section .ai-disclaimer.disclaimer-pill i {
  color: #14b8a6;
}

/* Sakrij na mobitelu ako header postane pretrpan */
@media (max-width: 767px) {
  .ai-disclaimer.disclaimer-pill {
      font-size: 0.6rem;
      padding: 0.15rem 0.5rem;
  }
}

.navbar .btn.active-blue {
  background-color: #2f6fd8; /* Plava boja iz vašeg dizajna */
  border-color: #1857c1;
  color: #fff;
}

/* Stil za aktivni teal gumb u navigaciji */
.navbar .btn.active-teal {
  background-color: #208f84; /* Teal boja iz vašeg dizajna */
  border-color: #1a756a;
  color: #fff;
}

/* ==========================================
   USER DOCUMENTS - UPLOAD & MANAGEMENT
   ========================================== */

/* Upload Docs Button (pored chat input) */
.upload-docs-btn {
    position: relative;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    background: white;
    transition: all 0.2s ease;
    margin-right: 0.5rem;
    border-radius: 0.375rem;
}

.upload-docs-btn:hover {
    background: #f8f9fa;
    border-color: #0d6efd;
    color: #0d6efd;
}

.upload-docs-btn i {
    font-size: 1.25rem;
}

.doc-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.65rem;
    padding: 0.2rem 0.35rem;
    border-radius: 10px;
}

/* Upload Zone (Drag & Drop) */
.upload-zone {
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    background: #f8f9fa;
    cursor: pointer;
}

.upload-zone:hover {
    border-color: #0d6efd;
    background: #e7f1ff;
}

.upload-zone.drag-over {
    border-color: #0d6efd;
    background: #cfe2ff;
    transform: scale(1.02);
}

.upload-zone-content {
    pointer-events: none;
}

.upload-zone-content i.display-4 {
    font-size: 3rem;
}

.upload-requirements {
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Upload Progress */
.upload-progress {
    margin-top: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Documents List */
.documents-list {
    max-height: 400px;
    overflow-y: auto;
}

.document-item {
    display: flex;
    align-items: start;
    padding: 1rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.document-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #0d6efd;
}

.document-item-icon {
    font-size: 2rem;
    margin-right: 1rem;
    color: #6c757d;
}

.document-item-icon.pdf {
    color: #dc3545;
}

.document-item-icon.doc,
.document-item-icon.docx {
    color: #0d6efd;
}

.document-item-details {
    flex-grow: 1;
    min-width: 0;
}

.document-item-name {
    font-weight: 500;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-item-meta {
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.document-item-meta span {
    display: inline-flex;
    align-items: center;
}

.document-item-meta i {
    margin-right: 0.25rem;
}

.document-item-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-delete-doc {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* OCR Badge */
.ocr-badge {
    background: #ffc107;
    color: #000;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Empty State */
#emptyState {
    padding: 2rem 1rem;
}

#emptyState i {
    opacity: 0.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .upload-zone {
        padding: 1.5rem 1rem;
    }
    
    .document-item {
        flex-direction: column;
    }
    
    .document-item-icon {
        margin-bottom: 0.5rem;
    }
    
    .document-item-actions {
        flex-direction: row;
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* Dodati u postojeću <style> sekciju na kraju filea */
.document-item-number {
    flex-shrink: 0;
    width: 30px;
    text-align: right;
    font-weight: 600;
    color: var(--bs-secondary);
    padding-right: 8px;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==================== ANNOUNCEMENT MODAL ==================== */

#announcementModal .modal-content {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#announcementModal .modal-header {
  background-color: #0d6efd;
  color: white;
  border: none;
  padding: 1.25rem 1.5rem;
}

#announcementModal .modal-title {
  font-weight: 600;
  font-size: 1rem;
}

#announcementTimestamp {
  font-size: 0.8rem;
  opacity: 0.9;
  margin-top: 0.25rem;
}

#announcementModal .modal-header .btn-close {
  filter: brightness(0) invert(1);
}

#announcementModal .modal-body {
  padding: 1.5rem;
}

#announcementText {
  color: #212529;
  line-height: 1.6;
}

#announcementModal .modal-footer {
  border-top: 1px solid #dee2e6;
  padding: 1rem 1.5rem;
}

/* ==================== INBOX STYLES (GMAIL-LIKE, COMPACT) ==================== */

.inbox-list {
  background: white;
  border-radius: 8px;
  overflow: hidden; /* Osigurava da se border-radius primijeni na sadržaj */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #dee2e6; /* Vanjski rub oko cijele liste */
}

.inbox-item {
  display: flex;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e9ecef; /* Linija između poruka */
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-left: 4px solid transparent; /* Priprema za unread stanje */
}

.inbox-item:hover {
  background: #f8f9fa; /* Suptilni hover efekt kao u Gmailu */
}

.inbox-item:last-child {
  border-bottom: none; /* Uklanja liniju ispod zadnje poruke */
}

.inbox-item.unread {
  background: var(--brand-100, #eaf6ff);
  border-left-color: var(--brand-500, #2b9fd3);
}

.inbox-item.unread .inbox-title {
  font-weight: 700; /* Jači bold za nepročitane naslove */
  color: var(--brand-700, #1f7fa9);
}

.inbox-status {
  padding-right: 1rem;
  padding-top: 0.2rem;
}

.priority-icon {
  font-size: 1rem;
  width: 20px;
}

.priority-icon.priority-info::before { content: 'ℹ️'; }
.priority-icon.priority-success::before { content: '✅'; }
.priority-icon.priority-warning::before { content: '⚠️'; }
.priority-icon.priority-error::before { content: '❌'; }

.inbox-content {
  flex: 1;
  min-width: 0;
}

/* NOVO: Flex kontejner za labele i tekst */
.inbox-details-line {
    display: flex;
    align-items: baseline; /* Poravnava osnovnu liniju teksta */
    gap: 0.5rem;
}

/* NOVO: Stil za labele "Naslov:" i "Sadržaj:" */
.inbox-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    flex-shrink: 0; /* Sprječava da se labela smanji ako je naslov dug */
}

.inbox-title {
  font-size: 0.9rem;
  color: #212529;
  font-weight: 500;
  margin: 0; /* Resetiramo marginu s h5 taga */
  
  /* Sprječava prelamanje i dodaje '...' ako je naslov predug */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-preview {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.4;
  margin: 0; /* Resetiramo marginu s p taga */

  /* Ograničava pregled na jedan redak */
  display: -webkit-box;
  -webkit-line-clamp: 1; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbox-content small.text-muted {
    font-size: 0.75rem;
    white-space: nowrap; /* Sprječava prelamanje datuma */
}

/* Paginacija ostaje ista */
.pagination { margin-top: 1.5rem; }
.pagination .page-link { color: var(--brand-600, #238ebd); border-color: #dee2e6; }
.pagination .page-item.active .page-link { background-color: var(--brand-500, #2b9fd3); border-color: var(--brand-500, #2b9fd3); color: #fff; }
.pagination .page-link:hover { background-color: var(--brand-100, #eaf6ff); }

#chat-messages :not(pre) > code {
  background: #f6f8fa;
  border: 1px solid #e9ecef;
  padding: .1rem .35rem;
  border-radius: .35rem;
  font-size: 0.9em;
  color: #212529 !important; /* preskoči rozu / teme od hljs-a */
}

/* Court (plavi ton) */
.ctx-court #chat-messages :not(pre) > code {
  background: rgba(13,110,253,.08);
  border-color: rgba(13,110,253,.25);
  color: #0a58ca !important;
}

/* DKOM (teal ton) – koristi postojeće DKOM varijable ako postoje */
.ctx-dkom #chat-messages :not(pre) > code {
  background: var(--dkom-100, #e6f7f5);
  border-color: rgba(20,184,166,.35);
  color: var(--dkom-700, #0e7a6e) !important;
}

/* Kompaktan, fiksne dimenzije – bez skakanja layouta */
.search-toggle {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.search-toggle .icon-expanded {
  display: inline-block;
}
.search-toggle .icon-collapsed {
  display: none;
}

/* Kad je zatvoreno (Bootstrap doda .collapsed na gumb) */
.search-toggle.collapsed .icon-expanded {
  display: none;
}
.search-toggle.collapsed .icon-collapsed {
  display: inline-block;
}

.pane { overflow: hidden; }

/* 2. Default framed header (otvoreno stanje) – kao i do sada */
#search-section .card-header.header-brand.framed {
  margin: -2px -2px 0 -2px;       /* kompenzira okvir .pane (2px) gore+bočno */
  border: 2px solid var(--header-frame);
  border-bottom: none;             /* prelazi u body */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* 3. Kad je collapse ZATVOREN, header postaje "cijela kartica": 
      - vrati donji border
      - zaobli i donje rubove
      - margin: -2px sa SVA 4 ruba da okvir bude oko svega
*/
#search-section .card-header.header-brand.framed:has(+ #search-body.collapse:not(.show)) {
  margin: -2px;                                  /* kompenzira okvir oko cijele kartice */
  border-bottom: 2px solid var(--header-frame);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* ============================================= */
/* === PREVIEW (SCOPED) – COMPACT CARD STYLE === */
/* ============================================= */

/* Animacija samo za panel */
@keyframes ainesaPreviewIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Panel – scope je .ainesapreview-panel */
.ainesapreview-panel{
  position: fixed !important;         /* pozicionira ga JS */
  max-width: 420px;
  background: #fff;
  border: none;
  border-radius: 12px;
  overflow: hidden;              /* panel NE scrolla */
  box-shadow:
    0 0 0 1px rgba(31,127,169,.08),
    0 8px 24px rgba(31,127,169,.12),
    0 16px 48px rgba(0,0,0,.08);
  animation: ainesaPreviewIn .18s cubic-bezier(.16,1,.3,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Header (samo unutar panela) */
.ainesapreview-panel .preview-title{
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
  color: #fff;
  padding: .55rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-bottom: 2px solid var(--brand-150);
  display: flex; align-items: center; gap: .4rem;
}

/* Tijelo – JEDINI scroll je ovdje */
.ainesapreview-panel .preview-body{
  background: #fff;
  padding: .5rem;
  max-height: 360px;             /* kompaktnije */
  overflow: auto;                /* jedini scrollbar */
  font-size: .76rem;             /* manji font */
  line-height: 1.35;
  color: #3f4950;
  scroll-behavior: smooth;
}

/* Kartice (heading + njegov sadržaj) – samo unutar panela */
.ainesapreview-panel .preview-card{
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  border: 1px solid var(--brand-150);
  border-left: 4px solid var(--brand-500);   /* vertikalna brand linija */
  border-radius: 10px;
  padding: .5rem .6rem .55rem .6rem;
  margin: 0 0 .45rem 0;
  box-shadow: 0 2px 8px rgba(31,127,169,.06);
}
.ainesapreview-panel .preview-card:last-child{ margin-bottom: 0; }
.ainesapreview-panel .preview-card--plain{ border-left-color: var(--brand-600); }

/* Naslovi i tekst unutar kartice – kompaktni */
.ainesapreview-panel .preview-card h1,
.ainesapreview-panel .preview-card h2,
.ainesapreview-panel .preview-card h3,
.ainesapreview-panel .preview-card h4,
.ainesapreview-panel .preview-card h5,
.ainesapreview-panel .preview-card h6{
  margin: 0 0 .35rem 0;
  font-weight: 700;
  color: var(--brand-700);
  font-size: .8rem;              /* svi headingi jednaki, mali */
}
.ainesapreview-panel .preview-card p{ margin: 0 0 .3rem 0; }
.ainesapreview-panel .preview-card p:last-child{ margin-bottom: 0; }

/* Liste i točkice – samo u karticama */
.ainesapreview-panel .preview-card ul,
.ainesapreview-panel .preview-card ol{ margin: .25rem 0 0 0; padding-left: 1.1rem; }
.ainesapreview-panel .preview-card li{ margin: .18rem 0; }
.ainesapreview-panel .preview-card ul{ list-style: none; }
.ainesapreview-panel .preview-card ul > li{ position: relative; padding-left: .45rem; }
.ainesapreview-panel .preview-card ul > li::before{
  content: '•'; color: var(--brand-500); font-weight: 700;
  position: absolute; left: -0.8rem; top: 0;
}

/* Linkovi – scopeirani na panel */
.ainesapreview-panel .preview-card a{
  color: var(--brand-500); text-decoration: none; font-weight: 500; transition: color .12s;
}
.ainesapreview-panel .preview-card a:hover{ color: var(--brand-600); text-decoration: underline; }

/* Tanke, brandirane scroll trake – samo unutar .preview-body */
.ainesapreview-panel .preview-body::-webkit-scrollbar{ width: 6px; }
.ainesapreview-panel .preview-body::-webkit-scrollbar-track{ background: var(--brand-100); border-radius: 3px; }
.ainesapreview-panel .preview-body::-webkit-scrollbar-thumb{ background: var(--brand-500); border-radius: 3px; }
.ainesapreview-panel .preview-body::-webkit-scrollbar-thumb:hover{ background: var(--brand-600); }

#results-list .search-result-item.ainesapreview-active{
  background-color: var(--brand-100);
  border-color: rgba(43,159,211,.55);
  box-shadow: 0 6px 16px rgba(43,159,211,.12);
  transform: translateY(-1px);
  transition: none; /* spriječi trzaje prilikom paljenja/gašenja */
}

/* Brandirani tooltip - pun, neproziran */
.tooltip-brand {
  --bs-tooltip-bg: var(--brand-700);  /* ili --brand-600 ako želiš svjetlije */
  --bs-tooltip-opacity: 1;           /* makni prozirnost */
}

.tooltip-brand .tooltip-inner {
  max-width: 350px;
  white-space: normal;
  background-color: var(--brand-700); /* puna boja, bez prozirnosti */
  color: #fff;
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
}

/* Strelica iste boje, isto neprozirna */
.tooltip-brand.bs-tooltip-top .tooltip-arrow::before,
.tooltip-brand.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip-brand.bs-tooltip-start .tooltip-arrow::before,
.tooltip-brand.bs-tooltip-end .tooltip-arrow::before {
  border-top-color: var(--brand-700);
  border-bottom-color: var(--brand-700);
  border-left-color: var(--brand-700);
  border-right-color: var(--brand-700);
}

.tooltip-icon-brand {
  color: var(--brand-600);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1; 
}

.tooltip-icon-orange {
color: #fd7e14;
cursor: pointer;
font-size: 0.9rem;
line-height: 1; 
}

.filter-label-main {
  width: 120px;
}

/* Stil za aktivni sivi gumb (ESLJP) u navigaciji */
.navbar .btn.active-purple {
  background-color: #6c757d; /* Bootstrap secondary grey */
  border-color: #5c636a;
  color: #fff;
}

/* ESLJP (grey ton) – boja za code blokove u chatu */
.ctx-esljp #chat-messages :not(pre) > code {
  background: #e9ecef; /* vrlo svijetla siva */
  border-color: rgba(108, 117, 125, .35);
  color: #495057 !important;
}