/* ==========================================================================
   MNS HRIS — Components (.hr-* prefix klase)
   --------------------------------------------------------------------------
   Sve komponente scope-ane pod .hr-redesign tako da SAMO stranice sa
   wrapper-om <div class="hr-redesign tenant-mns"> dobijaju ovaj dizajn.
   Stari Bootstrap-only templates ostaju netaknuti.

   Tokeni dolaze iz tokens.css (na :root, dostupni svuda).

   ZA NOVU STRANICU: dodaj wrapper <div class="hr-redesign tenant-mns"> oko
   sadržaja, koristi .hr-* klase, dobijaš puni v2 dizajn.
   ========================================================================== */

/* ==========================================================================
   1. PAGE LAYOUT
   ========================================================================== */
.hr-redesign .hr-page {
  background: var(--hr-bg);
  min-height: calc(100vh - var(--topbar-height, 56px));
  margin: -1.25rem;
  padding: var(--hr-space-5);
  position: relative;
}
.hr-redesign .hr-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hr-space-4);
  margin-bottom: var(--hr-space-4);
  flex-wrap: wrap;
}
.hr-redesign .hr-page__breadcrumb {
  font-size: var(--hr-font-size-sm);
  color: var(--hr-text-muted);
  margin-bottom: var(--hr-space-1);
}
.hr-redesign .hr-page__title {
  margin: 0;
  font-size: var(--hr-h2-size);
  font-weight: var(--hr-h2-weight);
  letter-spacing: var(--hr-h2-ls);
  color: var(--hr-text);
  line-height: var(--hr-leading-tight);
}
.hr-redesign .hr-page__count {
  font-size: var(--hr-font-size);
  color: var(--hr-text-muted);
  margin-top: var(--hr-space-1);
}
.hr-redesign .hr-page__actions {
  display: flex;
  gap: var(--hr-space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   2. BUTTONS — .hr-btn
   ========================================================================== */
.hr-redesign .hr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hr-space-2);
  padding: 8px 14px;
  font-size: var(--hr-font-size);
  font-weight: 500;
  border-radius: var(--hr-radius);
  border: 1px solid var(--hr-border);
  background: var(--hr-white);
  color: var(--hr-text);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--hr-transition), border-color var(--hr-transition), color var(--hr-transition), box-shadow var(--hr-transition);
  line-height: 1.3;
  font-family: var(--hr-font);
}
.hr-redesign .hr-btn:hover {
  background: var(--hr-bg-hover);
  border-color: var(--hr-text-dim);
  color: var(--hr-text);
  text-decoration: none;
}
.hr-redesign .hr-btn:focus-visible {
  outline: none;
  box-shadow: var(--hr-ring);
}
.hr-redesign .hr-btn--primary {
  background: var(--hr-primary);
  border-color: var(--hr-primary);
  color: var(--hr-white);
  font-weight: 600;
}
.hr-redesign .hr-btn--primary:hover {
  background: var(--hr-primary-dark);
  border-color: var(--hr-primary-dark);
  color: var(--hr-white);
}
.hr-redesign .hr-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--hr-text-muted);
}
.hr-redesign .hr-btn--ghost:hover {
  background: var(--hr-primary-soft);
  color: var(--hr-primary);
  border-color: transparent;
}
.hr-redesign .hr-btn--sm { padding: 4px 10px; font-size: var(--hr-font-size-sm); }
.hr-redesign .hr-btn--lg { padding: 10px 18px; font-size: var(--hr-font-size-lg); }

/* ==========================================================================
   3. FORM INPUTS — .hr-input / .hr-select
   ========================================================================== */
.hr-redesign .hr-input,
.hr-redesign .hr-select {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--hr-font);
  font-size: var(--hr-font-size);
  color: var(--hr-text);
  background: var(--hr-white);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  transition: border-color var(--hr-transition), box-shadow var(--hr-transition);
  appearance: none;
  -webkit-appearance: none;
}
.hr-redesign .hr-input:focus,
.hr-redesign .hr-select:focus {
  outline: none;
  border-color: var(--hr-primary);
  box-shadow: var(--hr-ring-soft);
}
.hr-redesign .hr-input::placeholder { color: var(--hr-text-dim); }

