/* ============================================================
   KNJIGOVOĐA KALKULATORI HR 2026 – PROFESIONALNA TEMA
   Paleta: tamno-plavi slate + topli zlatni/zeleni akcenti
   Asocira na: ozbiljnost, povjerenje, financije, preciznost
   ============================================================ */

/* ── LIGHT THEME ── */
:root{
  --bg:#f4f6f9;
  --bg2:#edf0f5;
  --card:#ffffff;
  --card-hover:#fafbfc;
  --text:#1a2332;
  --text2:#374151;
  --muted:#6b7a8d;
  --border:#d5dce6;
  --accent:#1a56db;
  --accent2:#0e9f6e;
  --accent-light:#e8f0fe;
  --accent-light2:#d1fae5;
  --success:#0e9f6e;
  --danger:#e02424;
  --warning:#c27803;
  --gold:#b8860b;
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);
  --shadow-lg:0 8px 30px rgba(0,0,0,.07)
}

/* ── DARK THEME – warm navy, not black ── */
[data-theme=dark]{
  --bg:#1a2332;
  --bg2:#1f2b3d;
  --card:#253347;
  --card-hover:#2c3d54;
  --text:#e8ecf1;
  --text2:#c4cdd9;
  --muted:#8899ab;
  --border:#344357;
  --accent:#5b9cf6;
  --accent2:#34d399;
  --accent-light:#253f5f;
  --accent-light2:#1a3a2e;
  --success:#34d399;
  --danger:#f87171;
  --warning:#fbbf24;
  --gold:#daa520;
  --shadow:0 1px 3px rgba(0,0,0,.2);
  --shadow-lg:0 8px 30px rgba(0,0,0,.25)
}

*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  transition:background .3s,color .3s;
  line-height:1.65;
  font-size:15px
}

/* ── Bootstrap overrides ── */
.card,.form-control,.form-select,.input-group-text,.table{
  background:var(--card)!important;
  color:var(--text)!important;
  border-color:var(--border)!important
}
.card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:all .25s ease
}
.form-control,.form-select{border-radius:10px;padding:.6rem .9rem;font-size:.9rem}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,219,.15)}
.form-control::placeholder{color:var(--muted);opacity:.7}
.text-muted{color:var(--muted)!important}
.text-primary{color:var(--accent)!important}

/* ── Table ── */
.table th{
  border-color:var(--border);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:700;
  padding:.6rem .5rem
}
.table td{border-color:var(--border);vertical-align:middle;font-size:.85rem;color:var(--text2)}
.table-hover tbody tr:hover{background:var(--card-hover)!important}

/* ── Navbar ── */
.navbar{
  background:var(--card)!important;
  border-bottom:1px solid var(--border);
  padding:.65rem 0
}
.navbar-brand{font-size:1.05rem;letter-spacing:-.02em;color:var(--text)!important;font-weight:700}
.btn-theme{
  background:var(--bg2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:7px 12px;
  font-size:.85rem;
  cursor:pointer;
  transition:all .2s
}
.btn-theme:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}

/* ── Dashboard cards ── */
.dash-card{text-decoration:none!important;color:inherit!important;display:block;height:100%}
.dash-card .card{height:100%;position:relative;overflow:hidden;padding:1.5rem!important}
.dash-card .card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);transition:transform .3s ease;transform-origin:left
}
.dash-card:hover .card{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  background:var(--card-hover)!important
}
.dash-card:hover .card::before{transform:scaleX(1)}
.dash-card .emoji-icon{font-size:2.2rem;display:block;margin-bottom:.5rem;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif}
.dash-card .card-title{font-size:.95rem;font-weight:700;color:var(--text);letter-spacing:-.01em;margin-bottom:.3rem}
.dash-card .card-text{font-size:.78rem;line-height:1.55;color:var(--muted)}

/* ── Search ── */
.search-wrap{position:relative;max-width:520px;margin:0 auto 1.5rem}
.search-wrap input{
  padding-left:2.8rem;border-radius:50px;height:50px;font-size:.9rem;
  border:2px solid var(--border);background:var(--card);color:var(--text)
}
.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(26,86,219,.1)}
.search-wrap .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--muted);pointer-events:none}

