/* ═══════════════════════════════════════════════════════════════════════
   RAIFFEISEN BANK — Premium Enterprise Portal
   Official RBI Brand Colour Palette (from Brand Guidelines PDF)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. OFFICIAL RBI DESIGN TOKENS ───────────────────────────────────── */
:root {
  /* PRIMARY PALETTE */
  --rbi-yellow:        #FEE600;   /* Primary Yellow — Pantone Yellow C */
  --rbi-yellow-1:      #FFF0A6;   /* Yellow 1 — Pantone 2002 C */
  --rbi-yellow-2:      #FFD403;   /* Yellow 2 — Pantone 109 C */
  --rbi-yellow-3:      #F9BB30;   /* Yellow 3 — Pantone 143C */
  --rbi-yellow-dark:   #D4BF00;   /* Hover state (10% darker) */

  /* MONO PALETTE */
  --rbi-white:         #FFFFFF;
  --rbi-off-black:     #2B2D33;   /* Off Black — Pantone Black 2 C */
  --rbi-warm-grey-50:  #F8F6F2;   /* Warm Grey 50% — Pantone Warm Grey 1 C 50% */
  --rbi-warm-grey:     #F1EDE6;   /* Warm Grey — Pantone Warm Grey 1 C */
  --rbi-warm-grey-dark:#E5DDD2;   /* Darker warm grey (borders, dividers) */

  /* SECONDARY — GREEN */
  --rbi-green-hi:      #A3E2CC;   /* Green Highlight — Pantone 572 C */
  --rbi-green-mid:     #67D0AB;   /* Green Midtone — Pantone 338 C */
  --rbi-green-deep:    #225B45;   /* Green Deep — Pantone 568 C */

  /* SECONDARY — CORAL */
  --rbi-coral-hi:      #FFB9A5;   /* Coral Highlight — Pantone 162 C */
  --rbi-coral-mid:     #FF8B6B;   /* Coral Midtone — Pantone 2022 C */
  --rbi-coral-deep:    #C65C4A;   /* Coral Deep — Pantone 7618 C */

  /* SEMANTIC (built from official palette) */
  --rbi-success-bg:    #A3E2CC;   /* Green Highlight */
  --rbi-success-text:  #225B45;   /* Green Deep */
  --rbi-success-light: #E8F8F2;   /* very light green tint */
  --rbi-error-bg:      #FFB9A5;   /* Coral Highlight */
  --rbi-error-text:    #C65C4A;   /* Coral Deep */
  --rbi-error-light:   #FFF0EC;   /* very light coral tint */
  --rbi-warning-bg:    #FFF0A6;   /* Yellow 1 */
  --rbi-warning-text:  #8A6500;   /* derived dark amber */
  --rbi-info-bg:       #FFF9D6;   /* Yellow tint for info states */
  --rbi-info-text:     #5C4A00;   /* Dark amber for info text */

  /* TYPOGRAPHY SCALE */
  --font-xs:   11px;
  --font-sm:   12px;
  --font-base: 13px;
  --font-md:   14px;
  --font-lg:   16px;
  --font-xl:   18px;
  --font-2xl:  22px;
  --font-3xl:  26px;

  /* TEXT COLORS */
  --text-primary:   var(--rbi-off-black);
  --text-secondary: #5A5A5A;
  --text-muted:     #7A7A7A;
  --text-faint:     #9A9A9A;

  /* LAYOUT */
  --app-header-h:      64px;
  --app-sidebar-w:     200px;
  --app-sidebar-mini:  64px;
  --app-content-pad:   28px;
  --app-max-w:         1400px;

  /* COMPONENT */
  --app-radius:        12px;
  --app-radius-sm:     8px;
  --app-radius-xs:     6px;
  --app-shadow:        0 1px 3px rgba(43,45,51,0.06), 0 4px 12px rgba(43,45,51,0.06);
  --app-shadow-md:     0 2px 8px rgba(43,45,51,0.08), 0 8px 28px rgba(43,45,51,0.10);
  --app-border:        1px solid var(--rbi-warm-grey);
  --app-border-2:      1px solid var(--rbi-warm-grey-dark);
  --t-fast:            0.12s ease;
  --t-base:            0.18s ease;
}

/* ── 2. RESET & BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-font-smoothing: antialiased; }

body {
  font-family: Arial, 'Segoe UI', sans-serif;
  color: var(--rbi-off-black);
  background: var(--rbi-warm-grey-50);
  line-height: 1.5;
}

a { color: var(--rbi-off-black); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 3. MUDBLAZOR OVERRIDES ───────────────────────────────────────────── */

/* AppBar — Primary Yellow */
.mud-appbar {
  background: var(--rbi-yellow) !important;
  color: var(--rbi-off-black) !important;
  box-shadow: 0 1px 0 rgba(43,45,51,0.10) !important;
  border-bottom: 1px solid rgba(43,45,51,0.06) !important;
}
.mud-appbar .mud-icon-button,
.mud-appbar .mud-icon-button svg { color: var(--rbi-off-black) !important; }
.mud-appbar .mud-icon-button:hover {
  background: rgba(43,45,51,0.07) !important;
  border-radius: 8px !important;
}
.mud-toolbar { min-height: var(--app-header-h) !important; }

/* Drawer — White */
.mud-drawer {
  background: var(--rbi-white) !important;
  border-right: var(--app-border) !important;
  box-shadow: none !important;
}

/* NavLinks */
.mud-nav-link {
  border-radius: var(--app-radius-xs) !important;
  margin: 1px 8px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #555 !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.mud-nav-link:hover {
  background: var(--rbi-yellow-1) !important;
  color: var(--rbi-off-black) !important;
}
.mud-nav-link.active {
  background: var(--rbi-yellow-1) !important;
  color: var(--rbi-off-black) !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--rbi-yellow) !important;
  padding-left: 9px !important;
}

/* Nav group title */
.mud-nav-group .mud-nav-group-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: #aaa !important;
  padding: 14px 20px 4px !important;
}

/* Main content */
.mud-main-content {
  background: var(--rbi-warm-grey-50) !important;
  padding-top: var(--app-header-h) !important;
}

/* Paper */
.mud-paper { border-radius: var(--app-radius) !important; box-shadow: var(--app-shadow) !important; }

/* Table */
.mud-table { border-radius: var(--app-radius) !important; }
.mud-table-head .mud-table-cell {
  background: var(--rbi-yellow-1) !important;
  color: var(--rbi-off-black) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 2px solid var(--rbi-yellow-2) !important;
  padding: 13px 16px !important;
  white-space: nowrap !important;
}
.mud-table-body .mud-table-cell {
  padding: 12px 16px !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--rbi-warm-grey-50) !important;
  vertical-align: middle !important;
}
.mud-table-body .mud-table-row:hover { background: rgba(248,246,242,0.9) !important; }
.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none !important; }