.hr-redesign .hr-search { position: relative; flex: 1 1 280px; max-width: 380px; }
.hr-redesign .hr-search .hr-input { padding-left: 34px; }
.hr-redesign .hr-search__icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hr-text-dim);
  font-size: var(--hr-icon-size-sm) !important;
  pointer-events: none;
}
.hr-redesign .hr-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A6B7C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.hr-redesign .hr-filter-bar {
  display: flex;
  gap: var(--hr-space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--hr-space-4);
}
.hr-redesign .hr-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hr-space-3) var(--hr-space-4);
  margin-bottom: var(--hr-space-4);
}
@media (max-width: 992px) { .hr-redesign .hr-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hr-redesign .hr-filter-grid { grid-template-columns: 1fr; } }
.hr-redesign .hr-filter-grid__field label {
  font-size: var(--hr-font-size-sm);
  color: var(--hr-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.hr-redesign .hr-bulk-bar {
  margin-left: auto;
  display: flex;
  gap: var(--hr-space-2);
  align-items: center;
  background: var(--hr-primary-soft);
  padding: 6px 12px;
  border-radius: var(--hr-radius);
}
.hr-redesign .hr-bulk-bar__count {
  font-size: var(--hr-font-size-sm);
  color: var(--hr-primary);
  font-weight: 600;
}

/* ==========================================================================
   4. TABLE — .hr-table
   ========================================================================== */
.hr-redesign .hr-table-wrap {
  background: var(--hr-white);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  overflow: hidden;
  box-shadow: var(--hr-shadow-xs);
}
.hr-redesign .hr-table {
  /* width:100% + table-layout:auto → tabela se UKLAPA u širinu kontejnera i
     LOMI duge ćelije u više redova (kao stari Bootstrap .table). NE koristimo
     min-width:max-content jer je forsirao horizontalni scroll i kad ima praznog
     prostora. .hr-table-wrap{overflow-x:auto} ostaje kao sigurnosna mreža —
     scroll se javi SAMO kad ni zalomljen sadržaj ne može da stane (npr. 12+
     kolona na uskom ekranu). */
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hr-font-size);
  margin: 0;
  color: var(--hr-text);
}
.hr-redesign .hr-table thead th {
  background: var(--hr-bg-soft);
  border-bottom: 1px solid var(--hr-border);
  padding: 10px 12px;
  text-align: left;
  font-size: var(--hr-font-size-sm);
  text-transform: uppercase;
  color: var(--hr-text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hr-redesign .hr-table thead th.sortable { cursor: pointer; user-select: none; }
.hr-redesign .hr-table thead th.sortable:hover { color: var(--hr-primary); }
.hr-redesign .hr-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hr-border-soft);
  vertical-align: middle;
  color: var(--hr-text);
}
.hr-redesign .hr-table tbody tr { transition: background var(--hr-transition); }
/* Zebra stripes — VIDLJIVE razlike, oba reda obojena (BEZ čisto bijele) */
.hr-redesign .hr-table tbody tr:nth-child(odd)  { background: var(--hr-row-1); }
.hr-redesign .hr-table tbody tr:nth-child(even) { background: var(--hr-row-2); }
.hr-redesign .hr-table tbody tr:hover { background: var(--hr-primary-softer); }
.hr-redesign .hr-table tbody tr.is-selected { background: var(--hr-primary-soft); }
.hr-redesign .hr-table tbody tr:last-child td { border-bottom: 0; }

/* Responsive — horizontalni scroll za uske ekrane, sticky actions kolona */
.hr-redesign .hr-table-wrap { overflow-x: auto; max-width: 100%; }
.hr-redesign .hr-table th:last-child,
.hr-redesign .hr-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
}
/* Sticky actions kolona mora pratiti zebra boje da se ne prelijepi preko */
.hr-redesign .hr-table tbody tr:nth-child(odd) td:last-child  { background: var(--hr-row-1); }
.hr-redesign .hr-table tbody tr:nth-child(even) td:last-child { background: var(--hr-row-2); }
.hr-redesign .hr-table tbody tr:hover td:last-child { background: var(--hr-primary-softer); }
.hr-redesign .hr-table thead th:last-child {
  background: var(--hr-bg-soft);
  box-shadow: -4px 0 6px -2px rgba(0,0,0,0.08);
}
.hr-redesign .hr-table tbody td:last-child { box-shadow: -4px 0 6px -2px rgba(0,0,0,0.06); }

