/* ============================================================
   BestPriceRoom – Main Stylesheet
   Font: DM Sans (Latin + Cyrillic + Spanish support)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@600;700&display=swap');
/* Inter: odlicna podrska srpske latinice djszcaA - djszcaA */

/* ── CSS Custom Properties ──────────────────────────────── */
:root {
  /* Brand Blues */
  --bpr-blue-900:   #0a1628;
  --bpr-blue-800:   #102240;
  --bpr-blue-700:   #1a3a6b;
  --bpr-blue-600:   #1e4d8c;
  --bpr-blue-500:   #2563c8;
  --bpr-blue-400:   #3b82f6;
  --bpr-blue-300:   #60a5fa;
  --bpr-blue-200:   #93c5fd;
  --bpr-blue-100:   #dbeafe;
  --bpr-blue-50:    #eff6ff;

  /* Accent - Steel/Teal */
  --bpr-teal-600:   #0891b2;
  --bpr-teal-400:   #22d3ee;
  --bpr-teal-100:   #cffafe;
  --bpr-teal-50:    #ecfeff;

  /* Semantic */
  --bpr-success:    #16a34a;
  --bpr-success-bg: #f0fdf4;
  --bpr-warning:    #d97706;
  --bpr-warning-bg: #fffbeb;
  --bpr-danger:     #dc2626;
  --bpr-danger-bg:  #fef2f2;
  --bpr-info:       #0284c7;
  --bpr-info-bg:    #f0f9ff;

  /* Neutrals */
  --bpr-gray-900:   #111827;
  --bpr-gray-800:   #1f2937;
  --bpr-gray-700:   #374151;
  --bpr-gray-600:   #4b5563;
  --bpr-gray-500:   #6b7280;
  --bpr-gray-400:   #9ca3af;
  --bpr-gray-300:   #d1d5db;
  --bpr-gray-200:   #e5e7eb;
  --bpr-gray-100:   #f3f4f6;
  --bpr-gray-50:    #f9fafb;

  /* Typography */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Plus Jakarta Sans', 'Inter', sans-serif;

  /* Layout */
  --navbar-height:  64px;
  --sidebar-width:        260px;
  --sidebar-width-collapsed: 60px;
  --border-radius:  10px;
  --card-shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --card-shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);

  /* Bootstrap overrides */
  --bs-primary:         #2563c8;
  --bs-primary-rgb:     37,99,200;
  --bs-link-color:      #2563c8;
  --bs-link-hover-color:#1a3a6b;
  --bs-border-radius:   var(--border-radius);
  --bs-font-sans-serif: var(--font-primary);
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.65;
  color: var(--bpr-gray-800);
  background-color: var(--bpr-gray-50);
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--bpr-blue-900);
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

.display-title {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.1;
  color: #fff;
}

a {
  color: var(--bpr-blue-500);
  text-decoration: none;
  transition: color .15s;
}
a:hover { color: var(--bpr-blue-700); }

/* ── Navbar ──────────────────────────────────────────── */
.bpr-navbar {
  height: var(--navbar-height);
  background: var(--bpr-blue-800);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 12px rgba(10,22,40,.25);
}

.bpr-navbar .navbar-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff !important;
  letter-spacing: -0.02em;
}

.bpr-navbar .brand-accent {
  color: var(--bpr-blue-300);
}

.bpr-navbar .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500;
  font-size: .925rem;
  padding: .4rem .85rem !important;
  border-radius: 6px;
  transition: background .15s, color .15s;
}

.bpr-navbar .nav-link:hover,
.bpr-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.10);
}

.bpr-navbar .btn-nav-cta {
  background: var(--bpr-blue-500);
  color: #fff !important;
  border: none;
  padding: .38rem 1.1rem !important;
  font-weight: 600;
  transition: background .15s;
}
.bpr-navbar .btn-nav-cta:hover {
  background: var(--bpr-blue-600);
}

/* ── Admin Sidebar ───────────────────────────────────── */
.bpr-sidebar {
  width: var(--sidebar-width);
  height: 100vh;           /* fiksna visina = scroll aktivira se kad sadrzaj prelazi */
  background: var(--bpr-blue-900);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

/* Scrollbar webkit */
.bpr-sidebar::-webkit-scrollbar { width: 4px; }
.bpr-sidebar::-webkit-scrollbar-track { background: transparent; }
.bpr-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }
.bpr-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }

.bpr-sidebar .sidebar-brand {
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #fff;
  text-decoration: none;
}

.bpr-sidebar .sidebar-brand span { color: var(--bpr-blue-300); }

.bpr-sidebar .nav-section-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 1.2rem 1.25rem .35rem;
}

.bpr-sidebar .sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.25rem;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
  font-weight: 500;
  border-radius: 0;
  transition: background .15s, color .15s;
  text-decoration: none;
}

.bpr-sidebar .sidebar-link i {
  font-size: 1.05rem;
  width: 20px;
  flex-shrink: 0;
  opacity: .8;
}

.bpr-sidebar .sidebar-link:hover,
.bpr-sidebar .sidebar-link.active {
  background: rgba(255,255,255,.09);
  color: #fff;
}

.bpr-sidebar .sidebar-link.active {
  border-left: 3px solid var(--bpr-blue-400);
  background: rgba(37,99,200,.25);
  color: #fff;
}

.bpr-sidebar .sidebar-link.active i { opacity: 1; }

/* Main content offset for sidebar */
.bpr-admin-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: 1.5rem 1.75rem;
}

/* ── Cards ───────────────────────────────────────────── */
.bpr-card {
  background: var(--theme-card-bg, #112244);
  border: 1px solid var(--theme-card-border, rgba(255,255,255,.08));
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
}

.bpr-card .card-header {
  padding: 1rem 1.25rem .875rem;
  border-bottom: 1px solid var(--bpr-gray-100);
  background: transparent;
  font-weight: 600;
  color: var(--bpr-blue-900);
}

.bpr-card .card-body { padding: 1.25rem; }

/* Stat cards */
.bpr-stat-card {
  background: var(--theme-card-bg, #112244);
  border: 1px solid var(--theme-card-border, rgba(255,255,255,.08));
  border-radius: var(--border-radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
}

.bpr-stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: .75rem;
}

.bpr-stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bpr-blue-900);
  line-height: 1;
  margin-bottom: .2rem;
}