/* Primary button — Yellow 2 (#FFD403) for better contrast than pure yellow */
.mud-button-filled.mud-button-filled-primary,
.mud-button-filled.mud-button-filled-warning {
  background: var(--rbi-yellow) !important;
  color: var(--rbi-off-black) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-warning:hover {
  background: var(--rbi-yellow-dark) !important;
  box-shadow: none !important;
}
.mud-button-filled.mud-button-filled-error {
  background: var(--rbi-coral-deep) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.mud-button-filled.mud-button-filled-success {
  background: var(--rbi-green-deep) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.mud-button { border-radius: var(--app-radius-xs) !important; text-transform: none !important; }

/* Input */
.mud-input-outlined .mud-input-outlined-border { border-radius: var(--app-radius-xs) !important; }
.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--rbi-off-black) !important;
  border-width: 1.5px !important;
}
.mud-input-helper-text { font-size: 12px !important; }

/* Tabs */
.mud-tab-slider { background: var(--rbi-off-black) !important; height: 2px !important; }
.mud-tab.mud-tab-active { color: var(--rbi-off-black) !important; font-weight: 700 !important; }
.mud-tab { font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.mud-tabs-toolbar { border-bottom: var(--app-border) !important; }

/* Chip */
.mud-chip { border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; height: 24px !important; }

/* Snackbar */
.mud-snackbar { border-radius: var(--app-radius-sm) !important; font-size: 14px !important; }
.mud-snackbar.mud-alert-filled-success { background: var(--rbi-green-deep) !important; }
.mud-snackbar.mud-alert-filled-error   { background: var(--rbi-coral-deep) !important; }
.mud-snackbar.mud-alert-filled-warning { background: var(--rbi-yellow-3) !important; color: var(--rbi-off-black) !important; }

/* Dialog */
.mud-dialog { border-radius: var(--app-radius) !important; }
.mud-dialog-title { font-weight: 700 !important; font-size: 17px !important; color: var(--rbi-off-black) !important; }

/* Select */
.mud-select-input .mud-input-root { font-size: 14px !important; }

/* Progress */
.mud-progress-circular svg circle { stroke: var(--rbi-yellow-2) !important; }

/* ── 4. LAYOUT ────────────────────────────────────────────────────────── */
.sidebar-footer {
  border-top: var(--app-border);
  padding: 10px 8px;
  background: var(--rbi-white);
}

/* ── 5. TYPOGRAPHY ────────────────────────────────────────────────────── */
.page-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--rbi-off-black) !important;
  letter-spacing: -0.4px !important;
  line-height: 1.2 !important;
}
.page-subtitle {
  font-size: var(--font-md) !important;
  color: var(--text-secondary) !important;
  margin-top: 5px !important;
  line-height: 1.5 !important;
}
.section-title { font-size: 15px; font-weight: 700; color: var(--rbi-off-black); margin-bottom: 2px; }
.section-subtitle { font-size: var(--font-base); color: var(--text-secondary); }

/* ── 6. PAGE HEADER ───────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: var(--app-border);
  gap: 16px;
  flex-wrap: wrap;
}
.page-header-left  { flex: 1; min-width: 0; border-left: 4px solid var(--rbi-yellow); padding-left: 16px; }
.page-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── 7. CARDS ─────────────────────────────────────────────────────────── */
.card {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  padding: 24px;
  box-shadow: var(--app-shadow);
  border: var(--app-border);
}
.card-sm  { padding: 18px 20px; }
.card-lg  { padding: 32px; }

/* Metric card */
.metric-card {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  padding: 18px 20px;
  box-shadow: var(--app-shadow);
  border: var(--app-border);
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 104px;
  box-sizing: border-box;
}
.metric-value  { font-size: 26px; font-weight: 700; color: var(--rbi-off-black); line-height: 1; }
.metric-label  { font-size: var(--font-sm); color: var(--text-secondary); font-weight: 500; margin-top: 3px; }