/* Dropdown u akcijama (sticky last column): meni MORA da pobjegne iz wrap
   overflow-a (inače ga overflow-y:hidden siječe) i da se podigne iznad sticky
   ćelija ostalih redova (koje su z-index:1). Kad je dropdown otvoren:
   - wrap dobija overflow:visible (meni se vidi cijeli)
   - ćelija sa otvorenim menijem ide na visok z-index (iznad ostalih redova) */
.hr-redesign .hr-table-wrap:has(.dropdown-menu.show) { overflow: visible; }
.hr-redesign .hr-table td:last-child:has(.dropdown.show),
.hr-redesign .hr-table td:last-child:has(.dropdown-menu.show) { z-index: 40; }
.hr-redesign .hr-table .dropdown-menu.show { z-index: var(--hr-z-dropdown, 1055); }

.hr-redesign .hr-table__cell--muted    { color: var(--hr-text-muted); }
.hr-redesign .hr-table__cell--checkbox { width: 36px; }
.hr-redesign .hr-table__cell--actions  { width: 40px; color: var(--hr-text-dim); text-align: right; }

/* ==========================================================================
   4b. GENERIC CARDS / DETAIL / FORM — koristi za detail/create/update/delete
       stranice umjesto per-template <style>. Promjena ovdje = svuda.
   ========================================================================== */
/* Card */
.hr-redesign .hr-card {
  background: var(--hr-white);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  box-shadow: var(--hr-shadow-xs);
  overflow: hidden;
  margin-bottom: var(--hr-space-4);
}
.hr-redesign .hr-card__header {
  padding: var(--hr-space-4) var(--hr-space-5);
  border-bottom: 1px solid var(--hr-border);
  background: var(--hr-bg-soft);
  display: flex;
  align-items: center;
  gap: var(--hr-space-2);
}
.hr-redesign .hr-card__header .material-icons,
.hr-redesign .hr-card__header i { color: var(--hr-primary); }
.hr-redesign .hr-card__title {
  margin: 0;
  font-size: var(--hr-font-size-lg);
  font-weight: 700;
  color: var(--hr-text);
}
.hr-redesign .hr-card__body { padding: var(--hr-space-5); }

/* 2-column detail layout (main + sidebar), collapses on narrow */
.hr-redesign .hr-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--hr-space-5);
  align-items: start;
}
@media (max-width: 992px) {
  .hr-redesign .hr-detail-grid { grid-template-columns: 1fr; }
}

/* Label/value rows inside a detail card */
.hr-redesign .hr-info-row {
  display: flex;
  align-items: flex-start;
  padding: var(--hr-space-3) 0;
  border-bottom: 1px solid var(--hr-border-soft);
  gap: var(--hr-space-4);
}
.hr-redesign .hr-info-row:last-child { border-bottom: 0; }
.hr-redesign .hr-info-row__label {
  flex: 0 0 160px;
  font-size: var(--hr-font-size-sm);
  color: var(--hr-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hr-redesign .hr-info-row__value { flex: 1; color: var(--hr-text); min-width: 0; word-break: break-word; }

/* Form field grid — 2 cols, collapses */
.hr-redesign .hr-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hr-space-4);
}
@media (max-width: 768px) {
  .hr-redesign .hr-form-grid { grid-template-columns: 1fr; }
}
.hr-redesign .hr-form-grid__full { grid-column: 1 / -1; }

/* Form footer (Cancel / Save) — right aligned, normal button size */
.hr-redesign .hr-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--hr-space-2);
  padding: var(--hr-space-4) var(--hr-space-5);
  border-top: 1px solid var(--hr-border);
  background: var(--hr-bg-soft);
}

/* Confirm-delete warning box */
.hr-redesign .hr-delete-warning {
  display: flex;
  gap: var(--hr-space-3);
  padding: var(--hr-space-4);
  background: var(--hr-status-inactive-bg);
  border: 1px solid var(--hr-status-inactive-dot);
  border-radius: var(--hr-radius);
  color: var(--hr-status-inactive-fg);
  margin-bottom: var(--hr-space-4);
}
.hr-redesign .hr-delete-warning .material-icons,
.hr-redesign .hr-delete-warning i { color: var(--hr-status-inactive-dot); flex-shrink: 0; }

/* ==========================================================================
   4c. DASHBOARD — .hr-stat-grid / .hr-stat / .hr-panel
       Generički dashboard pattern (generalizacija home2-stat). Koristi za
       SVE dashboard/dashboard-like stranice: stat kartice + paneli.
   ========================================================================== */