/* ── Results ── */
.result-box{
  border-radius:10px;padding:.9rem;
  background:var(--bg2);border:1px solid var(--border)
}
.status-ok{
  background:#d1fae5;color:#065f46;border:1px solid #6ee7b7
}
.status-fail{
  background:#fee2e2;color:#991b1b;border:1px solid #fca5a5
}
[data-theme=dark] .status-ok{background:#064e3b;color:#6ee7b7;border-color:#059669}
[data-theme=dark] .status-fail{background:#7f1d1d44;color:#fca5a5;border-color:#ef4444}

.badge-stopa{font-size:.72rem;padding:.3em .6em;border-radius:6px}

/* ── Info / Tip cards ── */
.info-card{
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:.9rem 1.1rem;
  background:var(--accent-light);
  margin-bottom:1rem;
  font-size:.82rem;
  line-height:1.6;
  color:var(--text2)
}
.info-card strong{color:var(--accent)}

.tip-card{
  border-left:4px solid var(--gold);
  background:#fef9ee;
  border-radius:0 var(--radius) var(--radius) 0;
  padding:.75rem 1rem;
  font-size:.8rem;
  margin-bottom:1rem;
  color:#78350f
}
[data-theme=dark] .tip-card{background:#3d2c0e44;color:var(--warning)}

/* ── Animations ── */
.animate-in{animation:fadeSlideIn .35s ease both}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.stagger-1{animation-delay:.04s}.stagger-2{animation-delay:.08s}.stagger-3{animation-delay:.12s}
.stagger-4{animation-delay:.16s}.stagger-5{animation-delay:.2s}

/* ── Dropdown ── */
.dropdown-results{
  position:absolute;z-index:50;max-height:360px;overflow-y:auto;
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-lg);width:100%;margin-top:4px
}
.dropdown-results .item{
  padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--border);
  transition:background .15s;display:flex;justify-content:space-between;align-items:center
}
.dropdown-results .item:hover{background:var(--accent-light)}
.dropdown-results .item:last-child{border-bottom:none}
.dropdown-results::-webkit-scrollbar{width:5px}
.dropdown-results::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}

/* ── Ads ── */
.ad-slot{
  position:relative;text-align:center;margin:.75rem 0;
  border-radius:var(--radius);overflow:hidden;
  background:var(--bg2);border:1px dashed var(--border);padding:4px
}
.ad-slot a{display:block;text-decoration:none}
.ad-label{
  position:absolute;top:4px;right:8px;
  font-size:.55rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
  background:var(--card);padding:1px 6px;border-radius:4px;opacity:.6
}
.ad-img{border-radius:8px;max-width:100%;height:auto}
.ad-img-banner{max-height:90px;width:auto;max-width:100%}
.ad-img-sidebar{max-height:250px;width:100%;object-fit:cover}
.ad-img-footer{max-height:90px;width:auto;max-width:100%}
.ad-sidebar{max-width:300px}

/* ── Sidebar ── */
.sidebar-card{font-size:.8rem}
.sidebar-card h6{font-size:.78rem;color:var(--text)}
.sidebar-card a{color:var(--accent);text-decoration:none;transition:color .15s}
.sidebar-card a:hover{color:var(--accent2)}
.sidebar-card ul{list-style:none;padding-left:0;margin:0}
.sidebar-card li{padding:3px 0}

/* ── Footer ── */
.app-footer{border-top:1px solid var(--border);background:var(--card);margin-top:2rem;padding:1rem 0}
.app-footer a{color:var(--accent);text-decoration:none}
.app-footer a:hover{text-decoration:underline}

/* ── Buttons ── */
.btn-primary{background:var(--accent);border-color:var(--accent)}
.btn-primary:hover{background:#1648b8;border-color:#1648b8}
[data-theme=dark] .btn-primary{background:#4a8af5;border-color:#4a8af5}
[data-theme=dark] .btn-primary:hover{background:#5b9cf6;border-color:#5b9cf6}
.btn-outline-secondary{color:var(--muted);border-color:var(--border)}
.btn-outline-secondary:hover{background:var(--bg2);color:var(--text);border-color:var(--muted)}

/* ── Legal links section ── */
.legal-link{
  display:block;padding:.5rem .6rem;border-radius:8px;
  font-size:.78rem;text-decoration:none!important;
  transition:all .15s;border:1px solid transparent
}
.legal-link:hover{background:var(--accent-light);border-color:var(--border)}
.legal-link strong{display:block;margin-bottom:1px}
.legal-link span{color:var(--muted)}

/* ── Info button ── */
.info-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:var(--accent-light);color:var(--accent);
  font-size:.6rem;font-weight:700;cursor:help;border:none;
  margin-left:3px;vertical-align:middle
}

/* ── Print ── */
@media print{
  .no-print{display:none!important}
  .card{box-shadow:none!important;border:1px solid #ccc!important}
  body{background:#fff;color:#000}
}

/* ── Responsive ── */
@media(max-width:768px){
  .dash-card .emoji-icon{font-size:1.8rem}
  .dash-card .card{padding:1rem!important}
  body{font-size:14px}
}