.metric-card.clickable {
  cursor: pointer;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.metric-card.clickable:hover {
  box-shadow: var(--app-shadow-md);
  border-color: var(--rbi-warm-grey-dark);
  transform: translateY(-2px);
}

/* Quick action card */
.qa-card {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  padding: 22px 24px;
  box-shadow: var(--app-shadow);
  border: var(--app-border);
  cursor: pointer;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.qa-card:hover {
  box-shadow: var(--app-shadow-md);
  border-color: var(--rbi-warm-grey-dark);
  transform: translateY(-2px);
}
.qa-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; flex-shrink: 0;
}
.qa-title { font-size: 15px; font-weight: 700; color: var(--rbi-off-black); margin-bottom: 6px; }
.qa-desc  { font-size: var(--font-base); color: var(--text-secondary); line-height: 1.5; flex: 1; }
.qa-arrow { margin-top: 16px; color: var(--text-faint); font-size: var(--font-base); font-weight: 600; display: flex; align-items: center; gap: 4px; transition: color var(--t-fast); }
.qa-card:hover .qa-arrow { color: var(--rbi-off-black); }

/* Hero card */
.hero-card {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  padding: 28px 32px;
  box-shadow: var(--app-shadow);
  border: var(--app-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; overflow: hidden; position: relative; margin-bottom: 28px;
}
.hero-card::after {
  content: '';
  position: absolute; right: -50px; top: -50px;
  width: 220px; height: 220px;
  background: var(--rbi-yellow-1);
  border-radius: 50%; opacity: 0.5;
}
.hero-content { flex: 1; min-width: 0; }
.hero-tag   { font-size: 11.5px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.hero-title { font-size: 22px; font-weight: 700; color: var(--rbi-off-black); line-height: 1.3; margin-bottom: 10px; }
.hero-desc  { font-size: 14px; color: #6B6560; line-height: 1.6; }
.hero-visual {
  flex-shrink: 0; width: 88px; height: 88px;
  background: var(--rbi-yellow-1);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}

/* Service status */
.service-row {
  display: flex; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--rbi-warm-grey-50);
  gap: 10px;
}
.service-row:last-child { border-bottom: none; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-ok      { background: var(--rbi-green-mid); }
.dot-warn    { background: var(--rbi-yellow-3); }
.dot-error   { background: var(--rbi-coral-deep); }
.dot-unknown { background: #ddd; }

/* ── 8. BADGES (RBI palette based) ───────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4;
}
/* Status badges */
.badge-active   { background: var(--rbi-success-light); color: var(--rbi-green-deep); border: 1px solid var(--rbi-green-hi); }
.badge-inactive { background: var(--rbi-warm-grey-50); color: #777; border: 1px solid var(--rbi-warm-grey); }
.badge-warning  { background: var(--rbi-yellow-1);    color: #8A6500; }
.badge-error    { background: var(--rbi-error-light);  color: var(--rbi-coral-deep); border: 1px solid var(--rbi-coral-hi); }
.badge-info     { background: var(--rbi-info-bg);      color: var(--rbi-info-text); }
.badge-neutral  { background: var(--rbi-warm-grey-50); color: #777; border: 1px solid var(--rbi-warm-grey-dark); }

/* Solid, high-contrast pill — used for prominent status indicators (orders table, order detail) */
.badge-pill { border-radius: 999px; padding: 4px 12px; font-weight: 700; color: #fff; border: none; }

/* Role badges (from RBI palette) */
.role-admin   { background: var(--rbi-off-black);   color: var(--rbi-yellow);    padding: 3px 10px; }
.role-ca      { background: var(--rbi-off-black);   color: var(--rbi-yellow-1);  padding: 3px 10px; }
.role-co      { background: var(--rbi-green-deep);  color: var(--rbi-white);     padding: 3px 10px; }
.role-user    { background: var(--rbi-warm-grey);   color: var(--text-secondary); padding: 3px 10px; }
.role-viewer  { background: var(--rbi-coral-hi);    color: var(--rbi-coral-deep); padding: 3px 10px; }
.role-default { background: var(--rbi-warm-grey-dark); color: var(--text-secondary); padding: 3px 10px; }

/* Notification badge */
.notif-badge .mud-badge-dot { background: var(--rbi-coral-deep) !important; }

/* ── 9. FILTER BAR ────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--rbi-white);
  border: var(--app-border);
  border-radius: var(--app-radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(43,45,51,0.04);
}

/* Visual separator between filter groups in a compact filter bar */
.filter-divider { width: 1px; height: 34px; background: var(--rbi-warm-grey-dark); flex-shrink: 0; align-self: center; }
@media (max-width: 900px) { .filter-divider { display: none; } }

/* ── 9b. ORDERS TABLE (Pregled narudžbi) ─────────────────────────────── */
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table thead th {
  background: var(--rbi-yellow);
  border-bottom: 2px solid var(--rbi-yellow-dark);
}
.orders-table thead th.sortable-th { transition: background-color .12s ease-in-out; }
.orders-table thead th.sortable-th:hover { background: var(--rbi-yellow-dark); }
.orders-table tbody tr { border-bottom: 1px solid var(--rbi-warm-grey); }
.orders-table tbody tr:last-child { border-bottom: none; }
.orders-table tbody tr:nth-child(even) { background: var(--rbi-warm-grey-50); }
.orders-table-row { cursor: pointer; transition: background-color .12s ease-in-out; }
.orders-table-row:hover { background: var(--rbi-yellow-1) !important; }

/* Table footer (record count + pagination), visually attached to the table card */
.orders-table-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--rbi-warm-grey);
  font-size: 13px; color: #6B6560;
}

/* ── 9c. WORKFLOW STEPPER (Detalji narudžbe → Workflow) ──────────────── */
.workflow-stepper { display: flex; align-items: flex-start; width: 100%; }
.workflow-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  flex: 1 1 0; min-width: 0; gap: 8px;
}
.workflow-step-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  border: 2px solid var(--rbi-warm-grey-dark); color: #B5AFA6; background: var(--rbi-white);
  transition: all var(--t-base);
}
.workflow-step.is-done .workflow-step-dot {
  background: var(--rbi-green-deep); border-color: var(--rbi-green-deep); color: #fff;
}
.workflow-step.is-current .workflow-step-dot {
  background: var(--rbi-yellow); border-color: var(--rbi-yellow-dark); color: var(--rbi-off-black);
  box-shadow: 0 0 0 5px rgba(254,230,0,0.22);
}
.workflow-step-label {
  font-size: 12.5px; font-weight: 600; color: #B5AFA6; line-height: 1.35; padding: 0 4px;
}
.workflow-step.is-done .workflow-step-label,
.workflow-step.is-current .workflow-step-label { color: var(--rbi-off-black); }
.workflow-step.is-current .workflow-step-label { font-weight: 700; }
.workflow-step-current {
  display: inline-flex; max-width: 100%; padding: 2px 10px; border-radius: 999px;
  background: var(--rbi-yellow); color: var(--rbi-off-black);
  font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.workflow-step-connector { flex: 0 1 56px; height: 2px; background: var(--rbi-warm-grey-dark); margin-top: 17px; }
.workflow-step-connector.is-done { background: var(--rbi-green-deep); }

@media (max-width: 760px) {
  .workflow-stepper { flex-direction: column; align-items: stretch; }
  .workflow-step {
    flex-direction: row; text-align: left; align-items: flex-start;
    gap: 12px; padding-bottom: 18px; position: relative;
  }
  .workflow-step:not(:last-child)::after {
    content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px;
    background: var(--rbi-warm-grey-dark);
  }
  .workflow-step.is-done:not(:last-child)::after { background: var(--rbi-green-deep); }
  .workflow-step-connector { display: none; }
  .workflow-step-label { padding: 0; padding-top: 6px; }
  .workflow-step-current { margin-top: 4px; }
}

/* ── 10. STATES ───────────────────────────────────────────────────────── */
.loading-state {
  display: flex; align-items: center; justify-content: center;
  padding: 64px 24px; flex-direction: column; gap: 16px; color: #aaa;
}
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 24px; color: #aaa; text-align: center;
}
.empty-state-icon  { font-size: 52px !important; opacity: 0.2; margin-bottom: 14px; color: var(--rbi-off-black) !important; }
.empty-state-title { font-size: 16px; font-weight: 600; color: #777; margin-bottom: 6px; }
.empty-state-text  { font-size: 14px; color: #aaa; max-width: 320px; line-height: 1.6; }

.error-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  background: var(--rbi-error-light);
  border: 1px solid var(--rbi-coral-hi);
  border-radius: var(--app-radius-sm);
  color: var(--rbi-coral-deep); font-size: 14px;
}

/* ── 11. LOGIN PAGE ───────────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  background: var(--rbi-warm-grey-50);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
/* Subtle decorative — uses official Yellow 1 */
.login-wrapper::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 420px; height: 420px;
  background: var(--rbi-yellow-1);
  border-radius: 50%; opacity: 0.6;
}
.login-wrapper::after {
  content: '';
  position: absolute; bottom: -80px; left: -80px;
  width: 280px; height: 280px;
  background: var(--rbi-warm-grey);
  border-radius: 50%; opacity: 0.7;
}

.login-card {
  background: var(--rbi-white);
  border-radius: 18px;
  padding: 40px 44px;
  width: 100%; max-width: 460px;
  box-shadow: 0 4px 24px rgba(43,45,51,0.10), 0 1px 4px rgba(43,45,51,0.06);
  border: 1px solid var(--rbi-warm-grey);
  position: relative; z-index: 1;
}

.login-brand {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 32px; padding-bottom: 24px;
  border-bottom: 1px solid var(--rbi-warm-grey);
}
.login-logo-box {
  width: 48px; height: 48px;
  background: var(--rbi-off-black);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.login-brand-text { font-size: 14px; font-weight: 700; color: var(--rbi-off-black); line-height: 1.25; }
.login-brand-sub  { font-size: 11.5px; color: #777; font-weight: 400; margin-top: 2px; }

.login-title { font-size: 22px !important; font-weight: 700 !important; color: var(--rbi-off-black) !important; margin-bottom: 6px !important; }
.login-sub   { font-size: 14px !important; color: #777 !important; margin-bottom: 28px !important; line-height: 1.5 !important; }
.login-field-label { font-size: 13px; font-weight: 600; color: var(--rbi-off-black); margin-bottom: 6px; display: block; }

.login-forgot {
  font-size: var(--font-base); color: var(--rbi-off-black); text-decoration: none;
  display: inline-block; margin-bottom: 22px; margin-top: 6px;
}
.login-forgot:hover { text-decoration: underline; }

.login-btn {
  width: 100%; height: 48px !important;
  font-size: 15px !important; font-weight: 700 !important;
  border-radius: 10px !important;
  background: var(--rbi-yellow) !important;
  color: var(--rbi-off-black) !important;
  border: none !important; box-shadow: none !important; cursor: pointer;
  transition: background var(--t-fast) !important; letter-spacing: 0.2px;
  font-family: Arial, sans-serif;
}
.login-btn:hover:not(:disabled) { background: var(--rbi-yellow-dark) !important; }
.login-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

.login-footer {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--rbi-warm-grey);
  text-align: center; font-size: 12px; color: #aaa; line-height: 1.6;
}

/* ── 12. CODEBOOK SIDEBAR ─────────────────────────────────────────────── */
.cb-list-item {
  padding: 10px 14px; border-radius: var(--app-radius-xs);
  cursor: pointer; margin-bottom: 2px;
  transition: background var(--t-fast);
  border: 1.5px solid transparent; display: block;
}
.cb-list-item:hover { background: var(--rbi-warm-grey-50); }
.cb-list-item.active { background: var(--rbi-yellow-1); border-color: var(--rbi-yellow-2); }
.cb-list-label { font-size: 14px; font-weight: 500; color: var(--rbi-off-black); }
.cb-list-key   { font-size: 11px; color: #aaa; margin-top: 1px; font-family: monospace; }

/* ── 13. UTILITY ──────────────────────────────────────────────────────── */
.mono { font-family: 'Consolas', 'Courier New', monospace; font-size: 12.5px; background: var(--rbi-warm-grey-50); padding: 2px 8px; border-radius: 4px; color: var(--rbi-off-black); border: 1px solid var(--rbi-warm-grey-dark); }
.divider { border: none; border-top: var(--app-border); margin: 0; }
.text-muted  { color: #777 !important; }
.text-xs     { font-size: 12px !important; }
.text-sm     { font-size: 13px !important; }
.text-bold   { font-weight: 700 !important; }
.flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.flex-between{ display: flex !important; align-items: center !important; justify-content: space-between !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }

/* ── 14. SCROLLBAR ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rbi-warm-grey-dark); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #c5bfb7; }

/* ── 15. BLAZOR ERROR ─────────────────────────────────────────────────── */
.blazor-error-boundary {
  background: var(--rbi-error-light); border: 1px solid var(--rbi-coral-hi);
  padding: 14px 18px; border-radius: var(--app-radius-sm); color: var(--rbi-coral-deep);
}
.blazor-error-boundary::after { content: "Greška u aplikaciji. Osvježite stranicu."; }

/* ── 16. COMING SOON ──────────────────────────────────────────────────── */
.coming-soon-page {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 60vh; text-align: center;
  padding: 40px;
}
.coming-soon-badge {
  background: var(--rbi-yellow-1); color: var(--rbi-off-black);
  font-size: 12px; font-weight: 700; padding: 4px 14px;
  border-radius: 99px; margin-bottom: 20px; display: inline-block;
  border: 1px solid var(--rbi-yellow-2);
}

/* ═══ SPRINT 1 ADDITIONS ═══════════════════════════════════════════════ */

/* Placeholder — prigušeni sivkasto-bijeli tekst */
input::placeholder,
textarea::placeholder { color: #9CA3AF !important; opacity: 1 !important; }
.mud-input input::placeholder { color: #9CA3AF !important; }
.mud-input textarea::placeholder { color: #9CA3AF !important; }

/* MudTextField placeholder */
.mud-input-slot input { color: #2B2D33 !important; }
.mud-input-slot input::placeholder { color: #9CA3AF !important; font-style: normal !important; }

/* Form labels — uvijek vidljivi iznad inputa */
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2B2D33;
  margin-bottom: 6px;
}
.field-helper { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
.field-error  { font-size: 12px; color: #C65C4A; margin-top: 4px; }
.field-error-border .mud-input-outlined-border { border-color: #C65C4A !important; }

/* Input focus ring — black, not yellow */
.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: #2B2D33 !important;
  border-width: 2px !important;
}

/* Native inputs consistent style */
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  font-family: Arial, 'Segoe UI', sans-serif !important;
}

/* Login page placeholder override */
.login-card input::placeholder { color: #9CA3AF !important; }

/* NavLink text (when sidebar is narrow, hide text gracefully) */
.mud-nav-link-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Sprint 1 — status toggle za šifarnike */
.status-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; font-family: Arial, sans-serif;
  transition: opacity 0.15s;
}
.status-toggle-btn:hover { opacity: 0.85; }

/* Table action button */
.tbl-action {
  width: 30px; height: 30px; border: none; background: none;
  border-radius: 6px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; color: #9B9590;
  transition: background 0.12s, color 0.12s;
}
.tbl-action:hover { background: #F8F6F2; color: #2B2D33; }

/* Codebook values panel */
.cb-values-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid #F1EDE6;
}
.cb-values-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 24px; color: #ccc; text-align: center;
}

/* Search input native */
.search-input-native {
  width: 100%; height: 40px; padding: 0 12px 0 40px;
  border: 1px solid #E5DDD2; border-radius: 8px;
  font-size: 14px; font-family: Arial, sans-serif;
  color: #2B2D33; background: #fff; outline: none;
  transition: border-color 0.15s;
}
.search-input-native:focus { border-color: #2B2D33; }
.search-input-native::placeholder { color: #9CA3AF; }

/* Toast positioning */
.mud-snackbar-location-bottom-right { bottom: 24px !important; right: 24px !important; }

/* ── 17. ENTERPRISE CARD, BUTTONS & MISSING KLASE ────────────────────── */
.enterprise-card {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  padding: 20px 24px;
  box-shadow: var(--app-shadow);
  border: var(--app-border);
  margin-bottom: 16px;
}

.btn-primary-rbi {
  background: var(--rbi-yellow) !important;
  color: var(--rbi-off-black) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.btn-primary-rbi:hover {
  background: var(--rbi-yellow-dark) !important;
  box-shadow: none !important;
}

.button-primary-rbi {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--rbi-yellow);
  color: var(--rbi-off-black);
  font-weight: 700;
  font-size: 13.5px;
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1.5px solid var(--rbi-yellow-dark);
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
  font-family: Arial, 'Segoe UI', sans-serif;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(43,45,51,0.10);
}
.button-primary-rbi:hover {
  background: var(--rbi-yellow-dark);
  box-shadow: 0 2px 8px rgba(212,191,0,0.30);
}
.button-primary-rbi:active { transform: translateY(1px); }

/* Role chips in AccessManagement */
.role-chip-administrator { background: var(--rbi-off-black) !important; color: var(--rbi-yellow) !important; }
.role-chip-unosnik       { background: var(--rbi-yellow-1) !important; color: var(--rbi-off-black) !important; }
.role-chip-verifikator   { background: var(--rbi-warm-grey-dark) !important; color: var(--rbi-off-black) !important; }

/* Audit log status badges */
.status-active   { background: var(--rbi-success-light); color: var(--rbi-success-text); border: 1px solid var(--rbi-green-hi); }
.status-inactive { background: var(--rbi-error-light);   color: var(--rbi-error-text);   border: 1px solid var(--rbi-coral-hi); }
.status-system   { background: var(--rbi-info-bg);       color: var(--rbi-info-text); }
.status-warning  { background: var(--rbi-warning-bg);    color: var(--rbi-warning-text); }

/* Danger outline button */
.btn-danger-outline {
  color: var(--rbi-coral-deep) !important;
  border-color: var(--rbi-coral-deep) !important;
}
.btn-danger-outline:hover {
  background: var(--rbi-error-light) !important;
}

/* Nav section header */
.nav-section-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: #9B9590; padding: 10px 0 4px;
}

/* MudAlert palette override */
.mud-alert-outlined-info,
.mud-alert-filled-info {
  background: var(--rbi-info-bg) !important;
  color: var(--rbi-info-text) !important;
  border-color: var(--rbi-yellow-2) !important;
}
.mud-alert-outlined-info .mud-alert-icon,
.mud-alert-filled-info .mud-alert-icon {
  color: var(--rbi-info-text) !important;
}
.mud-alert-text-info { color: var(--rbi-info-text) !important; }

/* Disabled action buttons (coming soon) */
.btn-outline-neutral {
  border-color: var(--rbi-warm-grey-dark) !important;
  color: #9B9590 !important;
}

/* Login decorative circles — enterprise minimal */
.login-wrapper::before,
.login-wrapper::after { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   18. ORDER FORM — ENTERPRISE LAYOUT (US-1/US-2)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Resume nacrta banner ─────────────────────────────────────────────── */
.of-resume-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--rbi-yellow-1);
  border: 1px solid var(--rbi-yellow-dark);
  border-radius: var(--app-radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  color: var(--rbi-off-black);
}
.of-resume-banner-text {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.4;
}

/* ── Workspace: 3-column grid ────────────────────────────────────────── */
.of-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr 320px;
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: start;
}
.of-form-area {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.of-summary {
  grid-column: 3;
  grid-row: 1 / 3;
  position: sticky;
  top: 84px;           /* AppBar 64px + 20px gap */
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rbi-warm-grey-dark) transparent;
}

/* ── Section card ────────────────────────────────────────────────────── */
.of-card {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  border: var(--app-border);
  box-shadow: var(--app-shadow);
  overflow: hidden;
  transition: box-shadow var(--t-base);
}
.of-card:focus-within {
  box-shadow: 0 0 0 3px rgba(254,230,0,0.25), var(--app-shadow-md);
  border-color: var(--rbi-yellow-2);
}

/* Section header bar */
.of-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: var(--app-border);
  background: var(--rbi-warm-grey-50);
}
.of-card-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.of-card-icon-yellow,
.of-card-icon-green,
.of-card-icon-purple,
.of-card-icon-coral  { background: var(--rbi-yellow); color: var(--rbi-off-black); }
.of-card-title     { font-size: 13px; font-weight: 700; color: var(--rbi-off-black); }
.of-card-subtitle  { font-size: 12px; color: #9B9590; margin-top: 1px; }

/* Card body */
.of-card-body { padding: 18px 20px; }

/* Label/value grid for read-only detail sections (Detalji narudžbe) */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
@media (max-width: 680px) { .detail-grid { grid-template-columns: 1fr; } }

/* ── Field group ─────────────────────────────────────────────────────── */
.of-field { margin-bottom: 14px; }
.of-field:last-child { margin-bottom: 0; }

.of-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #4A4A52;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.of-label-req::after {
  content: '*';
  color: #C65C4A;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
}

/* ── Selectable cards (npr. Tip procjene) ───────────────────────────────── */
.of-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.of-option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--rbi-white);
  border: var(--app-border);
  border-radius: var(--app-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.of-option-card:hover {
  border-color: var(--rbi-yellow-2);
  box-shadow: 0 2px 8px rgba(43, 45, 51, 0.08);
}
.of-option-card-active {
  border-color: var(--rbi-yellow-2);
  background: var(--rbi-yellow-1);
}
.of-option-card-active:hover {
  border-color: var(--rbi-yellow-2);
}
.of-option-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rbi-warm-grey-dark);
  color: var(--rbi-off-black);
}
.of-option-card-active .of-option-card-icon {
  background: var(--rbi-yellow-2);
  color: var(--rbi-off-black);
}
.of-option-card-title { font-size: 13.5px; font-weight: 700; color: var(--rbi-off-black); }
.of-option-card-desc  { font-size: 11.5px; color: #9B9590; line-height: 1.4; }
.of-option-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  color: var(--rbi-yellow-dark);
}

/* Validation message */
.of-val-msg {
  font-size: 11.5px;
  color: var(--rbi-coral-deep);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.of-val-ok {
  font-size: 11.5px;
  color: var(--rbi-green-deep);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.of-warn-msg {
  font-size: 11.5px;
  color: var(--rbi-yellow-dark);
  background: var(--rbi-yellow-1);
  border-radius: var(--app-radius-sm);
  padding: 6px 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Branch info card ────────────────────────────────────────────────── */
.of-branch-info {
  background: var(--rbi-warm-grey-50);
  border: var(--app-border);
  border-radius: var(--app-radius-sm);
  padding: 10px 14px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  animation: of-fade-in 0.18s ease;
}
.of-branch-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9B9590;
  margin-bottom: 4px;
}

/* ── Summary panel ───────────────────────────────────────────────────── */
.of-summary-card {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  border: var(--app-border);
  box-shadow: var(--app-shadow);
  overflow: hidden;
}
.of-summary-header {
  background: var(--rbi-off-black);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.of-summary-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--rbi-yellow);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.of-summary-body { padding: 16px 18px; }

/* Summary field row */
.of-sum-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rbi-warm-grey);
}
.of-sum-row:last-child { border-bottom: none; }
.of-sum-key   { font-size: 11.5px; color: #9B9590; flex-shrink: 0; min-width: 80px; }
.of-sum-val   { font-size: 13px; font-weight: 600; color: var(--rbi-off-black); word-break: break-word; }
.of-sum-empty { font-size: 13px; color: #C9C4BB; font-style: italic; }

/* Generated title box */
.of-title-box {
  background: linear-gradient(135deg, #FFFDE7, #FFF9C4);
  border: 1.5px solid var(--rbi-yellow-2);
  border-radius: var(--app-radius-sm);
  padding: 12px 14px;
  margin: 12px 0;
}
.of-title-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #9B8A00;
  margin-bottom: 5px;
}
.of-title-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--rbi-off-black);
  line-height: 1.5;
}

/* Validation status */
.of-val-status { margin-top: 12px; }
.of-val-status-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #9B9590;
  margin-bottom: 8px;
}
.of-val-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.of-val-dot-ok   { width: 18px; height: 18px; border-radius: 50%; background: var(--rbi-success-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.of-val-dot-pend { width: 18px; height: 18px; border-radius: 50%; background: var(--rbi-warm-grey); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Progress bar */
.of-progress-wrap { margin-top: 16px; padding-top: 14px; border-top: var(--app-border); }
.of-progress-meta { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 7px; }
.of-progress-pct  { font-weight: 700; color: var(--rbi-off-black); }
.of-progress-bar  { height: 6px; border-radius: 3px; background: var(--rbi-warm-grey); overflow: hidden; }
.of-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rbi-yellow-2), var(--rbi-yellow));
  transition: width 0.4s ease;
}

/* ── Brze akcije (summary panel) ──────────────────────────────────────── */
.of-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: var(--app-border);
}
.of-quick-actions .of-btn-submit,
.of-quick-actions .of-btn-draft,
.of-quick-actions .of-btn-cancel {
  width: 100%;
  justify-content: center;
  min-width: 0;
}

/* Autosave indicator */
.of-autosave-indicator {
  font-size: 11.5px;
  color: #9B9590;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  justify-content: center;
}

/* Primary submit button */
.of-btn-submit {
  background: var(--rbi-yellow) !important;
  color: var(--rbi-off-black) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  height: 40px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  transition: background var(--t-fast), opacity var(--t-fast);
  min-width: 180px;
  justify-content: center;
}
.of-btn-submit:hover  { background: var(--rbi-yellow-dark) !important; }
.of-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.of-btn-draft {
  background: none !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  border: var(--app-border-2) !important;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.of-btn-draft:hover { background: var(--rbi-warm-grey-50) !important; border-color: #C9C4BB !important; }

.of-btn-cancel {
  background: none !important;
  color: var(--text-muted) !important;
  font-size: 13.5px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border: none !important;
  cursor: pointer;
  transition: color var(--t-fast);
}
.of-btn-cancel:hover { color: var(--rbi-off-black) !important; }

/* ── Address autocomplete dropdown ──────────────────────────────────── */
.of-addr-wrap { position: relative; }
.of-addr-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--rbi-white);
  border: var(--app-border-2);
  border-radius: var(--app-radius-sm);
  box-shadow: var(--app-shadow-md);
  z-index: 999;
  max-height: 240px;
  overflow-y: auto;
  animation: of-fade-in 0.12s ease;
}
.of-addr-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: var(--app-border);
  transition: background var(--t-fast);
}
.of-addr-item:last-child { border-bottom: none; }
.of-addr-item:hover { background: var(--rbi-warm-grey-50); }
.of-addr-item-main  { font-size: 13px; font-weight: 600; color: var(--rbi-off-black); }
.of-addr-item-sub   { font-size: 12px; color: #9B9590; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-addr-searching  { padding: 10px 14px; font-size: 13px; color: #9B9590; display: flex; align-items: center; gap: 8px; }
.of-addr-empty      { padding: 10px 14px; font-size: 13px; color: #C9C4BB; font-style: italic; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .of-workspace { grid-template-columns: 1fr 1fr; }
  .of-summary   { grid-column: 1 / 3; position: relative; top: 0; max-height: none; }
  .of-form-area { grid-column: 1 / 3; }
}
@media (max-width: 680px) {
  .of-workspace  { grid-template-columns: 1fr; }
  .of-form-area  { grid-template-columns: 1fr; grid-column: 1; }
  .of-summary    { grid-column: 1; }
}

/* ── Animation ───────────────────────────────────────────────────────── */
@keyframes of-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Field icon+label row ────────────────────────────────────────────── */
.of-field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.of-field-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

/* ── Card redesign ───────────────────────────────────────────────────── */
.of-card {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  border: var(--app-border);
  box-shadow: 0 1px 4px rgba(43,45,51,0.05), 0 4px 16px rgba(43,45,51,0.06);
  overflow: hidden;
  transition: box-shadow var(--t-base), border-color var(--t-base);
  position: relative;
}
.of-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  transition: background var(--t-base);
}
.of-card:focus-within {
  box-shadow: 0 0 0 2px rgba(254,230,0,0.3), 0 4px 20px rgba(43,45,51,0.10);
  border-color: var(--rbi-yellow-2);
}
.of-card:focus-within::before { background: var(--rbi-yellow); }

/* Card accent colors — sve sekcije narudžbe koriste žutu (brand primary) */
.of-card-accent-yellow::before,
.of-card-accent-green::before,
.of-card-accent-purple::before,
.of-card-accent-coral::before  { background: var(--rbi-yellow); }

/* Aktivna (fokusirana) sekcija — vidljivi žuti okvir */
.of-card:focus-within {
  box-shadow: 0 0 0 3px rgba(254,230,0,0.45), 0 4px 20px rgba(43,45,51,0.12);
  border-color: var(--rbi-yellow-2);
}
.of-card:focus-within::before { background: var(--rbi-yellow); }

/* Section divider */
.of-field-divider {
  height: 1px;
  background: var(--rbi-warm-grey);
  margin: 14px 0;
}

/* Leaflet map container */
.of-leaflet-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--rbi-warm-grey-dark);
  margin-top: 10px;
  height: 200px;
  animation: of-fade-in 0.22s ease;
  box-shadow: 0 2px 10px rgba(43,45,51,0.10);
}
.of-leaflet-wrap.of-leaflet-active {
  border-color: var(--rbi-yellow-2);
  box-shadow: 0 0 0 3px rgba(254,230,0,0.2), 0 2px 10px rgba(43,45,51,0.10);
}

/* Character counter */
.of-char-count {
  font-size: 11px;
  color: #C9C4BB;
  text-align: right;
  margin-top: 3px;
}
.of-char-count.warn { color: var(--rbi-coral-deep); }

/* Input error state override */
.of-input-error .mud-input-outlined-border { border-color: var(--rbi-coral-deep) !important; }
.of-input-ok    .mud-input-outlined-border { border-color: var(--rbi-green-mid)   !important; }

/* ═══════════════════════════════════════════════════════════════════════
   DOKUMENT KARTICE — DocumentUploadSection redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* Naslov sekcije + progress */
.ds-header {
  background: var(--rbi-off-black);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-header-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--rbi-yellow);
  flex: 1;
}
.ds-progress-wrap { padding: 14px 18px 0; }
.ds-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #6B6560;
  margin-bottom: 6px;
}
.ds-progress-meta strong { color: var(--rbi-off-black); font-weight: 700; }
.ds-progress-bar {
  height: 6px;
  background: var(--rbi-warm-grey-dark);
  border-radius: 3px;
  overflow: hidden;
}
.ds-progress-fill {
  height: 100%;
  background: var(--rbi-yellow);
  border-radius: 3px;
  transition: width .3s ease;
}
.ds-progress-fill.full { background: var(--rbi-green-mid); }

/* Individalna dokument kartica */
.ds-doc-card {
  border: 1.5px solid var(--rbi-warm-grey-dark);
  border-radius: var(--app-radius-sm);
  background: var(--rbi-white);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.ds-doc-card:hover { border-color: var(--rbi-yellow-2); box-shadow: var(--app-shadow); }

.ds-doc-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--rbi-warm-grey-50);
  border-bottom: 1px solid var(--rbi-warm-grey-dark);
}
.ds-doc-icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--rbi-yellow);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--rbi-off-black);
}
.ds-doc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--rbi-off-black);
  flex: 1;
}
.ds-doc-mandatory { color: var(--rbi-coral-deep); font-size: 13px; font-weight: 700; margin-left: 2px; }