.bpr-stat-card .stat-label {
  font-size: .82rem;
  color: var(--bpr-gray-500);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.bpr-stat-card .stat-change {
  font-size: .8rem;
  font-weight: 600;
  margin-top: .4rem;
}

.bpr-stat-card .stat-change.up   { color: var(--bpr-success); }
.bpr-stat-card .stat-change.down { color: var(--bpr-danger); }

/* Icon color variants */
.icon-blue    { background: var(--bpr-blue-100); color: var(--bpr-blue-600); }
.icon-teal    { background: var(--bpr-teal-100); color: var(--bpr-teal-600); }
.icon-success { background: var(--bpr-success-bg); color: var(--bpr-success); }
.icon-warning { background: var(--bpr-warning-bg); color: var(--bpr-warning); }
.icon-danger  { background: var(--bpr-danger-bg);  color: var(--bpr-danger); }

/* ── Hotel Card (listing) ────────────────────────────── */
.hotel-card {
  background: #fff;
  border: 1.5px solid var(--bpr-gray-200);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s, border-color .2s, transform .15s;
  cursor: pointer;
  position: relative;
}

.hotel-card:hover {
  box-shadow: var(--card-shadow-md);
  border-color: var(--bpr-blue-300);
  transform: translateY(-2px);
}

.hotel-card.selected {
  border-color: var(--bpr-blue-500);
  box-shadow: 0 0 0 3px rgba(37,99,200,.15), var(--card-shadow-md);
}

.hotel-card .hotel-img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  display: block;
}

.hotel-card .hotel-img-placeholder {
  width: 100%;
  height: 195px;
  background: linear-gradient(135deg, var(--bpr-blue-100), var(--bpr-blue-200));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bpr-blue-400);
  font-size: 2.5rem;
}

.hotel-card .card-body { padding: 1rem 1.1rem; }

.hotel-card .hotel-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bpr-blue-900);
  margin-bottom: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-card .hotel-brand {
  font-size: .78rem;
  color: var(--bpr-blue-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}

.hotel-card .hotel-location {
  font-size: .85rem;
  color: var(--bpr-gray-500);
  margin-bottom: .6rem;
}

.hotel-card .hotel-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bpr-blue-600);
}

.hotel-card .hotel-price span {
  font-size: .8rem;
  font-weight: 400;
  color: var(--bpr-gray-500);
}

.hotel-card .selected-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--bpr-blue-500);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
}

.hotel-card.selected .selected-badge { display: flex; }

.hotel-card .amenity-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .74rem;
  color: var(--bpr-gray-600);
  background: var(--bpr-gray-100);
  padding: 2px 7px;
  border-radius: 4px;
  margin: 2px 2px 2px 0;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  font-family: var(--font-primary);
  font-weight: 600;
  border-radius: 8px;
  transition: all .15s;
  letter-spacing: .01em;
}

.btn-primary {
  background: var(--bpr-blue-500);
  border-color: var(--bpr-blue-500);
  color: #fff;
}
.btn-primary:hover {
  background: var(--bpr-blue-600);
  border-color: var(--bpr-blue-600);
  color: #fff;
}

.btn-outline-primary {
  color: var(--bpr-blue-500);
  border-color: var(--bpr-blue-400);
}
.btn-outline-primary:hover {
  background: var(--bpr-blue-500);
  border-color: var(--bpr-blue-500);
  color: #fff;
}

.btn-navy {
  background: var(--bpr-blue-800);
  border-color: var(--bpr-blue-800);
  color: #fff;
}
.btn-navy:hover {
  background: var(--bpr-blue-900);
  border-color: var(--bpr-blue-900);
  color: #fff;
}

.btn-rfq {
  background: var(--bpr-blue-500);
  color: #fff;
  border: none;
  padding: .55rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  width: 100%;
  border-radius: 8px;
  transition: background .15s;
}
.btn-rfq:hover { background: var(--bpr-blue-600); color: #fff; }
.btn-rfq:disabled { background: var(--bpr-gray-300); cursor: not-allowed; }

/* ── Forms ───────────────────────────────────────────── */
.form-control, .form-select {
  border: 1.5px solid var(--bpr-gray-300);
  border-radius: 8px;
  padding: .55rem .85rem;
  font-family: var(--font-primary);
  font-size: .925rem;
  color: var(--bpr-gray-900);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus, .form-select:focus {
  border-color: var(--bpr-blue-400);
  box-shadow: 0 0 0 3px rgba(37,99,200,.12);
  outline: none;
}

.form-label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--bpr-gray-700);
  margin-bottom: .4rem;
}

.form-text { color: var(--bpr-gray-500); font-size: .8rem; }

.invalid-feedback { font-size: .82rem; font-weight: 500; }

/* ── Badges ──────────────────────────────────────────── */
.badge-status {
  font-size: .76rem;
  font-weight: 600;
  padding: .28rem .65rem;
  border-radius: 5px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.badge-open      { background: var(--bpr-blue-100); color: var(--bpr-blue-700); }
.badge-pending   { background: var(--bpr-warning-bg); color: var(--bpr-warning); }
.badge-accepted  { background: var(--bpr-success-bg); color: var(--bpr-success); }
.badge-closed    { background: var(--bpr-gray-100); color: var(--bpr-gray-600); }
.badge-expired   { background: var(--bpr-danger-bg); color: var(--bpr-danger); }

/* ── Tables ──────────────────────────────────────────── */
.bpr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.bpr-table thead th {
  background: var(--bpr-gray-50);
  color: var(--bpr-gray-600);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .75rem 1rem;
  border-bottom: 1.5px solid var(--bpr-gray-200);
  white-space: nowrap;
}

.bpr-table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--bpr-gray-100);
  color: var(--bpr-gray-700);
  vertical-align: middle;
}

.bpr-table tbody tr:hover { background: var(--bpr-gray-50); }
.bpr-table tbody tr:last-child td { border-bottom: none; }

/* ── Alerts / Toasts ─────────────────────────────────── */
.alert {
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  padding: .8rem 1.1rem;
}

.alert-success { background: var(--bpr-success-bg); color: var(--bpr-success); }
.alert-danger  { background: var(--bpr-danger-bg);  color: var(--bpr-danger); }
.alert-warning { background: var(--bpr-warning-bg); color: var(--bpr-warning); }
.alert-info    { background: var(--bpr-info-bg);    color: var(--bpr-info); }

/* Toast container */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  min-width: 300px;
}

.bpr-toast {
  background: var(--bpr-blue-900);
  color: #fff;
  border-radius: 10px;
  padding: .9rem 1.2rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  animation: slideInRight .25s ease;
}

.bpr-toast.toast-success { background: var(--bpr-success); }
.bpr-toast.toast-danger  { background: var(--bpr-danger); }
.bpr-toast.toast-warning { background: #b45309; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Page Header ─────────────────────────────────────── */
.bpr-page-header {
  margin-bottom: 1.5rem;
}

.bpr-page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bpr-blue-900);
  margin: 0;
}

.bpr-page-header .breadcrumb {
  font-size: .82rem;
  margin: 0;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--bpr-gray-400); }

/* ── Pagination ──────────────────────────────────────── */
.pagination .page-link {
  color: var(--bpr-blue-500);
  border-color: var(--bpr-gray-200);
  font-weight: 500;
  font-size: .875rem;
}

.pagination .page-link:hover {
  background: var(--bpr-blue-50);
  border-color: var(--bpr-blue-300);
}

.pagination .page-item.active .page-link {
  background: var(--bpr-blue-500);
  border-color: var(--bpr-blue-500);
}

