/* --- OSNOVNI SCROLLBAR --- */
::-webkit-scrollbar {
  width: 10px; /* širina scrollbar-a */
  height: 10px; /* visina za horizontalni */
  background: var(--bgcolor-table-striped); /* bez pozadine */
}

/* --- TRAKA (TRACK) --- */
::-webkit-scrollbar-track {
  background: var(--bgcolor-table-striped); /* nema pozadinu */
}

/* --- “HVATALJKA” (THUMB) --- */
::-webkit-scrollbar-thumb {
  background-color: rgba(33, 33, 33, 0.7);
  border-radius: 10px;
  border: 2px solid transparent; /* mali razmak */
  background-clip: content-box; /* da boja ne ide do ivica */
  transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(33, 33, 33, 0.9); /* jača boja kad pređeš mišem */
}

/* --- STRELICE GORE/DOLE --- */
::-webkit-scrollbar-button {
  background: var(--bgcolor-table-striped); /* bez pozadine */
  height: 12px; /* veličina strelica */
  width: 12px;
}

/* --- FIREFOX PODRŠKA --- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(33, 33, 33, 0.7) transparent;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --bg-color-primary: #f2f2f2;

  --color-primary: #2196f3;
  --color-primary-hover: #1976d2;

  --color-success: #43a047;
  --color-success-hover: #388e3c;

  --color-warning: #ffca28;
  --color-warning-hover: #fbc02d;

  --color-danger: #f44336;
  --color-danger-hover: #d32f2f;

  --color-dark: #353535;
  --color-dark-hover: #000000;

  --color-secondary: #9e9e9e;
  --color-secondary-hover: #757575;

  --color-info: #63c2d1;
  --color-info-hover: #4ab2c3;

  --bgcolor-table-striped: #cfe2ff;
  --bgcolor-suggestion: #e5e8ff;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--bg-color-primary);
}

.swal-padding-top .swal2-html-container {
  padding-top: 40px; /* ovde stavljaš koliko želiš */
}

.modal-xxl {
  max-width: 85% !important; /* ili koliko ti treba */
}

.modal-xlg {
  max-width: 50% !important; /* ili koliko ti treba */
}

.bg-dark {
  background-color: var(--color-dark) !important;
}

.bg-danger {
  background-color: var(--color-danger) !important;
}

.form-check-input {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.page-item.active .page-link {
  background-color: var(--color-primary);
}

.btn-check:checked + .btn {
  background-color: var(--color-primary);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-success:hover {
  background-color: var(--color-success-hover);
  border-color: var(--color-success-hover);
}

.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.btn-warning:hover {
  background-color: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.btn-dark {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-dark:hover {
  background-color: var(--color-dark-hover);
  border-color: var(--color-dark-hover);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: #fff;
}

.btn-info:hover {
  background-color: var(--color-info-hover);
  border-color: var(--color-info-hover);
  color: #fff;
}

.btn-light.active.filter {
  background-color: var(--color-primary);
  color: #fff;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

label {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

hr {
  margin-block: 5px;
}

.table td,
.table th {
  vertical-align: middle;
}

#loaderOverlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner-border {
  width: 4rem;
  height: 4rem;
}

#previewContainer {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  min-height: 400px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.image-wrapper {
  width: 100%;
  min-height: 400px;
  max-height: 400px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.12)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: grab;
}

.image-wrapper:active {
  cursor: grabbing;
}

#previewImage {
  max-width: 100%;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

.form-control[readonly] {
  background-color: #f8f9fa;
}

.nav-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  /* PERFECT CENTER */
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}

.nav-overlay:hover {
  background: rgba(0, 0, 0, 0.15);
}

.left-overlay {
  left: 0;
}

.right-overlay {
  right: 0;
}

.nav-overlay i {
  font-size: 40px;
  color: white;
  pointer-events: none;
}

/* From Uiverse.io by SmookyDev */
.tooltipInfo {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltipInfo:hover .tooltipInfotext {
  visibility: visible;
  opacity: 1;
}

.tooltipInfotext {
  visibility: hidden;
  background-color: rgba(117, 117, 117, 0.9);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 9999;

  top: 125%;
  left: 50%;
  transform: translateX(-50%); /* ← ovo je ključ */

  opacity: 0;
  transition: opacity 0.3s;
}

.tooltipInfo .icon {
  display: inline-block;
  font-size: 18px;
  background-color: transparent;
  color: var(--color-info);
  border-radius: 50%;
  text-align: center;
}