/* Status badge */
.ds-status {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.ds-status-none     { background: var(--rbi-warm-grey); color: #9B9590; }
.ds-status-ok       { background: var(--rbi-yellow-1);  color: #7A5C00; }
.ds-status-replaced { background: var(--rbi-off-black); color: var(--rbi-yellow); }
.ds-status-verified { background: var(--rbi-success-light); color: var(--rbi-green-deep); }
.ds-status-rejected { background: var(--rbi-error-light);   color: var(--rbi-coral-deep); }

/* Kartica body */
.ds-doc-card-body { padding: 14px; }

/* Upload zona (kad nema dokumenta) */
.ds-upload-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1.5px dashed var(--rbi-yellow-2);
  border-radius: 7px;
  background: #FFFDE6;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ds-upload-zone:hover { background: var(--rbi-yellow-1); border-color: var(--rbi-yellow-dark); }
.ds-upload-zone-busy  { background: var(--rbi-yellow-1); cursor: wait; }

/* Fajl info (kad postoji dokument) */
.ds-file-info {
  background: var(--rbi-warm-grey-50);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
}
.ds-file-info-key {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #9B9590;
}
.ds-file-info-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rbi-off-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dugmad ispod fajl info */
.ds-doc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast);
}
.ds-btn-outline {
  background: var(--rbi-white);
  border: 1.5px solid var(--rbi-warm-grey-dark);
  color: var(--rbi-off-black);
}
.ds-btn-outline:hover { background: var(--rbi-warm-grey-50); border-color: #C9C4BB; }
.ds-btn-replace {
  background: var(--rbi-yellow);
  border: 1.5px solid var(--rbi-yellow-dark);
  color: var(--rbi-off-black);
}
.ds-btn-replace:hover { background: var(--rbi-yellow-dark); }
.ds-btn-delete {
  background: var(--rbi-white);
  border: 1.5px solid var(--rbi-coral-mid);
  color: var(--rbi-coral-deep);
}
.ds-btn-delete:hover { background: var(--rbi-error-light); }

/* Historija verzija */
.ds-history-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #9B9590;
  cursor: pointer;
  padding: 6px 0 0;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ds-history-toggle:hover { color: var(--rbi-off-black); }
.ds-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-top: 4px;
  background: var(--rbi-warm-grey-50);
  border-radius: 6px;
  font-size: 12px;
  color: #6B6560;
}

/* Nota ispod upload zone */
.ds-doc-note {
  font-size: 11.5px;
  color: #8A6500;
  background: #FFF9E6;
  border: 1px solid #FFECB5;
  border-radius: 5px;
  padding: 5px 8px;
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

/* Ostala dokumentacija — multiple fajlovi */
.ds-multi-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ds-multi-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--rbi-warm-grey-50);
  border-radius: 6px;
}

