/* ── Stanari palette ──────────────────────────────────────────────────────
   The vendor theme ships the Minimal emerald (#00a76f) that stockbotix uses.
   Stanari gets its own identity: a denim indigo that reads administrative
   rather than financial, with a warm ochre for accents.

   Only the primary ramp and a few surface tones are overridden — the semantic
   colours (success / warning / danger / info) stay put so a paid invoice is
   still green and an overdue one still red.

   Both colour modes are defined. `data-bs-theme` is set by
   assets/js/vendors/color-modes.js from the toggle in the top bar; "auto"
   follows the OS.
   ───────────────────────────────────────────────────────────────────────── */

:root,
[data-bs-theme=light] {
  --ds-primary:              #3457a6;
  --ds-primary-rgb:          52, 87, 166;
  --ds-primary-lighter:      #e3e9f7;
  --ds-primary-light:        #8ea8dd;
  --ds-primary-dark:         #27407b;
  --ds-primary-darker:       #182a52;
  --ds-primary-text-emphasis:#27407b;
  --ds-primary-bg-subtle:    #e3e9f7;
  --ds-primary-border-subtle:#8ea8dd;

  --ds-link-color:           #3457a6;
  --ds-link-color-rgb:       52, 87, 166;
  --ds-link-hover-color:     #27407b;
  --ds-link-hover-color-rgb: 39, 64, 123;

  --ds-focus-ring-color:     rgba(52, 87, 166, .25);
  --ds-highlight-bg:         #fdf0d5;

  /* Warm ochre — used sparingly for emphasis that is not a status. */
  --st-accent:               #b5730f;
  --st-accent-subtle:        #fdf0d5;
}

[data-bs-theme=dark] {
  /* Lifted for contrast: #3457a6 on a near-black ground is too dim for links. */
  --ds-primary:              #7d9ee0;
  --ds-primary-rgb:          125, 158, 224;
  --ds-primary-lighter:      #1b2540;
  --ds-primary-light:        #a9c0ec;
  --ds-primary-dark:         #4f74bd;
  --ds-primary-darker:       #2b4070;
  --ds-primary-text-emphasis:#a9c0ec;
  --ds-primary-bg-subtle:    #16213a;
  --ds-primary-border-subtle:#33518c;

  --ds-link-color:           #9bb6e8;
  --ds-link-color-rgb:       155, 182, 232;
  --ds-link-hover-color:     #bed0f2;
  --ds-link-hover-color-rgb: 190, 208, 242;

  --ds-focus-ring-color:     rgba(125, 158, 224, .3);
  --ds-highlight-bg:         #3a2f14;

  --st-accent:               #e0a94a;
  --st-accent-subtle:        #3a2f14;
}

/* The vendor theme hard-codes the emerald in a few gradients and buttons. */
.btn-primary {
  --ds-btn-bg: var(--ds-primary);
  --ds-btn-border-color: var(--ds-primary);
  --ds-btn-hover-bg: var(--ds-primary-dark);
  --ds-btn-hover-border-color: var(--ds-primary-dark);
  --ds-btn-active-bg: var(--ds-primary-darker);
  box-shadow: 0 8px 16px 0 rgba(var(--ds-primary-rgb), .24);
}
.text-primary { color: var(--ds-primary) !important; }
.bg-primary   { background-color: var(--ds-primary) !important; }

/* Sidebar: tint the active row with the new primary. */
#miniSidebar .nav-link.active {
  background: rgba(var(--ds-primary-rgb), .10);
  color: var(--ds-primary);
}

/* Tabular figures everywhere money appears — columns must line up. */
.mono, .table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

/* Theme switcher in the top bar. */
.theme-toggle .dropdown-item.active {
  background: rgba(var(--ds-primary-rgb), .12);
  color: var(--ds-primary);
}

/* Boti custom styles — mobile card views */

