/* base */
:root{ --brand:#0ea5e9; }

/* thin progress */
.progress-thin{ height:.6rem; }

/* project image */
.project-cover img{
  display:block;
  width:100%;
  height:202px;
  border-radius:.5rem;
  object-fit:cover;
}

/* inline-edit flash */
.editable-highlight{ animation: flash-bg .6s ease; }
@keyframes flash-bg{
  from{ background:rgba(14,165,233,.15); }
  to{ background:transparent; }
}

/* notes box */
.note-area{
  min-height:120px;
  border:1px dashed var(--bs-border-color);
  border-radius:.5rem;
  padding:.75rem;
  background-color:var(--bs-body-bg);
}

/* buttons equal height to form-select (default 2.25rem) */
.btn-eq{
  height:calc(2.25rem + 2px);
  padding:.375rem .75rem;
  line-height:1.5;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}

/* status select with colored dot */
.status-wrap{ position:relative; }
.status-wrap .form-select{ padding-left:2rem; }
.status-dot{
  position:absolute;
  left:.6rem;
  top:50%;
  transform:translateY(-50%);
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  box-shadow:0 0 0 2px #fff;
}

/* thumbnails */
.thumb img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-top-left-radius:.5rem;
  border-top-right-radius:.5rem;
}

/* compact on mobile */
@media (max-width:576px){
  .card .card-body{ padding:.9rem; }
  .btn-eq{ width:100%; } /* stack buttons nicely on small screens */
}

/* top menu hover & active */
nav.navbar a.nav-link{
  color:#000;
  border-radius:.375rem;
  padding:.375rem .75rem;      /* da hover ima "chip" pozadinu */
  margin-right: 0.5rem; /* dodaj razmak između linkova */
  transition:background-color .2s ease, color .2s ease;
}
nav.navbar a.nav-link:hover{
  background-color:rgba(14,165,233,.12);
  color:var(--brand);
}
nav.navbar a.nav-link.active{
  background-color:rgba(14,165,233,.12);
  color:var(--brand);
}

.project-card {
  border: 2px solid transparent;
  border-radius: .5rem;
}

/* Rub po statusu */
.project-card.status-idea { border-color: #0ea5e9; }     /* plava */
.project-card.status-in-progress { border-color: #f59e0b; } /* narančasta */
.project-card.status-completed { border-color: #22c55e; }   /* zelena */
.project-card.status-archived { border-color: #6b7280; }    /* siva */

/* =========================
   STATUS DOT — UTIL KLASSE
   (ne dira postojeće stilove)
   ========================= */

/* kontejner za tekst + točkicu ako želiš poravnanje bez igranja s linijama */
.u-status-inline{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

/* osnovna točkica */
.u-status-dot{
  --dot-size:.6rem;           /* po želji: prepiši varijablu npr. style="--dot-size:.5rem" */
  width:var(--dot-size);
  height:var(--dot-size);
  border-radius:50%;
  display:inline-block;
  vertical-align:middle;      /* dobro se ponaša i unutar običnog teksta */
  box-shadow:0 0 0 2px #fff;  /* diskretan obrub kao na single projektu */
}

/* brze varijante veličine (opcionalno) */
.u-status-dot--sm{ --dot-size:.5rem; }
.u-status-dot--lg{ --dot-size:.75rem; }

/* BOJE — iste kao na single projectu (Ideja plavo, U tijeku žućkasto, …) */
.u-status--ideja{         background:#63b3ff; }  /* svijetloplavo */
.u-status--u_tijeku{      background:#ffe08a; }  /* blaga žuta */
.u-status--pauzirano{     background:#ffb87a; }  /* blaga narančasta */
.u-status--spremno{       background:#7ddf8a; }  /* svjetlija zelena */
.u-status--zavrseno{      background:#55b76b; }  /* tamnija zelena */
.u-status--obustavljeno{  background:#adb5bd; }  /* siva */

/* Podzadatak forma - responsive button širina */
.js-subtask-form .form-control,
.js-subtask-form .btn {
 height: 38px;
}

.js-subtask-form .btn {
 padding: 0.375rem 0.5rem;
}

/* Na mobilnim uređajima button zauzima punu širinu */
@media (max-width: 767.98px) {
 .js-subtask-form .btn {
   padding: 0.375rem 0.75rem;
 }
}

/* Mobilni responsive - word wrapping za podzadatke */
[data-stid] .flex-grow-1 {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Word wrapping za sve editable elemente */
.editable {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Osiguraj da podzadaci ne guraju elemente van ekrana */
[data-stid] {
  min-width: 0;
}

/* Na mobilnim uređajima ograniči širinu teksta */
@media (max-width: 767.98px) {
  [data-stid] .flex-grow-1 {
    max-width: calc(100vw - 120px); /* ostavi prostor za button */
  }
  
  .task-card .flex-grow-1 {
    max-width: calc(100vw - 150px); /* ostavi prostor za desne kontrole */
  }
}

/* Hamburger menu fixes */
.navbar-toggler {
  border: none !important;
  padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

/* Watchlist tabs - mobilni responsive (jednaka širina + centrirano) */
@media (max-width: 767.98px) {
  .nav-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.25rem;
  }
  
  .nav-pills .nav-item {
    margin: 0;
  }
  
  .nav-pills .nav-link {
    font-size: 0.75rem;
    padding: 0.375rem 0.125rem;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* Osigurava da zauzmu punu širinu */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Active state jednako za sve */
  .nav-pills .nav-link.active {
    background-color: var(--bs-primary);
    color: white;
  }
  
  /* Hover state jednako za sve */
  .nav-pills .nav-link:hover:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
  }
}

/* Desktop tabovi ostaju normalni */
@media (min-width: 768px) {
  .nav-pills .nav-item {
    margin-right: 0.5rem;
  }
}

/* Shopping tabs - specifični CSS */
@media (max-width: 767.98px) {
  .shopping-tabs {
    display: flex !important;
    margin-bottom: 1rem !important;
  }
  
  .shopping-tabs .nav-item {
    flex: 1 !important;
    margin: 0 !important;
  }
  
  .shopping-tabs .nav-link {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }
}

/* Notes section */
.note-card {
  transition: all 0.2s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.note-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pin-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.8rem;
}

.note-preview {
  line-height: 1.4;
}

.note-full-content {
  white-space: pre-wrap;
  line-height: 1.5;
}

.expand-icon {
  font-weight: bold;
  font-size: 1.1rem;
}

/* Portfolio collapsible cards */
.portfolio-card {
  transition: all 0.2s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.portfolio-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Portfolio tabs responsive */
@media (max-width: 767.98px) {
  .portfolio-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.25rem;
  }
  
  .portfolio-tabs .nav-item {
    margin: 0;
  }
  
  .portfolio-tabs .nav-link {
    font-size: 0.75rem;
    padding: 0.375rem 0.125rem;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop portfolio tabs */
@media (min-width: 768px) {
  .portfolio-tabs .nav-item {
    margin-right: 0.5rem;
  }
}