/* Checklist u desnom panelu */
.ds-panel-checklist { margin-top: 12px; padding-top: 12px; border-top: var(--app-border); }
.ds-panel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 3px 0;
  color: #6B6560;
}
.ds-panel-item.done { color: var(--rbi-off-black); font-weight: 600; }
.ds-panel-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid #C9C4BB;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ds-panel-dot.done {
  background: var(--rbi-yellow);
  border-color: var(--rbi-yellow-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   19. APP DATA TABLE — zajednički stilovi za sve raw HTML tabele
   Eliminišu inline style= na svakom <th> i <td>.
   ═══════════════════════════════════════════════════════════════════════ */

.app-table-wrap {
  background: var(--rbi-white);
  border-radius: var(--app-radius);
  border: var(--app-border);
  box-shadow: var(--app-shadow);
  overflow: hidden;
  margin-bottom: 4px;
}

.app-table {
  width: 100%;
  border-collapse: collapse;
}

/* Header row */
.app-thead-row {
  background: var(--rbi-yellow-1);
  border-bottom: 2px solid var(--rbi-yellow-2);
}

/* Header cell — default (no sort) */
.app-th {
  padding: 13px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.65px;
  color: var(--rbi-off-black);
  white-space: nowrap;
}

/* Sortable header cell */
.app-th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.app-th.sortable:hover { background: var(--rbi-yellow-2); }

/* Right-aligned header (akcije) */
.app-th.right { text-align: right; }

/* Table row */
.app-tr {
  border-bottom: 1px solid var(--rbi-warm-grey-50);
  transition: background var(--t-fast);
}
.app-tr:last-child { border-bottom: none; }
.app-tr:hover { background: var(--rbi-warm-grey-50); }
.app-tr.clickable { cursor: pointer; }
.app-tr.clickable:hover { background: #FFFDF0; }

/* Data cell */
.app-td {
  padding: 13px 16px;
  font-size: 13px;
  color: var(--rbi-off-black);
  vertical-align: middle;
}
.app-td.right      { text-align: right; }
.app-td.center     { text-align: center; }
.app-td.nowrap     { white-space: nowrap; }
.app-td.muted      { color: var(--text-secondary); }
.app-td.secondary  { font-size: var(--font-sm); color: var(--text-muted); }
.app-td.bold       { font-weight: 700; }
.app-td.ellipsis   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.app-td.mono-code  { font-family: 'Consolas', 'Courier New', monospace; font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════════════════
   20. APP ACCESS DENIED — zajednički 403 blok
   ═══════════════════════════════════════════════════════════════════════ */
.app-access-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  text-align: center;
}
.app-access-denied-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--rbi-off-black);
}
.app-access-denied-desc {
  font-size: 14px;
  color: #6B6560;
  max-width: 380px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   21. APP FORM FIELD — zajednički wrapper za form polja
   ═══════════════════════════════════════════════════════════════════════ */
.app-form-field { margin-bottom: 16px; }
.app-form-field:last-child { margin-bottom: 0; }

.app-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--rbi-off-black);
  margin-bottom: 6px;
}
.app-field-required::after {
  content: ' *';
  color: var(--rbi-coral-deep);
  font-weight: 700;
}
.app-field-helper {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 4px;
}
.app-field-error {
  font-size: 12px;
  color: var(--rbi-coral-deep);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Search input — unified native input */
.app-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.app-search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 40px;
  border: 1px solid var(--rbi-warm-grey-dark);
  border-radius: var(--app-radius-sm);
  font-size: 14px;
  font-family: Arial, 'Segoe UI', sans-serif;
  color: var(--rbi-off-black);
  background: var(--rbi-white);
  outline: none;
  transition: border-color var(--t-fast);
}
.app-search-input:focus { border-color: var(--rbi-off-black); border-width: 1.5px; }
.app-search-input::placeholder { color: #9CA3AF; }
.app-search-icon {
  position: absolute;
  left: 12px;
  font-size: 18px;
  color: #aaa;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   22. DETAIL VIEW — narudžba detalj, read-only prikaz polja
   ═══════════════════════════════════════════════════════════════════════ */
.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rbi-warm-grey-50);
}
.detail-row:last-child { border-bottom: none; }
.detail-row.top { align-items: flex-start; }