/* ── Auth Pages ──────────────────────────────────────── */
.auth-wrapper {
  min-height: 100vh;
  background: linear-gradient(150deg, var(--bpr-blue-900) 0%, var(--bpr-blue-700) 55%, var(--bpr-teal-600) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(10,22,40,.35);
  padding: 2.5rem 2.25rem;
  width: 100%;
  max-width: 440px;
}

.auth-card .auth-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}

.auth-card .auth-logo span {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--bpr-blue-800);
}

.auth-card .auth-logo span em {
  font-style: normal;
  color: var(--bpr-blue-500);
}

.auth-card h2 {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  color: var(--bpr-blue-900);
  margin-bottom: .35rem;
}

.auth-card .auth-sub {
  text-align: center;
  color: var(--bpr-gray-500);
  font-size: .88rem;
  margin-bottom: 1.75rem;
}

/* ── Hero Section ────────────────────────────────────── */
.bpr-hero {
  background: linear-gradient(155deg, var(--bpr-blue-900) 0%, var(--bpr-blue-700) 60%, var(--bpr-teal-600) 100%);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.bpr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.bpr-hero .display-title {
  font-size: 3.2rem;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}

.bpr-hero .hero-subtitle {
  color: rgba(255,255,255,.82);
  font-size: 1.1rem;
  font-weight: 400;
}

/* Search box in hero */
.hero-search-box {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 16px 48px rgba(0,0,0,.25);
}

/* ── RFQ Selection Bar ───────────────────────────────── */
.rfq-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bpr-blue-900);
  color: #fff;
  padding: .85rem 1.5rem;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}

.rfq-bar.visible { display: flex; }

.rfq-bar .rfq-count {
  font-weight: 700;
  color: var(--bpr-blue-300);
  font-size: 1.05rem;
}

/* ── Notification dot ────────────────────────────────── */
.notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--bpr-danger);
  border-radius: 50%;
  border: 2px solid var(--bpr-blue-800);
}

/* ── Utilities ───────────────────────────────────────── */
.text-blue-500  { color: var(--bpr-blue-500) !important; }
.text-blue-800  { color: var(--bpr-blue-800) !important; }
.text-muted-sm  { font-size: .82rem; color: var(--bpr-gray-500); }
.bg-blue-50     { background: var(--bpr-blue-50) !important; }
.bg-blue-900    { background: var(--bpr-blue-900) !important; }

.divider {
  border: none;
  border-top: 1px solid var(--bpr-gray-200);
  margin: 1.25rem 0;
}

/* ── Spinner overlay ─────────────────────────────────── */
.bpr-spinner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  display: none;
}

.bpr-spinner-overlay.active { display: flex; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .bpr-sidebar {
    transform: translateX(-100%);
  }
  .bpr-sidebar.open {
    transform: translateX(0);
  }
  .bpr-admin-content {
    margin-left: 0;
  }
  .bpr-hero .display-title { font-size: 2.2rem; }
}

@media (max-width: 575.98px) {
  .auth-card { padding: 1.75rem 1.25rem; }
  .bpr-hero  { padding: 3rem 0 2.5rem; }
}

/* =============================================================
   DARK THEME  (default)
   Aktivira se sa: <html data-theme="dark">
   Koristi !important i html prefix za veci specificitet
   od Bootstrap-ovih default stilova
   ============================================================= */

/* ── CSS varijable za temu ──────────────────────────────── */
:root {
  --theme-body-bg:       #0c1a30;
  --theme-content-bg:    #0c1a30;
  --theme-card-bg:       #112244;
  --theme-card-border:   rgba(255,255,255,.08);
  --theme-header-bg:     rgba(255,255,255,.04);
  --theme-header-border: rgba(255,255,255,.08);
  --theme-text:          #e2e8f0;
  --theme-text-muted:    #6e85a0;
  --theme-input-bg:      rgba(255,255,255,.07);
  --theme-input-border:  rgba(255,255,255,.14);
  --theme-modal-bg:      #0f2040;
  --theme-sidebar-bg:    #07112a;
}

[data-theme="light"] {
  --theme-body-bg:       #f0f4fa;
  --theme-content-bg:    #f0f4fa;
  --theme-card-bg:       #ffffff;
  --theme-card-border:   #e2e8f0;
  --theme-header-bg:     #f8fafd;
  --theme-header-border: #e2e8f0;
  --theme-text:          #1a2744;
  --theme-text-muted:    #64748b;
  --theme-input-bg:      #ffffff;
  --theme-input-border:  #cbd5e1;
  --theme-modal-bg:      #ffffff;
  --theme-sidebar-bg:    #1e4d8c;
}