.hr-redesign .hr-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hr-space-4);
  margin-bottom: var(--hr-space-5);
}
.hr-redesign .hr-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-redesign .hr-stat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 992px) { .hr-redesign .hr-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hr-redesign .hr-stat-grid { grid-template-columns: 1fr; } }

.hr-redesign .hr-stat {
  background: var(--hr-white);
  border-radius: var(--hr-radius-lg);
  padding: var(--hr-space-4);
  box-shadow: var(--hr-shadow-xs);
  border: 1px solid var(--hr-border);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--hr-space-3);
  transition: transform var(--hr-transition), box-shadow var(--hr-transition), border-color var(--hr-transition);
}
a.hr-stat { cursor: pointer; }
a.hr-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--hr-shadow);
  border-color: var(--hr-primary-soft);
  color: inherit;
  text-decoration: none;
}
.hr-redesign .hr-stat__top { display: flex; align-items: center; justify-content: space-between; }
.hr-redesign .hr-stat__icon {
  width: 44px; height: 44px;
  border-radius: var(--hr-radius);
  background: var(--hr-primary-soft);
  color: var(--hr-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hr-redesign .hr-stat__icon .material-icons { font-size: var(--hr-icon-size-lg) !important; }
.hr-redesign .hr-stat__value {
  font-size: var(--hr-font-size-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--hr-text);
  letter-spacing: -0.02em;
}
.hr-redesign .hr-stat__label { font-size: var(--hr-font-size-sm); color: var(--hr-text-muted); font-weight: 500; }
.hr-redesign .hr-stat__trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--hr-font-size-xs); font-weight: 600;
  padding: 3px 8px; border-radius: var(--hr-radius-pill);
}
.hr-redesign .hr-stat__trend--up   { background: var(--hr-status-active-bg);   color: var(--hr-status-active-fg); }
.hr-redesign .hr-stat__trend--down { background: var(--hr-status-inactive-bg); color: var(--hr-status-inactive-fg); }
.hr-redesign .hr-stat__trend--neutral { background: var(--hr-bg-soft); color: var(--hr-text-muted); }
/* Colored icon variants */
.hr-redesign .hr-stat--success .hr-stat__icon { background: var(--hr-status-active-bg);   color: var(--hr-status-active-fg); }
.hr-redesign .hr-stat--info    .hr-stat__icon { background: var(--hr-status-info-bg);     color: var(--hr-status-info-fg); }
.hr-redesign .hr-stat--warning .hr-stat__icon { background: var(--hr-status-leave-bg);    color: var(--hr-status-leave-fg); }
.hr-redesign .hr-stat--danger  .hr-stat__icon { background: var(--hr-status-inactive-bg); color: var(--hr-status-inactive-fg); }
.hr-redesign .hr-stat--purple  .hr-stat__icon { background: var(--hr-status-purple-bg);   color: var(--hr-status-purple-fg); }
/* Optional colored left accent border */
.hr-redesign .hr-stat--accent { border-left: 3px solid var(--hr-primary); }

/* Dashboard panel = alias of .hr-card, plus a 2-col layout helper */
.hr-redesign .hr-dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--hr-space-5);
  align-items: start;
}
@media (max-width: 992px) { .hr-redesign .hr-dash-grid { grid-template-columns: 1fr; } }

.hr-redesign .hr-loading-overlay { position: relative; }
.hr-redesign .hr-loading-overlay.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  z-index: 10;
}
.hr-redesign .hr-loading-overlay.is-loading::before {
  content: '⏳';
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  z-index: 11;
}

/* ==========================================================================
   5. AVATAR
   ========================================================================== */
.hr-redesign .hr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hr-primary);
  color: var(--hr-white);
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
  font-family: var(--hr-font);
}
.hr-redesign .hr-avatar--sm { width: 28px; height: 28px; font-size: 10px; }
.hr-redesign .hr-avatar--md { width: 32px; height: 32px; font-size: 11px; }
.hr-redesign .hr-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.hr-redesign .hr-avatar--xl { width: 72px; height: 72px; font-size: 24px; }
.hr-redesign .hr-avatar--img {
  object-fit: cover;
  background: var(--hr-bg-soft);
  border: 1px solid var(--hr-border);
}