.detail-label {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  /* fiksna širina kolone → vrijednosti se poravnavaju u istoj liniji bez obzira
     na dužinu naslova (npr. "Osoba za dostavu originala procjene") */
  width: 230px;
  min-width: 230px;
  flex-shrink: 0;
  padding-top: 1px;
  line-height: 1.45;
}
.detail-value {
  font-size: 14px;
  color: var(--rbi-off-black);
  flex: 1;
  word-break: break-word;
  line-height: 1.6;
}

/* Breadcrumb row above page-header */
.breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #9B9590;
}
.breadcrumb-link {
  cursor: pointer;
  transition: color var(--t-fast);
}
.breadcrumb-link:hover { color: var(--rbi-off-black); }

/* ═══════════════════════════════════════════════════════════════════════
   23. APP PAGINATION — styled numbered page buttons
   ═══════════════════════════════════════════════════════════════════════ */
.app-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 4px;
  font-size: var(--font-base);
  color: var(--text-secondary);
  flex-wrap: wrap;
  gap: 8px;
}
.app-pagination-info { font-size: var(--font-base); color: var(--text-secondary); }
.app-pagination-nav  { display: flex; align-items: center; gap: 4px; }
.app-page-btn {
  min-width: 32px; height: 32px;
  padding: 0 6px;
  border: 1px solid var(--rbi-warm-grey-dark);
  border-radius: 6px;
  background: var(--rbi-white);
  font-size: 13px;
  font-family: Arial, sans-serif;
  font-weight: 500;
  color: var(--rbi-off-black);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  display: inline-flex; align-items: center; justify-content: center;
}
.app-page-btn:hover:not(:disabled):not(.active) { background: var(--rbi-warm-grey-50); border-color: #C9C4BB; }
.app-page-btn.active {
  background: var(--rbi-yellow);
  border-color: var(--rbi-yellow-dark);
  font-weight: 700;
  color: var(--rbi-off-black);
}
.app-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.app-page-ellipsis { padding: 0 4px; color: #9B9590; font-size: 13px; line-height: 32px; }

/* ═══════════════════════════════════════════════════════════════════════
   24. KPI CARD — accent top border
   ═══════════════════════════════════════════════════════════════════════ */
.metric-card { border-top: 3px solid transparent; }

/* ═══════════════════════════════════════════════════════════════════════
   25. PAGE HEADER — kada nema .page-header-left (header bez sidebar-like left)
   ═══════════════════════════════════════════════════════════════════════ */
.page-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* Protokol column toggle button */
.col-toggle-wrap {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--rbi-warm-grey-50);
  border-bottom: 1px solid var(--rbi-warm-grey-dark);
  font-size: 12px;
  color: #6B6560;
}
.col-toggle-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--rbi-warm-grey-dark);
  background: var(--rbi-white);
  font-size: 12px; font-weight: 500;
  color: var(--rbi-off-black);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  user-select: none;
}
.col-toggle-chip.active  { background: var(--rbi-yellow-1); border-color: var(--rbi-yellow-2); font-weight: 700; }
.col-toggle-chip:hover:not(.active) { background: var(--rbi-warm-grey-50); }