@media (max-width: 767.98px) {
  /* Position cards */
  .pos-card {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .pos-card:last-child {
    border-bottom: none;
  }
  .pos-card .pos-price {
    font-size: 1.05rem;
    font-weight: 600;
  }

  /* Alert rule cards */
  .alert-card {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .alert-card:last-child {
    border-bottom: none;
  }

  /* Notification list items */
  .notif-mobile-item {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .notif-mobile-item:last-child {
    border-bottom: none;
  }

  /* Table cells: prevent long symbols/URLs from breaking layout */
  .table td {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Run buttons: 44px minimum tap target */
  .btn-run-framework,
  #btn-run-deep,
  #btn-run-research {
    min-height: 44px;
  }
}

/* xs-only: below Bootstrap sm (576px) */
@media (max-width: 575.98px) {
  /* Toast: add margin so it doesn't hug the screen corner */
  .toast-container.position-fixed.bottom-0.end-0 {
    bottom: .75rem !important;
    right: .75rem !important;
  }

  /* Notification dropdown: cap to viewport width on tiny screens */
  .notif-dropdown {
    min-width: unset !important;
    width: calc(100vw - 1.5rem) !important;
    max-width: 360px;
  }
}

/* ── Dual-tone shell: navy sidebar against a light workspace ────────────────
   The theme drives the sidebar, the brand block and the nav list from one
   variable (--ds-navbar-bg), so setting it here recolours all three. The
   selectors match the theme's own `html.expanded` specificity, which is why
   they are spelled out rather than shortened — otherwise the theme wins and
   nothing happens. The navy is Stanari's own --ds-primary-darker, not a
   neutral charcoal: the sidebar should read as the brand. */
html.expanded #miniSidebar,
html.collapsed #miniSidebar {
  --ds-navbar-bg: #182a52;
  border-right: 1px solid rgba(0, 0, 0, .22) !important;
}

html.expanded #miniSidebar .site-logo-text,
html.collapsed #miniSidebar .site-logo-text { color: #fff; }

html.expanded #miniSidebar .nav-link,
html.collapsed #miniSidebar .nav-link {
  color: rgba(255, 255, 255, .64);
  transition: color .15s, background-color .15s;
}
html.expanded #miniSidebar .nav-link:hover,
html.collapsed #miniSidebar .nav-link:hover {
  color: rgba(255, 255, 255, .92);
  background-color: rgba(255, 255, 255, .07) !important;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .18);
}
html.expanded #miniSidebar .nav-link.active,
html.collapsed #miniSidebar .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 3px 0 0 var(--ds-primary-light, #8ea8dd);
}

html.expanded #miniSidebar .nav-heading,
html.collapsed #miniSidebar .nav-heading {
  color: rgba(255, 255, 255, .38) !important;
}
html.expanded #miniSidebar .nav-line,
html.collapsed #miniSidebar .nav-line {
  border-color: rgba(255, 255, 255, .12) !important;
}

/* The mobile drawer is the same sidebar; it has to match or the app looks
   like two different products depending on window width. */
#offcanvasSidebar {
  --bs-offcanvas-bg: #182a52;
  color: rgba(255, 255, 255, .64);
}
#offcanvasSidebar .offcanvas-title,
#offcanvasSidebar .offcanvas-title .ti { color: #fff; }
#offcanvasSidebar .nav-link { color: rgba(255, 255, 255, .64); }
#offcanvasSidebar .nav-link.active,
#offcanvasSidebar .nav-link:hover { color: #fff; }
#offcanvasSidebar .nav-heading { color: rgba(255, 255, 255, .38) !important; }

/* ── Access levels, made visible ────────────────────────────────────────────
   Three tiers, and the sidebar should say which is which without anyone
   reading the labels twice: building work is plain, configuration that decides
   what everyone else sees is marked, and platform administration is marked
   more strongly again. A left rule and a tinted label do that quietly — a
   coloured background per group would fight the navy and read as decoration
   rather than hierarchy. */
#miniSidebar .nav-heading,
#offcanvasSidebar .nav-heading {
  border-left: 2px solid transparent;
  padding-left: 6px;
}
#miniSidebar .nav-heading.nivo-uprava,
#offcanvasSidebar .nav-heading.nivo-uprava {
  border-left-color: var(--ds-warning, #ffab00);
  color: rgba(255, 199, 102, .78) !important;
}
#miniSidebar .nav-heading.nivo-admin,
#offcanvasSidebar .nav-heading.nivo-admin {
  border-left-color: var(--ds-danger, #ff5630);
  color: rgba(255, 138, 110, .82) !important;
}

/* ── Form fields: typed text is text, not a hint ────────────────────────────
   The theme paints .form-control and its ::placeholder the SAME --ds-gray-500,
   so a value someone had actually typed was indistinguishable from a prompt —
   every filled form read as an empty one. Entered text takes the body colour;
   the placeholder keeps the grey, which is the only reason the grey exists. */
.form-control,
.form-select,
textarea.form-control,
.form-control:focus,
.form-select:focus {
  color: var(--ds-gray-800, #1c252e);
}

.form-control::placeholder,
.form-control::-moz-placeholder,
textarea.form-control::placeholder {
  color: var(--ds-gray-500, #919eab);
  opacity: 1;
}

/* A disabled field is still a value someone needs to read — the theme greys the
   background, which is enough on its own. */
.form-control:disabled,
.form-select:disabled {
  color: var(--ds-gray-800, #1c252e);
  opacity: .75;
}

/* ── Nesting units by drag (zajednice/jedinice) ──────────────────────────────
   A drop is a proposal: the row highlights to say what WOULD happen, and the
   dialog is what decides. Green marks „bill these together”, amber marks the
   type heading, which means „bill this one on its own again”. */
.jedinica-red[draggable="true"] { cursor: grab; }
.jedinica-red.vuce-se { opacity: .45; }
.jedinica-red.meta-veza > td {
  box-shadow: inset 0 2px 0 var(--bs-success), inset 0 -2px 0 var(--bs-success);
  background: var(--bs-success-bg-subtle);
}
.grupa-zaglavlje.meta-odvoji > th {
  box-shadow: inset 0 2px 0 var(--bs-warning), inset 0 -2px 0 var(--bs-warning);
  background: var(--bs-warning-bg-subtle);
}