.hr-redesign .hr-employee-cell {
  display: flex;
  align-items: center;
  gap: var(--hr-space-3);
}
.hr-redesign .hr-employee-cell__name {
  font-weight: 600;
  white-space: nowrap;
  color: var(--hr-text);
}
.hr-redesign .hr-employee-cell__id {
  font-size: var(--hr-font-size-sm);
  color: var(--hr-text-dim);
  white-space: nowrap;
}

/* ==========================================================================
   6. STATUS BADGE — .hr-badge
   ========================================================================== */
.hr-redesign .hr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--hr-radius-pill);
  font-size: var(--hr-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}
.hr-redesign .hr-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.hr-redesign .hr-badge--active   { background: var(--hr-status-active-bg);   color: var(--hr-status-active-fg); }
.hr-redesign .hr-badge--leave    { background: var(--hr-status-leave-bg);    color: var(--hr-status-leave-fg); }
.hr-redesign .hr-badge--trial    { background: var(--hr-status-trial-bg);    color: var(--hr-status-trial-fg); }
.hr-redesign .hr-badge--inactive { background: var(--hr-status-inactive-bg); color: var(--hr-status-inactive-fg); }
.hr-redesign .hr-badge--info     { background: var(--hr-status-info-bg);     color: var(--hr-status-info-fg); }
.hr-redesign .hr-badge--purple   { background: var(--hr-status-purple-bg);   color: var(--hr-status-purple-fg); }

/* ==========================================================================
   7. PROGRESS / METRICS
   ========================================================================== */
.hr-redesign .hr-progress { display: flex; align-items: center; gap: 6px; }
.hr-redesign .hr-progress__bar {
  width: 50px;
  height: 4px;
  background: var(--hr-border);
  border-radius: 2px;
  overflow: hidden;
}
.hr-redesign .hr-progress__fill {
  height: 100%;
  background: var(--hr-primary);
  transition: width 300ms ease;
}
.hr-redesign .hr-progress__value { font-weight: 600; font-size: var(--hr-font-size); }

.hr-redesign .hr-stat-card {
  background: var(--hr-bg-soft);
  padding: 10px 12px;
  border-radius: var(--hr-radius);
  border-left: 3px solid var(--hr-primary);
}
.hr-redesign .hr-stat-card__label {
  font-size: 10px;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.hr-redesign .hr-stat-card__value {
  font-size: var(--hr-font-size-lg);
  font-weight: 700;
  color: var(--hr-text);
  margin-top: 2px;
}

/* ==========================================================================
   8. DRAWER (Bootstrap offcanvas override)
   ========================================================================== */
.hr-redesign .offcanvas-end.hr-drawer,
.offcanvas-end.hr-drawer {
  width: 720px;
  max-width: 95vw;
  border: none;
  background: var(--hr-white);
  box-shadow: var(--hr-shadow-lg);
}
.hr-redesign .hr-drawer__header,
.hr-drawer__header {
  padding: var(--hr-space-5);
  border-bottom: 1px solid var(--hr-border);
}
.hr-drawer__header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--hr-space-4);
}
.hr-drawer__crumb {
  font-size: var(--hr-font-size-sm);
  color: var(--hr-text-muted);
}
.hr-drawer__close {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--hr-border-soft);
  border-radius: var(--hr-radius-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--hr-text);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.hr-drawer__close:hover { background: var(--hr-border); }
.hr-drawer__profile {
  display: flex;
  gap: var(--hr-space-4);
  align-items: flex-start;
}
.hr-drawer__profile-info { flex: 1; min-width: 0; }
.hr-drawer__profile-name { margin: 0; font-size: 20px; font-weight: 700; color: var(--hr-text); }
.hr-drawer__profile-position { font-size: var(--hr-font-size-lg); color: var(--hr-text-muted); margin-top: 2px; }
.hr-drawer__profile-meta {
  display: flex;
  gap: var(--hr-space-3);
  margin-top: var(--hr-space-3);
  align-items: center;
  flex-wrap: wrap;
}
.hr-drawer__profile-meta-item {
  font-size: var(--hr-font-size-sm);
  color: var(--hr-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hr-drawer__actions { display: flex; gap: var(--hr-space-2); margin-left: auto; }
.hr-drawer__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hr-space-3);
  margin-top: var(--hr-space-4);
}
.hr-drawer__tabs {
  border-bottom: 1px solid var(--hr-border);
  padding: 0 var(--hr-space-5);
  display: flex;
  gap: var(--hr-space-1);
  overflow-x: auto;
}
.hr-drawer__tab {
  padding: 12px 14px;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--hr-text-muted);
  font-weight: 500;
  font-size: var(--hr-font-size);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--hr-font);
  transition: color var(--hr-transition), border-color var(--hr-transition);
}
.hr-drawer__tab:hover { color: var(--hr-text); }
.hr-drawer__tab.is-active {
  color: var(--hr-primary);
  border-bottom-color: var(--hr-primary);
  font-weight: 600;
}
.hr-drawer__body {
  flex: 1;
  overflow: auto;
  padding: var(--hr-space-5);
}
.hr-drawer__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--hr-text-muted);
}