/* Task card redesign */
.task-card {
  background: var(--rbi-white);
  border-radius: var(--app-radius-sm);
  border: var(--app-border);
  box-shadow: 0 1px 3px rgba(43,45,51,0.05);
  border-left: 3px solid var(--rbi-yellow);
  overflow: hidden;
  transition: box-shadow var(--t-base);
}
.task-card:hover { box-shadow: var(--app-shadow); }
.task-card.overdue { border-left-color: var(--rbi-coral-deep); }
.task-card-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--rbi-warm-grey-50);
}
.task-card-title { font-size: 14px; font-weight: 700; color: var(--rbi-off-black); }
.task-card-body  { padding: 8px 16px; font-size: 13px; color: #6B6560; line-height: 1.4; }
.task-card-meta  {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 16px 10px;
  font-size: 12px; color: #9B9590;
}
.task-card-foot  {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 10px 16px;
  background: var(--rbi-warm-grey-50);
  border-top: 1px solid var(--rbi-warm-grey-dark);
}
.task-overdue-badge {
  display: inline-flex; align-items: center;
  background: var(--rbi-error-light); color: var(--rbi-coral-deep);
  border: 1px solid var(--rbi-coral-hi);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}

/* ── Ulazni ekran: odabir tipa narudžbe FL/PL (Slika 7.1) ───────────────── */
.chooser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .chooser-grid { grid-template-columns: 1fr; }
}
.chooser-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 28px;
  background: var(--rbi-yellow);
  color: var(--rbi-off-black);
  border: 2px solid var(--rbi-yellow-2);
  border-radius: var(--app-radius);
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 2px 6px rgba(43, 45, 51, 0.08);
}
.chooser-card:hover {
  transform: translateY(-3px);
  background: var(--rbi-yellow-dark);
  box-shadow: 0 8px 20px rgba(212, 191, 0, 0.35);
}
.chooser-card:focus-visible {
  outline: 3px solid var(--rbi-off-black);
  outline-offset: 2px;
}
.chooser-icon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 45, 51, 0.08);
  border-radius: 50%;
}
.chooser-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}
.chooser-flow {
  font-size: 12px;
  font-weight: 600;
  color: #5a4f00;
  line-height: 1.5;
  max-width: 280px;
}
.chooser-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}