/* ── Body & Layout ──────────────────────────────────────── */
html[data-theme="dark"] body,
html[data-theme="dark"] body.admin-body {
  background: var(--theme-body-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .bpr-admin-content {
  background: var(--theme-content-bg) !important;
  transition: margin-left .25s ease;
}

html[data-theme="light"] body,
html[data-theme="light"] body.admin-body {
  background: var(--theme-body-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] .bpr-admin-content {
  background: var(--theme-content-bg) !important;
}

/* ── Sidebar ────────────────────────────────────────────── */
html[data-theme="dark"] .bpr-sidebar  { background: #07112a !important; }
html[data-theme="light"] .bpr-sidebar { background: #1a3a6b !important; }

/* Sidebar collapsed */
.bpr-sidebar {
  transition: width .25s ease !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.bpr-sidebar.collapsed {
  width: var(--sidebar-width-collapsed) !important;
  overflow: hidden !important;
}
.bpr-sidebar.collapsed .sidebar-brand-text,
.bpr-sidebar.collapsed .nav-section-label,
.bpr-sidebar.collapsed .sidebar-user-info {
  display: none !important;
}
.bpr-sidebar.collapsed .sidebar-brand {
  justify-content: center !important;
  padding: 0 !important;
}
.bpr-sidebar.collapsed .sidebar-link {
  justify-content: center !important;
  padding: .55rem 0 !important;
  position: relative;
}
.bpr-sidebar.collapsed .sidebar-link span {
  display: none !important;
}
/* Tooltip za collapsed meni */
.bpr-sidebar.collapsed .sidebar-link[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(var(--sidebar-width-collapsed) + 6px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a3a6b;
  color: #fff;
  padding: .3rem .7rem;
  border-radius: 6px;
  font-size: .8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 1500;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: opacity .12s;
}
.bpr-sidebar.collapsed .sidebar-link[data-label]:hover::after {
  opacity: 1;
}
.bpr-sidebar.collapsed .sidebar-link i {
  font-size: 1.2rem !important;
  width: auto !important;
}
/* Content pomjeranje */
body.sidebar-collapsed .bpr-admin-content {
  margin-left: var(--sidebar-width-collapsed) !important;
}

/* ── Cards — DARK ───────────────────────────────────────── */
html[data-theme="dark"] .bpr-card {
  background: var(--theme-card-bg) !important;
  border: 1px solid var(--theme-card-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .bpr-card .card-header {
  background: var(--theme-header-bg) !important;
  border-bottom: 1px solid var(--theme-header-border) !important;
  color: rgba(255,255,255,.88) !important;
}
html[data-theme="dark"] .bpr-card .card-body { color: var(--theme-text); }

/* ── Cards — LIGHT ──────────────────────────────────────── */
html[data-theme="light"] .bpr-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
html[data-theme="light"] .bpr-card .card-header {
  background: #f8fafd !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1a2744 !important;
}

/* ── Stat cards — DARK ──────────────────────────────────── */
html[data-theme="dark"] .bpr-stat-card {
  background: var(--theme-card-bg) !important;
  border: 1px solid var(--theme-card-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .bpr-stat-card .stat-value {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .bpr-stat-card .stat-label {
  color: var(--theme-text-muted) !important;
}

/* ── Stat cards — LIGHT ─────────────────────────────────── */
html[data-theme="light"] .bpr-stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .bpr-stat-card .stat-value { color: #0f2241 !important; }
html[data-theme="light"] .bpr-stat-card .stat-label { color: #64748b !important; }

/* ── Tables — DARK ──────────────────────────────────────── */
html[data-theme="dark"] .bpr-table {
  color: #c5d3e0 !important;
}
html[data-theme="dark"] .bpr-table thead th {
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.5) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
html[data-theme="dark"] .bpr-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  color: #c5d3e0 !important;
}
html[data-theme="dark"] .bpr-table tbody tr:hover {
  background: rgba(255,255,255,.04) !important;
}

/* ── Tables — LIGHT ─────────────────────────────────────── */
html[data-theme="light"] .bpr-table { color: #334155; }
html[data-theme="light"] .bpr-table thead th {
  background: #f8fafd !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .bpr-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] .bpr-table tbody tr:hover {
  background: #f8fafd !important;
}

/* ── Forms — DARK ───────────────────────────────────────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background: var(--theme-input-bg) !important;
  border: 1px solid var(--theme-input-border) !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background: rgba(255,255,255,.1) !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: rgba(255,255,255,.25) !important; }
html[data-theme="dark"] .form-label { color: rgba(255,255,255,.7) !important; }
html[data-theme="dark"] .form-check-label { color: rgba(255,255,255,.7) !important; }
html[data-theme="dark"] .form-text { color: var(--theme-text-muted) !important; }
html[data-theme="dark"] .input-group-text {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.6) !important;
}
/* Select: color-scheme:dark govori browser-u da koristi tamni native stil za dropdown */
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] select.form-control {
  color-scheme: dark !important;
  background-color: #0f2040 !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
html[data-theme="dark"] select.form-select:focus,
html[data-theme="dark"] select.form-control:focus {
  background-color: #0f2040 !important;
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}
html[data-theme="dark"] select option {
  background: #0f2040 !important;
  color: #e2e8f0 !important;
}

/* ── Forms — LIGHT ──────────────────────────────────────── */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
  background: #fff !important;
  border-color: #cbd5e1 !important;
  color: #1a2744 !important;
}
html[data-theme="light"] .form-label { color: #475569 !important; }

/* ── Buttons — DARK ─────────────────────────────────────── */
html[data-theme="dark"] .btn-outline-secondary {
  color: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.22) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}
html[data-theme="dark"] .btn-outline-primary {
  color: #7dc4ff !important;
  border-color: #3b82f6 !important;
}
html[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(59,130,246,.2) !important;
  color: #bfdbfe !important;
}
html[data-theme="dark"] .btn-outline-danger {
  color: #fca5a5 !important;
  border-color: #ef4444 !important;
}
html[data-theme="dark"] .btn-outline-danger:hover {
  background: rgba(239,68,68,.18) !important;
}
html[data-theme="dark"] .btn-outline-success {
  color: #86efac !important;
  border-color: #22c55e !important;
}
html[data-theme="dark"] .btn-secondary {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.85) !important;
}
html[data-theme="dark"] .btn-close {
  filter: invert(1) brightness(2) !important;
}

/* ── Alerts — DARK ──────────────────────────────────────── */
html[data-theme="dark"] .alert-success {
  background: rgba(22,163,74,.15) !important;
  border-color: rgba(22,163,74,.28) !important;
  color: #86efac !important;
}
html[data-theme="dark"] .alert-danger {
  background: rgba(220,38,38,.15) !important;
  border-color: rgba(220,38,38,.28) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .alert-warning {
  background: rgba(217,119,6,.15) !important;
  border-color: rgba(217,119,6,.28) !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .alert-info {
  background: rgba(2,132,199,.15) !important;
  border-color: rgba(2,132,199,.28) !important;
  color: #7dd3fc !important;
}

/* ── Modals — DARK ──────────────────────────────────────── */
html[data-theme="dark"] .modal-content {
  background: #0f2040 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .modal-header {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .modal-footer {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .modal-title { color: #e2e8f0 !important; }
html[data-theme="dark"] .modal-body { color: #c5d3e0; }

/* ── Text & Typography — DARK ───────────────────────────── */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] p { color: #c5d3e0; }
html[data-theme="dark"] .text-muted { color: #6e85a0 !important; }
html[data-theme="dark"] strong { color: #e2e8f0; }
html[data-theme="dark"] a:not(.btn):not(.sidebar-link):not(.badge-status):not(.nav-link) {
  color: #60a5fa;
}
html[data-theme="dark"] a:not(.btn):not(.sidebar-link):not(.badge-status):not(.nav-link):hover {
  color: #93c5fd;
}
html[data-theme="dark"] .bpr-page-header h1 { color: #e2e8f0 !important; }
html[data-theme="dark"] small, html[data-theme="dark"] .small { color: #6e85a0; }
html[data-theme="dark"] code {
  background: rgba(255,255,255,.1) !important;
  color: #93c5fd !important;
  border-radius: 4px;
  padding: .1rem .35rem;
}
html[data-theme="dark"] kbd {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: #e2e8f0 !important;
}

/* ── Typography — LIGHT ─────────────────────────────────── */
html[data-theme="light"] .text-muted { color: #64748b !important; }
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4,
html[data-theme="light"] h5, html[data-theme="light"] h6 {
  color: #0f2241 !important;
}

/* ── Pagination — DARK ──────────────────────────────────── */
html[data-theme="dark"] .page-link {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #7dc4ff !important;
}
html[data-theme="dark"] .page-item.active .page-link {
  background: #2563c8 !important;
  border-color: #2563c8 !important;
  color: #fff !important;
}
html[data-theme="dark"] .page-item.disabled .page-link {
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.2) !important;
}

/* ── Dropdowns — DARK ───────────────────────────────────── */
html[data-theme="dark"] .dropdown-menu {
  background: #112244 !important;
  border-color: rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] .dropdown-item { color: #c5d3e0 !important; }
html[data-theme="dark"] .dropdown-item:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
html[data-theme="dark"] .dropdown-divider { border-color: rgba(255,255,255,.08) !important; }

/* ── Progress — DARK ────────────────────────────────────── */
html[data-theme="dark"] .progress {
  background: rgba(255,255,255,.1) !important;
}

/* ── Breadcrumb — DARK ──────────────────────────────────── */
html[data-theme="dark"] .breadcrumb-item { color: #6e85a0; }
html[data-theme="dark"] .breadcrumb-item.active { color: #e2e8f0; }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #3d5270; }
html[data-theme="dark"] .breadcrumb-item a { color: #60a5fa; }

/* ── HR & misc — DARK ───────────────────────────────────── */
html[data-theme="dark"] hr { border-color: rgba(255,255,255,.09) !important; opacity: 1; }
html[data-theme="dark"] .table-responsive { border-color: rgba(255,255,255,.06) !important; }
html[data-theme="dark"] .badge.bg-secondary {
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.8) !important;
}

/* ── Top mobile bar — DARK ──────────────────────────────── */
html[data-theme="dark"] #mobile-topbar {
  background: #112244 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── Nav tabs — DARK ────────────────────────────────────── */
html[data-theme="dark"] .nav-tabs { border-bottom-color: rgba(255,255,255,.09) !important; }
html[data-theme="dark"] .nav-tabs .nav-link { color: #6e85a0 !important; border-color: transparent !important; }
html[data-theme="dark"] .nav-tabs .nav-link:hover { color: #e2e8f0 !important; }
html[data-theme="dark"] .nav-tabs .nav-link.active {
  background: #112244 !important;
  border-color: rgba(255,255,255,.09) rgba(255,255,255,.09) #112244 !important;
  color: #e2e8f0 !important;
}

/* ── Theme toggle button ────────────────────────────────── */
#theme-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  flex-shrink: 0;
  transition: background .15s;
}
#theme-toggle:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Sidebar collapse toggle */
#sidebar-collapse-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  flex-shrink: 0;
  transition: background .15s;
}
#sidebar-collapse-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Manual tip styles for manuals */
html[data-theme="dark"] .manual-section h2 { color: #e2e8f0 !important; border-bottom-color: var(--bpr-blue-600); }
html[data-theme="dark"] .manual-section h3 { color: #93c5fd !important; }
html[data-theme="dark"] .manual-section p, html[data-theme="dark"] .manual-section li { color: #c5d3e0; }
html[data-theme="dark"] .manual-tip.info    { background: rgba(2,132,199,.12); }
html[data-theme="dark"] .manual-tip.warning { background: rgba(217,119,6,.12); }
html[data-theme="dark"] .manual-tip.success { background: rgba(22,163,74,.12); }
html[data-theme="dark"] .manual-step-body strong { color: #7dc4ff; }


/* =============================================================
   FIX17 — Targeted overrides for identified problems
   ============================================================= */

/* 1. SIDEBAR — manji itemi, manji razmak
   Original: padding: .55rem 1.25rem + nav-section-label: 1.2rem top
   Novo: kompaktnije */
.bpr-sidebar .nav-section-label {
  padding: .7rem 1.25rem .2rem !important;
  font-size: .68rem !important;
}
.bpr-sidebar .sidebar-link {
  padding: .35rem 1.25rem !important;
  font-size: .85rem !important;
  gap: .55rem !important;
}
.bpr-sidebar .sidebar-link i {
  font-size: 1rem !important;
  width: 18px !important;
}

/* 2. DARK THEME — CSS varijable za gray i success u dark modu
   Ovo rješava: bpr-gray-100 (linija separator) ostaje bijela */
html[data-theme="dark"] {
  --bpr-gray-100: rgba(255,255,255,.07) !important;
  --bpr-gray-200: rgba(255,255,255,.1) !important;
  --bpr-success-bg: rgba(22,163,74,.18) !important;
  --bpr-warning-bg: rgba(217,119,6,.18) !important;
  --bpr-danger-bg:  rgba(220,38,38,.18) !important;
  --bpr-blue-100:   rgba(37,99,200,.25) !important;
  --bpr-blue-700:   #93c5fd !important;
  --bpr-gray-600:   #7a91b0 !important;
}

/* 3. BADGE STATUS — dark theme varijante */
html[data-theme="dark"] .badge-accepted {
  background: rgba(22,163,74,.22) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(22,163,74,.35) !important;
}
html[data-theme="dark"] .badge-open {
  background: rgba(37,99,200,.25) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59,130,246,.3) !important;
}
html[data-theme="dark"] .badge-pending {
  background: rgba(217,119,6,.22) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(217,119,6,.35) !important;
}
html[data-theme="dark"] .badge-closed {
  background: rgba(255,255,255,.08) !important;
  color: #7a91b0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .badge-expired {
  background: rgba(220,38,38,.22) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(220,38,38,.35) !important;
}
/* Bootstrap badges u dark temi */
html[data-theme="dark"] .badge.bg-success {
  background: rgba(22,163,74,.22) !important;
  color: #4ade80 !important;
}
html[data-theme="dark"] .badge.bg-danger {
  background: rgba(220,38,38,.22) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .badge.bg-warning {
  background: rgba(217,119,6,.22) !important;
  color: #fbbf24 !important;
}
html[data-theme="dark"] .badge.bg-primary {
  background: rgba(37,99,200,.35) !important;
  color: #93c5fd !important;
}

/* 4. TABLE ROW SEPARATORS — plave nijanse umjesto bijele */
html[data-theme="dark"] .bpr-table thead th {
  border-bottom: 1px solid rgba(59,130,246,.18) !important;
}
html[data-theme="dark"] .bpr-table tbody tr {
  border-bottom: 1px solid rgba(59,130,246,.1) !important;
}

/* 5. INLINE BORDER-BOTTOM u dashboard row items
   supervisor/dashboard.php koristi inline style border-bottom: var(--bpr-gray-100)
   Ovo je pokriveno gore sa --bpr-gray-100 override u :root */

/* 6. TEXT BOJA — crna slova na tamnoj pozadini
   Problem: inline style="color:#1a2744" ili var(--bpr-blue-900) */
html[data-theme="dark"] [style*="color: var(--bpr-blue-900)"],
html[data-theme="dark"] [style*="color:var(--bpr-blue-900)"],
html[data-theme="dark"] [style*="color:#0a1628"],
html[data-theme="dark"] [style*="color: #0a1628"] {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] [style*="color: var(--bpr-gray-800)"],
html[data-theme="dark"] [style*="color:var(--bpr-gray-800)"],
html[data-theme="dark"] [style*="color: var(--bpr-gray-700)"],
html[data-theme="dark"] [style*="color:var(--bpr-gray-700)"] {
  color: #c5d3e0 !important;
}
/* bpr-gray-900 i slicne tamne vrijednosti */
html[data-theme="dark"] [style*="color: var(--bpr-gray-9"],
html[data-theme="dark"] [style*="color:var(--bpr-gray-9"] {
  color: #e2e8f0 !important;
}

/* 7. BREADCRUMB + PAGE HEADER na dark */
html[data-theme="dark"] .bpr-page-header h1 {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .breadcrumb-item a { color: #60a5fa !important; }
html[data-theme="dark"] .breadcrumb-item.active { color: #c5d3e0 !important; }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.25) !important;
}

/* 8. INLINE STYLES sa font boja u originalnim views-ima */
html[data-theme="dark"] [style*="color: var(--bpr-blue-800)"],
html[data-theme="dark"] [style*="color:var(--bpr-blue-800)"] {
  color: #93c5fd !important;
}

/* 9. STAT CARD — boja vrijednosti */
html[data-theme="dark"] .stat-value {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .stat-label {
  color: #6e85a0 !important;
}

/* 10. QUICK ACTIONS dugmad u dashboard */
html[data-theme="dark"] .btn-outline-primary {
  color: #7dc4ff !important;
  border-color: rgba(59,130,246,.5) !important;
}
html[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(59,130,246,.18) !important;
  color: #bfdbfe !important;
  border-color: #3b82f6 !important;
}

/* 11. Sidebar collapsed - ikona centrirana */
.bpr-sidebar.collapsed #sidebar-collapse-btn {
  margin-left: auto;
  margin-right: auto;
}

/* 12. Poboljsani tooltip za collapsed sidebar */
.bpr-sidebar.collapsed .sidebar-link[data-label]::after {
  background: #1d3a6e;
  border: 1px solid rgba(59,130,246,.3);
  font-size: .78rem;
  padding: .25rem .65rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* 13. Light theme - badge ispravke */
html[data-theme="light"] .badge-accepted {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}
html[data-theme="light"] .badge-open {
  background: #dbeafe !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe !important;
}
html[data-theme="light"] .badge-pending {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}
html[data-theme="light"] .badge-closed {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}


/* ── FIX22: Theme toggle u sidebar headeru ─────────────────── */

/* Collapsed: sakrij brand link tekst, dugmad ostaju vidljiva */
.bpr-sidebar.collapsed #sidebar-brand {
  display: none !important;
}
.bpr-sidebar.collapsed #sidebar-header {
  justify-content: center !important;
  gap: .5rem !important;
  padding: 0 .5rem !important;
}

/* Theme toggle - hover efekt */
#theme-toggle:hover {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* Light theme - theme toggle u sidebar headeru */
html[data-theme="light"] #theme-toggle {
  background: rgba(0,0,0,.12) !important;
  border-color: rgba(0,0,0,.18) !important;
  color: rgba(255,255,255,.9) !important;
}
html[data-theme="light"] #theme-toggle:hover {
  background: rgba(0,0,0,.2) !important;
}

/* Stariji #theme-toggle fixed CSS vise ne treba (bio na dnu ekrana) */

/* ── FIX26: Sidebar scrollable ───────────────────────────────── */
.bpr-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.15) transparent !important;
}
.bpr-sidebar::-webkit-scrollbar { width: 4px; }
.bpr-sidebar::-webkit-scrollbar-track { background: transparent; }
.bpr-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.bpr-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
/* Collapsed: bez scrolla */
.bpr-sidebar.collapsed { overflow-y: hidden !important; }

/* =============================================================
   FIX27 — Subscription banner, pulse, notification badge
   ============================================================= */

/* Subscription baneri na dashboardu */
.bpr-sub-banner {
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.bpr-sub-inactive {
  background: rgba(220,38,38,.18);
  border: 1px solid rgba(220,38,38,.35);
  color: #fca5a5;
}
.bpr-sub-inactive strong { color: #fecaca; }
.bpr-sub-warning {
  background: rgba(217,119,6,.18);
  border: 1px solid rgba(217,119,6,.35);
  color: #fbbf24;
}
.bpr-sub-warning strong { color: #fde68a; }

/* Light theme overrides */
html[data-theme="light"] .bpr-sub-inactive {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
html[data-theme="light"] .bpr-sub-inactive strong { color: #7f1d1d; }
html[data-theme="light"] .bpr-sub-warning {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
html[data-theme="light"] .bpr-sub-warning strong { color: #78350f; }

/* Pulse animacija za neaktivnu pretplatu */
@keyframes bprPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
  50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}
.bpr-pulse { animation: bprPulse 2s ease-in-out infinite; }


/* =============================================================
   PUBLIC FRONTEND — light scope (fix37)
   :root nosi tamne theme varijable (admin default). Javni layout
   nema data-theme, pa ih ovde override-ujemo na nivou body-ja.
   ============================================================= */
body.bpr-public {
  --theme-card-bg:       #ffffff;
  --theme-card-border:   var(--bpr-gray-200);
  --theme-header-bg:     transparent;
  --theme-header-border: var(--bpr-gray-100);
  --theme-text:          var(--bpr-gray-800);
  --theme-text-muted:    var(--bpr-gray-500);
  --theme-input-bg:      #ffffff;
  --theme-input-border:  var(--bpr-gray-300);
  --theme-modal-bg:      #ffffff;
}
body.bpr-public .bpr-card .card-body         { color: var(--bpr-gray-800); }
body.bpr-public .bpr-card .form-check-label  { color: var(--bpr-gray-700); }

/* Oznaka opcionog polja u pretrazi */
.bpr-optional {
  display: inline-block;
  margin-left: .3rem;
  font-size: .68rem;
  font-weight: 500;
  color: var(--bpr-gray-400);
  text-transform: lowercase;
  letter-spacing: .02em;
  vertical-align: 1px;
}
.bpr-search-hint {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--bpr-blue-600);
  background: var(--bpr-blue-50);
  border: 1px solid var(--bpr-blue-100);
  border-radius: 7px;
  padding: .35rem .65rem;
}
.bpr-search-hint i { color: var(--bpr-teal-600); font-size: .9rem; flex-shrink: 0; }
@media (min-width: 768px) {
  .bpr-search-hint { white-space: nowrap; }
}

/* ── City autocomplete ─────────────────────────────────── */
.bpr-ac { position: relative; }
.bpr-ac.loading::after {
  content: '';
  position: absolute;
  right: .7rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--bpr-blue-100);
  border-top-color: var(--bpr-blue-500);
  border-radius: 50%;
  animation: bprAcSpin .6s linear infinite;
}
@keyframes bprAcSpin { to { transform: rotate(360deg); } }

.bpr-ac-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1050;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bpr-gray-200);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(10,22,40,.16);
  max-height: 260px;
  overflow-y: auto;
  min-width: 220px;
}
.bpr-ac-menu.show { display: block; }

.bpr-ac-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .6rem;
  border-radius: 6px;
  font-size: .88rem;
  color: var(--bpr-gray-800);
  cursor: pointer;
  line-height: 1.3;
}
.bpr-ac-item i { color: var(--bpr-blue-400); font-size: .9rem; flex-shrink: 0; }
.bpr-ac-item strong { color: var(--bpr-blue-600); font-weight: 700; }
.bpr-ac-item.active { background: var(--bpr-blue-50); }
.bpr-ac-city { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpr-ac-country { font-size: .76rem; color: var(--bpr-gray-500); white-space: nowrap; }
.bpr-ac-count {
  font-size: .7rem;
  font-weight: 600;
  color: var(--bpr-gray-500);
  background: var(--bpr-gray-100);
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.bpr-ac-empty {
  padding: .5rem .6rem;
  font-size: .84rem;
  color: var(--bpr-gray-500);
  font-style: italic;
}

/* =============================================================
   CART — izbor hotela + zahtev (fix37)
   ============================================================= */

/* Kartica: klik vodi na detalj, ne selektuje */
.hotel-card { cursor: default; }
.hotel-card .selected-badge { z-index: 2; }
.hotel-card .hotel-img-link { display: block; overflow: hidden; }
.hotel-card .hotel-img-link .hotel-img { transition: transform .35s ease; }
.hotel-card .hotel-img-link:hover .hotel-img { transform: scale(1.04); }
.hotel-card a.hotel-name { text-decoration: none; color: var(--bpr-blue-900); }
.hotel-card a.hotel-name:hover { color: var(--bpr-blue-500); text-decoration: underline; }

/* Toggle dugme (kartica + detalj) */
.btn-cart-toggle .lbl-sel { display: none; }
.btn-cart-toggle.is-selected .lbl-add { display: none; }
.btn-cart-toggle.is-selected .lbl-sel { display: inline; }
.btn-cart-toggle.is-selected,
.btn-cart-toggle.is-selected:hover {
  background: var(--bpr-success, #16a34a);
  border-color: var(--bpr-success, #16a34a);
  color: #fff;
}
.btn-cart-toggle.is-busy { opacity: .6; pointer-events: none; }
.btn-cart-lg { padding: .65rem; font-size: .95rem; font-weight: 600; }

/* Navbar dugme */
.nav-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  font-size: .86rem;
  padding: .35rem .75rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s;
}
.nav-cart-btn:hover { background: rgba(255,255,255,.16); }
.nav-cart-btn i { font-size: 1.05rem; }
.cart-count-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--bpr-teal-400);
  color: var(--bpr-blue-900);
  font-size: .72rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* Bar na dnu */
.rfq-bar { padding: .75rem 1.5rem; }
@media (max-width: 575.98px) {
  .rfq-bar { flex-direction: column; gap: .5rem; padding: .7rem 1rem; }
}

/* Modal */
.bpr-cart-dialog { max-width: 560px; }
.bpr-cart { border: none; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.bpr-cart .modal-header { border-bottom: 1px solid var(--bpr-gray-100); padding: 1rem 1.4rem .9rem; align-items: flex-start; }
.bpr-cart .modal-title { font-weight: 700; color: var(--bpr-blue-900); font-size: 1.12rem; }
.bpr-cart .modal-body  { padding: 1.1rem 1.4rem; }
.bpr-cart .modal-footer { border-top: 1px solid var(--bpr-gray-100); padding: .8rem 1.4rem; }
.bpr-cart .form-label { font-size: .8rem; margin-bottom: .2rem; }

.cart-stepper {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0 0 .45rem;
  padding: 0;
  font-size: .74rem;
  color: var(--bpr-gray-400);
  font-weight: 600;
}
.cart-stepper li { display: flex; align-items: center; gap: .3rem; }
.cart-stepper li span {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bpr-gray-100); color: var(--bpr-gray-500); font-size: .68rem;
}
.cart-stepper li.active { color: var(--bpr-blue-600); }
.cart-stepper li.active span { background: var(--bpr-blue-500); color: #fff; }
.cart-stepper li.done span { background: var(--bpr-success, #16a34a); color: #fff; }

.cart-sub { font-size: .8rem; color: var(--bpr-gray-500); }
.cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

.cart-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem;
  border: 1px solid var(--bpr-gray-200);
  border-radius: 10px;
  background: #fff;
}
.cart-item.is-new { border-color: var(--bpr-blue-400); background: var(--bpr-blue-50); animation: cartPop .5s ease; }
@keyframes cartPop { 0% { transform: scale(.98); } 60% { transform: scale(1.01); } 100% { transform: scale(1); } }
.cart-thumb { flex-shrink: 0; width: 72px; height: 54px; border-radius: 7px; overflow: hidden; display: block; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-img-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bpr-blue-100), var(--bpr-blue-200)); color: var(--bpr-blue-400);
}
.cart-info { flex: 1 1 auto; min-width: 0; }
.cart-brand { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bpr-blue-500); }
.cart-name {
  display: block; font-weight: 600; font-size: .92rem; color: var(--bpr-blue-900); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-name:hover { color: var(--bpr-blue-500); }
.cart-loc { font-size: .78rem; color: var(--bpr-gray-500); }
.cart-loc i { font-size: .8rem; margin-right: 2px; }
.cart-remove {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--bpr-gray-200); background: #fff; color: var(--bpr-gray-500);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s;
}
.cart-remove:hover { border-color: #fca5a5; background: #fef2f2; color: #dc2626; }

.cart-slot {
  border: 1.5px dashed var(--bpr-gray-200);
  border-radius: 10px;
  padding: .7rem;
  font-size: .8rem;
  color: var(--bpr-gray-400);
  display: flex; align-items: center; gap: .4rem;
}
.cart-empty { text-align: center; padding: 1.5rem 0 .5rem; color: var(--bpr-gray-500); font-size: .9rem; }
.cart-empty i { font-size: 2.2rem; color: var(--bpr-gray-300); display: block; margin-bottom: .4rem; }

.cart-summary { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.cart-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--bpr-blue-50); color: var(--bpr-blue-700);
  border: 1px solid var(--bpr-blue-100); border-radius: 20px;
  font-size: .76rem; font-weight: 600; padding: .2rem .6rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-section {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bpr-gray-400); margin: .9rem 0 .45rem;
}
.cart-profile {
  background: var(--bpr-gray-50); border: 1px solid var(--bpr-gray-200); border-radius: 9px;
  padding: .65rem .85rem; font-size: .88rem; color: var(--bpr-gray-800);
  display: grid; gap: .25rem;
}
.cart-profile i { color: var(--bpr-blue-400); margin-right: .4rem; }
.cart-privacy {
  margin-top: .9rem; font-size: .78rem; color: var(--bpr-blue-700);
  background: var(--bpr-blue-50); border: 1px solid var(--bpr-blue-100);
  border-radius: 8px; padding: .5rem .75rem;
}
.cart-done { text-align: center; padding: .8rem 0 .3rem; }
.cart-done-icon i { font-size: 3.2rem; color: var(--bpr-success, #16a34a); }
.cart-done h5 { font-weight: 700; color: var(--bpr-blue-900); margin: .4rem 0 .6rem; }
.cart-done p { font-size: .9rem; color: var(--bpr-gray-600); margin-bottom: .5rem; }

/* Uzrast dece/beba u zahtevu (fix38) */
.cart-ages-box {
  background: var(--bpr-blue-50);
  border: 1px solid var(--bpr-blue-100);
  border-radius: 9px;
  padding: .6rem .75rem .7rem;
}
.cart-ages-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--bpr-blue-600);
  margin-bottom: .45rem;
}
.cart-ages-title i { color: var(--bpr-teal-600); margin-right: .2rem; }
.cart-ages-box .form-label { font-size: .74rem; color: var(--bpr-gray-600); }

/* =============================================================
   HOTEL DETAIL — mapa, info, alternativni hoteli (fix39)
   ============================================================= */
.hotel-location-card { overflow: hidden; }
.hotel-map {
  height: 230px;
  width: 100%;
  border-bottom: 1px solid var(--bpr-gray-100);
  z-index: 0;
}
.hotel-map .leaflet-popup-content { margin: 8px 12px; font-size: .85rem; }
.hotel-info-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .28rem 0;
  color: var(--bpr-gray-700);
  line-height: 1.4;
}
.hotel-info-row i { color: var(--bpr-blue-400); font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.hotel-info-row a { color: var(--bpr-blue-500); word-break: break-all; }
.btn-book-direct { font-weight: 600; padding: .6rem; }

.hotel-alternatives {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bpr-gray-200);
}
.hotel-alternatives .alt-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bpr-blue-900);
  margin: 0 0 .25rem;
}
.hotel-alternatives .alt-sub { font-size: .85rem; color: var(--bpr-gray-500); }
.hotel-alternatives .alt-sub i { color: var(--bpr-blue-400); margin-right: .2rem; }

/* =============================================================
   PUBLIC NAVBAR — responsive + hamburger (fix41)
   ============================================================= */
html { overflow-x: hidden; }   /* bez horizontalnog skrola na mobilnom (samo html — body bi pokvario sticky navbar) */

.bpr-nav {
  background: var(--bpr-blue-900);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.bpr-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.bpr-nav-brand {
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.bpr-nav-brand:hover { color: #fff; }
.bpr-nav-brand span { color: var(--bpr-blue-400); }

.bpr-nav-center { align-items: center; gap: 1.5rem; }
.bpr-nav-center a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; }
.bpr-nav-center a:hover { color: #fff; }

.bpr-nav-right { display: flex; align-items: center; gap: .5rem; }

.bpr-nav-link {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .88rem;
  padding: .35rem .7rem;
  border-radius: 6px;
  white-space: nowrap;
}
.bpr-nav-link i { margin-right: 4px; }
.bpr-nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.bpr-nav-link.is-danger { color: rgba(255,110,110,.95); }

.bpr-nav-cta {
  background: var(--bpr-blue-500);
  color: #fff;
  text-decoration: none;
  font-size: .88rem;
  padding: .4rem .9rem;
  border-radius: 7px;
  font-weight: 600;
  white-space: nowrap;
}
.bpr-nav-cta:hover { background: var(--bpr-blue-600); color: #fff; }

/* Hamburger */
.bpr-nav-toggle {
  width: 40px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}
.bpr-nav-toggle:hover { background: rgba(255,255,255,.16); }
.bpr-nav-toggle .icon-close { display: none; }
.bpr-nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.bpr-nav-toggle[aria-expanded="true"] .icon-close { display: inline; }

/* Mobilni: korpa iste visine kao hamburger */
@media (max-width: 991.98px) {
  .nav-cart-btn { height: 38px; padding: 0 .7rem; }
}

/* Padajući meni */
.bpr-nav-menu {
  display: flex;
  flex-direction: column;
  padding-top: .25rem;
  padding-bottom: .75rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.bpr-nav-menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-size: .95rem;
  padding: .7rem .4rem;
  border-radius: 7px;
}
.bpr-nav-menu a i { font-size: 1.1rem; color: var(--bpr-blue-300); width: 20px; text-align: center; }
.bpr-nav-menu a:hover, .bpr-nav-menu a:active { background: rgba(255,255,255,.08); color: #fff; }
.bpr-nav-menu a.is-danger { color: rgba(255,110,110,.95); }
.bpr-nav-menu a.is-danger i { color: inherit; }
.bpr-nav-menu-sep { height: 1px; background: rgba(255,255,255,.1); margin: .3rem 0; }

/* Home pretraga: Destination + sklopiva opciona polja (fix42) */
.bpr-dest .bpr-dest-icon {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--bpr-blue-400); font-size: 1.1rem; pointer-events: none; z-index: 1;
}
.bpr-dest .form-control { padding-left: 2.3rem; height: 46px; font-size: 1rem; }
.bpr-ac-sep { color: var(--bpr-gray-400); }

.bpr-more-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: none; padding: .15rem 0;
  color: var(--bpr-blue-500); font-size: .88rem; font-weight: 600; cursor: pointer;
}
.bpr-more-toggle:hover { color: var(--bpr-blue-700); text-decoration: underline; }
.bpr-more-toggle .bpr-more-chevron { transition: transform .2s; }
.bpr-more-toggle[aria-expanded="true"] .bpr-more-chevron { transform: rotate(180deg); }
#search-more > .row { padding-top: .25rem; }

/* ── Kartica hotela: dugmad (View Details + Select) ───────────────────── */
.hotel-card { display: flex; flex-direction: column; height: 100%; }
.hotel-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.hotel-card-actions {
  display: flex;
  gap: .5rem;
  margin-top: auto;          /* dugmad uvek na dnu kartice, poravnata u redu */
  padding-top: .85rem;
}
.hotel-card-actions .btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .45rem .5rem;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

/* View Details — plava */
.btn-card-details {
  background: var(--bpr-blue-500);
  border: 1px solid var(--bpr-blue-500);
  color: #fff;
}
.btn-card-details:hover,
.btn-card-details:focus {
  background: var(--bpr-blue-600);
  border-color: var(--bpr-blue-600);
  color: #fff;
}

/* Select — narandžasta sa plavim fontom */
.btn-card-select {
  background: #f59e0b;
  border: 1px solid #f59e0b;
  color: var(--bpr-blue-800);
}
.btn-card-select:hover,
.btn-card-select:focus {
  background: #ea8a00;
  border-color: #ea8a00;
  color: var(--bpr-blue-900);
}
.btn-card-select:focus-visible,
.btn-card-details:focus-visible {
  outline: 2px solid var(--bpr-blue-300);
  outline-offset: 2px;
  box-shadow: none;
}
/* Izabran hotel: ostaje zeleno "Selected" (pravilo .btn-cart-toggle.is-selected) */

/* ── Logo u navigaciji ─────────────────────────────────────────────────── */
.bpr-nav-brand { display: inline-flex; align-items: center; line-height: 0; }
.bpr-nav-logo  { height: 46px; width: auto; display: block; }
@media (max-width: 575.98px) {
  .bpr-nav-logo { height: 38px; }
}