.hr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.hr-field { padding: 8px 0; border-bottom: 1px solid var(--hr-border-soft); }
.hr-field__label {
  font-size: 11px;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 2px;
}
.hr-field__value { font-size: var(--hr-font-size); color: var(--hr-text); }

/* ==========================================================================
   9. PAGINATION — .hr-pagination
   ========================================================================== */
.hr-redesign .hr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hr-space-1);
  padding: var(--hr-space-4) 0;
  margin: 0;
  list-style: none;
}
.hr-redesign .hr-pagination .page-item .page-link,
.hr-redesign .hr-pagination > a, .hr-redesign .hr-pagination > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-sm);
  background: var(--hr-white);
  color: var(--hr-text);
  font-size: var(--hr-font-size);
  text-decoration: none;
  cursor: pointer;
}
.hr-redesign .hr-pagination .page-item.active .page-link,
.hr-redesign .hr-pagination .is-active {
  background: var(--hr-primary);
  border-color: var(--hr-primary);
  color: var(--hr-white);
}
.hr-redesign .hr-pagination .page-item.disabled .page-link,
.hr-redesign .hr-pagination .is-disabled {
  color: var(--hr-text-dim);
  cursor: not-allowed;
}

/* ==========================================================================
   10. EMPTY STATE
   ========================================================================== */
.hr-redesign .hr-empty {
  text-align: center;
  padding: var(--hr-space-7) var(--hr-space-4);
  background: var(--hr-white);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-lg);
  color: var(--hr-text-muted);
}
.hr-redesign .hr-empty__icon {
  font-size: 56px !important;
  opacity: 0.4;
  margin-bottom: var(--hr-space-3);
  display: block;
  color: var(--hr-text-dim);
}
.hr-redesign .hr-empty__title {
  font-size: var(--hr-font-size-lg);
  font-weight: 600;
  color: var(--hr-text);
  margin-bottom: var(--hr-space-2);
}
.hr-redesign .hr-empty__sub {
  font-size: var(--hr-font-size);
  margin-bottom: var(--hr-space-4);
}

/* ==========================================================================
   11. UTILITIES
   ========================================================================== */
.hr-redesign .hr-text-muted { color: var(--hr-text-muted); }
.hr-redesign .hr-text-dim   { color: var(--hr-text-dim); }
.hr-redesign .hr-text-primary { color: var(--hr-primary); }

.hr-redesign .hr-view-toggle {
  display: inline-flex;
  background: var(--hr-bg-soft);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  padding: 2px;
}
.hr-redesign .hr-view-toggle a {
  padding: 6px 12px;
  font-size: var(--hr-font-size-sm);
  font-weight: 500;
  color: var(--hr-text-muted);
  text-decoration: none;
  border-radius: 4px;
  transition: background var(--hr-transition);
}
.hr-redesign .hr-view-toggle a:hover { color: var(--hr-text); }
.hr-redesign .hr-view-toggle a.is-active {
  background: var(--hr-white);
  color: var(--hr-primary);
  font-weight: 600;
  box-shadow: var(--hr-shadow-sm);
}

/* ==========================================================================
   11.5. FORM FOOTER BUTTONS — kompaktnije
   Smanjuje veličinu Bootstrap dugmadi unutar form footera u .hr-redesign
   stranicama da nisu prevelike (Bojan zahtjev 2026-05-29).
   ========================================================================== */
.hr-redesign .goal-form__footer .btn {
  padding: 6px 14px;
  font-size: var(--hr-font-size-sm);
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .hr-redesign .hr-page { padding: var(--hr-space-3); margin: -1.25rem; }
  .hr-redesign .hr-page__header { flex-direction: column; align-items: flex-start; }
  .hr-redesign .hr-drawer__stats { grid-template-columns: repeat(2, 1fr); }
  .hr-redesign .hr-fields { grid-template-columns: 1fr; }
}